From 5a2cd55414935fa20d9926d113cfc906028ec4a0 Mon Sep 17 00:00:00 2001 From: Akkadius Date: Tue, 3 Oct 2017 15:14:39 -0500 Subject: [PATCH] Sidebar - highlight navigated sidebar item on page load - dynamically highlight sidebar item as user navigates --- public/assets/js/glass-core.js | 29 ++++++++++++++++++++++++++-- public/assets/js/glass-websockets.js | 8 ++++---- public/assets/js/pjax.js | 2 ++ 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/public/assets/js/glass-core.js b/public/assets/js/glass-core.js index 7708d28..1d74cd3 100644 --- a/public/assets/js/glass-core.js +++ b/public/assets/js/glass-core.js @@ -15,13 +15,38 @@ var loader_html = '
\ $(document).ready(function () { remove_init_form(); + + /* Remove 'active' class from 'li' items */ + setTimeout(function(){ + $('li.active').removeClass("active"); + + $('.list > li').each(function(){ + var href = $(this).find('a').attr("href"); + if(typeof href !== "undefined"){ + // console.log(href); + // console.log(document.location.pathname); + + if(href == document.location.pathname){ + $(this).addClass("active"); + } + } + }); + }, 500); +}); + +/* + * When a sidebar item is clicked - let's make sure we set the active/inactive components + */ + +$(document).on('on_pjax_click', function (e, href) { + $('li.active').removeClass("active"); + href.parent('li').addClass("active"); }); /* * When a sidebar item is clicked in mobile - let's make sure we push the sidebar back in */ - -$(document).on('on_pjax_complete', function () { +$(document).on('on_pjax_complete', function (e) { if ($('.ls-closed').length > 0) { $('body').removeClass('overlay-open'); $('.overlay').css("display", "none"); diff --git a/public/assets/js/glass-websockets.js b/public/assets/js/glass-websockets.js index c13da35..dc2fbb7 100644 --- a/public/assets/js/glass-websockets.js +++ b/public/assets/js/glass-websockets.js @@ -41,10 +41,10 @@ function connect_websocket() { } } - /* - Note: the only thing I stream currently is dhcp log - so later incoming messages will need to be - keyed by their "type" via json - */ + /* + Note: the only thing I stream currently is dhcp log - so later incoming messages will need to be + keyed by their "type" via json + */ var grep_value = document.getElementById("grep_fitler").value; diff --git a/public/assets/js/pjax.js b/public/assets/js/pjax.js index e0d92bf..aacd8c0 100644 --- a/public/assets/js/pjax.js +++ b/public/assets/js/pjax.js @@ -64,6 +64,8 @@ $('body').on('click', 'a', function (e) { do_pjax_request(request_url); + $( document ).trigger( "on_pjax_click", [$(this)]); + return false; } });