j1-template 2023.1.0 → 2023.2.0

data/assets/themes/j1/adapter/js/slick.js

@@ -21,6 +21,8 @@ regenerate:                             true
  #  {{ liquid_var | debug }}
  # cookie_options: {{ cookie_options | debug }}
  # -----------------------------------------------------------------------------
+ # See: https://github.com/kenwheeler/slick
+ # -----------------------------------------------------------------------------
 {% endcomment %}
 
 {% comment %} Liquid var initialization
@@ -28,15 +30,17 @@ regenerate:                             true
 
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign environment         = site.environment %}
-{% assign blocks              = site.data.blocks %}
-{% assign modules             = site.data.modules %}
-{% assign template_config     = site.data.j1_config %}
+{% assign environment             = site.environment %}
+{% assign blocks                  = site.data.blocks %}
+{% assign modules                 = site.data.modules %}
+{% assign template_config         = site.data.j1_config %}
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign slick_defaults      = modules.defaults.slick.defaults %}
-{% assign slick_settings      = modules.slick.settings %}
+{% assign slick_defaults          = modules.defaults.slick.defaults %}
+{% assign slick_settings          = modules.slick.settings %}
+{% assign slick_lightbox_defaults = modules.defaults.slick.defaults.lightbox %}
+{% assign slick_lightbox_settings = modules.slick.settings.lightbox %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -78,15 +82,18 @@ regenerate:                             true
 j1.adapter.slick = (function (j1, window) {
   var environment               = '{{environment}}';
   var responsiveSettings        = [];
-  var sliderResponsiveSettings  = [];
+  var carouselResponsiveSettings  = [];
   var _this;
   var logger;
   var logText;
   var slickDefaults;
   var slickSettings;
+  var slickLightboxDefaults;
+  var slickLightboxSettings;
+  var slickLightboxOptions;
   var slickOptions;
-  var sliderOptions;
-  var sliderSettings;
+  var carouselOptions;
+  var carouselSettings;
 
   // ---------------------------------------------------------------------------
   // Helper functions
@@ -101,12 +108,14 @@ j1.adapter.slick = (function (j1, window) {
     // Initializer
     // -------------------------------------------------------------------------
     init: function (options) {
-      var xhrLoadState                = 'pending';                              // (initial) load state for the HTML portion of the slider
-      var load_dependencies           = {};                                     // dynamic variable
-      var sliderResponsiveSettingsOBJ = {};                                     // initial object for responsive settings
+      var xhrLoadState                  = 'pending';                            // (initial) load state for the HTML portion of the carousel
+      var load_dependencies             = {};                                   // dynamic variable
+      var carouselResponsiveSettingsOBJ = {};                                   // initial object for responsive settings
+      var reload_on_resize              = false;
       var dependency;
-      var sliderResponsiveSettingsYAML;
-      var sliderResponsiveSettingsSTRING;
+      var carouselResponsiveSettingsYAML;
+      var carouselResponsiveSettingsSTRING;
+      var slick_lightbox_enabled;
 
       // -----------------------------------------------------------------------
       // Default module settings
@@ -117,23 +126,33 @@ j1.adapter.slick = (function (j1, window) {
       }, options);
 
       // Load  module DEFAULTS|CONFIG
-      slickDefaults = $.extend({}, {{slick_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
-      slickSettings = $.extend({}, {{slick_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
-      slickOptions  = $.extend(true, {}, slickDefaults, slickSettings);
+      slickDefaults         = $.extend({}, {{slick_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
+      slickSettings         = $.extend({}, {{slick_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
+      slickLightboxDefaults = $.extend({}, {{slick_lightbox_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
+      slickLightboxSettings = $.extend({}, {{slick_lightbox_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
+      slickLightboxOptions  = $.extend(true, {}, slickLightboxDefaults, slickLightboxSettings);
+      slickOptions          = $.extend(true, {}, slickDefaults, slickSettings);
 
       // -----------------------------------------------------------------------
       // Global variable settings
       // -----------------------------------------------------------------------
-      _this         = j1.adapter.slick;
-      logger        = log4javascript.getLogger('j1.adapter.slick');
+      _this                 = j1.adapter.slick;
+      logger                = log4javascript.getLogger('j1.adapter.slick');
 
       _this.setState('started');
       logger.debug('\n' + 'state: ' + _this.getState());
       logger.info('\n' + 'module is being initialized');
 
-      // load HTML portion for all sliders
-      console.debug('loading HTML portion for all sliders configured');
-      _this.loadSliderHTML(slickOptions, slickOptions.sliders);
+      // load HTML portion for all carousels
+      console.debug('loading HTML portion for all carousels configured');
+      _this.loadCarouselHTML(slickOptions, slickOptions.carousels);
+
+      // Re-Init all carousels in a page if window is resized (if enabled)
+      if (reload_on_resize) {
+        window.onresize = function() {
+          location.reload();
+        }
+      }
 
       // -----------------------------------------------------------------------
       // initializer
@@ -144,175 +163,257 @@ j1.adapter.slick = (function (j1, window) {
 
         if ( j1.getState() === 'finished' && pageVisible ) {
 
-          {% for slider in slick_settings.sliders %} {% if slider.enabled %}
-          logger.info('\n' + 'slider is being initialized on id: ' + '{{slider.id}}');
+          {% for carousel in slick_settings.carousels %} {% if carousel.enabled %}
+          logger.info('\n' + 'carousel is being initialized on id: ' + '{{carousel.id}}');
 
-          {% if slider.options.responsive %}
-          logger.info('\n' + 'collect responsive settings for slider on id: ' + '{{slider.id}}');
-          // collect breakpoint settings from slider config
-          responsiveSettings = $.extend({}, {{slider.responsive | replace: 'nil', 'null' | replace: '=>', ':' }});
-          // generate slider breakpoint settings as YAML data structure
-          sliderResponsiveSettings  = '[' ;
+          {% if carousel.options.responsive %}
+          logger.info('\n' + 'collect responsive settings for carousel on id: ' + '{{carousel.id}}');
+          // collect breakpoint settings from carousel config
+          responsiveSettings = $.extend({}, {{carousel.responsive | replace: 'nil', 'null' | replace: '=>', ':' }});
+          // generate carousel breakpoint settings as YAML data structure
+          carouselResponsiveSettings  = '[' ;
           for (const [obj_key, obj_value] of Object.entries(responsiveSettings)) {
             var length = Object.keys(obj_value.settings).length;
             var count = 0;
             for (const [key, value] of Object.entries(obj_value.settings)) {
               count++;
               if (key == 'breakOn' && count == 1) {
-                sliderResponsiveSettings += '  {' ;
-                sliderResponsiveSettings += '    breakpoint: ' + value + ',' ;
-                sliderResponsiveSettings += '    settings: {' ;
+                carouselResponsiveSettings += '  {' ;
+                carouselResponsiveSettings += '    breakpoint: ' + value + ',' ;
+                carouselResponsiveSettings += '    settings: {' ;
               } else {
-                sliderResponsiveSettings += '      ' + key + ': ' + value + ',' ;
+                carouselResponsiveSettings += '      ' + key + ': ' + value + ',' ;
               }
               // close current breakpoint element
               if (count == length) {
-                sliderResponsiveSettings += '    }' ;
-                sliderResponsiveSettings += '  },' ;
+                carouselResponsiveSettings += '    }' ;
+                carouselResponsiveSettings += '  },' ;
               }
             }
           } // End generate breakpoint YAML elements
 
           // close breakpoint YAML data
-          sliderResponsiveSettings += ']';
+          carouselResponsiveSettings += ']';
           {% endif %}
 
           // create dynamic loader variable|s
-          dependency = 'dependencies_met_html_loaded_{{slider.id}}';
+          dependency = 'dependencies_met_html_loaded_{{carousel.id}}';
           load_dependencies[dependency] = '';
 
-          // initialize slider if HTML portion successfully loaded
-          load_dependencies['dependencies_met_html_loaded_{{slider.id}}'] = setInterval (function (options) {
-            // check if HTML portion of the slider is loaded successfully (loadSliderHTML)
-            xhrLoadState = j1.xhrDOMState['#{{slider.id}}_parent'];
+          // initialize carousel if HTML portion successfully loaded
+          load_dependencies['dependencies_met_html_loaded_{{carousel.id}}'] = setInterval (function (options) {
+            // check if HTML portion of the carousel is loaded successfully (loadcarouselHTML)
+            xhrLoadState = j1.xhrDOMState['#{{carousel.id}}_parent'];
             if ( xhrLoadState === 'success' ) {
 
-              // collect general slider settings
-              sliderOptions  = $.extend({}, {{slider.options | replace: 'nil', 'null' | replace: '=>', ':' }});
-              sliderSettings = $.extend(true, {}, slickDefaults, sliderOptions );
-
-              // convert slider responsive settings to object (sliderResponsiveSettingsOBJ)
-              sliderResponsiveSettingsYAML    = yaml.loadAll(sliderResponsiveSettings, 'utf8');
-              sliderResponsiveSettingsOBJ     = sliderResponsiveSettingsYAML[0];
-              sliderResponsiveSettingsSTRING  = JSON.stringify(sliderResponsiveSettingsOBJ, null, 4);
-              logger.debug('\n' + 'responsive settings on slider id #{{slider.id}}: ' + '\n' + sliderResponsiveSettingsSTRING);
-
-              $('.{{slider.id | replace: '_','-' }}').on('init', function(event, slick) {
-                logger.info('\n' + 'slider initialized on id: {{slider.id}}');
-                if ({{slider.lightbox.enabled}}) {
-                  logger.info('\n' + 'initialize lightbox on id: {{slider.id}}');
-                  $('#{{slider.id}}').slickLightbox({
-                    background:               'rgba(0,0,0,.8)',
-                    closeOnEscape:            true,
-                    closeOnBackdropClick:     true,
-                    navigateByKeyboard:       true,
-                    destroyTimeout:           500,
-                    src:                      '{{slider.lightbox.src}}',
-                    itemSelector:             '{{slider.lightbox.itemSelector}}',
-                    imageMaxHeight:           0.9,
-                    lazy:                     false,
+              // collect general carousel settings
+              carouselOptions  = $.extend({}, {{carousel.options | replace: 'nil', 'null' | replace: '=>', ':' }});
+              carouselSettings = $.extend(true, {}, slickDefaults, carouselOptions );
+
+              // convert carousel responsive settings to object (carouselResponsiveSettingsOBJ)
+              carouselResponsiveSettingsYAML    = yaml.loadAll(carouselResponsiveSettings, 'utf8');
+              carouselResponsiveSettingsOBJ     = carouselResponsiveSettingsYAML[0];
+              carouselResponsiveSettingsSTRING  = JSON.stringify(carouselResponsiveSettingsOBJ, null, 4);
+              logger.debug('\n' + 'responsive settings on carousel id #{{carousel.id}}: ' + '\n' + carouselResponsiveSettingsSTRING);
+
+              $('.{{carousel.id | replace: '_','-' }}').on('init', function(event, slick) {
+                logger.info('\n' + 'carousel initialized on id: {{carousel.id}}');
+
+                slick_lightbox_enabled = '{{carousel.lightbox.enabled}}';
+
+                // check if a lightbox is used|enabled
+                if ( slick_lightbox_enabled !== '' && slick_lightbox_enabled == 'true' ) {
+                  slick_lightbox_enabled = true;
+                } else {
+                  slick_lightbox_enabled = false;
+                }
+
+                if (slick_lightbox_enabled) {
+                  logger.info('\n' + 'initialize lightbox on id: {{carousel.id}}');
+
+                  // See: http://mreq.github.io/slick-lightbox/demo/
+                  $('#{{carousel.id}}').slickLightbox({
+                    caption:                  slickLightboxOptions.caption,
+                    useHistoryApi:            slickLightboxOptions.useHistoryApi,
+                    background:               slickLightboxOptions.background,
+                    closeOnEscape:            slickLightboxOptions.closeOnEscape,
+                    closeOnBackdropClick:     slickLightboxOptions.closeOnBackdropClick,
+                    navigateByKeyboard:       slickLightboxOptions.navigateByKeyboard,
+                    destroyTimeout:           slickLightboxOptions.destroyTimeout,
+                    imageMaxHeight:           slickLightboxOptions.imageMaxHeight,
+                    lazy:                     slickLightboxOptions.lazy,
+                  });
+                } // END carousel lightbox enabled
+
+                logger.info('\n' + 'adjust positions of arrows on id: {{carousel.id}}');
+                var buttons = $("#{{carousel.id}} > button");
+
+                // recalculate right arrow position based on gutter settings
+                //
+                var percentage_right = 3 + carouselSettings.gutters;
+                $.each($(buttons), function(index, button) {
+                  if (button.textContent.includes("Next")) {
+                    $(button).attr('style','right: ' + percentage_right + '%');
+                  }
+                });
+
+                // add CSS style for individual top position for all carousels
+                //
+                if ($('#{{carousel.id}}_caption')) {
+                  logger.info('\n' + 'adjust top position of arrows on id: {{carousel.id}}');
+                  var buttons = $("#{{carousel.id}} > button");
+                  $.each($(buttons), function(index, button) {
+                    $(button).addClass('slick-arrow-{{carousel.id}}');
                   });
                 }
-              });
 
-              // setup the slider
-              logger.info('\n' + 'slider is being setup on id: ' + '{{slider.id}}');
-              $('.{{slider.id | replace: '_','-' }}').slick({
-                accessibility:              sliderSettings.accessibility,
-                adaptiveHeight:             sliderSettings.adaptiveHeight,
-                arrows:                     sliderSettings.arrows,
-                autoplay:                   sliderSettings.autoplay,
-                autoplaySpeed:              sliderSettings.autoplaySpeed,
-                centerMode:                 sliderSettings.centerMode,
-                centerPadding:              sliderSettings.centerPadding,
-                cssEase:                    sliderSettings.cssEase,
-                dots:                       sliderSettings.dots,
-                dotsClass:                  sliderSettings.dotsClass,
-                draggable:                  sliderSettings.draggable,
-                easing:                     sliderSettings.easing,
-                edgeFriction:               sliderSettings.edgeFriction,
-                fade:                       sliderSettings.fade,
-                focusOnSelect:              sliderSettings.focusOnSelect,
-                focusOnChange:              sliderSettings.focusOnChange,
-                infinite:                   sliderSettings.infinite,
-                initialSlide:               sliderSettings.initialSlide,
-                lazyLoad:                   sliderSettings.lazyLoad,
-                mobileFirst:                sliderSettings.mobileFirst,
-                pauseOnDotsHover:           sliderSettings.pauseOnDotsHover,
-                pauseOnFocus:               sliderSettings.pauseOnFocus,
-                pauseOnHover:               sliderSettings.pauseOnHover,
-                respondTo:                  sliderSettings.respondTo,
-                rows:                       sliderSettings.rows,
-                rtl:                        sliderSettings.rtl,
-                slide:                      sliderSettings.slide,
-                slidesPerRow:               sliderSettings.slidesPerRow,
-                slidesToScroll:             sliderSettings.slidesToScroll,
-                slidesToShow:               sliderSettings.slidesToShow,
-                speed:                      sliderSettings.speed,
-                swipe:                      sliderSettings.swipe,
-                swipeToSlide:               sliderSettings.swipeToSlide,
-                touchMove:                  sliderSettings.touchMove,
-                touchThreshold:             sliderSettings.touchThreshold,
-                useCSS:                     sliderSettings.useCSS,
-                useTransform:               sliderSettings.useTransform,
-                variableWidth:              sliderSettings.variableWidth,
-                vertical:                   sliderSettings.vertical,
-                verticalSwiping:            sliderSettings.verticalSwiping,
-                waitForAnimate:             sliderSettings.waitForAnimate,
-                zIndex:                     sliderSettings.zIndex,
-                responsive:                 sliderResponsiveSettingsOBJ
+              }); // END on carousel init
+
+              function debounce(callback, timeout = 300) {
+                let timer;
+                var buttons = $("#{{carousel.id}} > button");
+
+                $.each($(buttons), function(index, button) {
+                  $(button).addClass('slick-arrow-{{carousel.id}}');
+                });
+
+                return (...args) => {
+                  clearTimeout(timer);
+                  timer = setTimeout(() => { callback.apply(this, args); }, timeout);
+                };
+              }
+
+              // calculate individual arrow positions for all carousels
+              //
+              function positionSlickArrows (e) {
+                var dependencies_met_page_ready = setInterval (function (options) {
+                  var pageState   = $('#no_flicker').css('display');
+                  var pageVisible = (pageState == 'block') ? true: false;
+                  var slideImageHeight;
+                  if ( j1.getState() === 'finished' && pageVisible ) {
+                    const carousel_type = '{{carousel.type}}';
+                    const $slick = $('.{{carousel.id | replace: '_','-' }}');
+                    const $slides = $slick.find('.slick-slide');
+                    const $currentSlide = $slides.filter((index, slide) => $(slide).hasClass('slick-current'));
+
+                    if (carousel_type == 'example') {
+                      slideImageHeight = ($currentSlide.find('{{carousel.style}}').height() / 2) - 25;
+                    } else {
+                      slideImageHeight = ($currentSlide.find('img').height() / 2) - 20;
+                    }
+
+                    logger.info('\n' + 'adjust top arrow position (centered) by ' + slideImageHeight + ' on id: {{carousel.id}}');
+                    $('.slick-arrow-{{carousel.id}}').css('top', slideImageHeight + 'px');
+                    clearInterval(dependencies_met_page_ready);
+                  }
+                }, 25);
+              }
+
+              // set individual arrow positions for a carousel
+              //
+              $('.{{carousel.id | replace: '_','-' }}').on('init afterChange', positionSlickArrows);
+
+              // setup the carousel
+              logger.info('\n' + 'carousel is being setup on id: ' + '{{carousel.id}}');
+              $('.{{carousel.id | replace: '_','-' }}').slick({
+                accessibility:              carouselSettings.accessibility,
+                adaptiveHeight:             carouselSettings.adaptiveHeight,
+                arrows:                     carouselSettings.arrows,
+                autoplay:                   carouselSettings.autoplay,
+                autoplaySpeed:              carouselSettings.autoplaySpeed,
+                centerMode:                 carouselSettings.centerMode,
+                centerPadding:              carouselSettings.centerPadding,
+                cssEase:                    carouselSettings.cssEase,
+                dots:                       carouselSettings.dots,
+                dotsClass:                  carouselSettings.dotsClass,
+                draggable:                  carouselSettings.draggable,
+                easing:                     carouselSettings.easing,
+                edgeFriction:               carouselSettings.edgeFriction,
+                fade:                       carouselSettings.fade,
+                focusOnSelect:              carouselSettings.focusOnSelect,
+                focusOnChange:              carouselSettings.focusOnChange,
+                infinite:                   carouselSettings.infinite,
+                initialSlide:               carouselSettings.initialSlide,
+                lazyLoad:                   carouselSettings.lazyLoad,
+                mobileFirst:                carouselSettings.mobileFirst,
+                pauseOnDotsHover:           carouselSettings.pauseOnDotsHover,
+                pauseOnFocus:               carouselSettings.pauseOnFocus,
+                pauseOnHover:               carouselSettings.pauseOnHover,
+                respondTo:                  carouselSettings.respondTo,
+                rows:                       carouselSettings.rows,
+                rtl:                        carouselSettings.rtl,
+                slide:                      carouselSettings.slide,
+                slidesPerRow:               carouselSettings.slidesPerRow,
+                slidesToScroll:             carouselSettings.slidesToScroll,
+                slidesToShow:               carouselSettings.slidesToShow,
+                speed:                      carouselSettings.speed,
+                swipe:                      carouselSettings.swipe,
+                swipeToSlide:               carouselSettings.swipeToSlide,
+                touchMove:                  carouselSettings.touchMove,
+                touchThreshold:             carouselSettings.touchThreshold,
+                useCSS:                     carouselSettings.useCSS,
+                useTransform:               carouselSettings.useTransform,
+                variableWidth:              carouselSettings.variableWidth,
+                vertical:                   carouselSettings.vertical,
+                verticalSwiping:            carouselSettings.verticalSwiping,
+                waitForAnimate:             carouselSettings.waitForAnimate,
+                zIndex:                     carouselSettings.zIndex,
+                responsive:                 carouselResponsiveSettingsOBJ
               });
-              clearInterval(load_dependencies['dependencies_met_html_loaded_{{slider.id}}']);
+
+              // NOT issued correctly (disabled for now)
+              // $(window).resize(debounce(positionSlickArrows, 100));
+
+              clearInterval(load_dependencies['dependencies_met_html_loaded_{{carousel.id}}']);
             }
           }, 25); // END
-          {% endif %} {% endfor %} // ENDFOR (all) sliders
+          {% endif %} {% endfor %} // ENDFOR (all) carousels
 
           _this.setState('finished');
           logger.debug('\n' + 'state: ' + _this.getState());
           logger.info('\n' + 'module initialization finished');
 
           clearInterval(dependencies_met_page_ready);
-
         }
       }, 25);
 
     }, // END init
 
     // -------------------------------------------------------------------------
-    // loadSliderHTML()
-    // load all Slick sliders (HTML portion) dynanically configured
+    // loadcarouselHTML()
+    // load all Slick carousels (HTML portion) dynanically configured
     // and enabled (AJAX) from YAMLdata file
     // NOTE: Make sure the placeholder is available in the content page
-    // eg. using the asciidoc extension masterslider::
+    // eg. using the asciidoc extension mastercarousel::
     // -------------------------------------------------------------------------
-    loadSliderHTML: function (options, slider) {
-      var numSliders      = Object.keys(slider).length;
-      var active_sliders  = numSliders;
+    loadCarouselHTML: function (options, carousel) {
+      var numcarousels      = Object.keys(carousel).length;
+      var active_carousels  = numcarousels;
       var xhr_data_path   = options.xhr_data_path + '/index.html';
       var xhr_container_id;
 
-      // console.debug('load HTML portion of all sliders configured found in page');
-      console.debug('number of sliders found: ' + numSliders);
+      // console.debug('load HTML portion of all carousels configured found in page');
+      console.debug('number of carousels found: ' + numcarousels);
 
       _this.setState('load_data');
-      Object.keys(slider).forEach(function(key) {
-        if (slider[key].enabled) {
-          xhr_container_id = slider[key].id + '_parent';
+      Object.keys(carousel).forEach(function(key) {
+        if (carousel[key].enabled) {
+          xhr_container_id = carousel[key].id + '_parent';
 
-          console.debug('load HTML data on slider id: ' + slider[key].id);
+          console.debug('load HTML data on carousel id: ' + carousel[key].id);
           j1.loadHTML({
             xhr_container_id: xhr_container_id,
             xhr_data_path:    xhr_data_path,
-            xhr_data_element: slider[key].id
+            xhr_data_element: carousel[key].id
           });
         } else {
-          console.debug('slider found disabled on id: ' + slider[key].id);
-          active_sliders--;
+          console.debug('carousel found disabled on id: ' + carousel[key].id);
+          active_carousels--;
         }
       });
-      console.debug('sliders loaded in page enabled|all: ' + active_sliders + '|' + numSliders);
+      console.debug('carousels loaded in page enabled|all: ' + active_carousels + '|' + numcarousels);
       _this.setState('data_loaded');
-    }, // END loadSliderHTML
+    }, // END loadcarouselHTML
 
     // -------------------------------------------------------------------------
     // messageHandler: MessageHandler for J1 CookieConsent module
@@ -361,5 +462,9 @@ j1.adapter.slick = (function (j1, window) {
 })(j1, window);
 
 {% endcapture %}
-{{ cache | strip_empty_lines }}
+{% if production %}
+  {{ cache | minifyJS }}
+{% else %}
+  {{ cache | strip_empty_lines }}
+{% endif %}
 {% assign cache = nil %}