patternfly-sass 3.23.2 → 3.31.1

data/dist/js/patternfly-functions-navigation.js

@@ -0,0 +1,113 @@
+// 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));

data/dist/js/patternfly-functions-popovers.js

@@ -0,0 +1,37 @@
+// 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));

data/dist/js/patternfly-functions-sidebar.js

@@ -0,0 +1,31 @@
+// 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).resize(function () {
+    // Call sidebar() on resize if .sidebar-pf exists
+    if ($('.sidebar-pf').length > 0) {
+      $.fn.sidebar();
+    }
+  });
+}(jQuery));

data/dist/js/patternfly-functions-tree-grid.js

@@ -0,0 +1,79 @@
+// 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 = 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));

data/dist/js/patternfly-functions-vertical-nav.js

@@ -0,0 +1,590 @@
+// Util: PatternFly Vertical Navigation
+// Must have navbar-toggle in navbar-pf-vertical for expand/collapse
+(function ($) {
+  'use strict';
+
+  $.fn.setupVerticalNavigation = function (handleItemSelections, ignoreDrawer) {
+
+    var navElement = $('.nav-pf-vertical'),
+      bodyContentElement = $('.container-pf-nav-pf-vertical'),
+      toggleNavBarButton = $('.navbar-toggle'),
+      handleResize = true,
+      explicitCollapse = false,
+      subDesktop = false,
+      hoverDelay = 500,
+      hideDelay = hoverDelay + 200,
+
+      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')) {
+            window.localStorage.setItem('patternfly-navigation-primary', 'expanded');
+            expandMenu();
+          } else {
+            window.localStorage.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')) {
+                window.localStorage.setItem('patternfly-navigation-secondary', 'expanded');
+                window.localStorage.setItem('patternfly-navigation-tertiary', 'expanded');
+                updateSecondaryCollapsedState(false, $this);
+                forceHideSecondaryMenu();
+              } else {
+                window.localStorage.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')) {
+                  window.localStorage.setItem('patternfly-navigation-secondary', 'expanded');
+                  window.localStorage.setItem('patternfly-navigation-tertiary', 'expanded');
+                  updateTertiaryCollapsedState(false, $this);
+                  forceHideSecondaryMenu();
+                } else {
+                  window.localStorage.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;
+              }, 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;
+            }, 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;
+              }, 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;
+            }, hideDelay);
+          }
+        });
+      },
+
+      loadFromLocalStorage = function () {
+        if (inMobileState()) {
+          return;
+        }
+
+        if (window.localStorage.getItem('patternfly-navigation-primary') === 'collapsed') {
+          collapseMenu();
+        }
+
+        if ($('.nav-pf-vertical.nav-pf-vertical-collapsible-menus').length > 0) {
+          if (window.localStorage.getItem('patternfly-navigation-secondary') === 'collapsed') {
+            updateSecondaryCollapsedState(true, $('.secondary-nav-item-pf.active [data-toggle=collapse-secondary-nav]'));
+          }
+
+          if (window.localStorage.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();
+
+        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));