diff --git a/public/js/icinga/ui.js b/public/js/icinga/ui.js index 49e23da6f..fa54b12a2 100644 --- a/public/js/icinga/ui.js +++ b/public/js/icinga/ui.js @@ -21,6 +21,11 @@ this.timeCounterTimer = null; + /** + * Whether the mobile menu is shown + * + * @type {bool} + */ this.mobileMenu = false; }; @@ -525,6 +530,11 @@ $('a.close-toggle').show(); }, + /** + * Toggle mobile menu + * + * @param {object} e Event + */ toggleMobileMenu: function(e) { var $sidebar = $('#sidebar'); var $target = $(e.target); @@ -536,67 +546,98 @@ } else if (! $target.is('input')) { $sidebar.toggleClass('expanded'); } - $('#search').keypress(function(e) { - if (e.which === 13) { - $sidebar.removeClass('expanded'); - } - }); + }, + + /** + * Close mobile menu when the enter key was pressed + * + * @param {object} e Event + */ + closeMobileMenu: function(e) { + if (e.which === 13) { + $('#sidebar').removeClass('expanded'); + } }, fixControls: function ($parent) { - var self = this; - if ($('#layout').hasClass('fullscreen-layout')) { + var $layout = $('#layout'); + + if ($layout.hasClass('fullscreen-layout')) { return; } - if ('undefined' === typeof $parent) { + if (typeof $parent === 'undefined') { + var $header = $('#header'); + var $headerLogo = $('#header-logo'); + var $main = $('#main'); + var $search = $('#search'); + var $sidebar = $('#sidebar'); - if (! $('#layout').hasClass('fullscreen-layout')) { - $('#header').css({height: 'auto'}); - if ($('#layout').hasClass('minimal-layout')) { - if (! this.mobileMenu) { - $('#header-logo').css({ - display: 'none' - }); - $('#header').css({top: $('#sidebar').outerHeight() + 'px'}); - $('#main').css({ - top: $('#header').height() + $('#sidebar').outerHeight(), - zIndex: 1 - }); - $('#sidebar') - .css({ - top: 0, - zIndex: 2 + $header.css({ + height: 'auto' + }); + + if ($layout.hasClass('minimal-layout')) { + if (! this.mobileMenu) { + $header.css({ + top: $sidebar.outerHeight() + 'px' + }); + $headerLogo.css({ + display: 'none' + }); + $main.css({ + top: $header.height() + $sidebar.outerHeight(), + zIndex: 1 + }); + $sidebar + .css({ + paddingBottom: 32, + top: 0, + zIndex: 2 + }) + .on('click', this.toggleMobileMenu) + .prepend( + $('').css({ + cursor: 'pointer', + display: 'block', + height: '32px' }) - .on('click', this.toggleMobileMenu) - .prepend( - '' - ) - .css({ - paddingBottom: 32 - }); - this.mobileMenu = true; - } - } else { - $('#main').css({top: $('#header').css('height')}); - $('#sidebar').css({top: $('#header').height() + 'px'}); - if (this.mobileMenu) { - $('#header-logo').css({ - display: 'block' - }); - $('#sidebar').off('click', this.toggleMobileMenu); - $('#header').css({ - top: 0 - }); - $('#mobile-menu-toggle').remove(); - this.mobileMenu = false; - } + ); + $search.on('keypress', this.closeMobileMenu); + + this.mobileMenu = true; + } + } else { + $main.css({ + top: $header.css('height'), + zIndex: 'auto' + }); + $sidebar.css({ + top: $header.css('height'), + zIndex: 'auto' + }); + $header.css({ + height: $header.height() + 'px' + }); + + if (this.mobileMenu) { + $header.css({ + top: 0 + }); + $headerLogo.css({ + display: 'block' + }); + $sidebar.off('click', this.toggleMobileMenu); + $search.off('keypress', this.closeMobileMenu); + $('#mobile-menu-toggle').remove(); + + this.mobileMenu = false; } - $('#header').css({height: $('#header').height() + 'px'}); - $('#inner-layout').css({top: $('#header').css('height')}); } + + var _this = this; $('.container').each(function (idx, container) { - self.fixControls($(container)); + _this.fixControls($(container)); }); return;