From 3c13b7655a2509d49877652e9d519bf120e6b067 Mon Sep 17 00:00:00 2001 From: cglatot Date: Wed, 24 Jun 2020 19:57:34 +0100 Subject: Enable back forward browser tracking --- index.html | 1 + js/bootstrap-history-tabs.js | 29 +++++++++++++++++++++++++++++ js/main.js | 7 +++---- 3 files changed, 33 insertions(+), 4 deletions(-) create mode 100644 js/bootstrap-history-tabs.js diff --git a/index.html b/index.html index c81a97e..6f677cb 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,7 @@ + diff --git a/js/bootstrap-history-tabs.js b/js/bootstrap-history-tabs.js new file mode 100644 index 0000000..9dfc49b --- /dev/null +++ b/js/bootstrap-history-tabs.js @@ -0,0 +1,29 @@ ++function ($) { + 'use strict'; + $.fn.historyTabs = function() { + var that = this; + window.addEventListener('popstate', function(event) { + console.log(event); + if (event.state) { + $(that).filter('[href="' + event.state.url + '"]').tab('show'); + } else { + $(that).filter('[href="#authentication"]').tab('show'); + } + }); + return this.each(function(index, element) { + $(element).on('show.bs.tab', function() { + var stateObject = {'url' : $(this).attr('href')}; + + if (stateObject.url !== window.location.hash) { + window.history.pushState(stateObject, document.title, window.location.pathname + $(this).attr('href')); + } + }); + if (!window.location.hash && $(element).is('.active')) { + // Shows the first element if there are no query parameters. + $(element).tab('show'); + } else if ($(this).attr('href') === window.location.hash) { + $(element).tab('show'); + } + }); + }; +}(jQuery); \ No newline at end of file diff --git a/js/main.js b/js/main.js index c5f88b7..a717c49 100644 --- a/js/main.js +++ b/js/main.js @@ -15,6 +15,9 @@ $(document).ready(() => { // Enable Tooltips $('#helpAboutIcon, #titleLogo').tooltip(); + // Enable history tracking for tabs + $('a[data-toggle="tab"]').historyTabs(); + // Check if the page was loaded locally or over http and warn them about the value of https if ((location.protocol == "http:") || (location.protocol == "file:")) { if (localStorage.showHttpAlert == 'false') { @@ -25,10 +28,6 @@ $(document).ready(() => { } } - // Validation values to enable the Connect to Plex Button - let validUrl = false; - let validToken = false; - // Validation listeners on the Plex URL Input $('#plexUrl').on("input", () => { validateEnableConnectBtn('plexUrl'); -- cgit v1.2.3