diff --git a/js/slick.load.js b/js/slick.load.js index ec84da6..7c09f47 100644 --- a/js/slick.load.js +++ b/js/slick.load.js @@ -123,12 +123,6 @@ if (o.lazyLoad === 'blazy' && typeof Drupal.blazy !== 'undefined') { var $src = $('.media--loading .b-lazy', t); - Drupal.blazy.init.options.success = function () { - var $loaded = $('.b-loaded', t); - $loaded.closest('.slide').removeClass('slide--loading'); - Drupal.blazy.clearing($loaded); - }; - if ($src.length) { t.on('beforeChange.slick', function () { var $loaded = $('.b-loaded', t); @@ -138,6 +132,12 @@ // Drupal.blazy.clearing($loaded); }); } + + Drupal.blazy.init.options.success = function () { + var $loaded = $('.b-loaded', t); + $loaded.closest('.slide').removeClass('slide--loading'); + Drupal.blazy.clearing($loaded); + }; } t.trigger('afterSlick', [me, slick, slick.currentSlide]); diff --git a/js/slick.load.min.js b/js/slick.load.min.js index 0e352c1..a3c8a0a 100644 --- a/js/slick.load.min.js +++ b/js/slick.load.min.js @@ -1 +1 @@ -!function(i,s,e){"use strict";s.behaviors.slick={attach:function(s){var a=this;i(".slick:not(.unslick)",s).once("slick").each(function(){var s,t=i("> .slick__slider",this),l=i("> .slick__arrow",this),n=i.extend({},e.slick,t.data("slick"));if("array"===i.type(n.responsive)&&n.responsive.length)for(s in n.responsive)n.responsive.hasOwnProperty(s)&&"unslick"!==n.responsive[s].settings&&(n.responsive[s].settings=i.extend({},e.slick,a.globals(t,l,n),n.responsive[s].settings));t.data("slick",n),n=t.data("slick"),a.beforeSlick(t,l,n),t.slick(a.globals(t,l,n)),a.afterSlick(t,n)}),i(".unslick .media--background",s).once("media-background",function(){a.setBackground(i(this).find("img"))})},beforeSlick:function(s,e,a){var t=this,l=i(".slide--0 .media--ratio",s);t.randomize(s,a),s.on("setPosition.slick",function(i,l){t.setPosition(s,e,a,l)}),l.length&&l.is(":hidden")&&l.removeClass("media--ratio").addClass("js-media--ratio"),i(".media--loading",s).closest(".slide").addClass("slide--loading")},afterSlick:function(e,a){var t=this,l=e.slick("getSlick"),n=i(".js-media--ratio",e);if(e.parent().on("click.slick.load",".slick-down",function(s){s.preventDefault();var e=i(this);i("html, body").stop().animate({scrollTop:i(e.data("target")).offset().top-(e.data("offset")||0)},800,a.easing||"swing")}),a.mouseWheel&&e.on("mousewheel.slick.load",function(i,s){return i.preventDefault(),0>s?e.slick("slickNext"):e.slick("slickPrev")}),n.length&&(e.trigger("resize"),n.addClass("media--ratio").removeClass("js-media--ratio")),e.on("lazyLoaded lazyLoadError",function(i,s,e){t.setBackground(e)}),"blazy"===a.lazyLoad&&"undefined"!=typeof s.blazy){var o=i(".media--loading .b-lazy",e);s.blazy.init.options.success=function(){var a=i(".b-loaded",e);a.closest(".slide").removeClass("slide--loading"),s.blazy.clearing(a)},o.length&&e.on("beforeChange.slick",function(){var a=i(".b-loaded",e);s.blazy.init.load(o),a.closest(".slide").removeClass("slide--loading")})}e.trigger("afterSlick",[t,l,l.currentSlide])},setBackground:function(s){var e=i(s),a=e.closest(".media--background");e.closest(".media").removeClass("media--loading").addClass("media--loaded"),e.closest(".slide--loading").removeClass("slide--loading"),a.length&&(a.css("background-image","url("+e.attr("src")+")"),a.find("> img").remove(),a.removeAttr("data-lazy"))},randomize:function(i,s){s.randomize&&!i.hasClass("slick-initiliazed")&&i.children().sort(function(){return.5-Math.random()}).each(function(){i.append(this)})},setPosition:function(i,s,e,a){return i.attr("id")===a.$slider.attr("id")?(e.centerPadding&&"0"!==e.centerPadding||a.$list.css("padding",""),a.slideCount<=e.slidesToShow||e.arrows===!1?s.addClass("visually-hidden"):s.removeClass("visually-hidden")):void 0},globals:function(e,a,t){return{slide:t.slide,lazyLoad:t.lazyLoad,dotsClass:t.dotsClass,rtl:t.rtl,appendDots:".slick__arrow"===t.appendDots?a:t.appendDots||i(e),prevArrow:i(".slick-prev",a),nextArrow:i(".slick-next",a),appendArrows:a,customPaging:function(i,e){var a=i.$slides.eq(e).find("[data-thumb]")||null,l=s.t(a.attr("alt"))||"",n=''+l+'',o=a.length&&t.dotsClass.indexOf("thumbnail")>0?'
'+n+"
":"";return i.defaults.customPaging(i,e).add(o)}}}}}(jQuery,Drupal,drupalSettings); +!function(i,s,e){"use strict";s.behaviors.slick={attach:function(s){var a=this;i(".slick:not(.unslick)",s).once("slick").each(function(){var s,t=i("> .slick__slider",this),l=i("> .slick__arrow",this),n=i.extend({},e.slick,t.data("slick"));if("array"===i.type(n.responsive)&&n.responsive.length)for(s in n.responsive)n.responsive.hasOwnProperty(s)&&"unslick"!==n.responsive[s].settings&&(n.responsive[s].settings=i.extend({},e.slick,a.globals(t,l,n),n.responsive[s].settings));t.data("slick",n),n=t.data("slick"),a.beforeSlick(t,l,n),t.slick(a.globals(t,l,n)),a.afterSlick(t,n)}),i(".unslick .media--background",s).once("media-background",function(){a.setBackground(i(this).find("img"))})},beforeSlick:function(s,e,a){var t=this,l=i(".slide--0 .media--ratio",s);t.randomize(s,a),s.on("setPosition.slick",function(i,l){t.setPosition(s,e,a,l)}),l.length&&l.is(":hidden")&&l.removeClass("media--ratio").addClass("js-media--ratio"),i(".media--loading",s).closest(".slide").addClass("slide--loading")},afterSlick:function(e,a){var t=this,l=e.slick("getSlick"),n=i(".js-media--ratio",e);if(e.parent().on("click.slick.load",".slick-down",function(s){s.preventDefault();var e=i(this);i("html, body").stop().animate({scrollTop:i(e.data("target")).offset().top-(e.data("offset")||0)},800,a.easing||"swing")}),a.mouseWheel&&e.on("mousewheel.slick.load",function(i,s){return i.preventDefault(),0>s?e.slick("slickNext"):e.slick("slickPrev")}),n.length&&(e.trigger("resize"),n.addClass("media--ratio").removeClass("js-media--ratio")),e.on("lazyLoaded lazyLoadError",function(i,s,e){t.setBackground(e)}),"blazy"===a.lazyLoad&&"undefined"!=typeof s.blazy){var o=i(".media--loading .b-lazy",e);o.length&&e.on("beforeChange.slick",function(){var a=i(".b-loaded",e);s.blazy.init.load(o),a.closest(".slide").removeClass("slide--loading")}),s.blazy.init.options.success=function(){var a=i(".b-loaded",e);a.closest(".slide").removeClass("slide--loading"),s.blazy.clearing(a)}}e.trigger("afterSlick",[t,l,l.currentSlide])},setBackground:function(s){var e=i(s),a=e.closest(".media--background");e.closest(".media").removeClass("media--loading").addClass("media--loaded"),e.closest(".slide--loading").removeClass("slide--loading"),a.length&&(a.css("background-image","url("+e.attr("src")+")"),a.find("> img").remove(),a.removeAttr("data-lazy"))},randomize:function(i,s){s.randomize&&!i.hasClass("slick-initiliazed")&&i.children().sort(function(){return.5-Math.random()}).each(function(){i.append(this)})},setPosition:function(i,s,e,a){return i.attr("id")===a.$slider.attr("id")?(e.centerPadding&&"0"!==e.centerPadding||a.$list.css("padding",""),a.slideCount<=e.slidesToShow||e.arrows===!1?s.addClass("visually-hidden"):s.removeClass("visually-hidden")):void 0},globals:function(e,a,t){return{slide:t.slide,lazyLoad:t.lazyLoad,dotsClass:t.dotsClass,rtl:t.rtl,appendDots:".slick__arrow"===t.appendDots?a:t.appendDots||i(e),prevArrow:i(".slick-prev",a),nextArrow:i(".slick-next",a),appendArrows:a,customPaging:function(i,e){var a=i.$slides.eq(e).find("[data-thumb]")||null,l=s.t(a.attr("alt"))||"",n=''+l+'',o=a.length&&t.dotsClass.indexOf("thumbnail")>0?'
'+n+"
":"";return i.defaults.customPaging(i,e).add(o)}}}}}(jQuery,Drupal,drupalSettings); diff --git a/slick_ui/src/Controller/SlickListBuilder.php b/slick_ui/src/Controller/SlickListBuilder.php index 9183f61..9e71042 100644 --- a/slick_ui/src/Controller/SlickListBuilder.php +++ b/slick_ui/src/Controller/SlickListBuilder.php @@ -70,6 +70,7 @@ 'label' => t('Optionset'), 'breakpoints' => t('Breakpoints'), 'group' => t('Group'), + 'lazyload' => t('Lazyload'), 'skin' => t('Skin'), ); @@ -85,7 +86,8 @@ $row['label'] = Html::escape($this->getLabel($entity)); $row['breakpoints']['#markup'] = $entity->getBreakpoints(); - $row['group']['#markup'] = $entity->getGroup()?: t('all'); + $row['group']['#markup'] = $entity->getGroup() ?: t('All'); + $row['lazyload']['#markup'] = $entity->getSetting('lazyLoad') ?: t('None'); $row['skin']['#markup'] = Html::escape($skin); // Has to do this separately as concat with HTML tag is no joy. diff --git a/src/SlickFormatter.php b/src/SlickFormatter.php index ffe3481..75868ad 100644 --- a/src/SlickFormatter.php +++ b/src/SlickFormatter.php @@ -32,14 +32,15 @@ $build['optionset'] = Slick::load($optionset_name); $settings['nav'] = !empty($settings['optionset_thumbnail']) && isset($items[1]); - // Do not bother for SlickTextFormatter or when vanilla is on. + // Do not bother for SlickTextFormatter, or when vanilla is on. // @todo simplify this. if (empty($settings['vanilla'])) { - $noresimage = empty($settings['responsive_image_style']); - $lazy = $noresimage ? $build['optionset']->getSetting('lazyLoad') : ''; - $blazy = $lazy == 'blazy' || $settings['theme_hook_image'] == 'blazy'; - $settings['lazy'] = !$blazy && $items->count() == 1 ? '' : $lazy; - $settings['blazy'] = $blazy || !empty($settings['blazy']); + $resimage = !empty($settings['responsive_image_style']); + $lazy = $build['optionset']->getSetting('lazyLoad'); + $lazy = ($this->configLoad('responsive_image') && $resimage) ? 'blazy' : $lazy; + $blazy = $lazy == 'blazy' || !empty($settings['blazy']); + $settings['lazy'] = (!$blazy && $items->count() == 1) ? '' : $lazy; + $settings['blazy'] = $blazy; $settings['lazy_class'] = $settings['lazy_attribute'] = 'lazy'; if ($settings['blazy']) { diff --git a/src/SlickManager.php b/src/SlickManager.php index 6b7d536..5459322 100644 --- a/src/SlickManager.php +++ b/src/SlickManager.php @@ -89,6 +89,10 @@ $load['library'][] = 'slick/slick.easing'; } + if (!empty($attach['lazy'])) { + $load['library'][] = 'blazy/loading'; + } + $load['library'][] = 'slick/slick.load'; $components = ['colorbox', 'mousewheel']; @@ -96,10 +100,6 @@ if (!empty($attach[$component])) { $load['library'][] = 'slick/slick.' . $component; } - } - - if (!empty($attach['lazy'])) { - $load['library'][] = 'blazy/loading'; } $this->attachSkin($load, $attach); diff --git a/templates/slick.theme.inc b/templates/slick.theme.inc index 7864cb6..0e48a0b 100644 --- a/templates/slick.theme.inc +++ b/templates/slick.theme.inc @@ -47,7 +47,7 @@ $settings['lazy'] = isset($settings['lazy']) ? $settings['lazy'] : $js['lazyLoad']; // Blazy can still lazyload an unslick. - if ($display != 'thumbnail' && $settings['lazy'] == 'blazy') { + if ($display != 'thumbnail' && ($settings['lazy'] == 'blazy' || !empty($settings['blazy']))) { $js['lazyLoad'] = 'blazy'; $blazy = empty($settings['blazy_data']) ? [] : $settings['blazy_data']; $blazy['ratio'] = $settings['ratio'];