j1-template 2020.0.22 → 2021.0.2

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

@@ -12,7 +12,7 @@ regenerate:                             false
  # Product/Info:
  # https://jekyll.one
  #
- # Copyright (C) 2020 Juergen Adams
+ # Copyright (C) 2021 Juergen Adams
  #
  # J1 Template is licensed under the MIT License.
  # For details, see https://jekyll.one
@@ -45,7 +45,7 @@ regenerate:                             false
  # Product/Info:
  # {{site.data.j1_config.theme_author_url}}
  #
- # Copyright (C) 2020 Juergen Adams
+ # Copyright (C) 2021 Juergen Adams
  #
  # J1 Template is licensed under the MIT License.
  # For details, see {{site.data.j1_config.theme_author_url}}

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

@@ -12,7 +12,7 @@ regenerate:                             true
  # Product/Info:
  # http://jekyll.one
  #
- # Copyright (C) 2020 Juergen Adams
+ # Copyright (C) 2021 Juergen Adams
  #
  # J1 Template is licensed under the MIT License.
  # For details, see https://jekyll.one
@@ -53,7 +53,7 @@ regenerate:                             true
  # http://jekyll.one
  # http://www.primebox.co.uk/projects/jquery-cookiebar/
  #
- # Copyright (C) 2020 Juergen Adams
+ # Copyright (C) 2021 Juergen Adams
  # Copyright (C) 2016 Ant Parsons (primebox.co.uk)
  #
  # J1 Template is licensed under the MIT License.
@@ -65,6 +65,13 @@ regenerate:                             true
  #  Adapter generated: {{site.time}}
  # -----------------------------------------------------------------------------
 */
+
+// -----------------------------------------------------------------------------
+// ESLint shimming
+// -----------------------------------------------------------------------------
+/* eslint indent: "off"                                                       */
+/* eslint quotes: "off"                                                       */
+// -----------------------------------------------------------------------------
 'use strict';
 
 {% comment %} Main

data/assets/themes/j1/adapter/js/{ssm.js → fam.js}

@@ -6,13 +6,13 @@ regenerate:                             true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/themes/j1/adapter/js/ssm.js
- # Liquid template to adapt SSM Core functions
+ # ~/assets/themes/j1/adapter/js/fam.js
+ # Liquid template to adapt FAM Core functions
  #
  # Product/Info:
  # https://jekyll.one
  #
- # Copyright (C) 2020 Juergen Adams
+ # Copyright (C) 2021 Juergen Adams
  #
  # J1 Template is licensed under the MIT License.
  # For details, see https://jekyll.one
@@ -22,7 +22,7 @@ regenerate:                             true
  # -----------------------------------------------------------------------------
  # NOTE:
  #  jadams, 2020-07-17:
- #    J1 SSM can't be minfied for now. Uglifier fails on an ES6 (most probably)
+ #    J1 FAM 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
@@ -42,28 +42,29 @@ regenerate:                             true
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign toccer_defaults = modules.defaults.toccer.defaults %}
 {% assign toccer_settings = modules.toccer.settings %}
-{% assign ssm_settings    = modules.ssm.settings %}
-{% assign ssm_defaults    = modules.defaults.ssm.defaults %}
+{% assign fam_settings    = modules.fam.settings %}
+{% assign fam_defaults    = modules.defaults.fam.defaults %}
 
 {% comment %} Set config options
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign toccer_options  = toccer_defaults | merge: toccer_settings %}
-{% assign ssm_options     = ssm_defaults | merge: ssm_settings %}
+{% assign fam_options     = fam_defaults | merge: fam_settings %}
 
 {% assign production = false %}
 {% if environment == 'prod' or environment == 'production' %}
   {% assign production = true %}
 {% endif %}
 
+
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/themes/j1/adapter/js/ssm.js
- # JS Adapter for J1 SSM (Sticky Side Menu)
+ # ~/assets/themes/j1/adapter/js/fam.js
+ # JS Adapter for J1 FAM (Floating Button Menu)
  #
  # Product/Info:
  # {{site.data.j1_config.theme_author_url}}
  #
- # Copyright (C) 2020 Juergen Adams
+ # Copyright (C) 2021 Juergen Adams
  #
  # J1 Template is licensed under the MIT License.
  # For details, see {{site.data.j1_config.theme_author_url}}
@@ -79,7 +80,7 @@ regenerate:                             true
 // -----------------------------------------------------------------------------
 'use strict';
 
