lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-16 09:34:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

sidebar - performance & optimisation; closes #2938

Browse Source
This commit is contained in:
opnsenseuser 2018-11-19 14:31:25 +01:00 committed by Franco Fichtner
parent a66c8df416
commit 04df3de895
1 changed files with 70 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/opnsense/www/js/opnsense_theme.js
View File

@ -31,50 +31,54 @@
$(document).ready(function () {
// traverse loaded css files
var toggle_sidebar_loaded = false;
var $window = $(window);
var winheight = $(window).height();
var nomouse = "mouseenter mouseleave";
var layer1_a = $('#mainmenu > div > a');
var layer1_div = $('#mainmenu > div > div');
var layer2_a = $('#mainmenu > div > div > a');
var layer2_div = $('#mainmenu > div > div > div');
var navigation = $("#navigation");
var events = {
var toggle_sidebar_loaded = false,
$window = $(window),
winHeight = $(window).height(),
mouse = 'mouseenter mouseleave',
layer1_a = $('#mainmenu > div > a'),
layer1_div = $('#mainmenu > div > div'),
layer2_a = $('#mainmenu > div > div > a'),
layer2_div = $('#mainmenu > div > div > div'),
navigation = $('#navigation'),
mainmenu = $('#mainmenu'),
events = {
mouseenter: function () {
$("#navigation.col-sidebar-left").css("width", "415px");
$('#navigation.col-sidebar-left').css('width', '415px');
var that = $(this);
if (that.next("div").hasClass("in")) {
if (that.next('div').hasClass('in')) {
/* no action needed */
} else if ((that.next().is("a")) || (that.is("a:last-child"))) {
} else if ((that.next().is('a')) || (that.is('a:last-child'))) {
activeremove(this);
} else {
var divtop = that.offset().top - $window.scrollTop();
var divheight = that.next("div").height();
var currentheight = (divtop + divheight);
that.trigger("click");
if (currentheight > winheight) {
that.next("div").css("margin-top", -divheight - (that.is(layer1_a) ? 3 : 0));
var offsetTop = that.offset().top;
var winscrTop = $window.scrollTop();
var divHeight = that.next('div').height();
var divTop = (offsetTop - winscrTop);
var currentHeight = (divTop + divHeight);
var thatTrigger = that.trigger('click');
if (currentHeight > winHeight) {
var result = that.next('div').css('margin-top', -divHeight - (that.is(layer1_a) ? 3 : 0));
}
}
},
mouseleave: function () {
$("#navigation.col-sidebar-left").css("width", "70px");
$('#navigation.col-sidebar-left').css('width', '70px');
layer1_a.off(events).on(events);
},
mousedown: function () {
$(this).trigger("click");
$(this).trigger('click');
},
mouseup: function () {
$(this).blur();
}
};
var events2 = {
},
events2 = {
mouseenter: function () {
$("#navigation.col-sidebar-left").css("width", "415px");
$(this).trigger("click");
$('#navigation.col-sidebar-left').css('width', '415px');
$(this).trigger('click');
},
mouseleave: function () {
$("#navigation.col-sidebar-left").css("width", "70px");
$('#navigation.col-sidebar-left').css('width', '70px');
}
};
@ -90,17 +94,17 @@ $(document).ready(function () {
/* disable mouseevents on toggle and resize */
function mouse_events_off() {
layer1_a.off(nomouse);
layer2_a.off(nomouse);
layer1_div.off(nomouse);
layer2_div.off(nomouse);
layer1_a.off(mouse);
layer2_a.off(mouse);
layer1_div.off(mouse);
layer2_div.off(mouse);
}
/* trigger mouseevents on startup */
function trigger_sidebar() {
layer1_a.first().trigger("mouseenter").trigger("mouseleave");
layer1_div.removeClass("in");
layer2_div.removeClass("in");
layer1_a.first().trigger('mouseenter').trigger('mouseleave');
layer1_div.removeClass('in');
layer2_div.removeClass('in');
}
/* transition duration - time */
@ -108,34 +112,30 @@ $(document).ready(function () {
$.fn.collapse.Constructor.TRANSITION_DURATION = time;
}
function activeremove(e) {
$(e).nextAll("a").addClass("collapsed").attr("aria-expanded", "false");
$(e).prevAll("a").addClass("collapsed").attr("aria-expanded", "false");
$(e).next("a").addClass("collapsed").attr("aria-expanded", "false");
$(e).prev("a").addClass("collapsed").attr("aria-expanded", "false");
$(e).nextAll("div").removeClass("in").attr("aria-expanded", "false");
$(e).prevAll("div").removeClass("in").attr("aria-expanded", "false");
$(e).next("div").removeClass("in").attr("aria-expanded", "false");
$(e).prev("div").removeClass("in").attr("aria-expanded", "false");
$(e).trigger("click");
/* remove open submenu */
function activeremove(r) {
$(r).nextAll('a').addClass('collapsed').attr('aria-expanded', 'false');
$(r).prevAll('a').addClass('collapsed').attr('aria-expanded', 'false');
$(r).nextAll('div').removeClass('in').attr('aria-expanded', 'false');
$(r).prevAll('div').removeClass('in').attr('aria-expanded', 'false');
}
function opnsense_sidebar_toggle(store) {
navigation.toggleClass("col-sidebar-left");
$("main").toggleClass("col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12");
$(".toggle-sidebar > i").toggleClass("fa-chevron-right fa-chevron-left");
if (navigation.hasClass("col-sidebar-left")) {
$(".brand-logo").css("display", "none");
$(".brand-icon").css("display", "inline-block");
navigation.toggleClass('col-sidebar-left');
$('main').toggleClass('col-sm-9 col-sm-push-3 col-lg-10 col-lg-push-2 col-lg-12');
$('.toggle-sidebar > i').toggleClass('fa-chevron-right fa-chevron-left');
if (navigation.hasClass('col-sidebar-left')) {
$('.brand-logo').css('display', 'none');
$('.brand-icon').css('display', 'inline-block');
trigger_sidebar();
if (store && window.sessionStorage) {
sessionStorage.setItem('toggle_sidebar_preset', 1);
transition_duration(0);
}
} else {
$(".brand-icon").css("display", "none");
$(".brand-logo").css("display", "inline-block");
$("#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs").css("width", "");
$('.brand-icon').css('display', 'none');
$('.brand-logo').css('display', 'inline-block');
$('#navigation.page-side.col-xs-12.col-sm-3.col-lg-2.hidden-xs').css('width', '');
if (store && window.sessionStorage) {
sessionStorage.setItem('toggle_sidebar_preset', 0);
mouse_events_off();
@ -145,7 +145,7 @@ $(document).ready(function () {
}
if (toggle_sidebar_loaded) {
var toggle_btn = $(".toggle-sidebar");
var toggle_btn = $('.toggle-sidebar');
/* navigation toggle */
toggle_btn.click(function () {
opnsense_sidebar_toggle(true);
@ -153,8 +153,8 @@ $(document).ready(function () {
});
/* sidebar mouseenter */
navigation.mouseenter(function () {
if (navigation.hasClass("col-sidebar-left")) {
mainmenu.mouseenter(function () {
if (navigation.hasClass('col-sidebar-left')) {
transition_duration(0);
layer1_a.on(events);
layer2_a.on(events);
@ -164,29 +164,32 @@ $(document).ready(function () {
});
/* sidebar mouseleave */
$("#mainmenu").mouseleave(function () {
if ($("#navigation").hasClass("col-sidebar-left")) {
layer1_a.attr("aria-expanded", "false").next("div").removeClass("in");
layer2_a.attr("aria-expanded", "false").next("div").removeClass("in");
layer1_div.removeAttr("style");
layer2_div.removeAttr("style");
mainmenu.mouseleave(function () {
if ($('#navigation').hasClass('col-sidebar-left')) {
layer1_a.attr('aria-expanded', 'false').next('div').removeClass('in');
layer2_a.attr('aria-expanded', 'false').next('div').removeClass('in');
layer1_div.removeAttr('style');
layer2_div.removeAttr('style');
layer2_a.off(events);
layer1_div.off(events2);
layer2_div.off(events2);
}
});
/* on resize - toggle sidebar / main navigation */
$(window).on('resize', function () {
var win = $(this);
winheight = win.height();
if ((win.height() < 675 || win.width() < 760) && navigation.not("col-sidebar-hidden")) {
navigation.addClass("col-sidebar-hidden");
winHeight = win.height();
if ((win.height() < 675 || win.width() < 760) && navigation.not('col-sidebar-hidden')) {
navigation.addClass('col-sidebar-hidden');
mouse_events_off();
if (navigation.hasClass("col-sidebar-left")) {
if (navigation.hasClass('col-sidebar-left')) {
opnsense_sidebar_toggle(false);
mouse_events_off();
transition_duration(350);
}
} else if ((win.height() >= 675 && win.width() >= 760) && navigation.hasClass("col-sidebar-hidden")) {
$("#navigation").removeClass("col-sidebar-hidden");
} else if ((win.height() >= 675 && win.width() >= 760) && navigation.hasClass('col-sidebar-hidden')) {
navigation.removeClass('col-sidebar-hidden');
transition_duration(0);
if (window.sessionStorage && sessionStorage.getItem('toggle_sidebar_preset') == 1) {
opnsense_sidebar_toggle(false);