patternfly-sass 0.0.0.pre.semantically.pre.released → 1.2.0

data/dist/js/patternfly-functions.js

@@ -1,1307 +0,0 @@
-// Util: definition of breakpoint sizes for tablet and desktop modes
-(function ($) {
-  'use strict';
-  if (patternfly !== undefined) {
-    $.pfBreakpoints = patternfly.pfBreakpoints;
-  }
-}(jQuery));
-// PatternFly pf-list
-(function ($) {
-  'use strict';
-
-  $.fn.pfList = function () {
-    function init (list) {
-      // Ensure the state of the expansion elements is consistent
-      list.find('[data-list=expansion], .list-pf-item, .list-pf-expansion').each(function (index, element) {
-        var $expansion = $(element),
-          $collapse = $expansion.find('.collapse').first(),
-          expanded = $collapse.hasClass('in');
-        updateChevron($expansion, expanded);
-        if ($expansion.hasClass('list-pf-item')) {
-          updateActive($expansion, expanded);
-        }
-      });
-      list.find('.list-pf-container').each(function (index, element) {
-        var $element = $(element);
-        // The toggle element is the element with the data-list=toggle attribute
-        // or the entire .list-pf-container as a fallback
-        var $toggles = $element.find('[data-list=toggle]');
-        $toggles.length || ($toggles = $element);
-        $toggles.on('keydown', function (event) {
-          if (event.keyCode === 13 || event.keyCode === 32) {
-            toggleCollapse(this);
-            event.stopPropagation();
-            event.preventDefault();
-          }
-        });
-        $toggles.on('click', function (event) {
-          toggleCollapse(this);
-          event.stopPropagation();
-          event.preventDefault();
-        });
-      });
-    }
-
-    function toggleCollapse (toggle) {
-      var $toggle, $expansion, $collapse, expanded, $listItem;
-      $toggle = $(toggle);
-      // Find the parent expansion of the toggle
-      $expansion = $toggle.parentsUntil('.list-pf', '[data-list=expansion]').first();
-      $expansion.length || ($expansion = $toggle.closest('.list-pf-item, .list-pf-expansion'));
-
-      // toggle the "in" class of its  first .collapse child
-      $collapse = $expansion.find('.collapse').first();
-      $collapse.toggleClass('in');
-
-      // update the state of the expansion element
-      updateChevron($expansion, $collapse.hasClass('in'));
-      $listItem = $expansion.closest('.list-pf-item');
-      updateActive($listItem, $listItem.find('.collapse').first().hasClass('in'));
-    }
-
-    function updateActive ($listItem, expanded) {
-      // Find the closest .list-pf-item of the expansion, and set its "active" class
-      if (expanded) {
-        $listItem.addClass('active');
-      } else {
-        $listItem.removeClass('active');
-      }
-    }
-
-    function updateChevron ($expansion, expanded) {
-      var $chevron = $expansion.find('.list-pf-chevron .fa').first();
-      if (expanded) {
-        $chevron.removeClass('fa-angle-right');
-        $chevron.addClass('fa-angle-down');
-      } else {
-        $chevron.addClass('fa-angle-right');
-        $chevron.removeClass('fa-angle-down');
-      }
-    }
-
-    init(this);
-
-    return this;
-  };
-}(jQuery));
-
-// Util: PatternFly Sidebar
-// Set height of sidebar-pf to height of document minus height of navbar-pf if not mobile
-(function ($) {
-  'use strict';
-  $.fn.sidebar = function () {
-    var documentHeight = 0,
-      navbarpfHeight = 0,
-      colHeight = 0;
-
-    if ($('.navbar-pf .navbar-toggle').is(':hidden')) {
-      documentHeight = $(document).height();
-      navbarpfHeight = $('.navbar-pf').outerHeight();
-      colHeight = documentHeight - navbarpfHeight;
-    }
-    $('.sidebar-pf').parent('.row').children('[class*="col-"]').css({"min-height" : colHeight});
-  };
-
-  $(document).ready(function () {
-    // Call sidebar() on ready if .sidebar-pf exists and .datatable does not exist
-    if ($('.sidebar-pf').length > 0 && $('.datatable').length === 0) {
-      $.fn.sidebar();
-    }
-  });
-
-  $(window).on('resize', function () {
-    // Call sidebar() on resize if .sidebar-pf exists
-    if ($('.sidebar-pf').length > 0) {
-      $.fn.sidebar();
-    }
-  });
-}(jQuery));
-
-// Util: PatternFly Popovers
-// Add data-close="true" to insert close X icon
-(function ($) {
-  'use strict';
-
-  $.fn.popovers = function () {
-    // Initialize
-    this.popover();
-
-    // Add close icons
-    this.filter('[data-close=true]').each(function (index, element) {
-      var $this = $(element),
-        title = $this.attr('data-original-title') + '<button type="button" class="close" aria-hidden="true"><span class="pficon pficon-close"></span></button>';
-
-      $this.attr('data-original-title', title);
-    });
-
-    // Bind Close Icon to Toggle Display
-    this.on('click', function (e) {
-      var $this = $(this),
-        $title = $this.next('.popover').find('.popover-title');
-
-      // Only if data-close is true add class "x" to title for right padding
-      $title.find('.close').parent('.popover-title').addClass('closable');
-
-      // Bind x icon to close popover
-      $title.find('.close').on('click', function () {
-        $this.popover('hide');
-      });
-
-      // Prevent href="#" page scroll to top
-      e.preventDefault();
-    });
-
-    return this;
-  };
-}(jQuery));
-
-// Util: DataTables Settings
-(function ($) {
-  'use strict';
-  if ($.fn.dataTableExt) {
-    /* Set the defaults for DataTables initialisation */
-    $.extend(true, $.fn.dataTable.defaults, {
-      "bDestroy": true,
-      "bAutoWidth": false,
-      "iDisplayLength": 20,
-      "sDom":
-        "<'dataTables_header' f i r >" +
-        "<'table-responsive'  t >" +
-        "<'dataTables_footer' p >",
-      "oLanguage": {
-        "sInfo": "Showing <b>_START_</b> to <b>_END_</b> of <b>_TOTAL_</b> Items",
-        "sInfoFiltered" : "(of <b>_MAX_</b>)",
-        "sInfoEmpty" : "Showing <b>0</b> Results",
-        "sZeroRecords":
-          "<p>Suggestions</p>" +
-          "<ul>" +
-            "<li>Check the javascript regular expression syntax of the search term.</li>" +
-            "<li>Check that the correct menu option is chosen (token ID vs. user ID).</li>" +
-            "<li>Use wildcards (* to match 0 or more characters, + to match 1 or more characters, ? to match 0 or 1 character).</li>" +
-            "<li>Clear the search field, then click Search to return to the 20 most recent records.</li>" +
-          "</ul>",
-        "sSearch": ""
-      },
-      "sPaginationType": "bootstrap_input",
-      "oSearch": {
-        "sSearch": "",
-        "bRegex": true,
-        "bSmart": false
-      }
-    });
-
-    /* Default class modification */
-    $.extend($.fn.dataTableExt.oStdClasses, {
-      "sWrapper": "dataTables_wrapper"
-    });
-
-    /* API method to get paging information */
-    $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
-      return {
-        "iStart":         oSettings._iDisplayStart,
-        "iEnd":           oSettings.fnDisplayEnd(),
-        "iLength":        oSettings._iDisplayLength,
-        "iTotal":         oSettings.fnRecordsTotal(),
-        "iFilteredTotal": oSettings.fnRecordsDisplay(),
-        "iPage":          oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
-        "iTotalPages":    oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
-      };
-    };
-
-    /* Combination of Bootstrap + Input Text style pagination control */
-    $.extend($.fn.dataTableExt.oPagination, {
-      "bootstrap_input": {
-        "fnInit": function (oSettings, nPaging, fnDraw) {
-          var fnClickHandler = function (e) {
-              e.preventDefault();
-              if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
-                fnDraw(oSettings);
-              }
-            },
-            els,
-            nInput;
-
-          $(nPaging).append(
-            '<ul class="pagination">' +
-              '  <li class="first disabled"><span class="i fa fa-angle-double-left"></span></li>' +
-              '  <li class="prev disabled"><span class="i fa fa-angle-left"></span></li>' +
-              '</ul>' +
-              '<div class="pagination-input">' +
-              '  <input type="text" class="paginate_input">' +
-              '  <span class="paginate_of">of <b>3</b></span>' +
-              '</div>' +
-              '<ul class="pagination">' +
-              '  <li class="next disabled"><span class="i fa fa-angle-right"></span></li>' +
-              '  <li class="last disabled"><span class="i fa fa-angle-double-right"></span></li>' +
-              '</ul>'
-          );
-
-          els = $('li', nPaging);
-          $(els[0]).bind('click.DT', { action: "first" }, fnClickHandler);
-          $(els[1]).bind('click.DT', { action: "previous" }, fnClickHandler);
-          $(els[2]).bind('click.DT', { action: "next" }, fnClickHandler);
-          $(els[3]).bind('click.DT', { action: "last" }, fnClickHandler);
-
-          nInput = $('input', nPaging);
-          $(nInput).keyup(function (e) {
-            var iNewStart;
-            if (e.which === 38 || e.which === 39) {
-              this.value += 1;
-            } else if ((e.which === 37 || e.which === 40) && this.value > 1) {
-              this.value -= 1;
-            }
-
-            if (this.value === "" || !this.value.match(/[0-9]/)) {
-              /* Nothing entered or non-numeric character */
-              return;
-            }
-
-            iNewStart = oSettings._iDisplayLength * (this.value - 1);
-            if (iNewStart >= oSettings.fnRecordsDisplay()) {
-              /* Display overrun */
-              oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) /
-                oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
-              fnDraw(oSettings);
-              return;
-            }
-
-            oSettings._iDisplayStart = iNewStart;
-            fnDraw(oSettings);
-          });
-        },
-
-        "fnUpdate": function (oSettings, fnDraw) {
-          var oPaging = oSettings.oInstance.fnPagingInfo(),
-            an = oSettings.aanFeatures.p,
-            ien = an.length,
-            iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength),
-            iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1,
-            i;
-
-          for (i = 0; i < ien; i += 1) {
-            $('.paginate_input', an[i]).val(iCurrentPage)
-              .siblings('.paginate_of').find('b').html(iPages);
-
-            // Add / remove disabled classes from the static elements
-            if (oPaging.iPage === 0) {
-              $('li.first', an[i]).addClass('disabled');
-              $('li.prev', an[i]).addClass('disabled');
-            } else {
-              $('li.first', an[i]).removeClass('disabled');
-              $('li.prev', an[i]).removeClass('disabled');
-            }
-
-            if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
-              $('li.next', an[i]).addClass('disabled');
-              $('li.last', an[i]).addClass('disabled');
-            } else {
-              $('li.next', an[i]).removeClass('disabled');
-              $('li.last', an[i]).removeClass('disabled');
-            }
-          }
-        }
-      }
-    });
-  }
-}(jQuery));
-
-// Util: PatternFly Collapsible Left Hand Navigation
-// Must have navbar-toggle in navbar-pf-alt for expand/collapse
-(function ($) {
-
-  'use strict';
-
-  $.fn.navigation = function () {
-
-    var navElement = $('.layout-pf-alt-fixed .nav-pf-vertical-alt'),
-      bodyContentElement = $('.container-pf-alt-nav-pf-vertical-alt'),
-      toggleNavBarButton = $('.navbar-toggle'),
-      explicitCollapse = false,
-      checkNavState = function () {
-        var width = $(window).width();
-
-        //Always remove the hidden & peek class
-        navElement.removeClass('hidden show-mobile-nav collapsed');
-
-        //Set the body class back to the default
-        bodyContentElement.removeClass('collapsed-nav hidden-nav');
-
-        // Check to see if the nav needs to collapse
-        if (width < $.pfBreakpoints.desktop || explicitCollapse) {
-          navElement.addClass('collapsed');
-          bodyContentElement.addClass('collapsed-nav');
-        }
-
-        // Check to see if we need to move down to the mobile state
-        if (width < $.pfBreakpoints.tablet) {
-          //Set the nav to being hidden
-          navElement.addClass('hidden');
-
-          //Make sure this is expanded
-          navElement.removeClass('collapsed');
-
-          //Set the body class to the correct state
-          bodyContentElement.removeClass('collapsed-nav');
-          bodyContentElement.addClass('hidden-nav');
-        }
-      },
-      collapseMenu = function () {
-        //Make sure this is expanded
-        navElement.addClass('collapsed');
-        //Set the body class to the correct state
-        bodyContentElement.addClass('collapsed-nav');
-
-        explicitCollapse = true;
-      },
-      enableTransitions = function () {
-        // enable transitions only when toggleNavBarButton is clicked or window is resized
-        $('html').addClass('transitions');
-      },
-      expandMenu = function () {
-        //Make sure this is expanded
-        navElement.removeClass('collapsed');
-        //Set the body class to the correct state
-        bodyContentElement.removeClass('collapsed-nav');
-
-        explicitCollapse = false;
-      },
-      bindMenuBehavior = function () {
-        toggleNavBarButton.on('click', function (e) {
-          var inMobileState = bodyContentElement.hasClass('hidden-nav');
-          enableTransitions();
-
-          if (inMobileState && navElement.hasClass('show-mobile-nav')) {
-            //In mobile state just need to hide the nav
-            navElement.removeClass('show-mobile-nav');
-          } else if (inMobileState) {
-            navElement.addClass('show-mobile-nav');
-          } else if (navElement.hasClass('collapsed')) {
-            expandMenu();
-          } else {
-            collapseMenu();
-          }
-        });
-      },
-      setTooltips = function () {
-        $('.nav-pf-vertical-alt [data-toggle="tooltip"]').tooltip({'container': 'body', 'delay': { 'show': '500', 'hide': '200' }});
-
-        $(".nav-pf-vertical-alt").on("show.bs.tooltip", function (e) {
-          return $(this).hasClass("collapsed");
-        });
-
-      },
-      init = function () {
-        //Set correct state on load
-        checkNavState();
-
-        // Bind Top level hamburger menu with menu behavior;
-        bindMenuBehavior();
-
-        //Set tooltips
-        setTooltips();
-      };
-
-    //Listen for the window resize event and collapse/hide as needed
-    $(window).on('resize', function () {
-      checkNavState();
-      enableTransitions();
-    });
-
-    init();
-
-  };
-
-  $(document).ready(function () {
-    if ($('.nav-pf-vertical-alt').length > 0) {
-      $.fn.navigation();
-    }
-  });
-
-}(jQuery));
-
-// Count and Display Remaining Characters
-(function ($) {
-
-  'use strict';
-
-  $.fn.countRemainingChars = function (options) {
-
-    var settings = $.extend({
-        // These are the defaults.
-        charsMaxLimit: 100,
-        charsWarnRemaining: 5,
-        blockInputAtMaxLimit: false
-      }, options),
-      $taFld = this,
-      $countFld = $('#'  + settings.countFld).text(settings.charsMaxLimit),
-      charsRemainingFn = function (charsLength) {
-        var charsRemaining = settings.charsMaxLimit - charsLength;
-        $countFld.text(charsRemaining);
-        $countFld.toggleClass('chars-warn-remaining-pf', charsRemaining <= settings.charsWarnRemaining);
-        if (charsRemaining < 0) {
-          $taFld.trigger("overCharsMaxLimitEvent", $taFld.attr('id'));
-        } else {
-          $taFld.trigger("underCharsMaxLimitEvent", $taFld.attr('id'));
-        }
-      };
-
-    this.on('paste', function (event) {
-      setTimeout(function () {
-        var charsLength = $taFld.val().length, maxTxt;
-
-        if (settings.blockInputAtMaxLimit && charsLength > settings.charsMaxLimit) {
-          maxTxt = $taFld.val();
-          maxTxt = maxTxt.substring(0, settings.charsMaxLimit);
-          $taFld.val(maxTxt);
-          charsLength = $taFld.val().length;
-        }
-
-        charsRemainingFn(charsLength);
-      }, 100);
-    });
-
-    this.keyup(function (event) {
-      charsRemainingFn($taFld.val().length);
-    });
-
-    this.keydown(function (event) {
-      var charsLength = $taFld.val().length;
-
-      if (settings.blockInputAtMaxLimit && charsLength >= settings.charsMaxLimit) {
-        // Except backspace
-        if (event.keyCode !== 8) {
-          event.preventDefault();
-        }
-      }
-    });
-
-    return this;
-  };
-}(jQuery));
-
-// Util: PatternFly Palette colors
-(function ($) {
-  'use strict';
-
-  if (patternfly !== undefined) {
-    $.pfPaletteColors = patternfly.pfPaletteColors;
-  }
-}(jQuery));
-
-// Util: PatternFly C3 Chart Defaults
-(function ($) {
-  'use strict';
-  if (patternfly !== undefined) {
-    $.fn.pfSetDonutChartTitle = patternfly.pfSetDonutChartTitle;
-    $.fn.pfDonutTooltipContents = patternfly.pfDonutTooltipContents;
-    $.fn.pfGetUtilizationDonutTooltipContentsFn = patternfly.pfGetUtilizationDonutTooltipContentsFn;
-    $.fn.pfGetBarChartTooltipContentsFn = patternfly.pfGetBarChartTooltipContentsFn;
-    $.fn.pfSingleLineChartTooltipContentsFn = patternfly.pfSingleLineChartTooltipContentsFn;
-    $.fn.pfPieTooltipContents = patternfly.pfPieTooltipContents;
-    $.fn.c3ChartDefaults = patternfly.c3ChartDefaults;
-  }
-}(jQuery));
-
-// Util: PatternFly Collapse with fixed heights
-// Update the max-height of collapse elements based on the parent container's height.
-(function ($) {
-  'use strict';
-
-  $.fn.initCollapseHeights = function (scrollSelector) {
-    var parentElement = this, setCollapseHeights, targetScrollSelector = scrollSelector;
-
-    setCollapseHeights = function () {
-      var height, openPanel, contentHeight, bodyHeight, overflowY = 'hidden';
-
-      height = parentElement.height();
-
-      // Close any open panel
-      openPanel = parentElement.find('.collapse.in');
-      if (openPanel && openPanel.length > 0) {
-        openPanel.removeClass('in');
-      }
-
-      // Determine the necessary height for the closed content
-      contentHeight = 0;
-      parentElement.children().each($.proxy(function (i, element) {
-        var $element = $(element);
-        contentHeight += $element.outerHeight(true);
-      }, parentElement)).end();
-
-      // Determine the height remaining for opened collapse panels
-      bodyHeight = height - contentHeight;
-
-      // Make sure we have enough height to be able to scroll the contents if necessary
-      if (bodyHeight < 25) {
-        bodyHeight = 25;
-
-        // Allow the parent to scroll so the child elements are accessible
-        overflowY = 'auto';
-      }
-
-      // Reopen the initially opened panel
-      if (openPanel && openPanel.length > 0) {
-        openPanel.addClass("in");
-      }
-
-      setTimeout(function () {
-        // Set the max-height for the collapse panels
-        parentElement.find('[data-toggle="collapse"]').each($.proxy(function (i, element) {
-          var $element, selector, $target, scrollElement, innerHeight = 0;
-          $element = $(element);
-
-          // Determine the selector to find the target
-          selector = $element.attr('data-target');
-          if (!selector) {
-            selector = $element.attr('href');
-          }
-
-          // Determine the scroll element (either the target or the child of the target based on the given selector)
-          $target = $(selector);
-          scrollElement = $target;
-          if (targetScrollSelector) {
-            scrollElement = $target.find(targetScrollSelector);
-            if (scrollElement.length === 1) {
-              innerHeight = 0;
-              $target.children().each($.proxy(function (j, sibling) {
-                var $sibling = $(sibling);
-                if (sibling !== scrollElement[0]) {
-                  innerHeight += $sibling.outerHeight(true);
-                }
-              }, $target)).end();
-              bodyHeight -= innerHeight;
-            } else {
-              scrollElement = $target;
-            }
-          }
-          // Set the max-height and vertical scroll of the scroll element
-          scrollElement.css({'max-height': (bodyHeight - innerHeight) + 'px', 'overflow-y': 'auto'});
-        }, parentElement)).end();
-
-        parentElement.css({'overflow-y': overflowY});
-      }, 100);
-    };
-
-    setCollapseHeights();
-
-    // Update on window resizing
-    $(window).on('resize', setCollapseHeights);
-
-  };
-
-  $.fn.initFixedAccordion = function () {
-    var fixedAccordion = this, initOpen;
-
-    fixedAccordion.on('show.bs.collapse','.collapse', function (event) {
-      $(event.target.parentNode).addClass('panel-open');
-    });
-
-    fixedAccordion.on('hide.bs.collapse','.collapse', function (event) {
-      $(event.target.parentNode).removeClass('panel-open');
-    });
-
-    fixedAccordion.find('.panel').each(function (index, item) {
-      $(item).removeClass('panel-open');
-    });
-
-    initOpen = $(fixedAccordion.find('.collapse.in'))[0];
-    if (initOpen) {
-      $(initOpen.parentNode).addClass('panel-open');
-    }
-  };
-
-}(jQuery));
-
-// Util: PatternFly TreeGrid Tables
-(function ($) {
-  'use strict';
-
-  function getParent (rows, node) {
-    var parent = node.attr('data-parent');
-
-    if (typeof parent === "string") {
-      if (isNaN(parent)) {
-        parent = $(parent);
-        if (parent.length > 1) {
-          parent = rows.closest(parent);
-        }
-      } else {
-        parent = $(rows[parseInt(parent, 10)]);
-      }
-      return parent;
-    }
-    return undefined;
-  }
-
-  function renderItem (item, parent) {
-    if (parent) {
-      parent.find('.treegrid-node > span.expand-icon')
-        .toggleClass('fa-angle-right', parent.hasClass('collapsed'))
-        .toggleClass('fa-angle-down', !parent.hasClass('collapsed'));
-      item.toggleClass('hidden', parent.hasClass('collapsed'));
-      if (parent.hasClass('collapsed')) {
-        item.addClass('collapsed');
-      }
-    }
-  }
-
-  function reStripe (tree) {
-    tree.find('tbody > tr').removeClass('odd');
-    tree.find('tbody > tr:not(.hidden):odd').addClass('odd');
-  }
-
-  $.fn.treegrid = function (options) {
-    var i, rows, _this;
-    rows = this.find('tbody > tr');
-    _this = this;
-    $.each(rows, function () {
-      var node, parent;
-      node = $(this);
-      parent = getParent(rows, node);
-      // Append expand icon dummies
-      node.children('.treegrid-node').prepend('<span class="icon expand-icon fa"/>');
-
-      // Set up an event listener for the node
-      node.children('.treegrid-node').on('click', function (e) {
-        var icon = node.find('span.expand-icon');
-
-        if (options && typeof options.callback === 'function') {
-          options.callback(e);
-        }
-
-        if (icon.hasClass('fa-angle-right')) {
-          node.removeClass('collapsed');
-        }
-        if (icon.hasClass('fa-angle-down')) {
-          node.addClass('collapsed');
-        }
-        $.each(rows.slice(rows.index(node) + 1), function () {
-          renderItem($(this), getParent(rows, $(this)));
-        });
-        reStripe(_this);
-      });
-
-      if (parent) {
-        // Calculate indentation depth
-        i = parent.find('.treegrid-node > span.indent').length + 1;
-        for (; i > 0; i -= 1) {
-          node.children('.treegrid-node').prepend('<span class="indent"/>');
-        }
-        // Render expand/collapse icons
-        renderItem(node, parent);
-      }
-    });
-    reStripe(_this);
-  };
-}(jQuery));
-
-// Util: PatternFly Vertical Navigation
-// Must have navbar-toggle in navbar-pf-vertical for expand/collapse
-(function ($) {
-  'use strict';
-
-  $.fn.setupVerticalNavigation = function (handleItemSelections, ignoreDrawer, userOptions) {
-
-    var options = $.extend({
-        hoverDelay: 500,
-        hideDelay: 700,
-        rememberOpenState: true,
-        storage: 'localStorage',
-      }, userOptions || {}),
-
-      navElement = $('.nav-pf-vertical'),
-      bodyContentElement = $('.container-pf-nav-pf-vertical'),
-      toggleNavBarButton = $('.navbar-toggle'),
-      handleResize = true,
-      explicitCollapse = false,
-      subDesktop = false,
-      storageLocation = options.storage === 'sessionStorage' ? 'sessionStorage' : 'localStorage',
-
-      inMobileState = function () {
-        return bodyContentElement.hasClass('hidden-nav');
-      },
-
-      forceResize = function (delay) {
-        setTimeout(function () {
-          $(window).trigger('resize');
-        }, delay);
-      },
-
-      showSecondaryMenu = function () {
-        if (inMobileState() || !subDesktop) {
-          navElement.addClass('secondary-visible-pf');
-          bodyContentElement.addClass('secondary-visible-pf');
-        }
-
-        // Dispatch a resize event when showing the secondary menu in non-subdesktop state to
-        // allow content to adjust to the secondary menu sizing
-        if (!subDesktop) {
-          forceResize(100);
-        }
-      },
-
-      hideSecondaryMenu = function () {
-        navElement.removeClass('secondary-visible-pf');
-        bodyContentElement.removeClass('secondary-visible-pf');
-
-        if (navElement.find('.secondary-nav-item-pf.is-hover').length <= 1) {
-          navElement.removeClass('hover-secondary-nav-pf');
-        }
-
-        navElement.find('.mobile-nav-item-pf').each(function (index, item) {
-          $(item).removeClass('mobile-nav-item-pf');
-        });
-
-        navElement.find('.is-hover').each(function (index, item) {
-          $(item).removeClass('is-hover');
-        });
-      },
-
-      hideTertiaryMenu = function () {
-        navElement.removeClass('tertiary-visible-pf');
-        bodyContentElement.removeClass('tertiary-visible-pf');
-
-        if (navElement.find('.tertiary-nav-item-pf.is-hover').length <= 1) {
-          navElement.removeClass('hover-tertiary-nav-pf');
-        }
-
-        navElement.find('.mobile-nav-item-pf').each(function (index, item) {
-          $(item).removeClass('mobile-nav-item-pf');
-        });
-
-        navElement.find('.is-hover').each(function (index, item) {
-          $(item).removeClass('is-hover');
-        });
-      },
-
-      setActiveItem = function (item) {
-        // remove all .active
-        $('.nav-pf-vertical .list-group-item.active').removeClass('active');
-
-        // add .active to item and its parents
-        item.addClass('active').parents('.list-group-item').addClass('active');
-      },
-
-      updateSecondaryMenuDisplayAfterSelection = function () {
-        if (inMobileState()) {
-          navElement.removeClass('show-mobile-nav');
-          hideSecondaryMenu();
-          navElement.find('.mobile-nav-item-pf').each(function (index, item) {
-            $(item).removeClass('mobile-nav-item-pf');
-          });
-        } else {
-          showSecondaryMenu();
-        }
-      },
-
-      updateSecondaryCollapsedState = function (setCollapsed, collapsedItem) {
-        if (setCollapsed) {
-          collapsedItem.addClass('collapsed');
-          navElement.addClass('collapsed-secondary-nav-pf');
-          bodyContentElement.addClass('collapsed-secondary-nav-pf');
-        } else {
-          if (collapsedItem) {
-            collapsedItem.removeClass('collapsed');
-          } else {
-            // Remove any collapsed secondary menus
-            navElement.find('[data-toggle="collapse-secondary-nav"]').each(function (index, element) {
-              var $e = $(element);
-              $e.removeClass('collapsed');
-            });
-          }
-          navElement.removeClass('collapsed-secondary-nav-pf');
-          bodyContentElement.removeClass('collapsed-secondary-nav-pf');
-        }
-      },
-
-      updateTertiaryCollapsedState = function (setCollapsed, collapsedItem) {
-        if (setCollapsed) {
-          collapsedItem.addClass('collapsed');
-          navElement.addClass('collapsed-tertiary-nav-pf');
-          bodyContentElement.addClass('collapsed-tertiary-nav-pf');
-          updateSecondaryCollapsedState(false);
-        } else {
-          if (collapsedItem) {
-            collapsedItem.removeClass('collapsed');
-          } else {
-            // Remove any collapsed tertiary menus
-            navElement.find('[data-toggle="collapse-tertiary-nav"]').each(function (index, element) {
-              var $e = $(element);
-              $e.removeClass('collapsed');
-            });
-          }
-          navElement.removeClass('collapsed-tertiary-nav-pf');
-          bodyContentElement.removeClass('collapsed-tertiary-nav-pf');
-        }
-      },
-
-      updateMobileMenu = function (selected, secondaryItem) {
-        $(document).find('.list-group-item.mobile-nav-item-pf').each(function (index, item) {
-          $(item).removeClass('mobile-nav-item-pf');
-        });
-        $(document).find('.list-group-item.mobile-secondary-item-pf').each(function (index, item) {
-          $(item).removeClass('mobile-secondary-item-pf');
-        });
-        if (selected) {
-          selected.addClass('mobile-nav-item-pf');
-          if (secondaryItem) {
-            secondaryItem.addClass('mobile-secondary-item-pf');
-            navElement.removeClass('show-mobile-secondary');
-            navElement.addClass('show-mobile-tertiary');
-          } else {
-            navElement.addClass('show-mobile-secondary');
-            navElement.removeClass('show-mobile-tertiary');
-          }
-        } else {
-          navElement.removeClass('show-mobile-secondary');
-          navElement.removeClass('show-mobile-tertiary');
-        }
-      },
-
-      enterMobileState = function () {
-        if (!navElement.hasClass('hidden')) {
-          //Set the nav to being hidden
-          navElement.addClass('hidden');
-          navElement.removeClass('collapsed');
-
-          //Set the body class to the correct state
-          bodyContentElement.removeClass('collapsed-nav');
-          bodyContentElement.addClass('hidden-nav');
-
-          // Reset the collapsed states
-          updateSecondaryCollapsedState(false);
-          updateTertiaryCollapsedState(false);
-
-          explicitCollapse = false;
-        }
-      },
-
-      exitMobileState = function () {
-        // Always remove the hidden & peek class
-        navElement.removeClass('hidden show-mobile-nav');
-
-        // Set the body class back to the default
-        bodyContentElement.removeClass('hidden-nav');
-      },
-
-      checkNavState = function () {
-        var width = $(window).width(), makeSecondaryVisible;
-        if (!handleResize) {
-          return;
-        }
-        // Check to see if we need to enter/exit the mobile state
-        if (width < $.pfBreakpoints.tablet && !explicitCollapse) {
-          enterMobileState();
-        } else if (navElement.hasClass('hidden')) {
-          exitMobileState();
-        }
-
-        // Check to see if we need to enter/exit the sub desktop state
-        if (width < $.pfBreakpoints.desktop) {
-          if (!subDesktop) {
-            // Collapse the navigation bars when entering sub desktop mode
-            navElement.addClass('collapsed');
-            bodyContentElement.addClass('collapsed-nav');
-          }
-          if (width >= $.pfBreakpoints.tablet) {
-            hideSecondaryMenu();
-          }
-          subDesktop = true;
-        } else {
-          makeSecondaryVisible = subDesktop && (navElement.find('.secondary-nav-item-pf.active').length > 0);
-          subDesktop = false;
-          if (makeSecondaryVisible) {
-
-            showSecondaryMenu();
-          }
-        }
-
-        if (explicitCollapse) {
-          navElement.addClass('collapsed');
-          bodyContentElement.addClass('collapsed-nav');
-        } else {
-          navElement.removeClass('collapsed');
-          bodyContentElement.removeClass('collapsed-nav');
-        }
-      },
-
-      collapseMenu = function () {
-        //Make sure this is expanded
-        navElement.addClass('collapsed');
-        //Set the body class to the correct state
-        bodyContentElement.addClass('collapsed-nav');
-
-        if (subDesktop) {
-          hideSecondaryMenu();
-        }
-
-        explicitCollapse = true;
-      },
-
-      enableTransitions = function () {
-        // enable transitions only when toggleNavBarButton is clicked or window is resized
-        $('html').addClass('transitions');
-      },
-
-      expandMenu = function () {
-        //Make sure this is expanded
-        navElement.removeClass('collapsed');
-        //Set the body class to the correct state
-        bodyContentElement.removeClass('collapsed-nav');
-
-        explicitCollapse = false;
-
-        // Dispatch a resize event when showing the expanding then menu to
-        // allow content to adjust to the menu sizing
-        if (!subDesktop) {
-          forceResize(100);
-        }
-      },
-
-      bindMenuBehavior = function () {
-        toggleNavBarButton.on('click', function (e) {
-          var $drawer;
-
-          enableTransitions();
-
-          if (inMobileState()) {
-            // Toggle the mobile nav
-            if (navElement.hasClass('show-mobile-nav')) {
-              navElement.removeClass('show-mobile-nav');
-            } else {
-              // Always start at the primary menu
-              updateMobileMenu();
-              navElement.addClass('show-mobile-nav');
-
-              // If the notification drawer is shown, hide it
-              if (!ignoreDrawer) {
-                $drawer = $('.drawer-pf');
-                if ($drawer.length) {
-                  $('.drawer-pf-trigger').removeClass('open');
-                  $drawer.addClass('hide');
-                }
-              }
-            }
-          } else if (navElement.hasClass('collapsed')) {
-            if (options.rememberOpenState) {
-              window[storageLocation].setItem('patternfly-navigation-primary', 'expanded');
-            }
-            expandMenu();
-          } else {
-            if (options.rememberOpenState) {
-              window[storageLocation].setItem('patternfly-navigation-primary', 'collapsed');
-            }
-            collapseMenu();
-          }
-        });
-      },
-
-      forceHideSecondaryMenu = function () {
-        navElement.addClass('force-hide-secondary-nav-pf');
-        setTimeout(function () {
-          navElement.removeClass('force-hide-secondary-nav-pf');
-        }, 500);
-      },
-
-      bindMenuItemsBehavior = function (handleSelection) {
-        $(document).find('.nav-pf-vertical .list-group-item').each(function (index, item) {
-          var onClickFn,
-            $item = $(item),
-            $nav = $item.closest('[class*="nav-pf-"]');
-
-          if ($nav.hasClass('nav-pf-vertical')) {
-            // Set main nav active item on click or show secondary nav if it has a secondary nav bar and we are in the mobile state
-            onClickFn = function (event) {
-              var $this = $(this), $secondaryItem, $tertiaryItem, $activeItem;
-
-              if (!$this.hasClass('secondary-nav-item-pf')) {
-                hideSecondaryMenu();
-                if (inMobileState()) {
-                  updateMobileMenu();
-                  navElement.removeClass('show-mobile-nav');
-                }
-                if (handleSelection) {
-                  setActiveItem($this);
-                  // Don't process the click on the item
-                  event.stopImmediatePropagation();
-                }
-              } else if (inMobileState()) {
-                updateMobileMenu($this);
-              } else if (handleSelection) {
-                $activeItem = $secondaryItem = $item.find('.nav-pf-secondary-nav > .list-group > .list-group-item').eq(0);
-
-                if ($secondaryItem.hasClass('tertiary-nav-item-pf')) {
-                  $activeItem = $secondaryItem.find('.nav-pf-tertiary-nav > .list-group > .list-group-item').eq(0);
-                }
-
-                setActiveItem($activeItem);
-                event.stopImmediatePropagation();
-              }
-            };
-
-          } else if ($nav.hasClass('nav-pf-secondary-nav')) {
-            // Set secondary nav active item on click or show tertiary nav if it has a tertiary nav bar and we are in the mobile state
-            onClickFn = function (event) {
-              var $this = $(this), $tertiaryItem, $primaryItem;
-              if (!$this.hasClass('tertiary-nav-item-pf')) {
-                if (inMobileState()) {
-                  updateMobileMenu();
-                  navElement.removeClass('show-mobile-nav');
-                }
-                updateSecondaryMenuDisplayAfterSelection();
-                if (handleSelection) {
-                  setActiveItem($item);
-                  hideSecondaryMenu();
-                  event.stopImmediatePropagation();
-                }
-              } else if (inMobileState()) {
-                $primaryItem = $item.parents('.list-group-item');
-                updateMobileMenu($this, $primaryItem);
-                event.stopImmediatePropagation();
-              } else if (handleSelection) {
-                $tertiaryItem = $item.find('.nav-pf-tertiary-nav > .list-group > .list-group-item').eq(0);
-                setActiveItem($tertiaryItem);
-                event.stopImmediatePropagation();
-              }
-            };
-
-          } else if ($nav.hasClass('nav-pf-tertiary-nav')) {
-            // Set tertiary nav active item on click
-            onClickFn = function (event) {
-              if (inMobileState()) {
-                updateMobileMenu();
-                navElement.removeClass('show-mobile-nav');
-              }
-              updateSecondaryMenuDisplayAfterSelection();
-              if (handleSelection) {
-                setActiveItem($item);
-                hideTertiaryMenu();
-                hideSecondaryMenu();
-                event.stopImmediatePropagation();
-              }
-            };
-          }
-
-          // register event handler
-          $item.on('click.pf.secondarynav.data-api', onClickFn);
-        });
-
-        $(document).find('.secondary-nav-item-pf').each(function (index, secondaryItem) {
-          var $secondaryItem = $(secondaryItem);
-
-          // Collapse the secondary nav bar when the toggle is clicked
-          $secondaryItem.on('click.pf.secondarynav.data-api', '[data-toggle="collapse-secondary-nav"]', function (e) {
-            var $this = $(this);
-            if (inMobileState()) {
-              updateMobileMenu();
-              e.stopImmediatePropagation();
-            } else {
-              if ($this.hasClass('collapsed')) {
-                if (options.rememberOpenState) {
-                  window[storageLocation].setItem('patternfly-navigation-secondary', 'expanded');
-                  window[storageLocation].setItem('patternfly-navigation-tertiary', 'expanded');
-                }
-                updateSecondaryCollapsedState(false, $this);
-                forceHideSecondaryMenu();
-              } else {
-                if (options.rememberOpenState) {
-                  window[storageLocation].setItem('patternfly-navigation-secondary', 'collapsed');
-                }
-                updateSecondaryCollapsedState(true, $this);
-              }
-            }
-            navElement.removeClass('hover-secondary-nav-pf');
-            if (handleSelection) {
-              // Don't process the click on the parent item
-              e.stopImmediatePropagation();
-            }
-          });
-
-          $secondaryItem.find('.tertiary-nav-item-pf').each(function (index, primaryItem) {
-            var $primaryItem = $(primaryItem);
-            // Collapse the tertiary nav bar when the toggle is clicked
-            $primaryItem.on('click.pf.tertiarynav.data-api', '[data-toggle="collapse-tertiary-nav"]', function (e) {
-              var $this = $(this);
-              if (inMobileState()) {
-                updateMobileMenu($secondaryItem);
-                e.stopImmediatePropagation();
-              } else {
-                if ($this.hasClass('collapsed')) {
-                  if (options.rememberOpenState) {
-                    window[storageLocation].setItem('patternfly-navigation-secondary', 'expanded');
-                    window[storageLocation].setItem('patternfly-navigation-tertiary', 'expanded');
-                  }
-                  updateTertiaryCollapsedState(false, $this);
-                  forceHideSecondaryMenu();
-                } else {
-                  if (options.rememberOpenState) {
-                    window[storageLocation].setItem('patternfly-navigation-tertiary', 'collapsed');
-                  }
-                  updateTertiaryCollapsedState(true, $this);
-                }
-              }
-              navElement.removeClass('hover-secondary-nav-pf');
-              navElement.removeClass('hover-tertiary-nav-pf');
-              if (handleSelection) {
-                // Don't process the click on the parent item
-                e.stopImmediatePropagation();
-              }
-            });
-          });
-        });
-
-        // Show secondary nav bar on hover of secondary nav items
-        $(document).on('mouseenter.pf.tertiarynav.data-api', '.secondary-nav-item-pf', function (e) {
-          var $this = $(this);
-          if (!inMobileState()) {
-            if ($this[0].navUnHoverTimeout !== undefined) {
-              clearTimeout($this[0].navUnHoverTimeout);
-              $this[0].navUnHoverTimeout = undefined;
-            } else if ($this[0].navHoverTimeout === undefined) {
-              $this[0].navHoverTimeout = setTimeout(function () {
-                navElement.addClass('hover-secondary-nav-pf');
-                $this.addClass('is-hover');
-                $this[0].navHoverTimeout = undefined;
-              }, options.hoverDelay);
-            }
-          }
-        });
-
-        $(document).on('mouseleave.pf.tertiarynav.data-api', '.secondary-nav-item-pf', function (e) {
-          var $this = $(this);
-          if ($this[0].navHoverTimeout !== undefined) {
-            clearTimeout($this[0].navHoverTimeout);
-            $this[0].navHoverTimeout = undefined;
-          } else if ($this[0].navUnHoverTimeout === undefined &&
-              navElement.find('.secondary-nav-item-pf.is-hover').length > 0) {
-            $this[0].navUnHoverTimeout = setTimeout(function () {
-              if (navElement.find('.secondary-nav-item-pf.is-hover').length <= 1) {
-                navElement.removeClass('hover-secondary-nav-pf');
-              }
-              $this.removeClass('is-hover');
-              $this[0].navUnHoverTimeout = undefined;
-            }, options.hideDelay);
-          }
-        });
-
-        // Show tertiary nav bar on hover of secondary nav items
-        $(document).on('mouseover.pf.tertiarynav.data-api', '.tertiary-nav-item-pf', function (e) {
-          var $this = $(this);
-          if (!inMobileState()) {
-            if ($this[0].navUnHoverTimeout !== undefined) {
-              clearTimeout($this[0].navUnHoverTimeout);
-              $this[0].navUnHoverTimeout = undefined;
-            } else if ($this[0].navHoverTimeout === undefined) {
-              $this[0].navHoverTimeout = setTimeout(function () {
-                navElement.addClass('hover-tertiary-nav-pf');
-                $this.addClass('is-hover');
-                $this[0].navHoverTimeout = undefined;
-              }, options.hoverDelay);
-            }
-          }
-        });
-        $(document).on('mouseout.pf.tertiarynav.data-api', '.tertiary-nav-item-pf', function (e) {
-          var $this = $(this);
-          if ($this[0].navHoverTimeout !== undefined) {
-            clearTimeout($this[0].navHoverTimeout);
-            $this[0].navHoverTimeout = undefined;
-          } else if ($this[0].navUnHoverTimeout === undefined) {
-            $this[0].navUnHoverTimeout = setTimeout(function () {
-              if (navElement.find('.tertiary-nav-item-pf.is-hover').length <= 1) {
-                navElement.removeClass('hover-tertiary-nav-pf');
-              }
-              $this.removeClass('is-hover');
-              $this[0].navUnHoverTimeout = undefined;
-            }, options.hideDelay);
-          }
-        });
-      },
-
-      loadFromLocalStorage = function () {
-        if (inMobileState()) {
-          return;
-        }
-
-        if (window[storageLocation].getItem('patternfly-navigation-primary') === 'collapsed') {
-          collapseMenu();
-        }
-
-        if ($('.nav-pf-vertical.nav-pf-vertical-collapsible-menus').length > 0) {
-          if (window[storageLocation].getItem('patternfly-navigation-secondary') === 'collapsed') {
-            updateSecondaryCollapsedState(true, $('.secondary-nav-item-pf.active [data-toggle=collapse-secondary-nav]'));
-          }
-
-          if (window[storageLocation].getItem('patternfly-navigation-tertiary') === 'collapsed') {
-            updateTertiaryCollapsedState(true, $('.tertiary-nav-item-pf.active [data-toggle=collapse-tertiary-nav]'));
-          }
-        }
-      },
-
-      setTooltips = function () {
-        var tooltipOptions = {
-          container: 'body',
-          placement: 'bottom',
-          delay: { 'show': '500', 'hide': '200' },
-          template: '<div class="nav-pf-vertical-tooltip tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
-        };
-        $('.nav-pf-vertical [data-toggle="tooltip"]').tooltip(tooltipOptions);
-
-        $('.nav-pf-vertical').on("show.bs.tooltip", function (e) {
-          return $(this).hasClass("collapsed");
-        });
-      },
-
-      init = function (handleItemSelections) {
-        // Hide the nav menus during initialization
-        navElement.addClass('hide-nav-pf');
-        bodyContentElement.addClass('hide-nav-pf');
-
-        //Set correct state on load
-        checkNavState();
-
-        // Bind Top level hamburger menu with menu behavior;
-        bindMenuBehavior();
-
-        // Bind menu items
-        bindMenuItemsBehavior(handleItemSelections);
-
-        //Set tooltips
-        setTooltips();
-
-        if (options.rememberOpenState) {
-          loadFromLocalStorage();
-        }
-
-        // Show the nav menus
-        navElement.removeClass('hide-nav-pf');
-        bodyContentElement.removeClass('hide-nav-pf');
-        forceResize(250);
-      },
-
-      self = {
-        hideMenu: function () {
-          handleResize = false;
-          enterMobileState();
-        },
-        showMenu: function () {
-          handleResize = true;
-          exitMobileState();
-        },
-        isVisible: function () {
-          return handleResize;
-        }
-      };
-
-    if (!$.fn.setupVerticalNavigation.self) {
-      $.fn.setupVerticalNavigation.self = self;
-      //Listen for the window resize event and collapse/hide as needed
-      $(window).on('resize', function () {
-        checkNavState();
-        enableTransitions();
-      });
-
-      init(handleItemSelections);
-    }
-    return $.fn.setupVerticalNavigation.self;
-  };
-}(jQuery));