tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-06 21:44:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

JS: Optimize mobile menu code

Browse Source
This commit is contained in:
Eric Lippmann 2015-12-22 14:01:45 +01:00
parent 44dd4653ec
commit 447ebeb0b6
1 changed files with 91 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
public/js/icinga/ui.js
View File

@ -21,6 +21,11 @@
this.timeCounterTimer = null; this.timeCounterTimer = null;
/**
* Whether the mobile menu is shown
*
* @type {bool}
*/
this.mobileMenu = false; this.mobileMenu = false;
}; };
@ -525,6 +530,11 @@
$('a.close-toggle').show(); $('a.close-toggle').show();
}, },
/**
* Toggle mobile menu
*
* @param {object} e Event
*/
toggleMobileMenu: function(e) { toggleMobileMenu: function(e) {
var $sidebar = $('#sidebar'); var $sidebar = $('#sidebar');
var $target = $(e.target); var $target = $(e.target);
@ -536,67 +546,98 @@
} else if (! $target.is('input')) { } else if (! $target.is('input')) {
$sidebar.toggleClass('expanded'); $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) { fixControls: function ($parent) {
var self = this; var $layout = $('#layout');
if ($('#layout').hasClass('fullscreen-layout')) {
if ($layout.hasClass('fullscreen-layout')) {
return; 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({
$('#header').css({height: 'auto'}); height: 'auto'
if ($('#layout').hasClass('minimal-layout')) { });
if (! this.mobileMenu) {
$('#header-logo').css({ if ($layout.hasClass('minimal-layout')) {
display: 'none' if (! this.mobileMenu) {
}); $header.css({
$('#header').css({top: $('#sidebar').outerHeight() + 'px'}); top: $sidebar.outerHeight() + 'px'
$('#main').css({ });
top: $('#header').height() + $('#sidebar').outerHeight(), $headerLogo.css({
zIndex: 1 display: 'none'
}); });
$('#sidebar') $main.css({
.css({ top: $header.height() + $sidebar.outerHeight(),
top: 0, zIndex: 1
zIndex: 2 });
$sidebar
.css({
paddingBottom: 32,
top: 0,
zIndex: 2
})
.on('click', this.toggleMobileMenu)
.prepend(
$('<i id="mobile-menu-toggle" class="icon-menu"></i>').css({
cursor: 'pointer',
display: 'block',
height: '32px'
}) })
.on('click', this.toggleMobileMenu) );
.prepend( $search.on('keypress', this.closeMobileMenu);
'<i id="mobile-menu-toggle" class="icon-menu" style="vertical-align: middle;"></i>'
) this.mobileMenu = true;
.css({ }
paddingBottom: 32 } else {
}); $main.css({
this.mobileMenu = true; top: $header.css('height'),
} zIndex: 'auto'
} else { });
$('#main').css({top: $('#header').css('height')}); $sidebar.css({
$('#sidebar').css({top: $('#header').height() + 'px'}); top: $header.css('height'),
if (this.mobileMenu) { zIndex: 'auto'
$('#header-logo').css({ });
display: 'block' $header.css({
}); height: $header.height() + 'px'
$('#sidebar').off('click', this.toggleMobileMenu); });
$('#header').css({
top: 0 if (this.mobileMenu) {
}); $header.css({
$('#mobile-menu-toggle').remove(); top: 0
this.mobileMenu = false; });
} $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) { $('.container').each(function (idx, container) {
self.fixControls($(container)); _this.fixControls($(container));
}); });
return; return;