j1_template_mde 2018.4.15 → 2018.4.16

data/lib/starter_web/assets/themes/j1/core/js/adapter/navigator.js.failed

@@ -0,0 +1,797 @@
+---
+regenerate:                             true
+---
+
+{% capture cache %}
+
+{% comment %}
+ # -----------------------------------------------------------------------------
+ #  ~/assets/themes/j1/core/js/adapter/navigator.js
+ #  Liquid template to create the Template Adapter for J1 Navigator
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2019 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  For details, see https://jekyll.one
+ #
+ # -----------------------------------------------------------------------------
+ # Test data:
+ #  {{ liquid_var | debug }}
+ #
+ # -----------------------------------------------------------------------------
+{% endcomment %}
+
+{% comment %} Variables
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign environment              = site.environment %}
+{% assign debug                    = navigator_config.debug %}
+{% assign brand_image_height       = site.brand.image_height %}
+
+{% assign auth_config_provider     = site.j1_auth.providers %}
+{% assign navigator_config         = site.data.modules.j1_navigator %}
+{% assign nav_defaults             = navigator_config.defaults %}
+{% assign nav_bar_config           = navigator_config.nav_bar %}
+{% assign nav_menu_config          = navigator_config.nav_menu %}
+{% assign nav_quicklinks_config    = navigator_config.nav_quicklinks %}
+{% assign nav_topsearch_config     = navigator_config.nav_topsearch %}
+{% assign nav_sidebar_config       = navigator_config.nav_sidebar %}
+{% assign nav_authclient_config    = navigator_config.nav_authclient %}
+
+{% if nav_bar_config.dropdown_animate_duration != null %}
+ {% assign animate_duration       = nav_bar_config.dropdown_animate_duration %}
+{% else %}
+ {% assign animate_duration       = 1 %}
+{% endif %}
+
+{% comment %}
+Set|Overload Liquid vars hardwired to NOT break the (MD) style
+ToDo: Remove configuration from j1_navigator.yml
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign dropdown_border_height            = "3" %}
+
+/*
+ # -----------------------------------------------------------------------------
+ #  ~/assets/themes/j1/core/js/adapter/navigator.js
+ #  JS Adapter for J1 Navigator
+ #
+ #  Product/Info:
+ #  https://jekyll.one
+ #
+ #  Copyright (C) 2019 Juergen Adams
+ #
+ #  J1 Template is licensed under the MIT License.
+ #  For details, see https://jekyll.one
+ #
+ # -----------------------------------------------------------------------------
+ #  Adapter generated: {{site.time}}
+ # -----------------------------------------------------------------------------
+*/
+'use strict';
+
+j1.Navigator = (function (j1, window) {
+  var environment                 = '{{environment}}'; // Set environment
+  var state                       = 'unknown';
+  // J1 data file objects
+  var nav_menu_id                 = "navigator_nav_menu"
+  var authclient_modals_id        = "authclient_modals"
+  var colors_data_path            = "/assets/data/colors.json";
+  var font_size_data_path         = "/assets/data/font_sizes.json";
+  var nav_menu_data_path          = "/assets/data/menu/index.html"
+  var authclient_modals_data_path = "/assets/data/authclient/index.html"
+  var web_session_data            = j1.getWebSessionCookie();
+  var j1_colors                   = {};
+  var j1_font_sizes               = {};
+  var logger;
+  var logText;
+
+  return {
+
+    // -------------------------------------------------------------------------
+    // Initialize Navigator
+    // -------------------------------------------------------------------------
+    init: function ( options ) {
+
+      // Module setting objects
+      var navDefaults           = {};
+      var navBarConfig          = {};
+      var navMenuConfig         = {};
+      var navQuicklinksConfig   = {};
+      var navTopsearchConfig    = {};
+      var navSidebarConfig      = {};
+      var navAuthClientConfig   = {};
+      var navBarOptions         = {};
+      var navMenuOptions        = {};
+      var navQuicklinksOptions  = {};
+      var navTopsearchOptions   = {};
+      var navSidebarOptions     = {};
+      var navAuthClientOptions  = {};
+      var navAuthClientProvider = {};
+
+      {% comment %} Set global variables
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      logger = log4javascript.getLogger("j1.Navigator"); // Setup logger
+
+      // Set|Log status
+      state = 'started';
+      logger.info('state: ' + state);
+
+      {% comment %} Load module config from yml data file
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      // Load  module DEFAULTS|CONFIG
+      navDefaults           = $.extend({}, {{nav_defaults | replace: '=>', ':' }});
+      navBarConfig          = $.extend({}, {{nav_bar_config | replace: '=>', ':' }});
+      navMenuConfig         = $.extend({}, {{nav_menu_config | replace: '=>', ':' }});
+      navQuicklinksConfig   = $.extend({}, {{nav_quicklinks_config | replace: '=>', ':' }});
+      navTopsearchConfig    = $.extend({}, {{nav_topsearch_config | replace: '=>', ':' }});
+      navSidebarConfig      = $.extend({}, {{nav_sidebar_config | replace: '=>', ':' }});
+      navAuthClientConfig   = $.extend({}, {{nav_authclient_config | replace: '=>', ':' }});
+      navAuthClientProvider = $.extend({}, {{auth_config_provider | replace: '=>', ':' }});
+
+      // Merge|Overload  module CONFIG by DEFAULTS
+      navBarOptions         = j1.mergeData( navDefaults.nav_bar, navBarConfig );
+      navMenuOptions        = j1.mergeData( navDefaults.nav_menu, navMenuConfig );
+      navQuicklinksOptions  = j1.mergeData( navDefaults.nav_quicklinks, navQuicklinksConfig );
+      navTopsearchOptions   = j1.mergeData( navDefaults.nav_topsearch, navTopsearchConfig );
+      navSidebarOptions     = j1.mergeData( navDefaults.nav_sidebar, navSidebarConfig );
+      navAuthClientConfig   = j1.mergeData( navDefaults.nav_authclient, navAuthClientConfig );
+
+      // Load (individual) frontmatter options (currently NOT used)
+      if ( options  != null ) { var frontmatterOptions = $.extend({}, options) }
+
+      {% comment %} Helper functions for (AJAX) data load
+      -------------------------------------------------------------------------- {% endcomment %}
+        function load_color_data() {
+          // Returns the j1_colors object
+          return $.ajax({
+              url:      colors_data_path,
+              success:  function (data) {
+                if (typeof data == 'string') {
+                  j1_colors = JSON.parse(data);
+                }
+                if (typeof data == 'object') {
+                  j1_colors = data;
+                }
+              }
+          });
+        };
+        function load_font_sizes() {
+          // Returns the j1_font_sizes object
+          return $.ajax({
+              url:      font_size_data_path,
+              success:  function (data) {
+                if (typeof data == 'string') {
+                  j1_font_sizes = JSON.parse(data);
+                }
+                if (typeof data == 'object') {
+                  j1_font_sizes = data;
+                }
+              }
+          });
+        };
+
+      {% comment %} Deferred (AJAX) data load
+      -------------------------------------------------------------------------- {% endcomment %}
+      // Load color and font (json) data asychronously
+      // See: https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done
+      $.when( load_color_data(), load_font_sizes() ).done (
+        function( load_color_data_response, load_font_sizes_response ) {
+          // Run initializer functions
+          j1.Navigator.loadMenuBar( navMenuOptions );
+          j1.Navigator.loadAuthClientModals( navAuthClientOptions, navAuthClientProvider );
+          j1.Navigator.setCss( navBarOptions, navMenuOptions, navQuicklinksOptions, navTopsearchOptions, navSidebarOptions );
+          // Set|Log status
+          state = 'initialized';
+          logger.info('state: ' + state);
+          logger.info("J1 Navigator initialized successfully");
+      });
+
+      /*
+      // jadams, 2017-10-18: Unclear if workaround is needed.
+      // For oversized menu bar, overflow set to hidden is set
+      // as a dynamic style - see setCss below
+      //
+      // jadams: WORKAROUND - Change width of the NavBar (to window size) if needed
+      */
+      /*
+      $(window).on("resize", function(){
+        var navID       = "#navigator_nav";
+        var getWindow   = $(window).width();
+        var getNavWidth = $( navID ).width();
+        var diff        = getNavWidth - getWindow;
+
+        if ( diff ) {
+          // change width of the NavBar ( to window width)
+          $( navID ).width(getWindow);
+          var logText = "NavBar ID #j1_main_nav resized to: " +getNavWidth+ " (" +getWindow+ ")";
+          //logger.debug(logText);
+          logger.info(logText);
+        }
+      });
+      */
+
+      // Reset on resize
+      $(window).on("resize", function(){
+
+          j1nav.manageDropdownMenu();
+
+          $(".top-search").slideUp();
+          setTimeout(function(){
+            j1nav.navbarSticky();
+          }, 500);
+
+          // Toggle Bars
+          //$(".navbar-toggle").each(function(){
+          $('button.navigator.navbar-toggler').each(function(){
+            //$('button.navigator.navbar-toggler.animated').removeClass('rotateIn');
+            //$('button.navigator.navbar-toggler.animated').addClass('fadeIn')
+            $(".mdi", this).removeClass("mdi-close");
+            $(".mdi", this).addClass("mdi-menu");
+            $(this).removeClass("fixed");
+          });
+          $(".navbar-collapse").removeClass("in");
+          $(".navbar-collapse").removeClass("on");
+          $(".navbar-collapse").removeClass("bounceIn");
+      });
+    }, // end init
+
+    // -------------------------------------------------------------------------
+    // load the Menu bar
+    // -------------------------------------------------------------------------
+    loadMenuBar: function ( navMenuOptions ) {
+      //logger = log4javascript.getLogger("j1.Navigator.loadMenuBar");
+
+      // closure to pass additional data (e.g. div #id)
+      // to AJAX load callback (id)
+      // See: http://stackoverflow.com/questions/939032/jquery-pass-more-parameters-into-callback
+      var cb_load_closure = function(id, navMenuOptions) {
+        return function ( responseTxt, statusTxt, xhr ) {
+          if ( statusTxt == "success" ) {
+            j1nav.initialize( navMenuOptions );
+            var logText = "MenuBar on ID " +id+ " loaded successfully"
+            logger.info(logText);
+
+            // Initialize theme selectors for J1Theme Switcher
+            $('#ThemeList').bootstrapThemeSwitcher({localFeed: ''});            // Load from Bootswatch API
+            $('#ThemeSelect').bootstrapThemeSwitcher();                         // Load from localFeed
+            var logText = "ThemeSwitcher Feeds on ID " +id+ " loaded successfully"
+            logger.info(logText);
+            //j1.Navigator.delayMenushow();
+          }
+          if ( statusTxt == "error" ) {
+            state = 'failed';
+            logger.error('state: ' + state);
+            var logText = "MenuBar on ID " +id+ " loading failed. Error: " + xhr.status + ": " + xhr.statusText;
+            logger.error(logText);
+          }
+        };
+      };
+
+      var id = "#" + nav_menu_id;
+      var selector = $(id);
+      if ( selector.length ) {
+        var menu_data_path = nav_menu_data_path + " " + id + " > *";
+
+        // Set the return URL (user by news pager) for the News Banner
+        selector.load( menu_data_path, cb_load_closure( id, navMenuOptions ) );
+      }
+
+    }, // end loadMenuBar
+
+    // -------------------------------------------------------------------------
+    // load the Modals used by J1AuthClient
+    // -------------------------------------------------------------------------
+    loadAuthClientModals: function ( authClientOptions, authClientProvider ) {
+      //logger = log4javascript.getLogger("j1.Navigator.loadAuthClientModals");
+
+      // closure to pass additional data (e.g. div #id)
+      // to AJAX load callback (id)
+      // See: http://stackoverflow.com/questions/939032/jquery-pass-more-parameters-into-callback
+      var cb_load_closure = function(id, authClientOptions) {
+        return function ( responseTxt, statusTxt, xhr ) {
+          if ( statusTxt == "success" ) {
+            //j1nav.initialize( authClientOptions );
+            var logText = "Modals on ID " +id+ " loaded successfully"
+
+            j1.Navigator.initAuthClient( authClientProvider );
+
+            logger.info(logText);
+            // Set|Log status
+            state = 'finished';
+            logger.info('state: ' + state);
+          }
+          if ( statusTxt == "error" ) {
+            state = 'failed';
+            logger.error('state: ' + state);
+            var logText = "Modals on ID " +id+ " loading failed. Error: " + xhr.status + ": " + xhr.statusText;
+            logger.error(logText);
+          }
+        };
+      };
+
+      var id = "#" + authclient_modals_id;
+      var selector = $(id);
+      if ( selector.length ) {
+        var modals_data_path = authclient_modals_data_path + " > *";
+
+        // Set the return URL (user by news pager) for the News Banner
+        selector.load( modals_data_path, cb_load_closure( id, authClientOptions ) );
+      }
+
+    }, // end loadAuthClientModals
+
+    // -------------------------------------------------------------------------
+    // Initialize JS portion for the dialogs (modals) used by J1AuthClient
+    // -------------------------------------------------------------------------
+    initAuthClient: function( authClientOptions ) {
+
+      var logger;
+      var logText;
+      var route;
+      var provider          = 'unknown';
+      var allowed_users     = 'unknown';
+      var web_session_data  = j1.getWebSessionCookie();
+
+      var signIn = {
+        provider:         authClientOptions["activated"][0],
+        user:             authClientOptions[authClientOptions["activated"][0]]["users"],
+        do:               false
+      }
+    
+      var signOut = {
+        provider:         authClientOptions["activated"][0],
+        providerSignOut:  false,
+        do:               false
+      }
+
+      // Set|Log status
+      logger = log4javascript.getLogger('j1.AuthClient');
+      state = 'initialize';
+      logger.info('state: ' + state); 
+
+      $('ul.nav-pills > li').click(function (e) {
+          e.preventDefault();
+          signIn.provider       = $(this).text().trim();
+          signIn.provider       = signIn.provider.toLowerCase();
+          signIn.allowed_users  = signIn.user[signIn.provider];
+      });
+
+      $("a.btn").click(function() {
+        if (this.id === "signInButton") {
+          signIn.do = true;
+        } else {
+          signIn.do = false;
+        }
+        if (this.id === "signOutButton") {
+          signOut.do = true;
+        } else {
+          signOut.do = false;
+        }
+      });
+
+      $('input:checkbox[name="providerSignOut"]').on('click', function (e) {
+        e.stopPropagation();
+        signOut.providerSignOut = $('input:checkbox[name="providerSignOut"]').is(":checked");
+        if( environment == "development" ) {
+          logText = "Provider signout set to: " +signOut.providerSignOut;
+          logger.info( logText );
+        }
+      });
+
+      $("#modalOmniSignIn").on('hidden.bs.modal', function() {
+        if (signIn.do == true) {
+          provider      = signIn.provider.toLowerCase();
+          allowed_users = signIn.allowed_users;
+          logText       = 'Provider detected: ' + provider;
+          logger.info(logText);
+          var route = '/authentication?request=signin&provider=' +provider+ '&allowed_users=' +allowed_users;
+          logText = 'Call middleware for route ' +route+ ' for signin';
+          logger.info(logText);
+          window.location.href = route;
+        } else {
+          provider = signIn.provider.toLowerCase();
+          logText = 'Provider detected: ' + provider;
+          logger.info(logText);
+          logText = 'Login for ' +provider+ " declined";
+          logger.info(logText);
+        }
+      }); // end modalOmniSignIn
+
+      $("#modalOmniSignOut").on('show.bs.modal', function() {
+          var modal = $(this);
+          logger.info('Place current user data');
+          var j1_user_state = j1.getUserStateCookie();
+          modal.find('.user-info').text('You are signed in to provider: ' + j1_user_state.provider);
+      }); // end SHOW modalOmniSignOut
+
+      $("#modalOmniSignOut").on('hidden.bs.modal', function() {
+        if (signOut.do == true) {
+          logger.info('Load active provider from cookie: UserState');
+          var j1_user_state = j1.getUserStateCookie();
+          provider = j1_user_state.provider;
+          // provider_url = providerUrls[provider];
+          logText = 'Provider detected: ' + provider;
+          logger.info(logText);
+          logText = 'SignIn for ' +provider+ ' accepted';
+          logger.info(logText);
+          // var route = '/authentication?request=signout&provider=' + provider + '&provider_signout=' + signOut.providerSignOut + '&provider_url=' + provider_url;
+          var route = '/authentication?request=signout&provider=' + provider + '&provider_signout=' + signOut.providerSignOut;
+          logText = 'Call middleware for route ' +route+ ' for signout';
+          logger.info(logText);
+          window.location.href = route;
+        } else {
+          provider = signOut.provider.toLowerCase();
+          logText = 'Provider detected: ' + provider;
+          logger.info(logText);
+          logText = 'SignOut for ' +provider+ " declined";
+          logger.info(logText);
+        }
+      }); // end modalSignOut
+
+      if ( web_session_data != null ) {
+        // Toggle/Set SignIn/SignOut icon|link in QuickLinks
+        // See: https://stackoverflow.com/questions/13524107/how-to-set-data-attributes-in-html-elements
+        if ( web_session_data.authenticated == 'true') {
+          var modal_target  = $('#navLinkSignInOut').data('target');
+          var iconSignInOutClasses = $('#iconSignInOut').attr('class').split(/\s+/);
+          // Set SignOut
+          $('#navLinkSignInOut').attr("data-target","#modalOmniSignOut");
+          $('#iconSignInOut').removeClass( "mdi-login" ).addClass( "mdi-logout" );
+          // Show User Info with SideBar
+          $("#user-info").css({ display: "block" });
+        } else {
+          var modal_target  = $('#navLinkSignInOut').data('target');
+          var iconSignInOutClasses = $('#iconSignInOut').attr('class').split(/\s+/);
+          // Set SignIn
+          $('#navLinkSignInOut').attr("data-target","#modalOmniSignIn");
+          $('#iconSignInOut').removeClass( "mdi-logout" ).addClass( "mdi-login" );
+          // Hide User Info from SideBar
+          $("#user-info").css({ display: "none" });
+        }
+        var session_json_data = JSON.stringify( web_session_data );
+        // jadams: confusion about last_page vs. requested_page
+        web_session_data.requested_page = window.location.pathname;
+        j1.setWebSessionCookie( web_session_data );
+        web_session_data = j1.getWebSessionCookie();
+        session_json_data = JSON.stringify( web_session_data );
+        logger.info( 'Session data: ' + session_json_data );
+        logger.info( 'Last page:    ' + web_session_data.last_page );
+      } else {
+        // Hide SignIn button from QuickLinks
+        $("#quickLinksSignInOutButton").css({ display: "none" });
+        // Hide SignIn menu from MenuBar
+        $("#menuBarSignInOut").css({ display: "none" });
+        // Hide User Info from SideBar
+        $("#user-info").css({ display: "none" });
+      }
+      // Replace MACROs THEME Info
+      var j1_user_state = j1.getUserStateCookie();
+      var themeName     = j1_user_state.theme_name;
+      $("#macro-theme-name").each(function() {
+        var $this = $(this);
+        var html  = $this.html();
+        $(this).html(html.replace('??theme-name', themeName));
+        //console.log(html)
+      });
+      // Replace MACROs USER Info
+      var user;
+      var state;
+      var provider;
+      var provider_url;
+      var permissions;
+      var membership;
+      var membership_url;
+      
+      if ( web_session_data.authenticated == 'true') {
+        // Call middleware info endpoint to return current user state
+        function load_user_details() {      
+          return $.ajax({
+            url:      '/status',
+            success:  function (data) {
+              if (typeof data == 'string') {
+                JSON.parse(data)
+              }
+              if (typeof data == 'object') {
+                data
+              }
+            }
+          })
+        };
+        // Add|Place data when collected
+        $.when( load_user_details() ).done (
+          function( response ) {        
+            var $this;
+            var html;
+
+            var json_data       = JSON.stringify(response);
+            var user_state      = JSON.parse(json_data);
+
+            user            = user_state.user_name;
+            state           = user_state.status;
+            provider        = user_state.provider;
+            provider_url    = user_state.provider_site_url;
+            permissions     = user_state.provider_permissions;
+            membership      = user_state.provider_membership;
+            membership_url  = user_state.provider_member_url;
+
+            /*
+              See: https://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors
+              See: https://stackoverflow.com/questions/16400072/jquery-each-only-affects-last-element
+              See: https://dzone.com/articles/why-does-javascript-loop-only-use-last-value
+            */
+            /*
+            $("[id^=macro-]").each(function() {
+              $this = $(this);
+              html  = $this.html();
+
+              // $("#macro-provider-name").html(html.replace('??provider-name', provider));
+
+              $(this).html(html.replace('??provider-name', provider));
+              $(this).html(html.replace('??user-name', user));
+              $(this).html(html.replace('??user-state', state));
+              $(this).html(html.replace('??provider-permission', permissions));
+              $(this).html(html.replace('??provider-membership', membership));
+              //$(this).attr("href", provider_url);
+              //$(this).attr("href", membership_url);
+
+              console.log(html)
+            });
+            */
+            $("#macro-provider-name").each(function() {
+              var $this = $(this);
+              var html  = $this.html();
+              $(this).html(html.replace('??provider-name', provider));
+              $(this).attr("href", provider_url);
+              //console.log(html)
+            });
+
+            $("#macro-user-name").each(function() {
+              var $this = $(this);
+              var html  = $this.html();
+              $(this).html(html.replace('??user-name', user));
+              //console.log(html)
+            });
+
+            $("#macro-user-state").each(function() {
+              var $this = $(this);
+              var html  = $this.html();
+              $(this).html(html.replace('??user-state', state));
+              //console.log(html)
+            });
+
+            $("#macro-provider-permissions").each(function() {
+              var $this = $(this);
+              var html  = $this.html();
+              $(this).html(html.replace('??provider-permissions', permissions));
+              //console.log(html)
+            });
+
+            $("#macro-provider-membership").each(function() {
+              var $this = $(this);
+              var html  = $this.html();
+              $(this).html(html.replace('??provider-membership', membership));
+              $(this).attr("href", membership_url);
+              //console.log(html)
+            });
+        }); // end load_user_details
+      }  // End if existsCookie j1.app.session
+      state = 'initialized';
+      logger.info('state: ' + state); // Set|Log status
+    }, // end initAuthClient
+
+    // -------------------------------------------------------------------------
+    // Initialize JS portion for the dialogs (modals) used by J1AuthClient
+    // -------------------------------------------------------------------------
+    toggleAuthClient : function() {
+
+      // code for toggle the AuthClient SignIn|SignOut
+
+    }, // end toggleAuthClient
+
+    // -------------------------------------------------------------------------
+    // Set dynamic CSS styles
+    // -------------------------------------------------------------------------
+    setCss: function ( navBarOptions, navMenuOptions, navQuicklinksOptions, navTopsearchOptions, navSidebarOptions ) {
+
+      // BS4 media breakpoints
+      var gridBreakpoint_lg          = '992px';
+      var gridBreakpoint_md          = '768px';
+      var gridBreakpoint_sm          = '576px';
+
+      {% comment %} Resolve symbolic font sizes
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      {% comment %} Set|Resolve navMenuOptions
+      -------------------------------------------------------------------------- {% endcomment %}
+      if ( typeof j1_font_sizes[navMenuOptions.dropdown_font_size] != "undefined" ) { navMenuOptions.dropdown_font_size = j1_font_sizes[navMenuOptions.dropdown_font_size] }
+      if ( typeof j1_font_sizes[navMenuOptions.megamenu_font_size] != "undefined" ) { navMenuOptions.megamenu_font_size = j1_font_sizes[navMenuOptions.megamenu_font_size] }
+
+
+      {% comment %} Resolve symbolic color names
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      {% comment %} Set|Resolve navBarOptions
+      -------------------------------------------------------------------------- {% endcomment %}
+      if ( typeof j1_colors[navBarOptions.background_color_full] != "undefined" ) { navBarOptions.background_color_full = j1_colors[navBarOptions.background_color_full] }
+      if ( typeof j1_colors[navBarOptions.background_color_collapsed] != "undefined" ) { navBarOptions.background_color_collapsed = j1_colors[navBarOptions.background_color_collapsed] }
+      if ( typeof j1_colors[navBarOptions.background_color_scrolled] != "undefined" ) { navBarOptions.background_color_scrolled = j1_colors[navBarOptions.background_color_scrolled] }
+
+      {% comment %} Set|Resolve navMenuOptions
+      -------------------------------------------------------------------------- {% endcomment %}
+      if ( typeof j1_colors[navMenuOptions.menu_item_color] != "undefined" ) { navMenuOptions.menu_item_color = j1_colors[navMenuOptions.menu_item_color] }
+      if ( typeof j1_colors[navMenuOptions.menu_item_color_hover] != "undefined" ) { navMenuOptions.menu_item_color_hover = j1_colors[navMenuOptions.menu_item_color_hover] }
+      if ( typeof j1_colors[navMenuOptions.menu_item_dropdown_color] != "undefined" ) { navMenuOptions.menu_item_dropdown_color = j1_colors[navMenuOptions.menu_item_dropdown_color] }
+      if ( typeof j1_colors[navMenuOptions.dropdown_item_color] != "undefined" ) { navMenuOptions.dropdown_item_color = j1_colors[navMenuOptions.dropdown_item_color] }
+      if ( typeof j1_colors[navMenuOptions.dropdown_background_color_hover] != "undefined" ) { navMenuOptions.dropdown_background_color_hover = j1_colors[navMenuOptions.dropdown_background_color_hover] }
+      if ( typeof j1_colors[navMenuOptions.dropdown_background_color_active] != "undefined" ) { navMenuOptions.dropdown_background_color_active = j1_colors[navMenuOptions.dropdown_background_color_active] }
+      if ( typeof j1_colors[navMenuOptions.dropdown_border_color] != "undefined" ) { navMenuOptions.dropdown_border_color = j1_colors[navMenuOptions.dropdown_border_color] }
+
+      {% comment %} Set|Resolve navQuicklinksOptions
+      -------------------------------------------------------------------------- {% endcomment %}
+      if ( typeof j1_colors[navQuicklinksOptions.icon_color] != "undefined" ) { navQuicklinksOptions.icon_color = j1_colors[navQuicklinksOptions.icon_color] }
+      if ( typeof j1_colors[navQuicklinksOptions.icon_color_hover] != "undefined" ) { navQuicklinksOptions.icon_color_hover = j1_colors[navQuicklinksOptions.icon_color_hover] }
+      if ( typeof j1_colors[navQuicklinksOptions.background_color] != "undefined" ) { navQuicklinksOptions.background_color = j1_colors[navQuicklinksOptions.background_color] }
+
+      {% comment %} Set|Resolve navTopsearchOptions
+      -------------------------------------------------------------------------- {% endcomment %}
+      if ( typeof j1_colors[navTopsearchOptions.input_color] != "undefined" ) { navTopsearchOptions.input_color = j1_colors[navTopsearchOptions.input_color] }
+      if ( typeof j1_colors[navTopsearchOptions.background_color] != "undefined" ) { navTopsearchOptions.background_color = j1_colors[navTopsearchOptions.background_color] }
+
+      {% comment %} Set|Resolve navSidebarOptions
+      -------------------------------------------------------------------------- {% endcomment %}
+      if ( typeof j1_colors[navSidebarOptions.background_color] != "undefined" ) { navSidebarOptions.background_color = j1_colors[navSidebarOptions.background_color] }
+
+      {% comment %} Set dymanic styles
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      {% comment %} navBar styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      // Size of brand image
+      $('head').append("<style>.navbar-brand > img { height: {{brand_image_height}}px !important; }</style>");
+      // Navbar transparent-light (light)
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator.navbar-transparent.light { background-color: " +navBarOptions.background_color_full+ "; border-bottom: solid 0px !important; } }</style>");
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator.navbar-scrolled.light { background-color: " +navBarOptions.background_color_scrolled+ "; } }</style>");
+
+      /* Navbar media-queries, LARGE Window|Desktop (>= 1024) */
+      /* jadams:  Oversized menu bar fixed by: overflow: hidden */
+      $('head').append("<style>@media (max-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator { background-color: " +navBarOptions.background_color_collapsed+ "; overflow: hidden; } }</style>");
+      //$('head').append("<style>@media (max-width: 1023px) { row { margin-left: 0 !important; margin-right: 0 !important; } }</style>");
+
+      {% comment %} navQuicklinks styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      $('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>");
+
+      {% comment %} navMenu styles
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      // TODO: Check if this style is needed for  MENU item (hover)
+      //$('head').append("<style>nav.navbar.navbar-transparent ul.nav > li > a:hover,nav.navbar.no-background ul.nav > li > a:hover,nav.navbar ul.nav li.scroll.active > a,nav.navbar.navbar-dark ul.nav li.dropdown ul.dropdown-menu  > li > a:hover,nav.navbar ul.nav li.dropdown.on > a,nav.navbar-dark ul.nav li.dropdown.on > a { color: " +navMenuOptions.menu_item_color_hover+ " !important; }</style>");
+      //
+      //$('head').append("<style>.dropdown-menu > .active > a { background-color: " +navMenuOptions.dropdown_background_color_active+ " !important; }</style>");
+      // Remove background for anchor
+      $('head').append("<style>.dropdown-menu > .active > a { background-color: transparent !important; }</style>");
+      // hover menu-item|menu-sub-item
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator .dropdown-item:focus, nav.navbar.navigator .dropdown-item:hover, nav.navbar.navigator .nav-sub-item:focus, nav.navbar.navigator .nav-sub-item:hover { background: " +navMenuOptions.dropdown_background_color_hover+ " !important;  } }</style>");
+      // $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu > li a:hover { color: " +navMenuOptions.menu_item_color_hover+ " !important; background: " +navMenuOptions.dropdown_background_color_hover+ " !important; } }</style>");
+
+      // 1st dropdown, limit height
+      // TODO: overflow needs to be managed correctly (not static)
+      //$('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu  { max-height: " +navMenuOptions.dropdown_menu_height+ "em; overflow: hidden } }</style>");
+
+      //  Limit dropdown item width
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator ul.nav.navbar-right .dropdown-menu .dropdown-menu { left: -" +navMenuOptions.dropdown_item_width+ "em; } }</style>");
+
+      // Limit last (2nd) dropdown in height (nav.navbar.navigator li.dropdown ul.dropdown-menu ul.dropdown-menu)
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu ul.dropdown-menu  { top: -" +navMenuOptions.dropdown_border_height+ "px !important; max-height: " +navMenuOptions.dropdown_menu_height+ "em; } }</style>");
+
+      //  Set dropdown item colors
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator ul.nav > li > a { color: " +navMenuOptions.menu_item_color+ " !important; } }</style>");
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator ul.nav > li > a:hover { color: " +navMenuOptions.menu_item_color_hover+ " !important; } }</style>");
+
+      // Dropdown menu styles
+      //$('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu { animation-duration: " +navMenuOptions.dropdown_animate_duration+ "s !important; color: " +navMenuOptions.dropdown_border_color+ "; width: " +navMenuOptions.dropdown_item_width+ "px; border-top: solid " +navMenuOptions.dropdown_border_height+ "px; left: 1rem; top: calc( 90px + " +navMenuOptions.dropdown_border_height+ "px ); } }</style>");
+      //$('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu { animation-duration: " +navMenuOptions.dropdown_animate_duration+ "s !important; color: " +navMenuOptions.dropdown_border_color+ "; width: " +navMenuOptions.dropdown_item_width+ "em; border-top: solid " +navMenuOptions.dropdown_border_height+ "px; left: 1em; } }</style>");
+      // jadams, 2017-11-30: removed left padding from dropdown mwenu (for new j1nav style based on Navigator|Slate)
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu { animation-duration: " +navMenuOptions.dropdown_animate_duration+ "s !important; color: " +navMenuOptions.dropdown_border_color+ "; width: " +navMenuOptions.dropdown_item_width+ "em; border-top: solid " +navMenuOptions.dropdown_border_height+ "px; left: 0; } }</style>");
+
+      {% if dropdown_style == 'raised' %}
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu { box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } }</style>");
+      {% endif %}
+
+      // jadams,2017-11-22: stop configure dropdown_font_size
+      //$('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown li.dropdown.nav-item.nav-sub-item { color: " +navMenuOptions.dropdown_item_color+ "; font-size: " +navMenuOptions.dropdown_font_size+ "; font-weight: 400; } }</style>");
+      // $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu > li > a { color: " +navMenuOptions.dropdown_item_color+ "; font-size: " +navMenuOptions.dropdown_font_size+ "; font-weight: 400; display: inline-flex; align-items: center;} }</style>");
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu > li > a { color: " +navMenuOptions.dropdown_item_color+ "; font-size: " +navMenuOptions.dropdown_font_size+ "; font-weight: 400; } }</style>");
+      $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator ul.dropdown-menu.megamenu-content .content ul.menu-col li a { color: " +navMenuOptions.dropdown_item_color+ "; font-size: " +navMenuOptions.megamenu_font_size+ "; font-weight: 400; } }</style>");
+
+      // dropdown-menu item padding
+      // jadams, 2017-11-22:  moved item padding to nav|dropdown-item based on font-site (rel|em)
+      {% if dropdown_item_style == 'raised' %}
+      //$('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu > li > a { padding: " +navMenuOptions.dropdown_padding_y+ "px " +navMenuOptions.dropdown_padding_x+ "px; box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } }</style>");
+      {% else %}
+      //$('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator li.dropdown ul.dropdown-menu > li > a { padding: " +navMenuOptions.dropdown_padding_y+ "px " +navMenuOptions.dropdown_padding_x+ "px; } }</style>");
+      // blödsinn $('head').append("<style>@media (min-width: " +gridBreakpoint_lg+ " ) { nav.navbar.navigator .dropdown .nav-item  { padding-top: " +navMenuOptions.dropdown_item_padding+ "px; padding-bottom: " +navMenuOptions.dropdown_item_padding+ "px; } }</style>");
+      {% endif %}
+
+      {% comment %} navQuicklinks styles
+      -------------------------------------------------------------------------- {% endcomment %}
+
+      {% comment %} navTopSearch Styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      $('head').append("<style>.top-search { background-color: " +navTopsearchOptions.background_color+ "; }</style>");
+      $('head').append("<style>.top-search .input-group-addon { color: " +navTopsearchOptions.input_color+ "; }</style>");
+      $('head').append("<style>.top-search .input.form-control { color: " +navTopsearchOptions.input_color+ "; }</style>");
+
+      {% comment %} navSidebar styles
+      -------------------------------------------------------------------------- {% endcomment %}
+      $('head').append("<style>.side { background-color: " +navSidebarOptions.background_color+ "; }</style>");
+
+
+    }, // end setCss
+
+    // -------------------------------------------------------------------------
+    //  returns the current (processing) state of the module
+    // -------------------------------------------------------------------------
+    state: function () {
+      return state;
+    },
+
+    // -------------------------------------------------------------------------
+    //  delay all dropdown menu to open for "delay" time
+    //  http://jsfiddle.net/AndreasPizsa/NzvKC/
+    // -------------------------------------------------------------------------
+    delayMenushow: function () {
+      var theTimer = 0;
+      var theElement = null;
+
+      var logger = log4javascript.getLogger("j1.Navigator");
+      logText = "entered delayMenushow"
+      logger.info(logText);
+
+      $('#navigator_nav_menu')
+        .find('li.dropdown.nav-item')
+        .on('mouseenter', function (inEvent) {
+          theElement = $(this);
+          if (theElement) theElement.removeClass('open');
+          //if (theElement) theElement.css("display", "none");
+          //window.clearTimeout(theTimer);
+
+          //theTimer = window.setTimeout(function () {
+           setTimeout(function () {
+            theElement.addClass('open');
+            //theElement.css("display", "block");
+            //window.clearTimeout(theTimer);
+          }, {{menuOpenDelay}});
+        })
+        .on('mousemove', function (inEvent) {
+          if (theElement.hasClass('open')) return;
+          //window.clearTimeout(theTimer);
+          //theTimer = window.setTimeout(function () {
+           setTimeout(function () {
+            theElement.addClass('open');
+            //window.clearTimeout(theTimer);
+          }, {{menuOpenDelay}});
+        })
+        .on('mouseleave', function (inEvent) {
+          //window.clearTimeout(theTimer);
+          theElement = $(this);
+          //theTimer = window.setTimeout(function () {
+           setTimeout(function () {
+            theElement.removeClass('open');
+            //window.clearTimeout(theTimer);
+          }, {{menuOpenDelay}});
+        });
+    } // end delayMenushow
+  }; // end return
+
+})(j1, window);
+
+{% endcapture %}
+
+{{ cache | strip_empty_lines }}
+{% assign cache = nil %}