assets/themes/j1/adapter/js/slick.js in j1-template-2024.2.0 vs assets/themes/j1/adapter/js/slick.js in j1-template-2024.2.1
- old
+ new
@@ -1,487 +1,487 @@
----
-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, 2024 Juergen Adams
- #
- # J1 Template 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 }}
- # -----------------------------------------------------------------------------
- # See: https://github.com/kenwheeler/slick
- # -----------------------------------------------------------------------------
-{% 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 attic_defaults = modules.defaults.attics.defaults %}
-{% assign attic_settings = modules.attics.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 %}
-
-{% 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, 2024 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 = ((j1, window) => {
-
- {% comment %} Set global variables
- ------------------------------------------------------------------------------ {% endcomment %}
- var responsiveSettings = [];
- var carouselResponsiveSettings = [];
-
- var atticDefaults;
- var atticSettings;
- var atticOptions;
- var slickDefaults;
- var slickSettings;
- var slickLightboxDefaults;
- var slickLightboxSettings;
- var slickLightboxOptions;
- var slickOptions;
- var carouselOptions;
- var carouselSettings;
-
- var slideImageHeight;
-
- var _this;
- var logger;
- var logText;
-
- // date|time
- var startTime;
- var endTime;
- var startTimeModule;
- var endTimeModule;
- var timeSeconds;
-
- // ---------------------------------------------------------------------------
- // helper functions
- // ---------------------------------------------------------------------------
-
- // ---------------------------------------------------------------------------
- // main
- // ---------------------------------------------------------------------------
- return {
-
- // -------------------------------------------------------------------------
- // adapter initializer
- // -------------------------------------------------------------------------
- init: (options) => {
- 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 carouselResponsiveSettingsYAML;
- var carouselResponsiveSettingsSTRING;
- var slick_lightbox_enabled;
-
- // -----------------------------------------------------------------------
- // default module settings
- // -----------------------------------------------------------------------
- var settings = $.extend({
- module_name: 'j1.adapter.cookieConsent',
- generated: '{{site.time}}'
- }, options);
-
- // Load module DEFAULTS|CONFIG
- atticDefaults = $.extend({}, {{attic_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
- atticSettings = $.extend({}, {{attic_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
- atticOptions = $.extend(true, {}, atticDefaults, atticSettings);
-
- 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');
-
- // load HTML portion for all carousels
- _this.loadCarouselHTML(slickOptions, slickOptions.carousels);
-
- // re-Init all carousels in a page if window is resized (if enabled)
- if (reload_on_resize) {
- window.onresize = () => {
- location.reload();
- }
- }
-
- // -----------------------------------------------------------------------
- // module initializer
- // -----------------------------------------------------------------------
- var dependencies_met_page_ready = setInterval (() => {
- var pageState = $('#content').css("display");
- var pageVisible = (pageState == 'block') ? true : false;
- var j1CoreFinished = (j1.getState() == 'finished') ? true : false;
- var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
-
- if (j1CoreFinished && pageVisible && atticFinished) {
- startTimeModule = Date.now();
-
- _this.setState('started');
- logger.debug('\n' + 'set module state to: ' + _this.getState());
- logger.info('\n' + 'initializing module: started');
-
- {% for carousel in slick_settings.carousels %} {% if carousel.enabled %}
- logger.info ('\n' + 'initialize carousel on id: ' + '{{carousel.id}}');
-
- {% if carousel.options.responsive %}
- logger.debug ('\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) {
- carouselResponsiveSettings += ' {' ;
- carouselResponsiveSettings += ' breakpoint: ' + value + ',' ;
- carouselResponsiveSettings += ' settings: {' ;
- } else {
- carouselResponsiveSettings += ' ' + key + ': ' + value + ',' ;
- }
- // close current breakpoint element
- if (count == length) {
- carouselResponsiveSettings += ' }' ;
- carouselResponsiveSettings += ' },' ;
- }
- }
- } // End generate breakpoint YAML elements
-
- // close breakpoint YAML data
- carouselResponsiveSettings += ']';
- {% endif %}
-
- // create dynamic loader variable|s
- dependency = 'dependencies_met_html_loaded_{{carousel.id}}';
- load_dependencies[dependency] = '';
-
- // initialize carousel if HTML portion successfully loaded
- load_dependencies['dependencies_met_html_loaded_{{carousel.id}}'] = setInterval (() => {
- // check if HTML portion of the carousel is loaded successfully (loadcarouselHTML)
- xhrLoadState = j1.xhrDOMState['#{{carousel.id}}_parent'];
- if (xhrLoadState === 'success') {
-
- // 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.debug('\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.debug('\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.debug ('\n' + 'adjust positions of slick lightbox arrows on id: {{carousel.id}}');
- var buttons = $("#{{carousel.id}} > button");
- var arrowTopPos = Math.round (document.documentElement.clientHeight/2)
-
- // add CSS style for individual top position for all carousels
- if ($('#{{carousel.id}}_caption')) {
- logger.debug ('\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}}');
- });
- }
- }); // END on carousel init
-
- function debounce(callback, timeout = 300) {
- let timer;
- var buttons = $("#{{carousel.id}} > button");
-
- $.each ($(buttons), (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 (() => {
- var pageState = $('#content').css("display");
- var pageVisible = (pageState === 'block') ? true : false;
- var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
-
- if (j1CoreFinished && 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) - 25;
- }
-
- logger.debug ('\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);
- }
- }, 10);
- }
-
- // set individual arrow positions for a carousel
- $('.{{carousel.id | replace: '_','-' }}').on('init afterChange', positionSlickArrows);
-
- // setup the carousel
- logger.debug ('\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
- });
-
- // NOT issued correctly (disabled for now)
- // $(window).resize(debounce(positionSlickArrows, 100));
-
- clearInterval (load_dependencies['dependencies_met_html_loaded_{{carousel.id}}']);
- } // END if xhrLoadState success
- }, 10); // END dependencies_met_html_loaded carousel.id
- {% endif %} {% endfor %} // ENDFOR (all) carousels
-
- _this.setState ('finished');
- logger.debug ('\n' + 'state: ' + _this.getState());
- logger.info ('\n' + 'module initialization finished');
-
- endTimeModule = Date.now();
- logger.info('\n' + 'module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
-
- clearInterval (dependencies_met_page_ready);
- } // END if pageVisible
- }, 10); // END dependency_met_page_ready
- }, // END init
-
- // -------------------------------------------------------------------------
- // 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 mastercarousel::
- // -------------------------------------------------------------------------
- loadCarouselHTML: (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('number of carousels found: ' + numcarousels);
-
- _this.setState('load_data');
- Object.keys(carousel).forEach ((key) => {
- if (carousel[key].enabled) {
- xhr_container_id = carousel[key].id + '_parent';
-
- // 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: carousel[key].id
- });
- } else {
- // console.debug('carousel found disabled on id: ' + carousel[key].id);
- active_carousels--;
- }
- });
- // console.debug('carousels loaded in page enabled|all: ' + active_carousels + '|' + numcarousels);
- _this.setState('data_loaded');
- }, // END loadcarouselHTML
-
- // -------------------------------------------------------------------------
- // messageHandler()
- // manage messages send from other J1 modules
- // -------------------------------------------------------------------------
- messageHandler: (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: (stat) => {
- _this.state = stat;
- }, // END setState
-
- // -------------------------------------------------------------------------
- // getState()
- // Returns the current (processing) state of the module
- // -------------------------------------------------------------------------
- getState: () => {
- return _this.state;
- } // END getState
-
- }; // END main (return)
-})(j1, window);
-
-{% endcapture %}
-{% if production %}
- {{ cache | minifyJS }}
-{% else %}
- {{ cache | strip_empty_lines }}
-{% endif %}
-{% assign cache = nil %}
+---
+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, 2024 Juergen Adams
+ #
+ # J1 Template 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 }}
+ # -----------------------------------------------------------------------------
+ # See: https://github.com/kenwheeler/slick
+ # -----------------------------------------------------------------------------
+{% 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 attic_defaults = modules.defaults.attics.defaults %}
+{% assign attic_settings = modules.attics.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 %}
+
+{% 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, 2024 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 = ((j1, window) => {
+
+ {% comment %} Set global variables
+ ------------------------------------------------------------------------------ {% endcomment %}
+ var responsiveSettings = [];
+ var carouselResponsiveSettings = [];
+
+ var atticDefaults;
+ var atticSettings;
+ var atticOptions;
+ var slickDefaults;
+ var slickSettings;
+ var slickLightboxDefaults;
+ var slickLightboxSettings;
+ var slickLightboxOptions;
+ var slickOptions;
+ var carouselOptions;
+ var carouselSettings;
+
+ var slideImageHeight;
+
+ var _this;
+ var logger;
+ var logText;
+
+ // date|time
+ var startTime;
+ var endTime;
+ var startTimeModule;
+ var endTimeModule;
+ var timeSeconds;
+
+ // ---------------------------------------------------------------------------
+ // helper functions
+ // ---------------------------------------------------------------------------
+
+ // ---------------------------------------------------------------------------
+ // main
+ // ---------------------------------------------------------------------------
+ return {
+
+ // -------------------------------------------------------------------------
+ // adapter initializer
+ // -------------------------------------------------------------------------
+ init: (options) => {
+ 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 carouselResponsiveSettingsYAML;
+ var carouselResponsiveSettingsSTRING;
+ var slick_lightbox_enabled;
+
+ // -----------------------------------------------------------------------
+ // default module settings
+ // -----------------------------------------------------------------------
+ var settings = $.extend({
+ module_name: 'j1.adapter.cookieConsent',
+ generated: '{{site.time}}'
+ }, options);
+
+ // Load module DEFAULTS|CONFIG
+ atticDefaults = $.extend({}, {{attic_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
+ atticSettings = $.extend({}, {{attic_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
+ atticOptions = $.extend(true, {}, atticDefaults, atticSettings);
+
+ 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');
+
+ // load HTML portion for all carousels
+ _this.loadCarouselHTML(slickOptions, slickOptions.carousels);
+
+ // re-Init all carousels in a page if window is resized (if enabled)
+ if (reload_on_resize) {
+ window.onresize = () => {
+ location.reload();
+ }
+ }
+
+ // -----------------------------------------------------------------------
+ // module initializer
+ // -----------------------------------------------------------------------
+ var dependencies_met_page_ready = setInterval (() => {
+ var pageState = $('#content').css("display");
+ var pageVisible = (pageState == 'block') ? true : false;
+ var j1CoreFinished = (j1.getState() == 'finished') ? true : false;
+ var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+ if (j1CoreFinished && pageVisible && atticFinished) {
+ startTimeModule = Date.now();
+
+ _this.setState('started');
+ logger.debug('\n' + 'set module state to: ' + _this.getState());
+ logger.info('\n' + 'initializing module: started');
+
+ {% for carousel in slick_settings.carousels %} {% if carousel.enabled %}
+ logger.info ('\n' + 'initialize carousel on id: ' + '{{carousel.id}}');
+
+ {% if carousel.options.responsive %}
+ logger.debug ('\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) {
+ carouselResponsiveSettings += ' {' ;
+ carouselResponsiveSettings += ' breakpoint: ' + value + ',' ;
+ carouselResponsiveSettings += ' settings: {' ;
+ } else {
+ carouselResponsiveSettings += ' ' + key + ': ' + value + ',' ;
+ }
+ // close current breakpoint element
+ if (count == length) {
+ carouselResponsiveSettings += ' }' ;
+ carouselResponsiveSettings += ' },' ;
+ }
+ }
+ } // End generate breakpoint YAML elements
+
+ // close breakpoint YAML data
+ carouselResponsiveSettings += ']';
+ {% endif %}
+
+ // create dynamic loader variable|s
+ dependency = 'dependencies_met_html_loaded_{{carousel.id}}';
+ load_dependencies[dependency] = '';
+
+ // initialize carousel if HTML portion successfully loaded
+ load_dependencies['dependencies_met_html_loaded_{{carousel.id}}'] = setInterval (() => {
+ // check if HTML portion of the carousel is loaded successfully (loadcarouselHTML)
+ xhrLoadState = j1.xhrDOMState['#{{carousel.id}}_parent'];
+ if (xhrLoadState === 'success') {
+
+ // 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.debug('\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.debug('\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.debug ('\n' + 'adjust positions of slick lightbox arrows on id: {{carousel.id}}');
+ var buttons = $("#{{carousel.id}} > button");
+ var arrowTopPos = Math.round (document.documentElement.clientHeight/2)
+
+ // add CSS style for individual top position for all carousels
+ if ($('#{{carousel.id}}_caption')) {
+ logger.debug ('\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}}');
+ });
+ }
+ }); // END on carousel init
+
+ function debounce(callback, timeout = 300) {
+ let timer;
+ var buttons = $("#{{carousel.id}} > button");
+
+ $.each ($(buttons), (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 (() => {
+ var pageState = $('#content').css("display");
+ var pageVisible = (pageState === 'block') ? true : false;
+ var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
+
+ if (j1CoreFinished && 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) - 25;
+ }
+
+ logger.debug ('\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);
+ }
+ }, 10);
+ }
+
+ // set individual arrow positions for a carousel
+ $('.{{carousel.id | replace: '_','-' }}').on('init afterChange', positionSlickArrows);
+
+ // setup the carousel
+ logger.debug ('\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
+ });
+
+ // NOT issued correctly (disabled for now)
+ // $(window).resize(debounce(positionSlickArrows, 100));
+
+ clearInterval (load_dependencies['dependencies_met_html_loaded_{{carousel.id}}']);
+ } // END if xhrLoadState success
+ }, 10); // END dependencies_met_html_loaded carousel.id
+ {% endif %} {% endfor %} // ENDFOR (all) carousels
+
+ _this.setState ('finished');
+ logger.debug ('\n' + 'state: ' + _this.getState());
+ logger.info ('\n' + 'module initialization finished');
+
+ endTimeModule = Date.now();
+ logger.info('\n' + 'module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
+
+ clearInterval (dependencies_met_page_ready);
+ } // END if pageVisible
+ }, 10); // END dependency_met_page_ready
+ }, // END init
+
+ // -------------------------------------------------------------------------
+ // 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 mastercarousel::
+ // -------------------------------------------------------------------------
+ loadCarouselHTML: (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('number of carousels found: ' + numcarousels);
+
+ _this.setState('load_data');
+ Object.keys(carousel).forEach ((key) => {
+ if (carousel[key].enabled) {
+ xhr_container_id = carousel[key].id + '_parent';
+
+ // 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: carousel[key].id
+ });
+ } else {
+ // console.debug('carousel found disabled on id: ' + carousel[key].id);
+ active_carousels--;
+ }
+ });
+ // console.debug('carousels loaded in page enabled|all: ' + active_carousels + '|' + numcarousels);
+ _this.setState('data_loaded');
+ }, // END loadcarouselHTML
+
+ // -------------------------------------------------------------------------
+ // messageHandler()
+ // manage messages send from other J1 modules
+ // -------------------------------------------------------------------------
+ messageHandler: (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: (stat) => {
+ _this.state = stat;
+ }, // END setState
+
+ // -------------------------------------------------------------------------
+ // getState()
+ // Returns the current (processing) state of the module
+ // -------------------------------------------------------------------------
+ getState: () => {
+ return _this.state;
+ } // END getState
+
+ }; // END main (return)
+})(j1, window);
+
+{% endcapture %}
+{% if production %}
+ {{ cache | minifyJS }}
+{% else %}
+ {{ cache | strip_empty_lines }}
+{% endif %}
+{% assign cache = nil %}