j1-template 2022.0.1 → 2022.0.5

data/assets/themes/j1/core/js/template.js

@@ -2438,7 +2438,15 @@ module.exports = function navigator(options) {
     init: function init(defaultOptions, menuOptions) {
       logger = log4javascript.getLogger('j1.core.navigator');
       logText = 'core is being initialized';
-      logger.info(logText);
+      logger.info(logText); // -----------------------------------------------------------------------
+      // Create a Wrapper to suppress "DOM flicker"
+      // jadams, 2021-11-13: Since moved to bs@5, an overflow is on the
+      // HOME page, but NOT seen on any content page!
+      // Added overflow|hidden to the wrapper as a WORKAROUND!
+      // TODO: To be checked, why an overflow is seen on home page
+      // -----------------------------------------------------------------------
+
+      $('body').wrapInner('<div id="no_flicker" class="wrapper" style="overflow: hidden; display: none;"></div>');
       this.manageDropdownMenu(defaultOptions, menuOptions);
       this.navbarSticky();
       this.eventHandler(defaultOptions); // jadams, 2021-07-03: initialize events early
@@ -2456,6 +2464,12 @@ module.exports = function navigator(options) {
       var defaultOptions = options;
       var logger = log4javascript.getLogger('j1.core.navigator.eventHandler');
       var $getNav = $('nav.navbar.navigator');
+      var scrollDuration = 300;
+      var page_link;
+      var classname;
+      var nav_link;
+      var anchor_id;
+      var scrollOffset;
       var json_data; // jadams: unused code (for now).: manages HTML5 server side events
       // for incoming messages from Git Server send e.g. on a 'pull request'
       // NOTE: used for ControlCenter (cc) functionality only !!!
@@ -2496,12 +2510,72 @@ module.exports = function navigator(options) {
       // 'scroll-to-top'
       // See:
       //  https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+      //  https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
       //  https://stackoverflow.com/questions/134845/which-href-value-should-i-use-for-javascript-links-or-javascriptvoid0
       //
 
       $('a[href="#"]').click(function (e) {
-        logger.debug('\n' + 'click event on href "#" detected: prevent default action');
-        e.preventDefault ? e.preventDefault() : e.returnValue = false;
+        page_link = document.querySelector('[id="' + decodeURI(anchor_id).split('#').join('') + '"]') ? true : false;
+        anchor_id = e.target.hash ? e.target.hash : false;
+        classname = e.target.className ? e.target.className : '';
+        nav_link = classname.includes('nav-');
+
+        if (!nav_link || page_link) {
+          logger.debug('\n' + 'click event on href "#" detected: prevent default action');
+          e.preventDefault ? e.preventDefault() : e.returnValue = false;
+        }
+      }); // -----------------------------------------------------------------------
+      // In-page smooth scroll
+      // -----------------------------------------------------------------------
+      // bind click event to all headlines generated by AsciiDoctor
+      // for smooth-scroll (in-page)
+      //
+
+      $('.sect1, .sect2 .sect3, .sect4, .sect5, .sect6').on('click', function (e) {
+        page_link = document.querySelector('[id="' + decodeURI(anchor_id).split('#').join('') + '"]') ? true : false;
+        anchor_id = e.target.hash ? e.target.hash : false;
+        classname = e.target.className ? e.target.className : '';
+        nav_link = classname.includes('nav-link'); // skip BS nav links
+
+        scrollOffset = j1.getScrollOffset();
+
+        if (anchor_id && !nav_link || page_link) {
+          logger.debug('\n' + 'click event on headline detected: ' + anchor_id);
+          $('html, body').animate({
+            scrollTop: $(anchor_id).offset().top + scrollOffset
+          }, scrollDuration);
+          e.preventDefault ? e.preventDefault() : e.returnValue = false;
+        }
+      }); // bind click event to all HTML elements of class '.badge' (Bootstrap)
+      // for smooth-scroll (in-page) to a '<div>' element
+      //
+
+      $('.badge').on('click', function (e) {
+        anchor_id = e.target.hash ? e.target.hash : false;
+        scrollOffset = 100;
+
+        if (anchor_id) {
+          logger.debug('\n' + 'click event on badge detected: ' + anchor_id);
+          $('html, body').animate({
+            scrollTop: $(anchor_id).offset().top - scrollOffset // NOTE: diffeent scrollOffset
+
+          }, scrollDuration);
+          event.stopPropagation();
+        }
+      }); // bind click event to all HTML elements of class '.badge-tag' (j1)
+      // for smooth-scroll (in-page)
+
+      $('.badge-tag').on('click', function (e) {
+        anchor_id = e.target.hash ? e.target.hash : false;
+        scrollOffset = j1.getScrollOffset();
+
+        if (anchor_id) {
+          logger.debug('\n' + 'click event on badge-tag detected: ' + anchor_id);
+          $('html, body').animate({
+            scrollTop: $(anchor_id).offset().top + scrollOffset
+          }, scrollDuration);
+          event.stopPropagation();
+        }
       }); // jadams: test code for jQuery plugin 'regex'
       // -----------------------------------------------------------------------
       // $('a:contains("?#")').click(function(e) {
@@ -2615,87 +2689,91 @@ module.exports = function navigator(options) {
           }
         });
       } // -----------------------------------------------------------------------
-      // Toggle Search
+      // Manage events for all quicklinks
       // https://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery
       // https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
       // https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault
       // -----------------------------------------------------------------------
-      //    $('nav.navbar.navigator .attr-nav').each(function() {
 
 
       $('.attr-nav').each(function () {
-        logger.debug('register OPEN event|s for QuickSearch');
-        $('li.search > a', this).on('click', function (e) {
-          // e.preventDefault(); // don't do the default browser action
-          logger.debug('manage search action OPEN');
-          $('html,body').animate({
-            scrollTop: 0
-          }, 0);
-          $('.top-search').slideToggle('slow', 'swing', function () {
-            if ($('.top-search').is(':visible')) {
-              // disable scrolling (desktop)
-              $('body').addClass('stop-scrolling'); // disable scrolling (mobile)
-
-              $('body').bind('touchmove', function (e) {
-                e.preventDefault();
-              }); // disable navbar
-
-              $('#' + defaultOptions.nav_bar.container_id).hide();
-            } else {
-              // enable scrolling (desktop)
-              $('body').removeClass('stop-scrolling'); // enable scrolling (mobile)
+        // ---------------------------------------------------------------------
+        // QuickSearch
+        //
+        if ($('li.quicksearch')) {
+          logger.debug('register OPEN event for QuickSearch');
+          $('li.quicksearch > a', this).on('click', function (e) {
+            e.preventDefault(); // don't do the default browser action
 
-              $('body').unbind('touchmove'); // enable navbar
+            logger.debug('manage search action OPEN');
+            $('html,body').animate({
+              scrollTop: 0
+            }, 0);
+            $('.top-search').slideToggle('slow', 'swing', function () {
+              if ($('.top-search').is(':visible')) {
+                // disable scrolling (desktop)
+                $('body').addClass('stop-scrolling'); // disable scrolling (mobile)
 
-              $('#' + defaultOptions.nav_bar.container_id).show();
-            }
-          }); // e.stopPropagation(); // don't bubble up the event
-        });
-      });
-      logger.debug('register CLOSE event|s for QuickSearch');
-      $('.input-group-addon.close-search').on('click', function (e) {
-        e.preventDefault(); // don't do the default browser action
+                $('body').bind('touchmove', function (e) {
+                  e.preventDefault();
+                }); // disable navbar
 
-        logger.debug('manage search action CLOSE');
-        $('.top-search').slideUp('slow', 'swing');
-        $('html,body').animate({
-          scrollTop: 0
-        }, 0); // enable scrolling (desktop)
+                $('#' + defaultOptions.nav_bar.container_id).hide();
+              } else {
+                // enable scrolling (desktop)
+                $('body').removeClass('stop-scrolling'); // enable scrolling (mobile)
 
-        $('body').removeClass('stop-scrolling'); // enable scrolling (mobile)
+                $('body').unbind('touchmove'); // enable navbar
 
-        $('body').unbind('touchmove'); // enable navbar
+                $('#' + defaultOptions.nav_bar.container_id).show();
+              }
+            });
+            e.stopPropagation(); // don't bubble up the event
+          });
+          logger.debug('register CLOSE event for QuickSearch');
+          $('.input-group-addon.close-search').on('click', function (e) {
+            e.preventDefault(); // don't do the default browser action
 
-        $('#' + defaultOptions.nav_bar.container_id).show();
-        e.stopPropagation(); // don't bubble up the event
-      }); // -----------------------------------------------------------------------
-      // Toggle Translator SHOW|HIDE
-      // -----------------------------------------------------------------------
+            logger.debug('manage search action CLOSE');
+            $('.top-search').slideUp('slow', 'swing');
+            $('html,body').animate({
+              scrollTop: 0
+            }, 0); // enable scrolling (desktop)
 
-      $('nav.navbar.navigator .attr-nav').each(function () {
-        logger.debug('register SHOW|HIDE event|s for J1 Translator');
-        $('li.translator > a', this).on('click', function (e) {
-          // e.preventDefault(); // don't do the default browser action
-          // window.location.reload(true);
-          logger.debug('toggle translator icon SHOW|HIDE'); // See: https://api.jquery.com/toggle/
-          // With no parameters, the .toggle() method simply toggles the visibility of elements
+            $('body').removeClass('stop-scrolling'); // enable scrolling (mobile)
 
-          $('#google_translate_element').toggle();
+            $('body').unbind('touchmove'); // enable navbar
 
-          if ($('#google_translate_element').css('display') !== 'none') {
-            $('html,body').animate({
-              scrollTop: 0
-            }, 'slow');
-          } // e.stopPropagation(); // don't bubble up the event
+            $('#' + defaultOptions.nav_bar.container_id).show();
+            e.stopPropagation(); // don't bubble up the event
+          });
+        } // END QuickSearch
+        // ---------------------------------------------------------------------
+        // Translator
+        //
 
-        });
-      }); // -----------------------------------------------------------------------
-      // Wrapper
-      // -----------------------------------------------------------------------
 
-      $('body').wrapInner('<div class=\'wrapper\'></div>');
+        if ($('li.translate')) {
+          logger.debug('register SHOW event for J1 Translator');
+          $('li.translate > a', this).on('click', function (e) {
+            j1.translator.showDialog();
+          });
+        } // END Translator
+        // ---------------------------------------------------------------------
+        // CookieConsent
+        //
+
+
+        if ($('li.cookie-consent')) {
+          logger.debug('register SHOW event for J1 CookieConsent');
+          $('li.cookie-consent > a', this).on('click', function (e) {
+            j1.cookieConsent.showDialog();
+          });
+        } // END CookieConsent
+
+      }); // End manage events for all quicklinks
     },
-    // end event
+    // END eventHandler
     // -------------------------------------------------------------------------
     // Manage the Menu Dropdowns for Desktop|Mobile
     // -------------------------------------------------------------------------