diff --git a/src/opnsense/www/js/opnsense_theme.js b/src/opnsense/www/js/opnsense_theme.js index f25e4bd8c..a8c2181fe 100644 --- a/src/opnsense/www/js/opnsense_theme.js +++ b/src/opnsense/www/js/opnsense_theme.js @@ -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);