j1-template 2024.1.5 → 2024.2.1

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

@@ -50,8 +50,8 @@ regenerate:                             true
 {% assign template_config               = site.data.template_settings %}
 {% assign navigator_defaults            = modules.defaults.navigator.defaults %}
 {% assign navigator_settings            = modules.navigator.settings %}
-{% assign themer_defaults               = modules.defaults.themer.defaults %}
-{% assign themer_settings               = modules.themer.settings %}
+{% assign themes_defaults               = modules.defaults.themes.defaults %}
+{% assign themes_settings               = modules.themes.settings %}
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -61,7 +61,7 @@ regenerate:                             true
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign navigator_options             = navigator_defaults | merge: navigator_settings %}
-{% assign themer_options                = themer_defaults | merge: themer_settings %}
+{% assign themes_options                = themes_defaults | merge: themes_settings %}
 {% assign nav_mmenu_options             = nav_mmenu_defaults | merge: nav_mmenu_settings %}
 {% assign nav_mmenu_id                  = navigator_defaults.nav_mmenu.xhr_container_id %}
 {% assign nav_navbar_media_breakpoint   = navigator_defaults.nav_bar.media_breakpoint %}
@@ -103,26 +103,34 @@ regenerate:                             true
 /* eslint indent: "off"                                                       */
 // -----------------------------------------------------------------------------
 'use strict';
