tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-07 05:54: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

101
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) { },
/**
* Close mobile menu when the enter key was pressed
*
* @param {object} e Event
*/
closeMobileMenu: function(e) {
if (e.which === 13) { if (e.which === 13) {
$sidebar.removeClass('expanded'); $('#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 ($layout.hasClass('minimal-layout')) {
if (! this.mobileMenu) { if (! this.mobileMenu) {
$('#header-logo').css({ $header.css({
top: $sidebar.outerHeight() + 'px'
});
$headerLogo.css({
display: 'none' display: 'none'
}); });
$('#header').css({top: $('#sidebar').outerHeight() + 'px'}); $main.css({
$('#main').css({ top: $header.height() + $sidebar.outerHeight(),
top: $('#header').height() + $('#sidebar').outerHeight(),
zIndex: 1 zIndex: 1
}); });
$('#sidebar') $sidebar
.css({ .css({
paddingBottom: 32,
top: 0, top: 0,
zIndex: 2 zIndex: 2
}) })
.on('click', this.toggleMobileMenu) .on('click', this.toggleMobileMenu)
.prepend( .prepend(
'<i id="mobile-menu-toggle" class="icon-menu" style="vertical-align: middle;"></i>' $('<i id="mobile-menu-toggle" class="icon-menu"></i>').css({
) cursor: 'pointer',
.css({ display: 'block',
paddingBottom: 32 height: '32px'
}); })
);
$search.on('keypress', this.closeMobileMenu);
this.mobileMenu = true; this.mobileMenu = true;
} }
} else { } else {
$('#main').css({top: $('#header').css('height')}); $main.css({
$('#sidebar').css({top: $('#header').height() + 'px'}); top: $header.css('height'),
if (this.mobileMenu) { zIndex: 'auto'
$('#header-logo').css({
display: 'block'
}); });
$('#sidebar').off('click', this.toggleMobileMenu); $sidebar.css({
$('#header').css({ top: $header.css('height'),
zIndex: 'auto'
});
$header.css({
height: $header.height() + 'px'
});
if (this.mobileMenu) {
$header.css({
top: 0 top: 0
}); });
$headerLogo.css({
display: 'block'
});
$sidebar.off('click', this.toggleMobileMenu);
$search.off('keypress', this.closeMobileMenu);
$('#mobile-menu-toggle').remove(); $('#mobile-menu-toggle').remove();
this.mobileMenu = false; 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;