114 lines
3.5 KiB
JavaScript
114 lines
3.5 KiB
JavaScript
// 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));
|