j1-template 2024.3.13 → 2024.3.14

data/assets/theme/j1/adapter/js/attic.js

@@ -169,8 +169,8 @@ j1.adapter.attic = ((j1, window) => {
             // jadams, 2023-05-12: page visible while loading the attic
             // cause high numbers for cumulative layout shift (CLS)
             //
-            logger.debug('\n' + 'hide attic on initialization');
-            $('#no_flicker').css('display', 'none');
+            // logger.debug('\n' + 'hide attic on initialization');
+            // $('#no_flicker').css('display', 'none');
           }
 
           _this.createAllAttics();
@@ -664,15 +664,18 @@ j1.adapter.attic = ((j1, window) => {
 
             // start RUNNER on page 'ready'|module state 'initialized'
             //
-            $(() => {
-              var dependencies_met_attic_ready = setInterval (() => {
-                if (_this.getState() === 'initialized') {
-                  logger.info('\n' + 'initialize attic on id {{attic_id}}: started');
-                  {{attic_id}}_runner (atticOptions);
-                  clearInterval(dependencies_met_attic_ready);
-                }
-              }, 10);
-            });
+            // $(() => {
+            //   var dependencies_met_attic_ready = setInterval (() => {
+            //     if (_this.getState() === 'initialized') {
+            //       logger.info('\n' + 'initialize attic on id {{attic_id}}: started');
+            //       {{attic_id}}_runner (atticOptions);
+            //       clearInterval(dependencies_met_attic_ready);
+            //     }
+            //   }, 10);
+            // });
+
+            logger.info('\n' + 'initialize attic on id {{attic_id}}: started');
+            {{attic_id}}_runner (atticOptions);
 
           } // END apply CSS styles|start ATTIC RUNNER
 

data/assets/theme/j1/adapter/js/docsearch.js

@@ -146,9 +146,9 @@ var timeSeconds;
         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;
+        // var atticFinished  = (j1.adapter.attic.getState() === 'finished') ? true: false;
 
-        if (j1CoreFinished && pageVisible && atticFinished) {
+        if (j1CoreFinished && pageVisible) {
           startTimeModule = Date.now();
 
           _this.setState('started');

data/assets/theme/j1/adapter/js/fab.js

@@ -160,9 +160,9 @@ j1.adapter.fab = ((j1, window) => {
         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;
+        // var atticFinished  = (j1.adapter.attic.getState() === 'finished') ? true: false;
 
-        if (pageVisible && j1CoreFinished && atticFinished) {
+        if (pageVisible && j1CoreFinished) {
           startTimeModule = Date.now();
 
           _this.setState('started');

data/assets/theme/j1/adapter/js/j1.js

@@ -564,9 +564,9 @@ var j1 = ((options) => {
               var pageState       = $('#no_flicker').css("display");
               var pageVisible     = (pageState == 'block') ? true : false;
               var j1CoreFinished  = (j1.getState() == 'finished') ? true : false;
-              var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true: false;
+              // var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true: false;
 
-              if (j1CoreFinished && pageVisible && atticFinished) {
+              if (j1CoreFinished && pageVisible) {
                 startTimeModule = Date.now();
 
                 banner_blocks   = document.querySelectorAll('[id^="banner"]').length;
@@ -732,9 +732,9 @@ var j1 = ((options) => {
         var pageState       = $('#no_flicker').css("display");
         var pageVisible     = (pageState == 'block') ? true : false;
         var j1CoreFinished  = (j1.getState() == 'finished') ? true : false;
-        var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true: false;
+        // var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true: false;
 
-        if (pageVisible && atticFinished) {
+        if (pageVisible) {
           startTimeModule = Date.now();
 
           logger.info('\n' + 'page is being initialized');
@@ -1355,9 +1355,9 @@ var j1 = ((options) => {
             var pageState       = $('#no_flicker').css("display");
             var pageVisible     = (pageState == 'block') ? true: false;
             var j1CoreFinished  = (j1.getState() == 'finished') ? true : false;
-            var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true: false;
+            // var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true: false;
 
-            if (j1CoreFinished && pageVisible && atticFinished) {
+            if (j1CoreFinished && pageVisible) {
               setTimeout(() => {
                 // scroll to an anchor in current page if given in URL
                 j1.scrollToAnchor();
@@ -1552,9 +1552,9 @@ var j1 = ((options) => {
           var pageState      = $('#no_flicker').css("display");
           var pageVisible    = (pageState == 'block') ? true: false;
           var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
-          var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true: false;
+          // var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true: false;
 
-          if (j1CoreFinished && pageVisible && atticFinished) {
+          if (j1CoreFinished && pageVisible) {
             setTimeout(() => {
               // scroll to an anchor in current page if given in URL
               j1.scrollToAnchor();

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

@@ -6,8 +6,8 @@ regenerate:                             true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/adapter/js/lazyCSSLoader.js
- # Liquid template to adapt the lazyCSS module(core)
+ # ~/assets/theme/j1/adapter/js/lazyLoader.js
+ # Liquid template to adapt the J1 lazyLoader module
  #
  # Product/Info:
  # https://jekyll.one
@@ -58,7 +58,7 @@ regenerate:                             true
 /*
  # -----------------------------------------------------------------------------
  # ~/assets/theme/j1/adapter/js/lazyLoader.js
- # J1 Adapter for the lazyLoader module (core)
+ # J1 Adapter for the J1 lazyLoader module
  #
  # Product/Info:
  # https://jekyll.one
@@ -77,7 +77,7 @@ regenerate:                             true
 // -----------------------------------------------------------------------------
 /* eslint indent: "off"                                                       */
 // -----------------------------------------------------------------------------
-"use strict";
+`use strict`;
 j1.adapter.lazyLoader = ((j1, window) => {
 
 {% comment %} Set global variables
@@ -175,15 +175,65 @@ var timeSeconds;
     //
     registerLoaders: () => {
       {% 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}}');
+
+        {% if loader.type == 'css' %}
+          _this.cssLoader().observe({
+            src:        '{{loader.src}}',
+            selector:   '{{loader.selector}}',
+            rootMargin: '{{loader.rootMargin}}'
+          });
+          logger.info('\n' + 'register lazy loading for: {{loader.description}}');
+        {% endif %}
+
       {% endif %} {% endfor %}
     }, // END registerLoaders
 
+    // -------------------------------------------------------------------------
+    // cssLoader()
+    // Lazy load CSS to speed up page rendering
+    //
+    cssLoader: () => {
+      let options = {};
+
+      const observe = (opt) => {
+        options = opt;
+
+        (('IntersectionObserver' in window) ? cssObserver : doNothing) ();
+      }
+
+      const doNothing = () => {
+        observe = false;
+      }
+
+      const cssDomLink = () => {
+          let link = document.createElement('link');
+          let id = 'lazy' + options.selector;
+          link.id = id.replace('.', '_');;
+          link.rel = 'stylesheet';
+          link.type = 'text/css';
+          link.href = options.src;
+          document.head.appendChild(link);
+          logger.info('\n' + 'lazy load of type ' + link.rel + ': ' + link.href);
+      }
+
+      const cssObserver = () => {
+          let selectors = document.querySelectorAll(options.selector);
+          let observer = new IntersectionObserver((entry, observer) => {
+            if (entry[0].intersectionRatio > 0) {
+                cssDomLink();
+                sessionStorage[options.selector] = true;
+                observer.disconnect();
+            }
+          }, { rootMargin: options.rootMargin });
+
+          selectors.forEach(selector => {
+              observer.observe(selector);
+          });
+      }
+
+      return { observe };
+    },
+
     // -------------------------------------------------------------------------
     // messageHandler()
     // manage messages send from other J1 modules

data/assets/theme/j1/adapter/js/masonry.js

@@ -153,7 +153,7 @@ j1.adapter.masonry = ((j1, window) => {
         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;
+        // var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
         if (j1CoreFinished && pageVisible) {
           startTimeModule = Date.now();

data/assets/theme/j1/adapter/js/masterslider.js

@@ -164,9 +164,9 @@ j1.adapter.masterslider = ((j1, window) => {
         var pageVisible    = (pageState === 'block') ? true : false;
         var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
         var dataLoaded     = (_this.getState() === 'data_loaded') ? true : false;
-        var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
+        // var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
-        if (pageVisible && j1CoreFinished && dataLoaded && atticFinished) {
+        if (pageVisible && j1CoreFinished && dataLoaded) {
           startTimeModule = Date.now();
 
           _this.setState('started');

data/assets/theme/j1/adapter/js/particles.js

@@ -146,9 +146,9 @@ j1.adapter.particles = ((j1, window) => {
         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;
+        // var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
-        if (j1CoreFinished && pageVisible && atticFinished) {
+        if (j1CoreFinished && pageVisible) {
           startTimeModule = Date.now();
 
           var obj;

data/assets/theme/j1/adapter/js/scroller.js

@@ -150,9 +150,9 @@ j1.adapter.scroller = ((j1, window) => {
         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;
+        // var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
-        if (j1CoreFinished && pageVisible && atticFinished) {
+        if (j1CoreFinished && pageVisible) {
           startTimeModule = Date.now();
 
           _this.setState('started');

data/assets/theme/j1/adapter/js/slick.js

@@ -179,9 +179,9 @@ j1.adapter.slick = ((j1, window) => {
         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;
+        // var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
-        if (j1CoreFinished && pageVisible && atticFinished) {
+        if (j1CoreFinished && pageVisible) {
           startTimeModule = Date.now();
 
           _this.setState('started');

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

@@ -242,7 +242,7 @@ j1.adapter.themes = (function (j1, window) {
 //      var pageState           = $('#no_flicker').css("display");
         var pageVisible         = (pageState === 'block') ? true : false;
         var j1CoreFinished      = (j1.getState() === 'finished') ? true : false;
-        var atticFinished       = (j1.adapter.attic.getState() === 'finished') ? true: false;
+//      var atticFinished       = (j1.adapter.attic.getState() === 'finished') ? true: false;
 //      var userStateDetected   = j1.existsCookie(cookie_names.user_state);
 
         // counter how often the check should be done for the existence

data/assets/theme/j1/adapter/js/translator.js

@@ -197,9 +197,9 @@ j1.adapter.translator = (function (j1, window) {
         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;
+        // var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
-        if (j1CoreFinished && pageVisible && atticFinished) {
+        if (j1CoreFinished && pageVisible) {
 
           var expires       = '{{cookie_options.expires}}';
           var same_site     = '{{cookie_options.same_site}}';

data/assets/theme/j1/adapter/js/waves.js

@@ -157,7 +157,7 @@ j1.adapter.waves = ((j1, window) => {
         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;
+        // var atticFinished   = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
         if (j1CoreFinished && pageVisible) {
           startTimeModule = Date.now();