From 8ceb1978ebaf718dc18bc642b34e7951c0184095 Mon Sep 17 00:00:00 2001 From: Gaus Surahman <gausarts@gmail.com> Date: Tue, 12 Sep 2023 11:49:54 +0700 Subject: [PATCH] Minor fixes. --- css/components/blazy.loading.css | 10 ++++------ src/BlazyDefault.php | 2 +- src/Media/Placeholder.php | 4 ++-- src/Theme/Lightbox.php | 1 + src/Utility/CheckItem.php | 2 +- 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/css/components/blazy.loading.css b/css/components/blazy.loading.css index 486de3eb..a50a6d0f 100644 --- a/css/components/blazy.loading.css +++ b/css/components/blazy.loading.css @@ -1,5 +1,6 @@ /** * @file + * Provides loading indicator animation, not used when using blur. */ /* Credit: https://github.com/tobiasahlin/SpinKit */ @@ -41,14 +42,10 @@ /* Hide for non-js users. */ .is-b-loading::before { + z-index: -1; display: none; } -/* Core drupal.init.js provides this .js class for free as long as loaded. */ -.js .is-b-loading:not(.is-b-loaded)::before { - display: block; -} - /* Prevents costly double animations when Blur is enabled. CSSLint vs. Stylelint complain conflicting problems at different CSS specs. @see https://caniuse.com/css-not-sel-list @@ -57,7 +54,6 @@ CSSLint vs. Stylelint complain conflicting problems at different CSS specs. .is-b-loading:not(.is-b-loaded)::before, .is-b-loading:not([data-animation])::before { position: absolute; - z-index: 22; top: 50%; left: 50%; width: 30px; @@ -71,6 +67,8 @@ CSSLint vs. Stylelint complain conflicting problems at different CSS specs. } .is-b-loading.is-b-visible:not(.is-b-loaded)::before { + z-index: 22; + display: block; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } diff --git a/src/BlazyDefault.php b/src/BlazyDefault.php index f65a7345..18e1e949 100644 --- a/src/BlazyDefault.php +++ b/src/BlazyDefault.php @@ -403,7 +403,7 @@ class BlazyDefault { */ public static function dyComponents(): array { $deps = ['blazy/compat']; - $common = ['minified' => TRUE, 'weight' => -1]; + $common = ['minified' => TRUE, 'weight' => -1.8]; $libs = []; foreach (['instagram', 'pinterest'] as $key) { diff --git a/src/Media/Placeholder.php b/src/Media/Placeholder.php index 127b74bd..447a5d91 100644 --- a/src/Media/Placeholder.php +++ b/src/Media/Placeholder.php @@ -157,7 +157,7 @@ class Placeholder { // Provides image effect if so configured unless being sandboxed. // Slick/ Splide lazy loads won't work, needs Blazy to make animation. - if ($blazies->is('blazy') && $fx = $blazies->get('fx')) { + if ($fx = $blazies->get('fx')) { $attributes['class'][] = 'media--fx'; $attributes[Attributes::data($blazies, 'animation')] = $fx; } @@ -195,7 +195,7 @@ class Placeholder { */ private static function dataImage(array &$settings, $uri, $tn_uri, $tn_url, $style): void { $blazies = $settings['blazies']; - if (!$blazies->is('blazy') || !$blazies->use('blur')) { + if (!$blazies->use('blur')) { return; } diff --git a/src/Theme/Lightbox.php b/src/Theme/Lightbox.php index c209e9fc..8243edfa 100644 --- a/src/Theme/Lightbox.php +++ b/src/Theme/Lightbox.php @@ -338,6 +338,7 @@ class Lightbox { if ($has_dim && !empty($json['paddingHack'])) { $pad = round((($json['height'] / $json['width']) * 100), 2); $style .= 'width:' . $json['width'] . 'px; padding-bottom: ' . $pad . '%;'; + $hattrs['data-b-ratio'] = $pad; } // Currently only audio with background cover. diff --git a/src/Utility/CheckItem.php b/src/Utility/CheckItem.php index 2455adab..654fb8e4 100644 --- a/src/Utility/CheckItem.php +++ b/src/Utility/CheckItem.php @@ -194,7 +194,7 @@ class CheckItem { // @todo better logic to support loader as required, must decouple loader. // @todo $lazy = $blazies->get('image.loading') == 'lazy'; - // @todo $lazy = $blazies->is('blazy') && ($blazies->get('libs.compat') || $lazy); + // @todo $lazy = $blazies->get('libs.compat') || $lazy; // Redefines some since this can be fed by anyone, including custom works. $blazies->set('is.fluid', $is_fluid) ->set('is.blur', $is_blur) -- GitLab