j1-template 2024.1.5 → 2024.2.1

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

@@ -38,12 +38,12 @@ regenerate:                             true
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign gallery_defaults   = modules.defaults.gallery.defaults %}
-{% assign gallery_settings   = modules.gallery.settings %}
+{% assign gallery_defaults      = modules.defaults.gallery.defaults %}
+{% assign gallery_settings      = modules.gallery.settings %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign gallery_options    = gallery_defaults | merge: gallery_settings %}
+{% assign gallery_options       = gallery_defaults | merge: gallery_settings %}
 
 {% comment %} Detect prod mode
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -82,39 +82,47 @@ regenerate:                             true
 /* eslint indent: "off"                                                       */
 // -----------------------------------------------------------------------------
 'use strict';
-j1.adapter.gallery = (function (j1, window) {
+j1.adapter.gallery = ((j1, window) => {
 
   {% comment %} Global variables
   ------------------------------------------------------------------------------ {% endcomment %}
   var environment   = '{{environment}}';
   var state         = 'not_started';
   var play_button   = '/assets/themes/j1/modules/lightGallery/css/themes/uno/icons/play-button.png';
+
   var url;
   var origin;
   var galleryDefaults;
   var gallerySettings;
   var galleryOptions;
   var frontmatterOptions;
+
   var _this;
   var logger;
   var logText;
 
+  // date|time
+  var startTime;
+  var endTime;
+  var startTimeModule;
+  var endTimeModule;
+  var timeSeconds;
+
   // ---------------------------------------------------------------------------
-  // Helper functions
+  // helper functions
   // ---------------------------------------------------------------------------
 
   // ---------------------------------------------------------------------------
-  // Main object
+  // main
   // ---------------------------------------------------------------------------
   return {
 
     // -------------------------------------------------------------------------
-    // Initializer
+    // adapter initializer
     // -------------------------------------------------------------------------
-    init: function (options) {
-
-      url               = new URL(window.location.href);
-      origin            = url.origin;
+    init: (options) => {
+      url    = new URL(window.location.href);
+      origin = url.origin;
 
       // flag used for Chromium browser workaround
       j1['jg'] = {
@@ -122,7 +130,7 @@ j1.adapter.gallery = (function (j1, window) {
       };
 
       // -----------------------------------------------------------------------
-      // Default module settings
+      // default module settings
       // -----------------------------------------------------------------------
       var settings = $.extend({
         module_name: 'j1.adapter.gallery',
@@ -130,13 +138,13 @@ j1.adapter.gallery = (function (j1, window) {
       }, options);
 
       // -----------------------------------------------------------------------
-      // Global variable settings
+      // global variable settings
       // -----------------------------------------------------------------------
-      _this = j1.adapter.gallery;
+      _this  = j1.adapter.gallery;
       logger = log4javascript.getLogger('j1.adapter.gallery');
 
       // create settings object from frontmatter (page settings)
-      frontmatterOptions  = options != null ? $.extend({}, options) : {};
+      frontmatterOptions = options != null ? $.extend({}, options) : {};
 
       // Load  module DEFAULTS|CONFIG
       galleryDefaults = $.extend({}, {{gallery_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
@@ -147,12 +155,17 @@ j1.adapter.gallery = (function (j1, window) {
       console.debug('loading HTML portion for all galleries configured');
       _this.loadGalleryHTML(galleryOptions, galleryOptions.galleries);
 
-      var dependencies_met_j1_finished = setInterval(function() {
-        var pageState     = $('#no_flicker').css("display");
-        var pageVisible   = (pageState == 'block') ? true : false;
-        var atticFinished = (j1.adapter.attic.getState() == 'finished') ? true: false;
+      // -----------------------------------------------------------------------
+      // module initializer
+      // -----------------------------------------------------------------------
+      var dependency_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) {
+          startTimeModule = Date.now();
 
-        if (j1.getState() == 'finished' && pageVisible) {
           // initialize state flag
           _this.setState('started');
           logger.debug('\n' + 'state: ' + _this.getState());
@@ -164,15 +177,18 @@ j1.adapter.gallery = (function (j1, window) {
           logger.debug('\n' + 'state: ' + _this.getState());
           logger.info('\n' + 'module initialized successfully');
 
-          clearInterval(dependencies_met_j1_finished);
+          endTimeModule = Date.now();
+          logger.info('\n' + 'module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
+
+          clearInterval(dependency_met_page_ready);
         } // END 'finished' && 'pageVisible'
-      }, 10);
-    },
+      }, 10); // END dependency_met_page_ready
+    }, // END init
 
     // -----------------------------------------------------------------------
     // Load AJAX data and initialize the jg gallery
     // -----------------------------------------------------------------------
-    initialize: function (options) {
+    initialize: (options) => {
       var xhrLoadState      = 'pending';                                        // (initial) load state for the HTML portion of the slider
       var load_dependencies = {};
       var dependency;
@@ -194,13 +210,13 @@ j1.adapter.gallery = (function (j1, window) {
 
           // initialize the gallery if HTML portion successfully loaded
           //
-          load_dependencies['dependencies_met_html_loaded_{{gallery_id}}'] = setInterval (function (options) {
+          load_dependencies['dependencies_met_html_loaded_{{gallery_id}}'] = setInterval (() => {
             // check if HTML portion of the gallery is loaded successfully
             xhrLoadState = j1.xhrDOMState['#{{gallery_id}}_parent'];
-            if ( xhrLoadState === 'success' ) {
+            if (xhrLoadState === 'success') {
               var $grid_{{gallery_id}} = $('#{{gallery_id}}');                  // used for later access
 
-              logger.info('\n' + 'dyn_loader, initialize gallery on id: ' + '{{gallery_id}}');
+              logger.debug('\n' + 'dyn_loader, initialize gallery on id: ' + '{{gallery_id}}');
 
               j1.jg.callback.{{gallery_id}} = 'waiting';
 
@@ -214,15 +230,15 @@ j1.adapter.gallery = (function (j1, window) {
                 {{option[0] | json}}: {{option[1] | json}},
                 {% endfor %}
               })
-              .on('jg.complete', function (evt) {
+              .on('jg.complete', (evt) => {
                 evt.stopPropagation();
 
                 j1.jg.callback.{{gallery_id}} = 'successful';
 
                 // setup the lightbox
                 //
-                logger.info('\n' + 'dyn_loader, callback "jg.complete" entered on id: ' + '{{gallery_id}}');
-                logger.info('\n' + 'dyn_loader, initialize lightGallery on id: ' + '{{gallery_id}}');
+                logger.debug('\n' + 'dyn_loader, callback "jg.complete" entered on id: ' + '{{gallery_id}}');
+                logger.debug('\n' + 'dyn_loader, initialize lightGallery on id: ' + '{{gallery_id}}');
 
                 var lg = document.getElementById("{{gallery_id}}");
                 lightGallery(lg, {
@@ -307,10 +323,10 @@ j1.adapter.gallery = (function (j1, window) {
               // workaround for Chromium brwosers if callback jg.complete
               // NOT fired
               //
-              setTimeout (function() {
+              setTimeout(() => {
                 if (j1.jg.callback.{{gallery_id}} == 'waiting') {
-                  logger.warn('\n' + 'dyn_loader, callback "jg.callback": ' + j1.jg.callback.{{gallery_id}})
-                  logger.info('\n' + 'dyn_loader, initialize lightGallery on id: ' + '{{gallery_id}}');
+                  logger.debug('\n' + 'dyn_loader, callback "jg.callback": ' + j1.jg.callback.{{gallery_id}})
+                  logger.debug('\n' + 'dyn_loader, initialize lightGallery on id: ' + '{{gallery_id}}');
 
                   var lg = document.getElementById("{{gallery_id}}");
                   lightGallery(lg, {
@@ -378,16 +394,15 @@ j1.adapter.gallery = (function (j1, window) {
 
                   }); // END lightGallery
                 } // END if j1.jg.callback
-              }, 2000); // END timeout
+              }, 1000); // END timeout
 
               clearInterval(load_dependencies['dependencies_met_html_loaded_{{gallery_id}}']);
             } // END  if xhrLoadState === 'success'
-
           }, 10); // END dependencies_met_html_loaded
 
         {% endif %} // ENDIF gallery enabled
       {% endfor %}
-    }, // END function initialize
+    }, // END initialize
 
     // -------------------------------------------------------------------------
     // loadGalleryHTML()
@@ -395,7 +410,7 @@ j1.adapter.gallery = (function (j1, window) {
     // NOTE: Make sure the placeholder DIV is available in the content
     // page as generated using the Asciidoc extension gallery::
     // -------------------------------------------------------------------------
-    loadGalleryHTML: function (options, gallery) {
+    loadGalleryHTML: (options, gallery) => {
       var numGalleries  = Object.keys(gallery).length;
       var active_grids  = numGalleries;
       var xhr_data_path = options.xhr_data_path + '/index.html';
@@ -404,7 +419,7 @@ j1.adapter.gallery = (function (j1, window) {
       console.debug('number of galleries found: ' + active_grids);
 
       _this.setState('load_data');
-      Object.keys(gallery).forEach(function(key) {
+      Object.keys(gallery).forEach((key) => {
         if (gallery[key].enabled) {
           xhr_container_id = gallery[key].id + '_parent';
 
@@ -421,28 +436,32 @@ j1.adapter.gallery = (function (j1, window) {
       });
       console.debug('galleries loaded in page enabled|all: ' + active_grids + '|' + numGalleries);
       _this.setState('data_loaded');
-    }, // END loadSliderHTML
+    }, // END loadGalleryHTML
 
     // -------------------------------------------------------------------------
-    // messageHandler: MessageHandler for J1 CookieConsent module
-    // Manage messages send from other J1 modules
+    // messageHandler()
+    // manage messages send from other J1 modules
     // -------------------------------------------------------------------------
-    messageHandler: function (sender, message) {
+    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
+      //  process commands|actions
       // -----------------------------------------------------------------------
       if (message.type === 'command' && message.action === 'module_initialized') {
-        _this.setState('finished');
+
+        //
+        // place handling of command|action here
+        //
+
         logger.info('\n' + message.text);
       }
 
       //
-      // Place handling of other command|action here
+      // place handling of other command|action here
       //
 
       return true;
@@ -450,9 +469,9 @@ j1.adapter.gallery = (function (j1, window) {
 
     // -------------------------------------------------------------------------
     // setState()
-    // Sets the current (processing) state of the module
+    // sets the current (processing) state of the module
     // -------------------------------------------------------------------------
-    setState: function (stat) {
+    setState: (stat) => {
       _this.state = stat;
     }, // END setState
 
@@ -460,11 +479,11 @@ j1.adapter.gallery = (function (j1, window) {
     // getState()
     // Returns the current (processing) state of the module
     // -------------------------------------------------------------------------
-    getState: function () {
+    getState: () => {
       return _this.state;
     } // END getState
 
-  }; // END return
+  }; // END main (return)
 })(j1, window);
 
 {% endcapture %}