j1-template 2022.3.1 → 2022.4.0

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

@@ -134,26 +134,41 @@ var j1 = (function () {
   // ---------------------------------------------------------------------------
   // globals
   // ---------------------------------------------------------------------------
+  // base page resources
   var rePager                     =  new RegExp('navigator|dateview|tagview|archive');
   var environment                 = '{{environment}}';
   var moduleOptions               = {};
   var j1_runtime_data             = {};
+  var _this;
+  var settings;
+  var json_data;
+  var ep;
+  var baseUrl;
+  var referrer;
 
-  // Status information
+  // defaults for status information
   var state                       = 'not_started';
   var mode                        = 'not_detected';
 
-  // Default tracking provider information
-  // var tracking_enabled            = ('{{tracking_enabled}}' === 'true') ? true: false;
-  // var tracking_id                 = '{{tracking_id}}';
-  // var tracking_id_valid           = (tracking_id.includes('tracking-id')) ? false : true;
+  // defaults for tracking providers
+  var tracking_enabled            = ('{{tracking_enabled}}' === 'true') ? true: false;
+  var tracking_id                 = '{{tracking_id}}';
+  var tracking_id_valid           = (tracking_id.includes('tracking-id')) ? false : true;
 
-  // Default comment provider information
+  // defaults for comment providers
   var comment_provider            = '{{comment_provider}}';
   var site_id                     = '{{site_id}}';
   var checkCookies                = {{cookie_options.checkCookies}};
   var expireCookiesOnRequiredOnly = ('{{cookie_options.expireCookiesOnRequiredOnly}}' === 'true') ? true: false;
 
+  // defaults for dynamic pages
+  var autoScrollRatioThreshold    = '{{template_config.autoScrollRatioThreshold}}';
+  var pageGrowthRatio             = 0;                                          // ratio a dynamic page has grown in height
+  var pageBaseHeigth              = 0;  	                                      // base height of  a dynamic page
+  var staticPage                  = false;                                      // defalt: false, but decided in ResizeObserver
+  var pageHeight;                                                               // height of a page dynamic detected in ResizeObserver
+
+  // defaults for the cookie management
   var current_user_data;
   var current_page;
   var previous_page;
@@ -163,30 +178,23 @@ var j1 = (function () {
   var user_session_detected;
   var cookie_written;
 
-  // Theme information
+  // defaults for themes
   var themeName;
   var themeCss;
   var cssExtension              = (environment === 'production')
                                   ? '.min.css'
                                   : '.css'
 
-   // Pathes of J1 data files
+  // defaults for data files
   var colors_data_path          = '{{template_config.colors_data_path}}';
   var font_size_data_path       = '{{template_config.font_size_data_path}}';
   var runtime_data_path         = '{{template_config.runtime_data_path}}';
   var message_catalog_data_path = '{{template_config.message_catalog_data_path}}';
 
-  // Logger
+  // Logger resources
   var logger;
   var logText;
 
-  var _this;
-  var settings;
-  var json_data;
-  var ep;
-  var baseUrl;
-  var referrer;
-
   // initial cookie settings
   var cookie_names = {
     'app_session':    '{{template_config.cookies.app_session}}',
@@ -282,44 +290,6 @@ var j1 = (function () {
       j1['xhrDataState'] = {};
       j1['xhrDOMState']  = {};
 
-      // -----------------------------------------------------------------------
-      // final updates before browser page|tab
-      // see: https://stackoverflow.com/questions/3888902/detect-browser-or-tab-closing
-      // -----------------------------------------------------------------------
-      window.addEventListener('beforeunload', function (event) {
-        var cookie_names              = j1.getCookieNames();
-        var date                      = new Date();
-        var timestamp_now             = date.toISOString();
-        var user_state                = j1.readCookie(cookie_names.user_state);
-        var user_consent              = j1.readCookie(cookie_names.user_consent);
-        var ep_status;
-        var url;
-        var baseUrl;
-
-        // final update of the user state cookie
-        user_state.session_active     = false;
-        user_state.last_session_ts    = timestamp_now;
-
-        if (!user_consent.analysis || !user_consent.personalization) {
-          logger.debug('\n' + 'write to cookie : ' + cookie_names.user_state);
-
-          cookie_written = j1.writeCookie({
-            name:     cookie_names.user_state,
-            data:     user_state,
-            secure:   secure,
-            expires:  0
-          });
-        } else {
-          logger.debug('\n' + 'write to cookie : ' + cookie_names.user_state);
-          cookie_written = j1.writeCookie({
-            name:     cookie_names.user_state,
-            data:     user_state,
-            secure:   secure,
-            expires:  365
-          });
-        }
-      }); // END beforeunload
-
       // -----------------------------------------------------------------------
       // initialize|load user cookies
       // -----------------------------------------------------------------------
@@ -354,11 +324,7 @@ var j1 = (function () {
         }
       }
 
-      // initialize event handler for window/history/back on <ESC>
-      // -----------------------------------------------------------------------
-      window.onkeyup = function (event) {
-        if (event.keyCode == 27) window.history.back();
-      };
+      j1.registerEvents(logger);
 
       // detect middleware (mode 'app') and update user session cookie
       // -----------------------------------------------------------------------
@@ -988,12 +954,16 @@ var j1 = (function () {
             logText = '\n' + 'page finalized successfully';
             logger.info(logText);
 
-            // do a (smooth) scroll if all nav elements ready
+            // do a (smooth) scroll for static pages (if all nav elements ready)
             // -----------------------------------------------------------------
             var dependencies_met_navigator_finished = setInterval(function() {
-              if (j1.adapter.navigator.getState() == 'finished') {
+              // NOTE: dynamic pages scrolled at a growth ratio of 100 percent as well
+              if (j1.adapter.navigator.getState() == 'finished' && staticPage) {
                 // if a page requested contains an anchor element, do a smooth scroll
-                j1.scrollTo();
+                logger.debug('\n' + 'Scroll static page, growth ratio at 100 (percent)');
+                // NOTE: on some pages, the offset is NOT correct
+                var scrollOffset = j1.getScrollOffset();
+                j1.scrollTo(scrollOffset);
                 clearInterval(dependencies_met_navigator_finished);
               }
             }, 25);
@@ -1003,7 +973,6 @@ var j1 = (function () {
         // web mode
         // ---------------------------------------------------------------------
         setTimeout (function() {
-          // j1.setState('finished');
           logger.info('\n' + 'state: finished');
           logger.info('\n' + 'page initialization: finished');
 
@@ -1129,15 +1098,19 @@ var j1 = (function () {
           logText = '\n' + 'page finalized successfully';
           logger.info(logText);
 
-          // do a (smooth) scroll if all nav elements ready
+          // do a (smooth) scroll for static pages (if all nav elements ready)
           // -------------------------------------------------------------------
           var dependencies_met_navigator_finished = setInterval(function() {
-            if (j1.adapter.navigator.getState() == 'finished') {
+            if (j1.adapter.navigator.getState() == 'finished' && staticPage) {
+              logger.debug('\n' + 'Scroll static page, growth ratio at 100 (percent)');
               // if a page requested contains an anchor element, do a smooth scroll
-              j1.scrollTo();
+              // NOTE: on some pages, the offset is NOT correct
+              var scrollOffset = j1.getScrollOffset();
+              j1.scrollTo(scrollOffset);
               clearInterval(dependencies_met_navigator_finished);
             }
           }, 25);
+
         }, flickerTimeout);
       }
     },
@@ -1191,11 +1164,11 @@ var j1 = (function () {
 
     // -------------------------------------------------------------------------
     // getScrollOffset()
-    // Calculate offset for correct (smooth) scroll position
+    // Calculate offset for a correct (smooth) scroll position
     // -------------------------------------------------------------------------
     getScrollOffset: function () {
       var scrollOffset;
-      var offsetCorrection;
+      var offsetCorrection = 0;
 
       var $pagehead     = $('.attic');
       var $navbar       = $('nav.navbar');
@@ -1210,8 +1183,10 @@ var j1 = (function () {
 
       // Unclear why or what element cause the need of a correction
       // TODO: General revision of scrollOffset needed
+      // NOTE: Disabled for now
       //
-      offsetCorrection  = navbarType == 'fixed' ? 10 : -25;
+      // offsetCorrection  = navbarType == 'fixed' ? 10 : -25;
+
       scrollOffset      = navbarType == 'fixed'
                             ? -1*(n + a + f) + offsetCorrection
                             : -1*(n + a + f) + h + offsetCorrection;
@@ -1224,23 +1199,25 @@ var j1 = (function () {
     // Scrolls smooth to any anchor referenced by an page URL on
     // e.g. a page reload. Values e.g for delay are taken from
     // TOCCER module
+    // NOTE: crollTo() is triggered by 'onDocumentHeigthChange'
     // -------------------------------------------------------------------------
-    scrollTo: function () {
+    scrollTo: function (offset) {
       var logger          = log4javascript.getLogger('j1.scrollTo');
       var anchor          = window.location.href.split('#')[1];
       var anchor_id       = typeof anchor !== 'undefined' ? '#' + anchor : false;
       var scrollDuration  = {{toccer_options.scrollSmoothDuration}};
-      var scrollOffset    = j1.getScrollOffset();
+      var scrollOffset    = offset ; // j1.getScrollOffset();
       var isSlider        = false;
-      var selector;
+      var selector        = $(anchor_id);
 
-      if (typeof anchor === 'undefined') {
-        return false;
-      } else if (anchor.includes("googtrans")) {
+      // skip invalid anchors|selectors
+      //
+      if (typeof anchor === 'undefined' || anchor.includes('googtrans') || !$(selector).length) {
         return false;
       }
 
       // Check if the anchor is an slider/gallery element
+      //
       if (typeof anchor !== 'undefined') {
         isSlider = anchor.includes('slide');
       }
@@ -1249,6 +1226,7 @@ var j1 = (function () {
         // scroll only, if an anchor is given with an URL
         selector = $(anchor_id);
         if (selector.length) {
+          logger.info('\n' + 'scrollTo header: ' + anchor_id);
           j1.core.scrollSmooth.scroll(anchor_id, {
             duration:   scrollDuration,
             offset:     scrollOffset,
@@ -2251,6 +2229,7 @@ var j1 = (function () {
         window.location.href = 'about:blank';
       }
     },
+
     // -------------------------------------------------------------------------
     // goBack()
     // Redirect current page to last visited page (referrer)
@@ -2258,6 +2237,102 @@ var j1 = (function () {
     goBack: function () {
       // where visitor has come from
       window.location.href = document.referrer;
+    },
+
+    // -------------------------------------------------------------------------
+    // registerEvents()
+    // Redirect current page to last visited page (referrer)
+    // -------------------------------------------------------------------------
+    registerEvents: function (logger) {
+
+      // Add ResizeObserver to monitor the page height of dynamic pages
+      // see: https://stackoverflow.com/questions/14866775/detect-document-height-change
+      //
+      const observer = new ResizeObserver(entries => {
+        const scrollOffset = j1.getScrollOffset();
+        // Set autoScrollRatioThreshold if NOT specified
+        autoScrollRatioThreshold = autoScrollRatioThreshold ? autoScrollRatioThreshold : 100;
+        for (const entry of entries) {
+
+          // each entry is an instance of ResizeObserverEntry
+          pageHeight = Math.round(entry.contentRect.height);
+
+          // set base height on a page height <> 0
+          if (!pageBaseHeigth && pageHeight) {
+            pageBaseHeigth = pageHeight;
+          }
+
+          // calculation of the ratio a page that has lengthened
+          if (pageBaseHeigth) {
+            pageGrowthRatio = Math.round(pageHeight / pageBaseHeigth *100);
+          }
+
+          // log only if page grown above 'autoScrollRatioThreshold'
+          if (pageGrowthRatio > autoScrollRatioThreshold) {
+            logger.debug('\n' + 'Page growth ratio reached the threshold: ', pageGrowthRatio);
+          }
+
+          // identify a 'staticPage'
+          if (pageGrowthRatio < autoScrollRatioThreshold) {
+            staticPage = true;
+          } else {
+            // identify a page as 'dynamic' if autoScrollRatioThreshold reached
+            staticPage = false;
+          }
+
+          // dynamic page that has been increased in size above the threshold
+          if (pageGrowthRatio > autoScrollRatioThreshold) {
+            j1.scrollTo(scrollOffset);
+            logger.debug('\n' + 'Scroll dynamic page on growth ratio: ', pageGrowthRatio);
+          }
+        }
+      });
+      // monitor the page 'body'
+      observer.observe(document.querySelector('body'));
+
+      // -----------------------------------------------------------------------
+      // final updates before browser page|tab
+      // see: https://stackoverflow.com/questions/3888902/detect-browser-or-tab-closing
+      // -----------------------------------------------------------------------
+      window.addEventListener('beforeunload', function (event) {
+        var cookie_names  = j1.getCookieNames();
+        var date          = new Date();
+        var timestamp_now = date.toISOString();
+        var user_state    = j1.readCookie(cookie_names.user_state);
+        var user_consent  = j1.readCookie(cookie_names.user_consent);
+        var url           = new liteURL(window.location.href);
+        var secure        = (url.protocol.includes('https')) ? true : false;
+        var ep_status;
+        var url;
+        var baseUrl;
+
+        // final update of the user state cookie
+        user_state.session_active     = false;
+        user_state.last_session_ts    = timestamp_now;
+
+        if (!user_consent.analysis || !user_consent.personalization) {
+
+          cookie_written = j1.writeCookie({
+            name:     cookie_names.user_state,
+            data:     user_state,
+            secure:   secure,
+            expires:  0
+          });
+        } else {
+          cookie_written = j1.writeCookie({
+            name:     cookie_names.user_state,
+            data:     user_state,
+            secure:   secure,
+            expires:  365
+          });
+        }
+      }); // END beforeunload
+
+      // initialize event handler for window/history/back on <ESC>
+      //
+      window.onkeyup = function (event) {
+        if (event.keyCode == 27) window.history.back();
+      };
     }
   };
 }) (j1, window);

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

@@ -275,7 +275,8 @@ j1.adapter.mmenu = (function (j1, window) {
 
             const drawer_{{menu_id}} = mmenu_{{menu_id}}.offcanvas ({
               // drawer options
-              position: mmOptions.mmenu_drawer.position
+              position: mmOptions.mmenu_drawer.position,
+              toggle_mode: false
             });
 
             const navigator_{{menu_id}} = mmenu_{{menu_id}}.navigation ({
@@ -286,19 +287,40 @@ j1.adapter.mmenu = (function (j1, window) {
               theme:            mmOptions.mmenu_navigator.theme
             });
 
+            // make sure the QL menu is shown, if mmenu is closed
+            // by mmenu backdrop
+            //
+            $(".mm-ocd").click(function() {
+              $('#quicklinks').show();
+              return false
+            });
+
             // Toggle Bars (Hamburger) for the NavBar to open|close
             // the mmenu drawer
+            //
             $('{{item.menu.content.button}}').each(function(e) {
               var $this = $(this);
+              var clicked;
 
-              $this.on('click', function(e){
+              $this.on('click', function(e) {
                 const button_{{menu_id}} = this;
                 e.preventDefault();
-                drawer_{{menu_id}}.open();
+                // toggle mmenu open|clse
+                clicked = $('body.mm-ocd-opened').length ? true : false;
+                if (clicked) {
+                  drawer_{{menu_id}}.close();
+                  $('#quicklinks').show();
+                  clicked = false;
+                } else {
+                  $('#quicklinks').hide();
+                  drawer_{{menu_id}}.open();
+                  clicked = true;
+                }
               });
             });
 
             // jadams, 2020-09-30: loading the menues (themes) if enabled
+            //
             if (themerEnabled) {
               // load REMOTE themes from Bootswatch API (localFeed EMPTY!)
               $('#remote_themes_mmenu').bootstrapThemeSwitcher({

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

@@ -716,8 +716,8 @@ j1.adapter.navigator = (function (j1, window) {
 
       // navQuicklinks styles
       // -----------------------------------------------------------------------
-      $('head').append('<style>.attr-nav> ul > li > a { color: ' +navQuicklinksOptions.icon_color+ ' !important; }</style>');
-      $('head').append('<style>.attr-nav> ul > li > a:hover { color: ' +navQuicklinksOptions.icon_color_hover+ ' !important; }</style>');
+      $('head').append('<style>.quicklink-nav> ul > li > a { color: ' +navQuicklinksOptions.icon_color+ ' !important; }</style>');
+      $('head').append('<style>.quicklink-nav> ul > li > a:hover { color: ' +navQuicklinksOptions.icon_color_hover+ ' !important; }</style>');
 
       // navMenu styles
       // -----------------------------------------------------------------------