-j1.adapter.mmenu = (function (j1, window) {
+j1.adapter.mmenu = ((j1, window) => {
 
-  // ---------------------------------------------------------------------------
-  // globals
-  // ---------------------------------------------------------------------------
+  {% comment %} Set global variables
+  ------------------------------------------------------------------------------ {% endcomment %}
   var environment     = '{{environment}}';
   var dclFinished     = false;
   var moduleOptions   = {};
   var navMenuOptions  = {};
-  var themerOptions   = {};
+  var themesOptions   = {};
   var cookie_names    = j1.getCookieNames();
-  var themerEnabled   = {{themer_options.enabled}};
+  var themesEnabled   = {{themes_options.enabled}};
   var state           = 'not_started';
+
   var user_state;
   var user_session;
   var user_data;
+
   var _this;
   var logger;
   var logText;
 
+  // date|time
+  var startTime;
+  var endTime;
+  var startTimeModule;
+  var endTimeModule;
+  var timeSeconds;
+
   // ---------------------------------------------------------------------------
   // helper functions
   // ---------------------------------------------------------------------------
@@ -133,12 +141,12 @@ j1.adapter.mmenu = (function (j1, window) {
   return {
 
     // -------------------------------------------------------------------------
-    // module initializer
+    // adapter initializer
     // -------------------------------------------------------------------------
-    init: function (options) {
+    init: (options) => {
 
       // -----------------------------------------------------------------------
-      // Default module settings
+      // default module settings
       // -----------------------------------------------------------------------
       var settings  = $.extend({
         module_name: 'j1.adapter.mmenu',
@@ -146,7 +154,7 @@ j1.adapter.mmenu = (function (j1, window) {
       }, options);
 
       // -----------------------------------------------------------------------
-      // Global variable settings
+      // global variable settings
       // -----------------------------------------------------------------------
       _this         = j1.adapter.mmenu;
       logger        = log4javascript.getLogger('j1.adapter.mmenu');
@@ -161,7 +169,7 @@ j1.adapter.mmenu = (function (j1, window) {
       // -----------------------------------------------------------------------
       /* eslint-disable */
       navMenuOptions = $.extend({}, {{nav_mmenu_options | replace: '=>', ':' }});
-      themerOptions  = $.extend({}, {{themer_options | replace: '=>', ':' | replace: 'nil', '""' }});
+      themesOptions  = $.extend({}, {{themes_options | replace: '=>', ':' | replace: 'nil', '""' }});
       /* eslint-enable */
       var xhr_data_path;
       var menu_id;
@@ -174,22 +182,38 @@ j1.adapter.mmenu = (function (j1, window) {
       //
       if (options != null) { var frontmatterOptions = $.extend({}, options); }
 
-      _this.setState('started');
-      logger.debug('\n' + 'state: ' + _this.getState());
-      logger.info('\n' + 'module is being initialized');
-      _this.mmenuLoader(navMenuOptions);
+      // -----------------------------------------------------------------------
+      // 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();
+
+          _this.setState('started');
+          logger.debug('\n' + 'state: ' + _this.getState());
+          logger.info('\n' + 'module is being initialized');
+
+          _this.mmenuLoader(navMenuOptions);
+
+          clearInterval(dependency_met_page_ready);
+        } // END if pageVisible
+      }, 10); // END dependency_met_page_ready
     }, // END init
 
     // -------------------------------------------------------------------------
     // MMenu Loader
     // -------------------------------------------------------------------------
-    mmenuLoader: function (mmOptions) {
+    mmenuLoader: (mmOptions) => {
       var menu_id;
       var xhr_data_path;
 
       _this.setState('loading');
-      logger.info('\n' + 'status: ' + _this.getState());
-      logger.info('\n' + 'load HTML data for navs and drawers');
+      logger.debug('\n' + 'status: ' + _this.getState());
+      logger.debug('\n' + 'load HTML data for navs and drawers');
 
       {% assign id_list = "" %}
 
@@ -231,16 +255,20 @@ j1.adapter.mmenu = (function (j1, window) {
 
       logger.info('\n' + 'initialize navs and drawers');
       _this.mmenuInitializer(mmOptions);
+
       _this.setState('finished');
       logger.debug('\n' + 'state: ' + _this.getState());
-      logger.info('\n' + 'module initialized successfully');
+      logger.info('\n' + 'initializing module: finished');
+
+      endTimeModule = Date.now();
+      logger.info('\n' + 'module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
 
     }, // END dataLoader
 
     // -------------------------------------------------------------------------
     // MMenu Initializer
     // -------------------------------------------------------------------------
-    mmenuInitializer: function (mmOptions) {
+    mmenuInitializer: (mmOptions) => {
       var menu_id;
       var xhr_data_path;
 
@@ -263,10 +291,11 @@ j1.adapter.mmenu = (function (j1, window) {
         // ---------------------------------------------------------------------
         // NOTE: Run load check (j1.xhrDataState) before initialization
         //
-        logger.info('\n' + 'initialize mmenu on id: #{{menu_id}}');
-        var dependencies_met_{{menu_id}}_loaded = setInterval (function () {
+        logger.debug('\n' + 'initialize mmenu on id: #{{menu_id}}');
+        var dependencies_met_{{menu_id}}_loaded = setInterval (() => {
           if (j1.xhrDataState['#{{menu_id}}'] == 'success' ) {
             logger.debug('\n' + 'met dependencies for: {{menu_id}}');
+
             const menu_selector = document.querySelector('#{{menu_id}}');
             const mmenu_{{menu_id}} = new MmenuLight (
               menu_selector,
@@ -293,7 +322,11 @@ j1.adapter.mmenu = (function (j1, window) {
             // make sure the QL menu is shown, if mmenu is closed
             // by clicking the mmenu backdrop
             //
-            $('.mm-ocd__backdrop').click(function() {
+            $('.mm-ocd__backdrop').click(function (e) {
+              // suppress default actions|bubble up
+              e.preventDefault();
+              e.stopPropagation();
+
               $('#quicklinks').show();
               return false
             });
@@ -301,13 +334,16 @@ j1.adapter.mmenu = (function (j1, window) {
             // Toggle Bars (Hamburger) for the NavBar to open|close
             // the mmenu drawer
             //
-            $('{{item.menu.content.button}}').each(function(e) {
+            $('{{item.menu.content.button}}').each(function (e) {
               var $this = $(this);
               var clicked;
 
-              $this.on('click', function(e) {
-                const button_{{menu_id}} = this;
+              $this.on('click', function (e) {
+                // suppress default actions|bubble up
                 e.preventDefault();
+                e.stopPropagation();
+
+                const button_{{menu_id}} = this;
                 // toggle mmenu open|clse
                 clicked = $('body.mm-ocd-opened').length ? true : false;
                 if (clicked) {
@@ -323,25 +359,22 @@ j1.adapter.mmenu = (function (j1, window) {
             });
 
             // jadams, 2020-09-30: loading the menues (themes) if enabled
-            //
-            if (themerEnabled) {
+            if (themesEnabled) {
               // load REMOTE themes from Bootswatch API (localFeed EMPTY!)
-              $('#remote_themes_mmenu').bootstrapThemeSwitcher({
+              $('#remote_themes_mmenu').ThemeSwitcher({
                 localFeed: '',
-                bootswatchApiVersion: themerOptions.bootswatchApiVersion
+                bootswatchApiVersion: themesOptions.bootswatchApiVersion
               });
               // load LOCAL themes from JSON data
-              $('#local_themes_mmenu').bootstrapThemeSwitcher({
-                localFeed: themerOptions.localThemes
+              $('#local_themes_mmenu').ThemeSwitcher({
+                localFeed: themesOptions.localThemes
               });
             }
 
             $('#{{item.menu.content.id}}').show();
-            logger.info('\n' + 'initializing mmenu finished on id: #{{menu_id}}');
-            logger.debug('\n' + 'met dependencies for: {{menu_id}} loaded');
+            logger.debug('\n' + 'initializing mmenu finished on id: #{{menu_id}}');
+
             clearInterval(dependencies_met_{{menu_id}}_loaded);
-            $('#{{item.menu.content.id}}').show();
-            logger.info('\n' + 'initializing mmenu finished on id: #{{menu_id}}');
           }; // END mmenu_loaded
         }, 10); // END dependencies_met_mmenu_loaded
         {% endif %} // ENDIF content_type: NAVIGATION
@@ -355,10 +388,10 @@ j1.adapter.mmenu = (function (j1, window) {
           // TODO: Check if Toggle button make sense/should be implemented
           // NOTE: Run load check (j1.xhrDataState) before initialization
           //
-          logger.info('\n' + 'initialize mmenu on id: #{{menu_id}}');
-          var dependencies_met_{{menu_id}}_loaded = setInterval (function () {
-            if (j1.xhrDataState['#{{menu_id}}'] == 'success' &&
-                $('{{item.menu.content.button}}').length) {
+          logger.debug('\n' + 'initialize mmenu on id: #{{menu_id}}');
+
+          var dependencies_met_{{menu_id}}_loaded = setInterval (() => {
+            if (j1.xhrDataState['#{{menu_id}}'] == 'success' && $('{{item.menu.content.button}}').length) {
               logger.debug('\n' + 'met dependencies for: xhrData/{{menu_id}}');
 
               const menu_selector = document.querySelector('#{{menu_id}}');
@@ -381,8 +414,8 @@ j1.adapter.mmenu = (function (j1, window) {
               // monitor for state changes on the drawer
               //
               $('#drawer_{{menu_id}}').attrchange({
-                trackValues: true,
-                callback: function (event) {
+                trackValues:  true,
+                callback:     (event)  => {
                   logger.debug('\n' + 'hide|show the nav menu');
                   // switch off|on the (main) nav menu
                   $('#' + 'navigator_nav_navbar').toggle();
@@ -393,17 +426,20 @@ j1.adapter.mmenu = (function (j1, window) {
               });
 
               // button for the MMenu tocbar to open|close the toc drawer
-              //
-              $('{{item.menu.content.button}}').each(function(e) {
+              $('{{item.menu.content.button}}').each(function (e) {
                 var $this = $(this);
-                $this.on('click', function(e) {
+                $this.on('click', function (e) {
                   var button_{{menu_id}} = this;
                   var hasClass;
 
+                  // suppress default actions|bubble up
+                  e.preventDefault();
+                  e.stopPropagation();
+
                   // check if the button should be activated
                   // e.g for TOC only if class js-toc-content is found
                   //
-                  if ('{{item.menu.content.button_activated}}' != 'always') {
+                  if ('{{item.menu.content.button_activated}}' !== 'always') {
                     hasClass = $('main').hasClass('{{item.menu.content.button_activated}}');
                   } else {
                     hasClass = true;
@@ -414,12 +450,14 @@ j1.adapter.mmenu = (function (j1, window) {
                   } // END if hasclass
                 });
               });
+
               logger.debug('\n' + 'met dependencies for: {{menu_id}} loaded');
-              clearInterval(dependencies_met_{{menu_id}}_loaded);
               $('#{{item.menu.content.id}}').show();
+
+              clearInterval(dependencies_met_{{menu_id}}_loaded);
           }; // END if menu_loaded
         }, 10); // END dependencies_met_mmenu_loaded
-        logger.info('\n' + 'initializing mmenu finished on id: #{{menu_id}}');
+        logger.debug('\n' + 'initializing mmenu finished on id: #{{menu_id}}');
         {% endif %} // ENDIF content_type: DRAWER
         } // END menus|drawers
       {% endif %} // ENDIF menu enabled
@@ -427,31 +465,29 @@ j1.adapter.mmenu = (function (j1, window) {
     }, // END mmenuInitializer
 
     // -------------------------------------------------------------------------
-    // messageHandler
-    // Manage messages (paylods) send from other J1 modules
+    // messageHandler()
+    // manage messages send from other J1 modules
     // -------------------------------------------------------------------------
-    messageHandler: function (sender, message) {
-      // var json_message = JSON.stringify(message, undefined, 2);              // multiline
-      var json_message = JSON.stringify(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') {
+
         //
-        // Place handling of command|action here
+        // place handling of command|action here
         //
+
         logger.info('\n' + message.text);
       }
-      if (message.type === 'command' && message.action === 'status') {
-        logger.info('\n' + 'messageHandler: received - ' + message.action);
-      }
 
       //
-      // Place handling of other command|action here
+      // place handling of other command|action here
       //
 
       return true;
@@ -459,9 +495,9 @@ j1.adapter.mmenu = (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
 
@@ -469,11 +505,11 @@ j1.adapter.mmenu = (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 %}