j1-template 2023.0.16 → 2023.1.0

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

@@ -0,0 +1,365 @@
+---
+regenerate:                             true
+---
+
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ # ~/assets/themes/j1/adapter/js/slick.js
+ # Liquid template to create the Template Adapter for J1 Slick
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2023 Juergen Adams
+ #
+ # J1 Theme is licensed under the MIT License.
+ # For details, see: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  {{ liquid_var | debug }}
+ # cookie_options: {{ cookie_options | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid var initialization
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% 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 %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign slick_defaults      = modules.defaults.slick.defaults %}
+{% assign slick_settings      = modules.slick.settings %}
+
+{% comment %} Set config options
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Set variables
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Detect prod mode
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign production = false %}
+{% if environment == 'prod' or environment == 'production' %}
+  {% assign production = true %}
+{% endif %}
+
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/themes/j1/adapter/js/slick.js
+ # JS Adapter for J1 Slick
+ #
+ #  Product/Info:
+ #  http://jekyll.one
+ #
+ #  Copyright (C) 2023 Juergen Adams
+ #
+ #  J1 Theme is licensed under MIT License.
+ #  See: https://github.com/jekyll-one/J1 Theme/blob/master/LICENSE
+ # -----------------------------------------------------------------------------
+ #  Adapter generated: {{site.time}}
+ # -----------------------------------------------------------------------------
+*/
+
+// -----------------------------------------------------------------------------
+// ESLint shimming
+// -----------------------------------------------------------------------------
+/* eslint indent: "off"                                                       */
+/* eslint quotes: "off"                                                       */
+// -----------------------------------------------------------------------------
+'use strict';
+j1.adapter.slick = (function (j1, window) {
+  var environment               = '{{environment}}';
+  var responsiveSettings        = [];
+  var sliderResponsiveSettings  = [];
+  var _this;
+  var logger;
+  var logText;
+  var slickDefaults;
+  var slickSettings;
+  var slickOptions;
+  var sliderOptions;
+  var sliderSettings;
+
+  // ---------------------------------------------------------------------------
+  // Helper functions
+  // ---------------------------------------------------------------------------
+
+  // ---------------------------------------------------------------------------
+  // Main object
+  // ---------------------------------------------------------------------------
+  return {
+
+    // -------------------------------------------------------------------------
+    // 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 dependency;
+      var sliderResponsiveSettingsYAML;
+      var sliderResponsiveSettingsSTRING;
+
+      // -----------------------------------------------------------------------
+      // Default module settings
+      // -----------------------------------------------------------------------
+      var settings  = $.extend({
+        module_name: 'j1.adapter.cookieConsent',
+        generated:   '{{site.time}}'
+      }, 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);
+
+      // -----------------------------------------------------------------------
+      // Global variable settings
+      // -----------------------------------------------------------------------
+      _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);
+
+      // -----------------------------------------------------------------------
+      // initializer
+      // -----------------------------------------------------------------------
+      var dependencies_met_page_ready = setInterval (function (options) {
+        var pageState   = $('#no_flicker').css("display");
+        var pageVisible = (pageState == 'block') ? true: false;
+
+        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}}');
+
+          {% 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  = '[' ;
+          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: {' ;
+              } else {
+                sliderResponsiveSettings += '      ' + key + ': ' + value + ',' ;
+              }
+              // close current breakpoint element
+              if (count == length) {
+                sliderResponsiveSettings += '    }' ;
+                sliderResponsiveSettings += '  },' ;
+              }
+            }
+          } // End generate breakpoint YAML elements
+
+          // close breakpoint YAML data
+          sliderResponsiveSettings += ']';
+          {% endif %}
+
+          // create dynamic loader variable|s
+          dependency = 'dependencies_met_html_loaded_{{slider.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'];
+            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,
+                  });
+                }
+              });
+
+              // 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
+              });
+              clearInterval(load_dependencies['dependencies_met_html_loaded_{{slider.id}}']);
+            }
+          }, 25); // END
+          {% endif %} {% endfor %} // ENDFOR (all) sliders
+
+          _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
+    // and enabled (AJAX) from YAMLdata file
+    // NOTE: Make sure the placeholder is available in the content page
+    // eg. using the asciidoc extension masterslider::
+    // -------------------------------------------------------------------------
+    loadSliderHTML: function (options, slider) {
+      var numSliders      = Object.keys(slider).length;
+      var active_sliders  = numSliders;
+      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);
+
+      _this.setState('load_data');
+      Object.keys(slider).forEach(function(key) {
+        if (slider[key].enabled) {
+          xhr_container_id = slider[key].id + '_parent';
+
+          console.debug('load HTML data on slider id: ' + slider[key].id);
+          j1.loadHTML({
+            xhr_container_id: xhr_container_id,
+            xhr_data_path:    xhr_data_path,
+            xhr_data_element: slider[key].id
+          });
+        } else {
+          console.debug('slider found disabled on id: ' + slider[key].id);
+          active_sliders--;
+        }
+      });
+      console.debug('sliders loaded in page enabled|all: ' + active_sliders + '|' + numSliders);
+      _this.setState('data_loaded');
+    }, // END loadSliderHTML
+
+    // -------------------------------------------------------------------------
+    // messageHandler: MessageHandler for J1 CookieConsent module
+    // Manage messages send from other J1 modules
+    // -------------------------------------------------------------------------
+    messageHandler: function (sender, message) {
+      var json_message = JSON.stringify(message, undefined, 2);
+
+      logText = '\n' + 'received message from ' + sender + ': ' + json_message;
+      logger.debug(logText);
+
+      // -----------------------------------------------------------------------
+      //  Process commands|actions
+      // -----------------------------------------------------------------------
+      if (message.type === 'command' && message.action === 'module_initialized') {
+        //
+        // Place handling of command|action here
+        //
+        logger.info('\n' + message.text);
+      }
+
+      //
+      // Place handling of other command|action here
+      //
+
+      return true;
+    }, // END messageHandler
+
+    // -------------------------------------------------------------------------
+    // setState()
+    // Sets the current (processing) state of the module
+    // -------------------------------------------------------------------------
+    setState: function (stat) {
+      _this.state = stat;
+    }, // END setState
+
+    // -------------------------------------------------------------------------
+    // getState()
+    // Returns the current (processing) state of the module
+    // -------------------------------------------------------------------------
+    getState: function () {
+      return _this.state;
+    }, // END getState
+
+  }; // END return
+})(j1, window);
+
+{% endcapture %}
+{{ cache | strip_empty_lines }}
+{% assign cache = nil %}