--- regenerate: true --- {% capture cache %} {% comment %} # ----------------------------------------------------------------------------- # ~/assets/themes/j1/adapter/js/navigator.js # Liquid template to adapt Navigator Core functions # # 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 }} # ----------------------------------------------------------------------------- # NOTE: # # JSON pretty print # Example: var str = JSON.stringify(obj, null, 2); // spacing level = 2 # See: https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript # ----------------------------------------------------------------------------- # NOTE: # jadams, 2020-06-21: # J1 Navigator needs a general revision on BS4 code and functionalities # Current, only base function are tested with BS4 (was coded for BS3) # ----------------------------------------------------------------------------- # NOTE: # jadams, 2020-07-17: # J1 Navigator can't be minfied for now. Uglifier fails on an ES6 # (most probably) structure that couldn't fixed by 'harmony' setting. # Minifier fails by: # Unexpected token: punc ()) # Current, minifying has been disabled # ----------------------------------------------------------------------------- {% endcomment %} {% comment %} Liquid procedures -------------------------------------------------------------------------------- {% endcomment %} {% capture select_color %}themes/{{site.template.name}}/procedures/global/select_color.proc{% endcapture %} {% comment %} Set global settings -------------------------------------------------------------------------------- {% endcomment %} {% assign environment = site.environment %} {% assign brand_image_height = site.brand.image_height %} {% comment %} Process YML config data ================================================================================ {% endcomment %} {% comment %} Set config files {% assign auth_manager_config = site.j1_auth %} -------------------------------------------------------------------------------- {% endcomment %} {% assign template_config = site.data.j1_config %} {% assign blocks = site.data.blocks %} {% assign modules = site.data.modules %} {% assign themer_defaults = modules.defaults.themer.defaults %} {% assign themer_settings = modules.themer.settings %} {% assign authentication_defaults = modules.defaults.authentication.defaults %} {% assign authentication_settings = modules.authentication.settings %} {% assign template_config = site.data.template_settings %} {% assign navigator_defaults = site.data.modules.defaults.navigator.defaults %} {% assign navigator_settings = site.data.modules.navigator.settings %} {% comment %} Set config data -------------------------------------------------------------------------------- {% endcomment %} {% assign nav_bar_defaults = navigator_defaults.nav_bar %} {% assign nav_bar_settings = navigator_settings.nav_bar %} {% assign nav_menu_defaults = navigator_defaults.nav_menu %} {% assign nav_menu_settings = navigator_settings.nav_menu %} {% assign nav_quicklinks_defaults = navigator_defaults.nav_quicklinks %} {% assign nav_quicklinks_settings = navigator_settings.nav_quicklinks %} {% assign nav_authclient_defaults = authentication_defaults.auth_client %} {% assign nav_authclient_settings = authentication_settings.auth_client %} {% comment %} Set config options -------------------------------------------------------------------------------- {% endcomment %} {% assign authentication_options = authentication_defaults | merge: authentication_settings %} {% assign themer_options = themer_defaults | merge: themer_settings %} {% assign nav_bar_options = nav_bar_defaults | merge: nav_bar_settings %} {% assign nav_menu_options = nav_menu_defaults | merge: nav_menu_settings %} {% assign quicklinks_options = nav_quicklinks_defaults | merge: nav_quicklinks_settings %} {% assign authclient_options = nav_authclient_defaults | merge: nav_authclient_settings %} {% assign nav_bar_id = navigator_defaults.nav_bar.id %} {% assign nav_menu_id = navigator_defaults.nav_menu.id %} {% assign nav_quicklinks_id = navigator_defaults.nav_quicklinks.id %} {% assign nav_navbar_media_breakpoint = navigator_defaults.nav_bar.media_breakpoint %} {% assign authclient_modals_id = navigator_defaults.nav_authclient.xhr_container_id %} {% if nav_bar_options.dropdown_animate_duration != null %} {% assign animate_duration = nav_bar_options.dropdown_animate_duration %} {% else %} {% assign animate_duration = 1 %} {% endif %} {% comment %} Detect prod mode -------------------------------------------------------------------------------- {% endcomment %} {% assign production = false %} {% if environment == 'prod' or environment == 'production' %} {% assign production = true %} {% 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/adapter/js/navigator.js # JS Adapter for J1 Navigator # # Product/Info: # {{site.data.template_settings.theme_author_url}} # # Copyright (C) 2023 Juergen Adams # # J1 Theme is licensed under the MIT License. # For details, see {{site.data.template_settings.theme_author_url}} # ----------------------------------------------------------------------------- # NOTE: For AJAX (XHR) loads see # https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done # ----------------------------------------------------------------------------- # NOTE: For getStyleValue helper see # https://stackoverflow.com/questions/16965515/how-to-get-a-style-attribute-from-a-css-class-by-javascript-jquery # ----------------------------------------------------------------------------- # Adapter generated: {{site.time}} # ----------------------------------------------------------------------------- */ // ----------------------------------------------------------------------------- // ESLint shimming // ----------------------------------------------------------------------------- /* eslint indent: "off" */ // ----------------------------------------------------------------------------- 'use strict'; j1.adapter.navigator = (function (j1, window) { // --------------------------------------------------------------------------- // globals // --------------------------------------------------------------------------- var environment = '{{environment}}'; var dclFinished = false; var moduleOptions = {}; var nav_menu_id = '{{nav_menu_id}}'; var nav_quicklinks_id = '{{nav_quicklinks_id}}'; var authclient_modals_id = '{{authclient_modals_id}}'; var authclient_xhr_data_element = '{{authclient_options.xhr_data_element}}'; var authclient_modals_data_path = '{{authclient_options.xhr_data_path}}'; var nav_menu_data_path = '{{nav_menu_options.data_path}}'; var nav_quicklinks_data_path = '{{quicklinks_options.data_path}}'; var colors_data_path = '{{template_config.colors_data_path}}'; var font_size_data_path = '{{template_config.font_size_data_path}}'; var cookie_names = j1.getCookieNames(); var cookie_user_session_name = cookie_names.user_session; var user_session = {}; var user_session_merged = {}; var session_state = {}; var themerEnabled = {{themer_options.enabled}}; //was (test): false; var authClientEnabled; var appDetected; var json_data; var _this; var logger; var logText; // --------------------------------------------------------------------------- // helper functions // --------------------------------------------------------------------------- // --------------------------------------------------------------------------- // main object // --------------------------------------------------------------------------- return { // ------------------------------------------------------------------------- // module initializer // ------------------------------------------------------------------------- init: function (options) { // ----------------------------------------------------------------------- // Default module settings // ----------------------------------------------------------------------- var settings = $.extend({ module_name: 'j1.adapter.navigator', generated: '{{site.time}}' }, options); // ----------------------------------------------------------------------- // Global variable settings // ----------------------------------------------------------------------- _this = j1.adapter.navigator; logger = log4javascript.getLogger('j1.adapter.navigator'); // initialize state flag _this.setState('started'); logger.debug('\n' + 'state: ' + _this.getState()); logger.info('\n' + 'module is being initialized'); // ----------------------------------------------------------------------- // options loader // ----------------------------------------------------------------------- /* eslint-disable */ var authConfig = {}; var navDefaults = {}; var navBarConfig = {}; var navMenuConfig = {}; var navQuicklinksConfig = {}; var navAuthClientConfig = {}; var navBarOptions = {}; var navMenuOptions = {}; var navQuicklinksOptions = {}; var navAuthClientOptions = {}; var navAuthMAnagerConfig = {}; var user_state = {}; var cookie_names = j1.getCookieNames(); var cookie_user_state_name = cookie_names.user_state; var themerOptions = {}; var interval_count = 0; var user_state_detected; var themes_count; var max_count = 100; var gaCookies = j1.findCookie('_ga'); var j1Cookies = j1.findCookie('j1'); navDefaults = $.extend({}, {{navigator_defaults | replace: '=>', ':' }}); navBarConfig = $.extend({}, {{nav_bar_options | replace: '=>', ':' }}); navMenuConfig = $.extend({}, {{nav_menu_options | replace: '=>', ':' }}); navQuicklinksConfig = $.extend({}, {{quicklinks_options | replace: '=>', ':' }}); navAuthClientConfig = $.extend({}, {{authclient_options | replace: '=>', ':' }}); navAuthMAnagerConfig = $.extend({}, {{authentication_options | replace: '=>', ':' }}); authClientEnabled = navAuthMAnagerConfig.enabled; themerOptions = $.extend({}, {{themer_options | replace: '=>', ':' | replace: 'nil', '""' }}); // Merge|Overload module CONFIG by DEFAULTS // navBarOptions = j1.mergeData(navBarConfig, navDefaults.nav_bar); navMenuOptions = j1.mergeData(navMenuConfig, navDefaults.nav_menu); navQuicklinksOptions = j1.mergeData(navQuicklinksConfig, navDefaults.nav_quicklinks); navAuthClientConfig = j1.mergeData(navAuthClientConfig, navDefaults.nav_authclient); // save config settings into the adapter object for global access // _this['navDefaults'] = navDefaults; _this['navBarOptions'] = navBarOptions; _this['navMenuOptions'] = navMenuOptions; _this['navQuicklinksOptions'] = navQuicklinksOptions; _this['navAuthClientConfig'] = navAuthClientConfig; _this['navAuthManagerConfig'] = navAuthMAnagerConfig; // Load (individual) frontmatter options (currently NOT used) if (options != null) { var frontmatterOptions = $.extend({}, options) } /* eslint-enable */ // ----------------------------------------------------------------------- // Load HTML data (AJAX) // ----------------------------------------------------------------------- // jadams, 202-06-24: Promise (chain) if $.when seems NOT to work correctly. // It seems a chain using .then will be a better solution to make it sure // that the last Deferred set the state to 'data_loaded'. // Found the final state randomly set to 'null' what prevent the module // to run mmenuInitializer. // Workaround: Set 'data_loaded' to be returned by all Deferred in // the chain. // See: https://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done // authclient_xhr_data_element // ----------------------------------------------------------------------- // data loader // ----------------------------------------------------------------------- j1.loadHTML({ xhr_container_id: navQuicklinksOptions.xhr_container_id, xhr_data_path: navQuicklinksOptions.xhr_data_path, xhr_data_element: navQuicklinksOptions.xhr_data_element }, 'j1.adapter.navigator', null); j1.loadHTML({ xhr_container_id: navAuthClientConfig.xhr_container_id, xhr_data_path: navAuthClientConfig.xhr_data_path, xhr_data_element: navAuthClientConfig.xhr_data_element }, 'j1.adapter.navigator', null); j1.loadHTML({ xhr_container_id: navMenuOptions.xhr_container_id, xhr_data_path: navMenuOptions.xhr_data_path, xhr_data_element: navMenuOptions.xhr_data_element }, 'j1.adapter.navigator', 'data_loaded'); var dependencies_met_load_menu_finished = setInterval (function () { if (j1.xhrDOMState['#'+navQuicklinksOptions.xhr_container_id] === 'success' && j1.xhrDOMState['#'+navAuthClientConfig.xhr_container_id] === 'success' && j1.xhrDOMState['#'+navMenuOptions.xhr_container_id] === 'success' ) { // continue if all AJAX loads (loadHTML) has finished _this.setState('processing'); logger.info('\n' + 'status: ' + _this.getState()); logger.info('\n' + 'initialize navigator core'); // Detect|Set J1 App status appDetected = j1.appDetected(); authClientEnabled = j1.authEnabled(); logger.info('\n' + 'application status detected: ' + appDetected); j1.core.navigator.init (_this.navDefaults, _this.navMenuOptions); // load themes (to menu) if themer is enabled|finished if (themerEnabled) { logText = '\n' + 'theme switcher: enabled'; logger.info(logText); // detect j1 user state cookie user_state_detected = j1.existsCookie(cookie_user_state_name); if (user_state_detected) { user_state = j1.readCookie(cookie_user_state_name); } else { logger.error('\n' + 'cookie not found: j1.user.state'); logger.debug('\n' + 'j1 cookies found:' + j1Cookies.length); j1Cookies.forEach(item => console.log('j1.core.switcher: ' + item)); logger.debug('\n' + 'ga cookies found:' + gaCookies.length); gaCookies.forEach(item => console.log('j1.core.switcher: ' + item)); } // jadams, 2021-07-03: wait until navigator CORE get finished var dependencies_met_page_finished = setInterval(function() { if (j1.adapter.navigator.getState() == 'core_initialized') { logText = '\n' + 'load themes'; logger.info(logText); // load LOCAL themes from JSON data logText = '\n' + 'load local themes (json file)'; logger.info(logText); $('#local_themes').bootstrapThemeSwitcher({ localFeed: themerOptions.localThemes }); // load REMOTE themes from Bootswatch API (localFeed EMPTY!) $('#remote_themes').bootstrapThemeSwitcher({ localFeed: '', bootswatchApiVersion: themerOptions.bootswatchApiVersion }); // jadams, 2021-04-22: Up to now, it is unclear why in some // cases the menu bar is NOT fully loaded for THEMES // TODO: Add additional checks to find the reason // added same checks (as already done by adapter themer) to // check if remote theme menu detected as LOADED // var dependencies_met_remote_themes_loaded = setInterval(function() { interval_count += 1; themes_count = document.getElementById("remote_themes").getElementsByTagName("li").length; if ( themes_count > 0 ) { logger.info('\n' + 'remote themes loaded: successfully'); logger.info('\n' + 'remote themes loaded: successfully after: ' + interval_count * 25 + ' ms'); clearInterval(dependencies_met_remote_themes_loaded); } else { logger.debug('\n' + 'wait for theme to be loaded: ' + user_state.theme_name); } if (interval_count > max_count) { logger.warn('\n' + 'remote themes loading: failed'); logger.warn('\n' + 'continue processing'); clearInterval(dependencies_met_remote_themes_loaded); } clearInterval(dependencies_met_page_finished); }, 25); } // _this.setState('initialized'); _this.setState('finished'); }, 25); // END 'dependencies_met_page_finished' } else { logText = '\n' + 'theme switcher detected as: disabled'; logger.info(logText); _this.setState('finished'); } // ----------------------------------------------------------------- // event handler|css styles // ----------------------------------------------------------------- var dependencies_met_initialized = setInterval(function() { // initialize if page and themer ready if (j1.getState() === 'finished' && j1.adapter.themer.getState() === 'finished') { _this.setState('processing'); // apply module configuration settings _this.applyNavigatorSettings ( navDefaults, navBarOptions, navMenuOptions, navQuicklinksOptions ); // (static) delay applying styles until added CSS data // of the theme is processed by the browser setTimeout (function() { // set general|global theme colors logger.info('\n' + 'initializing dynamic CSS styles'); _this.applyThemeSettings ( navDefaults, navBarOptions, navMenuOptions, navQuicklinksOptions ); }, 500); logger.info('\n' + 'init auth client'); _this.initAuthClient(_this.navAuthManagerConfig); _this.setState('finished'); logger.debug('\n' + 'state: ' + _this.getState()); logger.info('\n' + 'module initialized successfully'); logger.debug('\n' + 'met dependencies for: j1'); clearInterval(dependencies_met_initialized); } }, 25); // END 'dependencies_met_initialized' logger.debug('\n' + 'met dependencies for: themer'); clearInterval(dependencies_met_load_menu_finished); } }, 25); // END 'dependencies_met_load_menu_finished' // -------------------------------------------------------------------- // Register event 'reset on resize' to call j1.core.navigator on // manageDropdownMenu to manage the (current) NAV menu for // desktop or mobile // --------------------------------------------------------------------- $(window).on('resize', function() { j1.core.navigator.manageDropdownMenu(navDefaults, navMenuOptions); // Manage sticky NAV bars setTimeout (function() { j1.core.navigator.navbarSticky(); }, 500); // Scroll the page one pixel back and forth to get // the right position for the toccer $(window).scrollTop($(window).scrollTop()+1); $(window).scrollTop($(window).scrollTop()-1); }); }, // END init // ------------------------------------------------------------------------- // initialize JS portion for the dialogs (modals) used by J1AuthClient // NOTE: Currently cookie updates NOT processed at the NAV module // All updates on Cookies are managed by Cookie Consent. // To be considered to re-add cookie updates for the auth state // ------------------------------------------------------------------------- initAuthClient: function(auth_config) { var logger = log4javascript.getLogger('j1.adapter.navigator.initAuthClient'); var user_session = j1.readCookie(cookie_user_session_name); _this.modalEventHandler(auth_config); if (j1.appDetected() && j1.authEnabled()) { // Toggle/Set SignIn/SignOut icon|link in QuickLinks // See: https://stackoverflow.com/questions/13524107/how-to-set-data-attributes-in-html-elements if (user_session.authenticated === 'true') { // Set SignOut $('#navLinkSignInOut').attr('data-bs-target', '#modalOmniSignOut'); $('#iconSignInOut').removeClass('mdi-login').addClass('mdi-logout'); } else { // Set SignIn $('#navLinkSignInOut').attr('data-bs-target', '#modalOmniSignIn'); $('#iconSignInOut').removeClass('mdi-logout').addClass('mdi-login'); } } return true; }, // END initAuthClient // ------------------------------------------------------------------------- // modalEventHandler // Manage button click events for all BS Modals // See: https://www.nickang.com/add-event-listener-for-loop-problem-in-javascript/ // ------------------------------------------------------------------------- modalEventHandler: function (options) { // var logger = log4javascript.getLogger('j1.adapter.navigator.EventHandler'); var authConfig = options.j1_auth; var route; var provider; var provider_url; var allowed_users; var logText; var signIn = { provider: authConfig.providers.activated[0], users: authConfig.providers[authConfig.providers['activated'][0]]['users'], do: false }; var signOut = { provider: authConfig.providers.activated[0], providerSignOut: false, do: false }; logText = '\n' + 'initialize button click events'; logger.info(logText); // Manage button click events for modal "signInOutButton" // ----------------------------------------------------------------------- $('ul.nav-pills > li').click(function (e) { e.preventDefault(); // jadams, 2019-07-30: To be checked if needed signIn.provider = $(this).text().trim(); signIn.provider = signIn.provider.toLowerCase(); signIn.allowed_users = signIn.users.toString(); }); $('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 = '\n' + 'provider signout set to: ' + signOut.providerSignOut; logger.info(logText); } }); // Manage pre events on modal "modalOmniSignIn" // ----------------------------------------------------------------------- $('#modalOmniSignOut').on('show.bs.modal', function() { var modal = $(this); logger.info('\n' + 'place current user data'); user_session = j1.readCookie(cookie_user_session_name); modal.find('.user-info').text('You are signed in to provider: ' + user_session.provider); }); // END SHOW modalOmniSignOut // Manage post events on modal "modalOmniSignIn" // ----------------------------------------------------------------------- $('#modalOmniSignIn').on('hidden.bs.modal', function() { if (signIn.do == true) { provider = signIn.provider.toLowerCase(); allowed_users = signIn.users.toString(); logText = '\n' + 'provider detected: ' + provider; logger.info(logText); var route = '/authentication?request=signin&provider=' +provider+ '&allowed_users=' +allowed_users; logText = '\n' + 'call middleware for signin on route: ' + route; logger.info(logText); window.location.href = route; } else { provider = signIn.provider.toLowerCase(); logText = '\n' + 'provider detected: ' + provider; logger.info(logText); logText = '\n' + 'login declined for provider: ' +provider; logger.info(logText); } }); // END post events "modalOmniSignIn" // Manage post events on modal "modalOmniSignOut" // ----------------------------------------------------------------------- $('#modalOmniSignOut').on('hidden.bs.modal', function() { if (signOut.do == true) { logger.info('\n' + 'load active provider from cookie: ' + cookie_user_session_name); user_session = j1.readCookie(cookie_user_session_name); provider = user_session.provider; provider_url = user_session.provider_site_url; logText = '\n' + 'provider detected: ' + provider; logger.info(logText); logText = '\n' + 'initiate signout for provider: ' +provider; logger.info(logText); var route = '/authentication?request=signout&provider=' + provider + '&provider_signout=' + signOut.providerSignOut; // + '/logout/'; logText = '\n' + 'call middleware on route : ' +route; logger.info(logText); window.location.href = route; } else { provider = signOut.provider.toLowerCase(); logText = '\n' + 'provider detected: ' + provider; logger.info(logText); logText = '\n' + 'signout declined for provider: ' +provider ; logger.info(logText); } }); // END post events "modalSignOut" logText = '\n' + 'initialize button click events completed'; logger.info(logText); return true; }, // END modalEventHandler // ------------------------------------------------------------------------- // applyThemeSettings // Apply CSS styles from current theme // ------------------------------------------------------------------------- applyThemeSettings: function (navDefaults, navBarOptions, navMenuOptions, navQuicklinksOptions) { var logger = log4javascript.getLogger('j1.adapter.navigator.applyThemeSettings'); var gridBreakpoint_lg = '992px'; var gridBreakpoint_md = '768px'; var gridBreakpoint_sm = '576px'; var navbar_scrolled_color; var navbar_scrolled_style; var bg_scrolled; var bg_collapsed; var style; // Set dymanic styles // ----------------------------------------------------------------------- // read current background colors var bg_primary = $('#bg-primary').css('background-color'); var bg_table = $('body').css('background-color'); // set navbar background colors bg_scrolled = bg_primary; bg_collapsed = bg_primary; // navBar styles // ----------------------------------------------------------------------- var navPrimaryColor = navDefaults.nav_primary_color; if (navBarOptions.background_color_scrolled == 'default' ) { navbar_scrolled_color = bg_primary; } else { // navbar_scrolled_color = '#212529'; navbar_scrolled_color = navBarOptions.background_color_scrolled; } navbar_scrolled_style = '<style id="navbar_scrolled_color">'; navbar_scrolled_style += ' .navbar-scrolled {'; navbar_scrolled_style += ' background-color: ' + navbar_scrolled_color + ' !important;'; navbar_scrolled_style += ' }'; navbar_scrolled_style += '</style>'; $('head').append(navbar_scrolled_style); // set current body background color for all tables // ----------------------------------------------------------------------- $('table').css('background', bg_table); logger.info('\n' + 'set dynamic styles for the theme loaded'); // Set|Resolve navMenuOptions // ------------------------------------------------------------------------ navMenuOptions.dropdown_font_size = navMenuOptions.dropdown_font_size; navMenuOptions.megamenu_font_size = navMenuOptions.megamenu_font_size; // Set|Resolve navBarOptions // ----------------------------------------------------------------------- navBarOptions.background_color_full = navBarOptions.background_color_full; // Set|Resolve navMenuOptions // ----------------------------------------------------------------------- navMenuOptions.menu_item_color = navMenuOptions.menu_item_color; navMenuOptions.menu_item_color_hover = navMenuOptions.menu_item_color_hover; navMenuOptions.menu_item_dropdown_color = navMenuOptions.menu_item_dropdown_color; navMenuOptions.dropdown_item_color = navMenuOptions.dropdown_item_color; navMenuOptions.dropdown_background_color_hover = navMenuOptions.dropdown_background_color_hover; navMenuOptions.dropdown_background_color_active = navMenuOptions.dropdown_background_color_active; navMenuOptions.dropdown_border_color = navMenuOptions.dropdown_border_color; // Set|Resolve navQuicklinksOptions // ----------------------------------------------------------------------- navQuicklinksOptions.icon_color = navQuicklinksOptions.icon_color; navQuicklinksOptions.icon_color_hover = navQuicklinksOptions.icon_color_hover; navQuicklinksOptions.background_color = navQuicklinksOptions.background_color; // Timeline styles // ----------------------------------------------------------------------- style = '<style>'; style += ' .timeline > li > .timeline-panel:after {'; style += ' border-left: 14px solid ' + bg_scrolled + ';'; style += ' border-right: 0 solid ' + bg_scrolled + ';'; style += ' }'; style += '</style>'; $('head').append(style); style = '<style>'; style += ' .tmicon {'; style += ' background: ' + bg_scrolled + ';'; style += ' }'; style += '</style>'; $('head').append(style); // Heading styles // ----------------------------------------------------------------------- style = '<style>'; style += ' .heading:after {'; style += ' background: ' + bg_scrolled + ' !important;'; style += ' }'; style += '</style>'; $('head').append(style); // Tag Cloud styles // ----------------------------------------------------------------------- style = '<style>'; style += ' .tag-cloud ul li a {'; style += ' background: ' + bg_scrolled + ' !important;'; style += ' }'; style += '</style>'; $('head').append(style); // Toccer styles // ----------------------------------------------------------------------- style = '<style>'; style += ' .is-active-link::before {'; style += ' background-color: ' + bg_scrolled + ' !important;'; style += ' }'; style += '</style>'; $('head').append(style); // BS extended Modal styles // ----------------------------------------------------------------------- style = '<style>'; style += ' .modal-dialog.modal-notify.modal-primary .modal-header {'; style += ' background-color: ' + bg_scrolled + ' !important;'; style += ' }'; style += '</style>'; $('head').append(style); // BS nav|pills styles // ----------------------------------------------------------------------- style = '<style>'; style += ' .nav-pills .nav-link.active, .nav-pills .show > .nav-link {'; style += ' background-color: ' + bg_scrolled + ' !important;'; style += ' }'; style += '</style>'; $('head').append(style); return true; }, // END applyThemeSettings // ------------------------------------------------------------------------- // applyNavigatorSettings // Apply settings from configuration // ------------------------------------------------------------------------- applyNavigatorSettings: function (navDefaults, navBarOptions, navMenuOptions, navQuicklinksOptions) { var logger = log4javascript.getLogger('j1.adapter.navigator.applyThemeSettings'); var gridBreakpoint_lg = '992px'; var gridBreakpoint_md = '768px'; var gridBreakpoint_sm = '576px'; var navPrimaryColor = navDefaults.nav_primary_color; var navbar_scrolled_style; var navbar_scrolled_color = '#212529'; navbar_scrolled_style = '<style id="navbar_scrolled_color">'; navbar_scrolled_style += ' .navbar-scrolled {'; navbar_scrolled_style += ' background-color: ' + navbar_scrolled_color + ' !important;'; navbar_scrolled_style += ' }'; navbar_scrolled_style += '</style>'; $('head').append(navbar_scrolled_style); logger.info('\n' + 'set dynamic styles for the theme loaded'); // Set|Resolve navMenuOptions // ------------------------------------------------------------------------ navMenuOptions.dropdown_font_size = navMenuOptions.dropdown_font_size; navMenuOptions.megamenu_font_size = navMenuOptions.megamenu_font_size; // Set|Resolve navBarOptions // ----------------------------------------------------------------------- navBarOptions.background_color_full = navBarOptions.background_color_full; // Set|Resolve navMenuOptions // ----------------------------------------------------------------------- navMenuOptions.menu_item_color = navMenuOptions.menu_item_color; navMenuOptions.menu_item_color_hover = navMenuOptions.menu_item_color_hover; navMenuOptions.menu_item_dropdown_color = navMenuOptions.menu_item_dropdown_color; navMenuOptions.dropdown_item_color = navMenuOptions.dropdown_item_color; navMenuOptions.dropdown_background_color_hover = navMenuOptions.dropdown_background_color_hover; navMenuOptions.dropdown_background_color_active = navMenuOptions.dropdown_background_color_active; navMenuOptions.dropdown_border_color = navMenuOptions.dropdown_border_color; // Set|Resolve navQuicklinksOptions // ----------------------------------------------------------------------- navQuicklinksOptions.icon_color = navQuicklinksOptions.icon_color; navQuicklinksOptions.icon_color_hover = navQuicklinksOptions.icon_color_hover; navQuicklinksOptions.background_color = navQuicklinksOptions.background_color; // Set dymanic styles // ----------------------------------------------------------------------- var style; // read current background colors var bg_primary = $('#bg-primary').css('background-color'); var bg_table = $('body').css('background-color'); // set navbar background colors var bg_scrolled = bg_primary; var bg_collapsed = bg_primary; // navBar styles // ----------------------------------------------------------------------- // set current body background color for all tables $('table').css('background', bg_table); // $('head').append('<style>.mdi-bg-primary {color: ' +bg_scrolled+ ';}</style>'); style = '<style>'; style += ' .mdi-bg-primary {'; style += ' color: ' + bg_scrolled; style += ' }'; style += '</style>'; $('head').append(style); // Size of brand image // $('head').append('<style>.navbar-brand > img { height: {{brand_image_height}}px !important; }</style>'); style = '<style>'; style += ' .navbar-brand > img {'; style += ' height: {{brand_image_height}}px !important;'; style += ' }'; style += '</style>'; $('head').append(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+ ' !important; border-bottom: solid 0px !important; } }</style>'); style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator.navbar-transparent.light {'; style += ' background-color: ' + navBarOptions.background_color_full + ' !important;'; style += ' border-bottom: solid 0px !important;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(style); // $('head').append('<style>@media (min-width: ' +gridBreakpoint_lg+ ') { nav.navbar.navigator.navbar-scrolled.light { background-color: ' +bg_scrolled+ ' !important; } }</style>'); // style = '<style>'; // style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; // style += ' nav.navbar.navigator.navbar-scrolled.light {'; // style += ' background-color: ' + bg_scrolled + ' !important;'; // style += ' }'; // style += ' }'; // style += '</style>'; // $('head').append(style); // $('head').append('<style id="dynNav">@media (max-width: ' +gridBreakpoint_md+ ') { nav.navbar.navigator.navbar-transparent.light { background-color: ' +navBarOptions.background_color_full+ ' !important; border-bottom: solid 0px !important; } }</style>'); style = '<style id="dynNav">'; style += ' @media screen and (max-width: ' + gridBreakpoint_md + ') {'; style += ' nav.navbar.navigator.navbar-transparent.light {'; style += ' background-color: ' + navBarOptions.background_color_full + ' !important;'; style += ' border-bottom: solid 0px !important;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(style); // $('head').append('<style id="dynNav">@media (max-width: ' +gridBreakpoint_md+ ') { nav.navbar.navigator.navbar-scrolled.light { background-color: ' +bg_scrolled+ ' !important; } }</style>'); // style = '<style id="dynNav">'; // style += ' @media screen and (max-width: ' + gridBreakpoint_md + ') {'; // style += ' nav.navbar.navigator.navbar-scrolled.light {'; // style += ' background-color: ' + bg_scrolled + ' !important;'; // style += ' }'; // style += ' }'; // style += '</style>'; // $('head').append(style); // $('head').append('<style id="dynNav">@media (min-width: ' +gridBreakpoint_md+ ') { nav.navbar.navigator.navbar-transparent.light { background-color: ' +navBarOptions.background_color_full+ ' !important; border-bottom: solid 0px !important; } }</style>'); style = '<style id="dynNav">'; style += ' @media screen and (min-width: ' + gridBreakpoint_md + ') {'; style += ' nav.navbar.navigator.navbar-transparent.light {'; style += ' background-color: ' + navBarOptions.background_color_full + ' !important;'; style += ' border-bottom: solid 0px !important;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(style); // $('head').append('<style id="dynNav">@media (min-width: ' +gridBreakpoint_md+ ') { nav.navbar.navigator.navbar-scrolled.light { background-color: ' +bg_scrolled+ ' !important; } }</style>'); // style = '<style id="dynNav">'; // style += ' @media screen and (min-width: ' + gridBreakpoint_md + ') {'; // style += ' nav.navbar.navigator.navbar-scrolled.light {'; // style += ' background-color: ' + bg_scrolled + ' !important;'; // style += ' }'; // style += ' }'; // style += '</style>'; // $('head').append(style); // $('head').append('<style id="dynNav">@media (max-width: ' +gridBreakpoint_sm+ ') { nav.navbar.navigator.navbar-transparent.light { background-color: ' +navBarOptions.background_color_full+ ' !important; border-bottom: solid 0px !important; } }</style>'); style = '<style id="dynNav">'; style += ' @media screen and (max-width: ' + gridBreakpoint_sm + ') {'; style += ' nav.navbar.navigator.navbar-transparent.light {'; style += ' background-color: ' + navBarOptions.background_color_full + ' !important;'; style += ' border-bottom: solid 0px !important;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(style); // $('head').append('<style id="dynNav">@media (max-width: ' +gridBreakpoint_sm+ ') { nav.navbar.navigator.navbar-scrolled.light { background-color: ' +bg_scrolled+ ' !important; } }</style>'); // style = '<style id="dynNav">'; // style += ' @media screen and (max-width: ' + gridBreakpoint_sm + ') {'; // style += ' nav.navbar.navigator.navbar-scrolled.light {'; // style += ' background-color: ' + bg_scrolled + ' !important;'; // style += ' }'; // style += ' }'; // style += '</style>'; // $('head').append(style); // navQuicklinks styles // ----------------------------------------------------------------------- // $('head').append('<style>.quicklink-nav> ul > li > a { color: ' +navQuicklinksOptions.icon_color+ ' !important; }</style>'); style = '<style>'; style += ' .quicklink-nav> ul > li > a {'; style += ' color: ' + navQuicklinksOptions.icon_color + ' !important;'; style += ' }'; style += '</style>'; $('head').append(style); // $('head').append('<style>.quicklink-nav> ul > li > a:hover { color: ' +navQuicklinksOptions.icon_color_hover+ ' !important; }</style>'); style = '<style>'; style += ' .quicklink-nav> ul > li > a:hover {'; style += ' color: ' + navQuicklinksOptions.icon_color_hover + ' !important;'; style += ' }'; style += '</style>'; $('head').append(style); // navMenu styles // ----------------------------------------------------------------------- // $('head').append('<style>.dropdown-menu > .active > a { background-color: transparent !important; }</style>'); // Remove background for anchor style = '<style>'; style += ' .dropdown-menu > .active > a {'; style += ' background-color: transparent !important;'; style += ' }'; style += '</style>'; $('head').append(style); // $('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>'); // hover menu-item|menu-sub-item style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator .dropdown-item:focus,'; style += ' nav.navbar.navigator .dropdown-item:hover,'; style += ' nav.navbar.navigator .nav-sub-item:focus,'; style += ' nav.navbar.navigator .nav-sub-item:hover {'; style += ' background: ' + navMenuOptions.dropdown_background_color_hover + ' !important;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(style); // $('head').append('<style>@media (min-width: ' +gridBreakpoint_lg+ ') { nav.navbar.navigator ul.nav.navbar-right .dropdown-menu .dropdown-menu { left: -' +navMenuOptions.dropdown_item_min_width+ 'rem !important; } }</style>'); // Limit 1st dropdown item width style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator ul.nav.navbar-right .dropdown-menu .dropdown-menu {'; style += ' left: -' + navMenuOptions.dropdown_item_min_width + 'rem !important;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(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>'); style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator ul.nav > li > a {'; style += ' color: ' + navMenuOptions.menu_item_color + ' !important;'; style += ' }'; style += ' }'; style += '</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>'); style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator ul.nav > li > a:hover {'; style += ' color: ' + navMenuOptions.menu_item_color_hover + ' !important;'; style += ' }'; style += ' }'; style += '</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: #616161 !important; min-width: ' +navMenuOptions.dropdown_item_min_width+ 'rem !important; border-top: solid ' +navMenuOptions.dropdown_border_top+ 'px !important; border-radius: ' +navMenuOptions.dropdown_border_radius+ 'px !important; left: 0; } }</style>'); // 1st level dropdown menu styles style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator li.dropdown ul.dropdown-menu {'; style += ' max-height: ' + navMenuOptions.dropdown_menu_max_height + 'rem !important;'; style += ' animation-duration: ' + navMenuOptions.dropdown_animate_duration + 's !important;'; style += ' color: #616161 !important;'; style += ' min-width: ' + navMenuOptions.dropdown_item_min_width + 'rem !important;'; style += ' border-top: solid ' + navMenuOptions.dropdown_border_top + 'px !important;'; style += ' border-radius: ' + navMenuOptions.dropdown_border_radius + 'px !important;'; style += ' left: 0;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(style); // $('head').append('<style>@media (min-width: ' +gridBreakpoint_lg+ ') { nav.navbar.navigator li.dropdown ul.dropdown-menu ul.dropdown-menu { top: -' +navMenuOptions.dropdown_border_top+ 'px !important; max-height: ' +navMenuOptions.dropdown_menu_max_height+ 'em; } }</style>'); // Limit last (2nd) dropdown in height style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator li.dropdown ul.dropdown-menu ul.dropdown-menu {'; style += ' top: -' + navMenuOptions.dropdown_border_top + 'px !important;'; style += ' max-height: ' + navMenuOptions.dropdown_menu_max_height + 'rem !important;'; style += ' }'; style += ' }'; style += '</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) !important; } }</style>'); style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator li.dropdown ul.dropdown-menu {'; style += ' 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) !important;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(style); {% endif %} // $('head').append('<style>@media (min-width: ' +gridBreakpoint_lg+ ') { nav.navbar.navigator li.dropdown ul.dropdown-menu > li > a { color: ' +navMenuOptions.dropdown_item_color+ ' !important; font-size: ' +navMenuOptions.dropdown_font_size+ ' !important; font-weight: 400; } }</style>'); // configure dropdown_font_size|color style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator li.dropdown ul.dropdown-menu > li > a {'; style += ' color: ' + navMenuOptions.dropdown_item_color + ' !important;'; style += ' font-size: ' + navMenuOptions.dropdown_font_size + ' !important;'; style += ' font-weight: 400;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(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+ ' !important; font-size: ' +navMenuOptions.megamenu_font_size+ ' !important; font-weight: 400; } }</style>'); style = '<style>'; style += ' @media screen and (min-width: ' + gridBreakpoint_lg + ') {'; style += ' nav.navbar.navigator ul.dropdown-menu.megamenu-content .content ul.menu-col li a {'; style += ' color: ' + navMenuOptions.dropdown_item_color + ' !important;'; style += ' font-size: ' + navMenuOptions.megamenu_font_size + ' !important;'; style += ' font-weight: 400;'; style += ' }'; style += ' }'; style += '</style>'; $('head').append(style); // navQuicklinks|navTopSearch // ----------------------------------------------------------------------- // style = '<style>'; // style += ' .top-search {'; // style += ' background-color: ' + navTopsearchOptions.background_color + ' !important;'; // style += ' }'; // style += '</style>'; // $('head').append(style); return true; }, // END applyThemeSettings // ------------------------------------------------------------------------- // messageHandler // Manage messages (paylods) send from other J1 modules // ------------------------------------------------------------------------- messageHandler: function (sender, message) { // var json_message = JSON.stringify(message, undefined, 2); // multiline var json_message = JSON.stringify(message); _this.setState(message.action); logText = '\n' + 'received message from ' + sender + ': ' + json_message; logger.info(logText); logText = '\n' + 'set state to: ' + message.action; logger.info(logText); // ----------------------------------------------------------------------- // Process commands|actions // ----------------------------------------------------------------------- if (message.type === 'command' && message.action === 'module_initialized') { // // Place handling of command|action here // logger.info('\n' + message.text); } if (message.type === 'command' && message.action === 'status') { logger.info('\n' + 'messageHandler: received - ' + message.action); } // // 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 %}