diff options
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | js/bootstrap-history-tabs.js | 29 | ||||
| -rw-r--r-- | js/main.js | 7 |
3 files changed, 33 insertions, 4 deletions
@@ -49,6 +49,7 @@ <!-- Custom Scripts --> <script type="text/javascript" src="js/main.js"></script> + <script type="text/javascript" src="js/bootstrap-history-tabs.js"></script> </head> <body> 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 @@ -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'); |