j1-template 2023.3.0 → 2023.3.2

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

@@ -82,8 +82,7 @@ regenerate:                             true
 
 {% assign authentication_options    = authentication_defaults | merge: authentication_settings %}
 
-
-
+{% assign footer                    = 'active_footer' %}
 {% assign footer_id                 = footer_options.active_footer %}
 {% assign footer_data_path          = footer_defaults.data_path %}
 {% assign banner_data_path          = banner_defaults.data_path %}
@@ -165,6 +164,8 @@ var j1 = (function (options) {
   var state                         = 'not_started';
   var mode                          = 'not_detected';
 
+  var performance_monitors_enabled  = ('{{template_config.monitor.performance_observer}}' === 'true') ? true: false;
+
   // defaults for tracking providers
   var tracking_enabled              = ('{{tracking_enabled}}' === 'true') ? true: false;
   var tracking_id                   = '{{tracking_id}}';
@@ -457,12 +458,12 @@ var j1 = (function (options) {
                   // set signout
                   logger.info('\n' + 'show signout icon');
                   $('#navLinkSignInOut').attr('data-bs-target','#modalOmniSignOut');
-                  $('#iconSignInOut').removeClass('mdi-login').addClass('mdi-logout');
+                  $('#iconSignInOut').removeClass('mdib-login').addClass('mdib-logout');
                 } else {
                   // set signin
                   logger.info('\n' + 'show signin icon');
                   $('#navLinkSignInOut').attr('data-bs-target','#modalOmniSignIn');
-                  $('#iconSignInOut').removeClass('mdi-logout').addClass('mdi-login');
+                  $('#iconSignInOut').removeClass('mdib-logout').addClass('mdib-login');
                 }
                 logger.info('\n' + 'authentication detected as: ' + user_session.authenticated);
                 $('#quickLinksSignInOutButton').css('display', 'block');
@@ -562,7 +563,7 @@ var j1 = (function (options) {
                       // show the content|footer
                       //
                       $('#content').show();
-                      $('#{{footer_id}}').show();
+                      $('.{{footer}}').show();
 
                       clearInterval(dependencies_met_page_ready);
                       clearInterval(dependencies_met_blocks_ready);
@@ -582,7 +583,7 @@ var j1 = (function (options) {
                   //
                   if ( footer_state == 'success') {
                     $('#content').show();
-                    $('#{{footer_id}}').show();
+                    $('.{{footer}}').show();
 
                     clearInterval(dependencies_met_page_ready);
                   }
@@ -720,7 +721,7 @@ var j1 = (function (options) {
                 // show the content|footer
                 //
                 $('#content').show();
-                $('#{{footer_id}}').show();
+                $('.{{footer}}').show();
 
                 clearInterval(dependencies_met_page_ready);
                 clearInterval(dependencies_met_blocks_ready);
@@ -740,7 +741,7 @@ var j1 = (function (options) {
             //
             if ( footer_state == 'success') {
               $('#content').show();
-              $('#{{footer_id}}').show();
+              $('.{{footer}}').show();
 
               clearInterval(dependencies_met_page_ready);
             }
@@ -1215,12 +1216,12 @@ var j1 = (function (options) {
               // set signout
               logger.info('\n' + 'show signout icon');
               $('#navLinkSignInOut').attr('data-bs-target','#modalOmniSignOut');
-              $('#iconSignInOut').removeClass('mdi-login').addClass('mdi-logout');
+              $('#iconSignInOut').removeClass('mdib-login').addClass('mdib-logout');
             } else {
               // set signin
               logger.info('\n' + 'show signin icon');
               $('#navLinkSignInOut').attr('data-bs-target','#modalOmniSignIn');
-              $('#iconSignInOut').removeClass('mdi-logout').addClass('mdi-login');
+              $('#iconSignInOut').removeClass('mdib-logout').addClass('mdib-login');
             }
             logger.info('\n' + 'authentication detected as: ' + user_session.authenticated);
             $('#quickLinksSignInOutButton').css('display', 'block');
@@ -2486,8 +2487,8 @@ var j1 = (function (options) {
     //   // var tabs_pills_link_color_active    = j1.setColorData('md_blue');         // j1.getStyleValue('btn-info', 'background-color');
     //   // var tabs_pills_link_color_hover     = j1.setColorData('md_gray_300');     // j1.getStyleValue('btn-secondary', 'background-color');
     //
-    //   // var tabs_pills_link_color_active    = 'mdi-blue';
-    //   // var tabs_pills_link_color_hover     = 'mdi-gray-300';
+    //   // var tabs_pills_link_color_active    = 'md-blue';
+    //   // var tabs_pills_link_color_hover     = 'md-gray-300';
     //
     //   // nav module
     //   // -----------------------------------------------------------------------
@@ -2699,6 +2700,64 @@ var j1 = (function (options) {
 
     }, // END stringToBoolean
 
+    // -------------------------------------------------------------------------
+    // registerLazyLoadCss()
+    // CSS loader to speed up inital rendering
+    //
+    // Requires the following config serrings:
+    //
+    //    src:        the 'location' of the CSS file
+    //    selector:   the 'selector' that triggers the observer
+    //    rootMargin: the 'margin' before the load is trigged
+    //
+    // -------------------------------------------------------------------------
+    //
+    registerLazyLoadCss: function () {
+
+      console.log('register CSS files for lazy loading');
+
+      // load MDI Light CSS
+      //
+      j1.lazyCss().observe({
+        'src':        '/assets/themes/j1/core/css/icon-fonts/mdil.min.css',
+        'selector':   '.mdil',
+        'rootMargin': '150px 0px'
+      });
+
+      // load MDI Regular CSS
+      //
+      j1.lazyCss().observe({
+        'src':        '/assets/themes/j1/core/css/icon-fonts/mdi.min.css',
+        'selector':   '.mdi',
+        'rootMargin': '150px 0px'
+      });
+
+      // load FA CSS
+      //
+      j1.lazyCss().observe({
+        'src':        '/assets/themes/j1/core/css/icon-fonts/fontawesome.min.css',
+        'selector':   '.fa',
+        'rootMargin': '150px 0px'
+      });
+
+      // load rTable CSS
+      //
+      j1.lazyCss().observe({
+        'src':        '/assets/themes/j1/modules/rtable/css/theme/uno/rtable.min.css',
+        'selector':   '.rtable',
+        'rootMargin': '150px 0px'
+      });
+
+      // load CountryFlags CSS
+      //
+      j1.lazyCss().observe({
+        'src':        '/assets/themes/j1/core/country-flags/css/theme/uno.min.css',
+        'selector':   '.flag-icon',
+        'rootMargin': '150px 0px'
+      });
+
+    }, // END registerLazyLoadCss
+
     // -------------------------------------------------------------------------
     // registerMonitors()
     //
@@ -2778,7 +2837,12 @@ var j1 = (function (options) {
             }
 
             for (const {node, currentRect, previousRect} of entry.sources) {
-              if (node.hasOwnProperty('firstElementChild') && typeof node.firstElementChild != 'null' && typeof node.firstElementChild != 'undefined') {
+              var hasProperty = node.hasOwnProperty('firstElementChild');
+              if (hasProperty == null) {
+                hasProperty = false;
+              }
+
+              if (hasProperty) {
                 var id = '';
                 try {
                   id = node.firstElementChild.id;
@@ -2898,19 +2962,22 @@ var j1 = (function (options) {
       // run all observers for page monitoring
       // -----------------------------------------------------------------------
 
-      // monitor 'LCP'
-      //
-      performanceObserverLCP.observe({
-         type: 'largest-contentful-paint',
-         buffered: true
-      });
+      if (performance_monitors_enabled) {
+        // monitor 'LCP'
+        //
+        performanceObserverLCP.observe({
+           type: 'largest-contentful-paint',
+           buffered: true
+        });
 
-      // monitor 'CLS'
-      //
-      performanceObserverCLS.observe({
-         type: 'layout-shift',
-         buffered: true
-      });
+        // monitor 'CLS'
+        //
+        performanceObserverCLS.observe({
+           type: 'layout-shift',
+           buffered: true
+        });
+
+      } // END if 'performance_monitors'
 
       // monitor 'GROWTH'
       resizeObserver.observe(

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

@@ -290,7 +290,7 @@ j1.adapter.justifiedGalleryCustomizer = (function (j1, window) {
           // See: https://jsfiddle.net/prathviraj080/vbbbw46a/1/
           //
           $('button.drawer-toggler').click(function(){
-            $('button.drawer-toggler span.mdi').toggleClass('mdi-menu mdi-close');
+            $('button.drawer-toggler span.mdi').toggleClass('mdib-menu mdib-close');
           });
           $('button.drawer-toggler').click(function(){
             $('button.drawer-toggler').toggleClass('fadeIn rotateIn');

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

@@ -0,0 +1,221 @@
+---
+regenerate:                             true
+---
+
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ # ~/assets/themes/j1/adapter/js/lazyCSSLoader.js
+ # Liquid template to adapt the lazyCSS module(core)
+ #
+ # Product/Info:
+ # https://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 }}
+ #  wave_options:  {{ wave_options | debug }}
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Liquid procedures
+-------------------------------------------------------------------------------- {% endcomment %}
+
+{% comment %} Set global settings
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign environment          = site.environment %}
+{% assign asset_path           = "/assets/themes/j1" %}
+
+{% comment %} Process YML config data
+================================================================================ {% endcomment %}
+
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign template_config      = site.data.j1_config %}
+{% assign blocks               = site.data.blocks %}
+{% assign modules              = site.data.modules %}
+
+{% comment %} Set config data (settings only)
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign lazy_loader_defaults = modules.defaults.lazyLoader.defaults %}
+{% assign lazy_loader_settings = modules.lazyLoader.settings %}
+
+{% comment %} Set config options (settings only)
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign lazy_loader_options = lazy_loader_defaults | merge: lazy_loader_settings %}
+
+{% comment %} Detect prod mode
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign production = false %}
+{% if environment == 'prod' or environment == 'production' %}
+  {% assign production = true %}
+{% endif %}
+
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/themes/j1/adapter/js/lazyLoader.js
+ # J1 Adapter for the lazyLoader module (core)
+ #
+ # Product/Info:
+ # https://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
+ # -----------------------------------------------------------------------------
+ #  Adapter generated: {{site.time}}
+ # -----------------------------------------------------------------------------
+*/
+
+// -----------------------------------------------------------------------------
+// ESLint shimming
+// -----------------------------------------------------------------------------
+/* eslint indent: "off"                                                       */
+// -----------------------------------------------------------------------------
+'use strict';
+j1.adapter.lazyLoader = (function (j1, window) {
+
+{% comment %} Set global variables
+-------------------------------------------------------------------------------- {% endcomment %}
+var environment     = '{{environment}}';
+var cookie_names    = j1.getCookieNames();
+var user_state      = j1.readCookie(cookie_names.user_state);
+var lazyLoaderDefaults;
+var lazyLoaderSettings;
+var lazyLoaderOptions;
+var frontmatterOptions;
+var _this;
+var logger;
+var logText;
+
+  // ---------------------------------------------------------------------------
+  // Main object
+  // ---------------------------------------------------------------------------
+  return {
+
+    // -------------------------------------------------------------------------
+    // init()
+    // adapter initializer
+    // -------------------------------------------------------------------------
+    init: function (options) {
+
+      // -----------------------------------------------------------------------
+      // Default module settings
+      // -----------------------------------------------------------------------
+      var settings = $.extend({
+        module_name: 'j1.adapter.lazyLoader',
+        generated:   '{{site.time}}'
+      }, options);
+
+      // -----------------------------------------------------------------------
+      // Global variable settings
+      // -----------------------------------------------------------------------
+
+      // create settings object from module options
+      //
+      lazyLoaderDefaults = $.extend({}, {{lazy_loader_defaults | replace: 'nil', 'null' | replace: '=>', ':' }});
+      lazyLoaderSettings = $.extend({}, {{lazy_loader_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
+      lazyLoaderOptions  = $.extend(true, {}, lazyLoaderDefaults, lazyLoaderSettings);
+
+      _this  = j1.adapter.lazyLoader;
+      logger = log4javascript.getLogger('j1.adapter.lazyLoader');
+
+      var dependencies_met_lazy_loader = setInterval(function() {
+        var pageFinished = (j1.getState() == 'finished') ? true: false;
+
+        if (pageFinished) {
+
+          _this.setState('started');
+          logger.info('\n' + 'initialize moodule lazyLoader: started');
+
+          _this.registerLoaders(lazyLoaderOptions);
+
+          _this.setState('finished');
+          logger.info('\n' + 'initialize moodule lazyLoader: finished');
+          clearInterval(dependencies_met_lazy_loader);
+        }
+      }, 10);
+
+    }, // END init
+
+    // -------------------------------------------------------------------------
+    // registerLoaders()
+    // Lazy load CSS to speed up page rendering
+    //
+    // Requires the following settings:
+    //
+    //    src:        the 'location' of the CSS file
+    //    selector:   the 'selector' that triggers the observer
+    //    rootMargin: the 'margin' before the load is trigged
+    //
+    // -------------------------------------------------------------------------
+    //
+    registerLoaders: function () {
+      {% for loader in lazy_loader_options.loaders %} {% if loader.enabled %}
+        j1.lazyCSS().observe({
+          src:        '{{loader.src}}',
+          selector:   '{{loader.selector}}',
+          rootMargin: '{{loader.rootMargin}}'
+        });
+        logger.info('\n' + 'register lazy loading for: {{loader.description}}');
+      {% endif %} {% endfor %}
+    }, // END registerLoaders
+
+    // -------------------------------------------------------------------------
+    // messageHandler()
+    // 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 %}
+{% if production %}
+  {{ cache | minifyJS }}
+{% else %}
+  {{ cache | strip_empty_lines }}
+{% endif %}
+{% assign cache = nil %}

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

@@ -168,10 +168,10 @@ j1.adapter.lunr = (function (j1, window) {
       _this.modalScript.text += '{{#docs}}' + '\n';
       _this.modalScript.text += '  <li>' + '\n';
       _this.modalScript.text += '    <h4 class="result-item"> <a class="link-no-decoration" href="{{url}}" target="_blank">{{title}} · {{tagline}}</a> </h4>' + '\n';
-      _this.modalScript.text += '    <p class="result-item-text small text-muted mt-2 mb-0"> <i class="mdi mdi-calendar-blank mdi-18px mr-1"></i>{{displaydate}} </p>' + '\n';
+      _this.modalScript.text += '    <p class="result-item-text small text-muted mt-2 mb-0"> <i class="mdib mdib-calendar-blank mdib-18px mr-1"></i>{{displaydate}} </p>' + '\n';
       _this.modalScript.text += '    <p class="result-item-text">{{description}}</p>' + '\n';
-      _this.modalScript.text += '      <i class="mdi mdi-tag-text-outline mdi-18px mr-1"></i><span class="sr-categories">{{#categories}} {{.}} · {{/categories}}</span>' + '\n';
-      _this.modalScript.text += '      <i class="mdi mdi-tag mdi-18px mr-1 ml-2"></i><span class="sr-tags">{{#tags}} {{.}} · {{/tags}}</span>' + '\n';
+      _this.modalScript.text += '      <i class="mdib mdib-tag-text-outline mdib-18px mr-1"></i><span class="sr-categories">{{#categories}} {{.}} · {{/categories}}</span>' + '\n';
+      _this.modalScript.text += '      <i class="mdib mdib-tag mdib-18px mr-1 ml-2"></i><span class="sr-tags">{{#tags}} {{.}} · {{/tags}}</span>' + '\n';
       _this.modalScript.text += '    </p>' + '\n';
       _this.modalScript.text += '  </li>' + '\n';
       _this.modalScript.text += '{{/docs}}' + '\n';

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

@@ -487,11 +487,11 @@ j1.adapter.navigator = (function (j1, window) {
         if (user_session.authenticated === 'true') {
           // Set SignOut
           $('#navLinkSignInOut').attr('data-bs-target', '#modalOmniSignOut');
-          $('#iconSignInOut').removeClass('mdi-login').addClass('mdi-logout');
+          $('#iconSignInOut').removeClass('mdib-login').addClass('mdib-logout');
         } else {
           // Set SignIn
           $('#navLinkSignInOut').attr('data-bs-target', '#modalOmniSignIn');
-          $('#iconSignInOut').removeClass('mdi-logout').addClass('mdi-login');
+          $('#iconSignInOut').removeClass('mdib-logout').addClass('mdib-login');
         }
       }
 
@@ -889,11 +889,9 @@ j1.adapter.navigator = (function (j1, window) {
       style += '</style>';
       $('head').append(style);
 
-
-
 //    $('head').append('<style>.mdi-bg-primary {color: ' +bg_scrolled+ ';}</style>');
       style  = '<style>';
-      style += '  .mdi-bg-primary {';
+      style += '  var(--bg-primary) {';
       style += '    color: ' + bg_scrolled;
       style += '  }';
       style += '</style>';

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

@@ -164,7 +164,7 @@ var logText;
             //
             if ($('#quickLinksThemeTogglerButton').length) {
               if (user_state.theme_name == dark_theme_name) {
-                $('#quickLinksThemeTogglerButton a i').toggleClass('mdi-lightbulb mdi-lightbulb-outline');
+                $('#quickLinksThemeTogglerButton a i').toggleClass('mdib-lightbulb mdib-lightbulb-outline');
               }
             }
 
@@ -173,11 +173,11 @@ var logText;
               if (user_state.theme_name == light_theme_name) {
                 user_state.theme_name = dark_theme_name;
                 user_state.theme_css  = dark_theme_css;
-                user_state.theme_icon = 'mdi-lightbulb';
+                user_state.theme_icon = 'mdib-lightbulb';
               } else {
                 user_state.theme_name = light_theme_name;
                 user_state.theme_css  = light_theme_css;
-                user_state.theme_icon = 'mdi-lightbulb-outline';
+                user_state.theme_icon = 'mdib-lightbulb-outline';
               }
 
               logger.info('\n' + 'switch theme to: ' + user_state.theme_name);