lib/starter_web/assets/themes/j1/adapter/js/toccer.js in j1_template-2019.4.8 vs lib/starter_web/assets/themes/j1/adapter/js/toccer.js in j1_template-2019.4.10

- old
+ new

@@ -1,9 +1,9 @@ --- regenerate: false --- - + {% capture j1_cache %} {% comment %} # ----------------------------------------------------------------------------- # ~/assets/themes/j1/adapter/js/toccer.js @@ -18,11 +18,11 @@ # J1 Template is licensed under the MIT License. # For details, see https://jekyll.one # Tocbot is licensed under under the MIT License. # For details, see https://tscanlin.github.io/tocbot # ----------------------------------------------------------------------------- - # TODO: + # TODO: # 2019-03-10: Old BS Affix code is to be removed # ----------------------------------------------------------------------------- {% endcomment %} {% comment %} Liquid procedures @@ -52,18 +52,11 @@ {% comment %} Set config options -------------------------------------------------------------------------------- {% endcomment %} {% assign toccer_options = toccer_defaults | merge: toccer_settings %} -{% assign active_link_color_fallback = '#204A87' %} -{% if toccer_options.activeLinkColor %} - {% assign active_link_color = toccer_options.activeLinkColor %} -{% else %} - {% assign active_link_color = active_link_color_fallback %} -{% endif %} - /* # ----------------------------------------------------------------------------- # ~/assets/themes/j1/adapter/js/toccer.js # JS Adapter for J1 Toccer # @@ -88,11 +81,10 @@ j1.adapter['toccer'] = (function () { {% comment %} Set global variables ------------------------------------------------------------------------------ {% endcomment %} var environment = '{{environment}}'; // Set environment - var state = 'not_started'; var moduleOptions = {}; var _this; var logger; var logText; @@ -106,19 +98,21 @@ return { // ------------------------------------------------------------------------- // Initializer // ------------------------------------------------------------------------- - init: function ( options ) { + init: function (options) { + // initialize state flag + j1.adapter.toccer.state = 'pending'; {% comment %} Set global variables -------------------------------------------------------------------------- {% endcomment %} _this = j1.adapter.toccer; logger = log4javascript.getLogger('j1.adapter.toccer'); - state = 'started'; - logger.info('state: ' + state); + _this.setState('started'); + logger.info('state: ' + _this.getState()); logger.info('Module is being initialized'); if ( options !== undefined ) { var settings = $.extend({}, options); } else { @@ -127,78 +121,81 @@ // cast text-based booleans var isToc = (options.toc === 'true'); var isComments = (options.comments === 'true'); - if ( settings.collapseDepth === undefined ) { + if (settings.collapseDepth === undefined) { settings.collapseDepth = {{toccer_options.collapseDepth}}; } - if ( settings.headingsOffset === undefined ) { + if (settings.headingsOffset === undefined) { settings.scrollOffset = {{toccer_options.smoothScrollOffset}}; } else { settings.scrollOffset = settings.headingsOffset } - if ( settings.enabled === undefined ) { + if (settings.enabled === undefined) { settings.enabled = true; } - if ( isToc ) { - this.initToccerCore( settings ); - this.setCss(); + if (isToc) { + _this.initToccerCore(settings); + _this.setCss(); /* jadams, 2011-03-11: For now, no need to adjust the top sticky position */ /* leave the code in for future use if needed */ - /* this.setTop(); */ + /* _this.setTop(); */ // if comments enabled - if ( isToc && isComments ) { - logText = 'Connector Disqus successfully initialized'; + if (isToc && isComments) { + logText = 'connector for disqus successfully initialized'; logger.info(logText); - /* NOTE: BS or Tocbot Affix is not used anymore. Replaced by CSS style "sticky" */ - /* j1.adapter.toccer.initAffix(); */ + // NOTE: BS or Tocbot Affix is not used anymore. + // Replaced by CSS style "sticky" + // j1.adapter.toccer.initAffix(); + // state = 'finished'; + // logger.info('state: ' + state); // Set|Log status + // logger.info('module initialized successfully'); - logText = 'Toccer Affix initialized successfully'; - logger.info(logText); - state = 'finished'; - logger.info('Toccer initialized successfully'); - logger.info('state: ' + state); // Set|Log status } else { // if toc enabled only if ( isToc ) { - state = 'finished'; - logger.info('state: ' + state); // Set|Log status - logger.info('Toccer initialized successfully'); + // state = 'finished'; + // logger.info('state: ' + state); // Set|Log status + // logger.info('module initialized successfully'); } - } // ENDIF isComments (Disqus enabled) - } // ENDIF isToc + } // END if isComments (Disqus enabled) + } // END if isToc - state = 'finished'; - logger.info('state: ' + state); // Set|Log status - logger.info('Toccer initialized successfully'); + _this.setState('finished'); + logger.info('state: ' + _this.getState()); + logger.info('module initialized successfully'); return true; }, // END init // --------------------------------------------------------------------- // Set Toccer options // --------------------------------------------------------------------- initToccerCore: function ( options ) { - if ( options !== undefined ) { + if (options !== undefined) { var settings = $.extend({}, options); } else { var settings = false; } - state = 'running'; - logger.info('state: ' + state); // Set|Log status + _this.setState('running'); + logger.info('state: ' + _this.getState()); + + var bg_primary = j1.getStyleValue('bg-primary', 'background-color'); + tocbot.init({ log: {{ toccer_options.log | json }}, + activeLinkColor: {{ toccer_options.activeLinkColor | json }}, tocSelector: {{ toccer_options.tocSelector | json }}, headingSelector: {{ toccer_options.headingSelector | json }}, ignoreSelector: {{ toccer_options.ignoreSelector | json }}, contentSelector: {{ toccer_options.contentSelector | json }}, collapseDepth: settings.collapseDepth, @@ -213,11 +210,11 @@ collapsibleClass: 'is-collapsible', listItemClass: 'toc-list-item', positionFixedSelector: '', positionFixedClass: 'is-position-fixed', fixedSidebarOffset: 'auto', - smoothScroll: {{ toccer_options.smoothScrollEnabled | json }}, + smoothScroll: {{ toccer_options.smoothScrollEnabled | json }}, smoothScrollOffset: {{ toccer_options.smoothScrollOffset | json }}, smoothScrollDuration: {{ toccer_options.smoothScrollDuration | json }}, headingsOffset: {{ toccer_options.headingsOffset | json }}, throttleTimeout: {{ toccer_options.throttleTimeout | json }} }); @@ -230,17 +227,17 @@ return true; }, // END initToccerCore // --------------------------------------------------------------------- // Calculate|Set Affix offset Top|Bottom of the Toccer menu - // depending on the size of the page header (masthead) + // depending on the size of the page header (attic) // --------------------------------------------------------------------- initAffix: function () { var nav_bar = $('nav.navbar'); var side_bar = $('#j1-sidebar'); - var header = $('.j1-masthead'); - //var disqus_id = $('#disqus'); + var header = $('.attic'); +// var disqus_id = $('#disqus'); var disqus_id = $('.bmd-layout-content'); var disqus_thread = $('#disqus_thread'); var adblock = $('#adblock'); var footer = '#' + '{{footer_id}}'; var footer_id = $(footer); @@ -252,35 +249,35 @@ var c = $(side_bar).offset().top; var a = adblock.length ? adblock.outerHeight() : 0; var e = $(nav_bar).height(); var h = $(header).height(); var z = c - e; - return this.top = z - a; + return _this.top = z - a; }, bottom: function () { /* space below the affixed element */ if (disqus_id.length) { - return ( this.bottom = $(disqus_id).outerHeight(true) + $(footer_id).outerHeight(true) + footer_offset ) + return ( _this.bottom = $(disqus_id).outerHeight(true) + $(footer_id).outerHeight(true) + footer_offset ) } else { - return ( this.bottom = $(footer_id).outerHeight(true) + footer_offset ); + return ( _this.bottom = $(footer_id).outerHeight(true) + footer_offset ); } } } }); return true; }, // END initAffix // --------------------------------------------------------------------- // Calculate|Set Top position of the Toccer menu - // depending on the size of the page header (masthead) + // depending on the size of the page header (attic) // --------------------------------------------------------------------- - setTop: function ( options) { + setTop: function (options) { $(window).scroll(function(event){ var navbar = $('nav.navbar.navigator'); var adblock = $('#adblock'); - var pagehead = $('.j1-masthead'); + var pagehead = $('.attic'); var offset = 0; var m = parseInt(pagehead.css('margin-bottom'), 10); var n = navbar.outerHeight(); var a = adblock.length ? adblock.outerHeight() : 0; // var o = n + m + a + offset; @@ -298,30 +295,34 @@ // --------------------------------------------------------------------- // Set dynamic styles // --------------------------------------------------------------------- setCss: function () { - $('head').append('<style>.is-active-link::before { font-weight: 700; background-color: {{ active_link_color }}; }</style>'); + var bg_primary = j1.getStyleValue('bg-primary', 'background-color'); + $('head').append('<style>.is-active-link::before { background-color: ' +bg_primary+ ' !important; }</style>'); + return true; }, // END setCss // ------------------------------------------------------------------------- // messageHandler: MessageHandler for J1 NAV module // Manage messages (paylods) send from other J1 modules // ------------------------------------------------------------------------- - messageHandler: function ( sender, message ) { - var json_message = JSON.stringify(message, undefined, 2); - + messageHandler: function (sender, message) { + var json_message = JSON.stringify(message, undefined, 2); + logText = 'Received message from ' + sender + ': ' + json_message; logger.debug(logText); // ----------------------------------------------------------------------- // Process commands|actions // ----------------------------------------------------------------------- if ( message.type === 'command' && message.action === 'module_initialized' ) { - _this.setState('finished'); + // + // Place handling of command|action here + // logger.info(message.text); } // // Place handling of other command|action here @@ -331,18 +332,18 @@ }, // END messageHandler // ------------------------------------------------------------------------- // Set the current (processing) state of the module // ------------------------------------------------------------------------- - setState: function ( stat ) { - state = stat; + setState: function (stat) { + j1.adapter.toccer.state = stat; }, // END setState // ------------------------------------------------------------------------- // Returns the current (processing) state of the module // ------------------------------------------------------------------------- getState: function () { - return state; + return j1.adapter.toccer.state; } // END state }; // END return })(j1, window);