-j1.adapter['ssm'] = (function (j1, window) {
+j1.adapter['fam'] = (function (j1, window) {
   // ---------------------------------------------------------------------------
   // globals
   // ---------------------------------------------------------------------------
@@ -88,11 +89,15 @@ j1.adapter['ssm'] = (function (j1, window) {
   var dclFinished   = false;
   var moduleOptions = {};
   var cookie_names  = j1.getCookieNames();
+  var famOptions;
+  var frontmatterOptions;
   var user_state;
   var user_session;
   var user_data;
   var sect1Nodes;
+  var sect3Nodes;
   var sect12Nodes;
+  var sect123Nodes;
   var _this;
   var logger;
   var logText;
@@ -114,9 +119,10 @@ j1.adapter['ssm'] = (function (j1, window) {
       // -----------------------------------------------------------------------
       // globals
       // -----------------------------------------------------------------------
-      _this         = j1.adapter.ssm;
-      logger        = log4javascript.getLogger('j1.adapter.ssm');
-      sect12Nodes   = $('[class$="sect1"],[class$="sect2"');
+      _this         = j1.adapter.fam;
+      logger        = log4javascript.getLogger('j1.adapter.fam');
+      sect123Nodes  = $('[class$="sect1"],[class$="sect2"],[class$="sect3"]');
+      sect12Nodes   = $('[class$="sect1"],[class$="sect2"]');
       sect1Nodes    = $('[class$="sect1"]');
 
       // initialize state flag
@@ -131,7 +137,7 @@ j1.adapter['ssm'] = (function (j1, window) {
       // defaults
       // -----------------------------------------------------------------------
       var settings  = $.extend({
-        module_name: 'j1.adapter.ssm',
+        module_name: 'j1.adapter.fam',
         generated:   '{{site.time}}'
       }, options);
 
@@ -139,156 +145,249 @@ j1.adapter['ssm'] = (function (j1, window) {
       // options loader
       // -----------------------------------------------------------------------
       /* eslint-disable */
-      var ssmMenuOptions = $.extend({}, {{nav_ssm_options | replace: '=>', ':' }});
-      var ssmOptions = $.extend({}, {{ssm_options | replace: 'nil', 'null' | replace: '=>', ':' }});
-      /* eslint-enable */
-      var xhr_data_path;
-      var menu_id;
+      famOptions = $.extend({}, {{fam_options | replace: 'nil', 'null' | replace: '=>', ':' }});
 
       // Load (individual) frontmatter options (currently NOT used)
-      //
-      if (options != null) { var frontmatterOptions = $.extend({}, options); }
+      if (options != null) { frontmatterOptions = $.extend({}, options); }
 
       if (typeof frontmatterOptions !== 'undefined') {
-        moduleOptions = j1.mergeData(ssmOptions, frontmatterOptions);
+        moduleOptions = j1.mergeData(famOptions, frontmatterOptions);
       }
+      /* eslint-enable */
 
-      // save config settings into the mmenu object for global access
+      // save config settings into the fam object for global access
       //
       _this['moduleOptions'] = moduleOptions;
 
       var dependencies_met_navigator = setInterval(function() {
         if (j1.adapter.navigator.getState() == 'finished') {
           logger.info('met dependencies for: navigator');
-          _this.ssmLoader(moduleOptions);
+          _this.famLoader(moduleOptions);
           clearInterval(dependencies_met_navigator);
         }
       }, 25);
+
     }, // END init
 
     // -------------------------------------------------------------------------
-    // SSM Loader
+    // FAM Loader
     // -------------------------------------------------------------------------
-    ssmLoader: function (ssmOptions) {
-      var menu_id;
-      var xhr_data_path;
-
-      // cast text-based booleans
-      var isToc = (ssmOptions.toc === 'true');
+    famLoader: function (famOptions) {
 
       _this.setState('loading');
       logger.info('set module state to: ' + _this.getState());
-      logger.info('load HTML data for ssm');
-
-      {% assign id_list = "" %}
+      logger.info('load HTML data for fam');
 
       j1.xhrData ({
-        xhr_container_id: '{{ssm_options.xhr_container_id}}',
-        xhr_data_path:    '{{ssm_options.xhr_data_path}}' },
-        'j1.adapter.ssm',
+        xhr_container_id: famOptions.xhr_container_id,
+        xhr_data_path:    famOptions.xhr_data_path,
+        xhr_data_element: famOptions.fam_menu_id },
+        'j1.adapter.fam',
         'data_loaded'
       );
 
       // ---------------------------------------------------------------------
-      // Initialize MMenu Navs and Drawers
+      // Initialize FAM button
       // ---------------------------------------------------------------------
-      var dependencies_met_mmenu_initialized = setInterval (function () {
-        if (j1.xhrDOMState['#{{ssm_options.xhr_container_id}}'] == 'success') {
+      var dependencies_met_fam_initialized = setInterval (function () {
+        if (j1.xhrDOMState['#' + famOptions.xhr_container_id] == 'success' && j1.getState() == 'finished') {
           _this.setState('loaded');
           logger.info('set module state to: ' + _this.getState());
-          logger.info('HTML data for ssm: ' + _this.getState());
-          j1.core.ssm.init (moduleOptions);
-          if(isToc) {
-            logger.info('found toc in page: enabled');
-            if ( j1.adapter.toccer.getState() == 'finished' ) {
-              logger.info('met dependencies for: toccer');
-              _this.setState('processing');
-              logger.info('set module state to: ' + _this.getState());
-              logger.info('initialize ssm menu');
-              ssmOptions.mode === 'icon'
-                ? logger.info('ssm mode detected: icon')
-                : logger.info('ssm mode detected: menu');
-              _this.scrollSpy(ssmOptions);
-              _this.buttonInitializer(ssmOptions);
-
-              _this.setState('finished');
-              logger.info('state: ' + _this.getState());
-              logger.info('module initialized successfully');
-              logger.info('met dependencies for: xhrData');
-              clearInterval(dependencies_met_mmenu_initialized);
-            }
-          } else {
-            logger.info('found toc in page: disabled');
-            logger.info('disable toc menu and prev|next section buttons');
-            $('#ssm_toc').closest('.ssm-btn').hide();
-            $('#ssm_previous_section').closest('.ssm-btn').hide();
-            $('#ssm_next_section').closest('.ssm-btn').hide();
-            _this.scrollSpy(ssmOptions);
-            _this.buttonInitializer(ssmOptions);
-            logger.info('met dependencies for: xhrData');
-            clearInterval(dependencies_met_mmenu_initialized);
-          }
+          logger.info('HTML data for fam: ' + _this.getState());
+
+//        _this.scrollSpy(famOptions);
+          _this.buttonInitializer(famOptions);
+
+          _this.setState('finished');
+          logger.info('state: ' + _this.getState());
+          logger.info('module initialized successfully');
+
+          $('.fam-btn').show();
+
+          clearInterval(dependencies_met_fam_initialized);
         }
-      }, 25); // END dependencies_met_mmenu_initialized
+      }, 25); // END dependencies_met_fam_initialized
     }, // END dataLoader
 
     // -------------------------------------------------------------------------
     // Button Initializer
     // -------------------------------------------------------------------------
-    buttonInitializer: function (ssmOptions) {
+    buttonInitializer: function (famOptions) {
       var eventHandler;
+      var actionMenuId;
+      var actionMenuOptions;
+      var actionButtonId;
+      var instances;
+      var $actionButton;
+      var toggleIcons;
+      var famActions;
+      var $famContainer         = $('#' + famOptions.xhr_container_id);
+      var iconFamily            = famOptions.icon_family.toLowerCase();
+      var floatingActionOptions = famOptions.menu_options;
+      var famButtons            = document.querySelectorAll('.fam-btn');
+
+      // check if multiple buttons detected
+      if ( famButtons.length == 1 ) {
+        _this.setState('processing');
+        logger.info('set module state to: ' + _this.getState());
+        logger.info('initialize fam menu');
+
+        actionButtonId  = famButtons[0].firstElementChild.id;
+        actionMenuId    = actionButtonId.replace('_button', '');
+        instances       = j1.fam.init(famButtons, floatingActionOptions);
+        $actionButton   = $('#' + actionButtonId);
+
+        famOptions.menus.forEach(function (menu, index) {
+          if (menu.id === actionMenuId) {
+            actionMenuOptions = famOptions.menus[index];
+          };
+        });
+
+        // count number of menu actions for the button. If only one action
+        // found the FAM button gets created as a FAB (no menu) that has the
+        // the action bound directly to the button
+        //
+        famActions = actionMenuOptions.items.length;
+        toggleIcons = iconFamily + '-' + actionMenuOptions.icon + ' ' + iconFamily + '-' + actionMenuOptions.icon_hover;
+
+        // toggle the icon for the FAB if configured
+        if (floatingActionOptions.hoverEnabled) {
+          $actionButton.hover(
+            function() {
+              $('#fam-icon').toggleClass(toggleIcons);
+            }, function() {
+              $('#fam-icon').toggleClass(toggleIcons);
+            }
+          );
+        } else {
+          $actionButton.on('click', function (e) {
+            $('#fam-icon').toggleClass(toggleIcons);
+          });
+        }
 
-      {% for item in ssm_options.items %} {% if item.enabled %}
-
-      {% comment %} Identify the menu (item) type
-      -------------------------------------------------------------------------- {% endcomment %}
-      {% if item.sublevel %}
-        {% assign menu_type = 'sublevel_menu' %}
-      {% else %}
-        {% assign menu_type = 'top_level_item' %}
-      {% endif %}
-
-      {% if menu_type ==  'top_level_item' %}
-      {% assign button_id = item.id %}
-
-      // Create an eventhandler instance if id exists: {{button_id}}
-      if ($('#{{button_id}}').length) {
-        eventHandler = '{{item.event_handler}}';
-        // check if eventhandler configured is a SINGLE word
-        if (eventHandler.split(' ').length == 1) {
-          logger.info('register pre-configured eventhandler {{item.event_handler}} on id: {{button_id}}');
-          $('#{{button_id}}').each(function(e) {
-            var $this = $(this);
-            $this.on('click', function(e) {
-              _this.{{item.event_handler}}(sect1Nodes);
-            });
+        if (famActions > 1) {
+
+          actionMenuOptions.items.forEach(function (item, index) {
+            // Bind an eventhandler instance if item id exists
+            if ($('#' + item.id).length) {
+              eventHandler = item.event_handler;
+              // check if eventhandler configured is a SINGLE word
+              if (eventHandler.split(' ').length == 1) {
+                logger.info('register pre-configured eventhandler ' +eventHandler+ ' on id: #' + item.id);
+
+                if ( eventHandler === 'open_mmenu_toc' ) {
+                  if ($('#j1-toc-mgr').length) {
+                    logger.info('found toc in page: enabled');
+                    var dependencies_met_toccer_finished = setInterval (function () {
+                      if ( j1.adapter.toccer.getState() == 'finished' ) {
+                        logger.info('met dependencies for: toccer');
+
+                        // famOptions.mode === 'icon'
+                        //   ? logger.info('fam mode detected: icon')
+                        //   : logger.info('fam mode detected: menu');
+
+                        $('#open_mmenu_toc').show();
+                        clearInterval(dependencies_met_toccer_finished);
+                      }
+                    }, 25); // END dependencies_met_toccer_finished
+                  } else {
+                    logger.info('found toc in page: disabled');
+                  }
+                } else {
+                  $('#' + item.id).show();
+                } // END eventHandler 'open_mmenu_toc'
+
+                $('#' + item.id).each(function(e) {
+                  var $this = $(this);
+                  $this.on('click', function(e) {
+                  _this[item.event_handler](sect123Nodes);
+  //              _this[item.event_handler](sect12Nodes);
+                  });
+                });
+              } else {
+                logger.info('register custom eventhandler on id: #' + item.id);
+              }
+            } else {
+  //          alert ('Creating Eventhandler failed on id: #' + item.id);
+              logger.error('Creating Eventhandler failed on id: #' + item.id);
+            } // END if items (action buttons)
           });
         } else {
-          logger.info('register custom eventhandler on id: {{button_id}}');
-        }
+          // single action, create FAB
+          logger.info('single action found for FAM, create: FAB');
+
+          // disable hover event (CSS)
+          // $actionButton.css({'pointer-events': 'none'})
+
+          actionMenuOptions.items.forEach(function (item, index) {
+            eventHandler = item.event_handler;
+            // check if eventhandler configured is a SINGLE word
+            if (eventHandler.split(' ').length == 1) {
+              logger.info('register pre-configured eventhandler ' +eventHandler+ ' on id: #' + actionButtonId);
+
+              if (eventHandler === 'scroll_to_top') {
+                // register click event
+                $actionButton.on('click', function(e) {
+                  var dest = 0;
+                  $('html, body').animate({
+                    scrollTop: dest
+                  }, 500);
+                });
+              } // END if eventHandler == scroll_to_top
+
+              if ( eventHandler === 'open_mmenu_toc' ) {
+                // check if toccer (toc_mgr) is available
+                if ($('#j1-toc-mgr').length) {
+                  logger.info('found toc in page: enabled');
+                  var dependencies_met_toccer_finished = setInterval (function () {
+                    if ( j1.adapter.toccer.getState() == 'finished' ) {
+                      logger.info('met dependencies for toccer: finished');
+                      // change the id of the $actionButton to the already
+                      // registered id by mmenu adapter of ('open_mmenu_toc')
+                      // to open the TOC sidebar
+                      //
+                      $actionButton.prop('id', 'open_mmenu_toc');
+                      clearInterval(dependencies_met_toccer_finished);
+                    }
+                  }, 25); // END dependencies_met_toccer_finished
+                } else {
+                  logger.info('found toc in page: disabled');
+                  logger.info('eventhandler: disabled');
+                }
+              } // END if eventHandler == open_mmenu_toc
+            }
+          });
+        } // END else
       } else {
-        alert ('Creating Eventhandler failed on: #{{button_id}}');
-      } // END items (buttons)
-      {% endif %} // menu_type 'top_level_item'
-      {% endif %} // ENDIF button_id enabled
-      {% endfor %} // ENDFOR items
+//      alert ('Multiple FAM buttons found: ' + famButtons.length);
+        logger.error('Multiple FAM buttons found: ' + famButtons.length);
+        logger.info('FAM container set to hidden: ' + $famContainer);
+        $famContainer.hide();
+      } // END if famButton
     }, // END buttonInitializer
 
     // -------------------------------------------------------------------------
     // Eventhandler
 
     // -------------------------------------------------------------------------
-    // open mobile menu
+    // open mmenu TOC
     // -------------------------------------------------------------------------
-    open_ssm_toc: function () {
-    }, // END open_ssm_toc
+    open_mmenu_toc: function () {
+        // Event configured with Navigator module (navigator.yml)
+        // with content section DRAWER TOC. Event registered at
+        // runtime on element with id '#open_mmenu_toc' by Mobile Menu
+        // module ADAPTER (mmenu.js)
+        //
+        // NOTE: no further handling needed for this event
+    },  // END open_mmenu_toc
 
     // -------------------------------------------------------------------------
     // reload page
     // -------------------------------------------------------------------------
     reload_page: function () {
       location.reload();
-    }, // END open_ssm_toc
+    }, // END reload_page
+
     // -------------------------------------------------------------------------
     // scroll to previous section
     // -------------------------------------------------------------------------
@@ -318,9 +417,6 @@ j1.adapter['ssm'] = (function (j1, window) {
             previous_header_id  = $(prev_node).find(':header').first()[0].id;
             anchor_id           = '#' + previous_header_id;
 
-            $('a[href*="' + current_header_id + '"]').removeClass('is-active-link');
-            $('a[href*="' + previous_header_id + '"]').addClass('is-active-link');
-
             j1.core.scrollSmooth.scroll( anchor_id, {
               duration: scrollDuration,
               offset: scrollOffset,
@@ -337,38 +433,48 @@ j1.adapter['ssm'] = (function (j1, window) {
     // -------------------------------------------------------------------------
     scroll_next_section: function (nodes) {
       var next_header_id;
+      var next_header_plus_id;
       var currentNode;
+      var current_header_id;
       var nextNode;
-      var anchor_id;
-
+      var next_header_id;
+      var next_anchor_id;
       var index             = 0;
-      var maxNode           = $(nodes).length -1;
+      var maxNode           = $(nodes).length-1;
+//    var maxNode           = $(nodes).length;
       var $toc              = $('#sidebar');
-      var current_header_id = $toc.find('.is-active-link').attr('href');
       var scrollDuration    = {{toccer_options.scrollSmoothDuration}};
       var scrollOffset      = {{toccer_options.scrollSmoothOffset}};
 
-      // Correction if mobile (offset: desktop -90px, mobile -80px)
-      scrollOffset          = j1.core.isMobile() ? scrollOffset + 10 : scrollOffset;
-
+      current_header_id = $toc.find('.is-active-link').attr('href');
       nodes.each(function () {
         currentNode = $(this).find(current_header_id);
         if (currentNode.length) {
           if (index == maxNode) {
             return false;
           } else {
-            nextNode = nodes[index+1];
-            next_header_id  = $(nextNode).find(':header').first()[0].id;
-            anchor_id       = '#' + next_header_id;
-
-            $('a[href*="' + current_header_id + '"]').removeClass('is-active-link');
-            $('a[href*="' + next_header_id + '"]').addClass('is-active-link');
-
-            j1.core.scrollSmooth.scroll( anchor_id, {
+//          nextNode              = nodes[index];
+//          next_header_id        = $(nextNode).find(':header').first()[0].id;
+//          anchor_id             = '#' + next_header_id;
+            nextNode              = nodes[index+1];
+            next_header_id        = $(nextNode).find(':header').first()[0].id;
+            next_anchor_id        = '#' + next_header_id;
+
+            // Correction if mobile (offset: desktop -90px, mobile -80px)
+            scrollOffset          = j1.core.isMobile() ? scrollOffset + 10 : scrollOffset;
+
+            // j1.core.scrollSmooth.scroll( next_anchor_id, {
+            //   duration: scrollDuration,
+            //   offset: scrollOffset,
+            //   callback: tocbot.refresh()
+            // });
+
+            j1.core.scrollSmooth.scroll( next_anchor_id, {
               duration: scrollDuration,
               offset: scrollOffset,
               callback: null
             });
+
           }
         }
         index < maxNode ? index++ : index;
@@ -384,6 +490,8 @@ j1.adapter['ssm'] = (function (j1, window) {
       $('html, body').animate({
         scrollTop: dest
       }, 500);
+
+      // tocbot.refresh();
     }, // END scroll_top
 
     // -------------------------------------------------------------------------
@@ -399,6 +507,8 @@ j1.adapter['ssm'] = (function (j1, window) {
       $('html, body').animate({
         scrollTop: pageHeight
       }, 500);
+
+      // tocbot.refresh();
     }, // END scroll_bottom
 
     // -------------------------------------------------------------------------
@@ -447,10 +557,10 @@ j1.adapter['ssm'] = (function (j1, window) {
 
     // -------------------------------------------------------------------------
     // Manage (top) position and sizes (@media breakpoints) of the
-    // SSM container depending on the size of the page header (attic)
+    // FAM container depending on the size of the page header (attic)
     // -------------------------------------------------------------------------
     scrollSpy: function (options) {
-      logger = log4javascript.getLogger('j1.adapter.ssm.scrollSpy');
+      logger = log4javascript.getLogger('j1.adapter.fam.scrollSpy');
 
       $(window).scroll(function(event){
         var $navbar         = $('nav.navbar');
@@ -458,7 +568,7 @@ j1.adapter['ssm'] = (function (j1, window) {
         var $main_content   = $('.js-toc-content');
         var $adblock        = $('#adblock');
         var $footer         = $('#j1_footer');
-        var $ssmContainer   = $('#ssm-container');
+        var $famContainer   = $('#fam-container');
         var $page           = $(document);
         var offset          = 0;
         var pageOffset      = $(document).width() >= 992 ? -120 : -116;
@@ -467,32 +577,32 @@ j1.adapter['ssm'] = (function (j1, window) {
         var pageHeightOuter = $page.outerHeight();
 
         var m               = $main_content.offset().top;
-        var s               = $ssmContainer.length ? $ssmContainer.height() : 0;
+        var s               = $famContainer.length ? $famContainer.height() : 0;
         var f               = $footer.length   ? $footer.outerHeight() : 0;
         var n               = $navbar.length   ? $navbar.height() : 0;
 //      var h               = $pagehead.length ? $pagehead.outerHeight() : 0;
         var a               = $adblock.length  ? $adblock.outerHeight() : 0;
         var o               = n + offset;
 
-        // space above the (fixed) ssm container
+        // space above the (fixed) fam container
         var showSsmPos      = m + pageOffset;
 
-        // space below the (fixed) ssm container
+        // space below the (fixed) fam container
         var hideSsmPos      = pageHeight - s - f + pageOffset;
 
-        // set the top position of ssm container for navbar modes
+        // set the top position of fam container for navbar modes
         // e.g. "sticky" (navbar-fixed)
         if($navbar.hasClass('navbar-fixed')){
-          $('#ssm-container').css('top', o);
+          $('#fam-container').css('top', o);
         } else {
-          $('#ssm-container').css('top', m);
+          $('#fam-container').css('top', m);
         }
 
-        // show|hide ssm container on scroll position in page
+        // show|hide fam container on scroll position in page
         //
         scrollPos >= showSsmPos && scrollPos <= hideSsmPos
-          ? $ssmContainer.css('display','block')
-          : $ssmContainer.css('display','none');
+          ? $famContainer.css('display','block')
+          : $famContainer.css('display','none');
 
         // logger.debug('content pos detected as: ' + m + 'px');
         // logger.debug('scroll pos detected as: ' + scrollPos + 'px');