Remember tab when going back on library and user pages

data/interfaces/default/library.html

@@ -71,11 +71,11 @@ DOCUMENTATION :: END
                                 % endif
                             </div>
                             <div class="user-info-nav">
-                                <ul class="user-info-nav">
+                                <ul class="user-info-nav" role="tablist">
-                                    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
+                                    <li class="active"><a href="#tabs-profile" role="tab" data-toggle="tab">Profile</a></li>
-                                    <li><a id="history-tab-btn" href="#libraryHistory" data-toggle="tab">History</a></li>
+                                    <li><a id="history-tab-btn" href="#tabs-history" role="tab" data-toggle="tab">History</a></li>
                                     % if _session['user_group'] == 'admin':
-                                    <li><a id="media-info-tab-btn" href="#libraryMediaInfo" data-toggle="tab">Media Info</a></li>
+                                    <li><a id="media-info-tab-btn" href="#tabs-mediainfo" role="tab" data-toggle="tab">Media Info</a></li>
                                     % endif
                                 </ul>
                             </div>
@@ -83,7 +83,7 @@ DOCUMENTATION :: END
                     </div>
                 </div>
                 <div class="tab-content">
-                    <div class="tab-pane active" id="profile">
+                    <div role="tabpanel" class="tab-pane active" id="tabs-profile">
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-md-12">
@@ -169,7 +169,7 @@ DOCUMENTATION :: END
                             </div>
                         </div>
                     </div>
-                    <div class="tab-pane" id="libraryHistory">
+                    <div role="tabpanel" class="tab-pane" id="tabs-history">
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-md-12">
@@ -221,7 +221,7 @@ DOCUMENTATION :: END
                             </div>
                         </div>
                     </div>
-                    <div class="tab-pane" id="libraryMediaInfo">
+                    <div role="tabpanel" class="tab-pane" id="tabs-mediainfo">
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-md-12">
@@ -366,27 +366,8 @@ DOCUMENTATION :: END
 <script src="${http_root}js/tables/history_table.js${cache_param}"></script>
 <script src="${http_root}js/tables/media_info_table.js${cache_param}"></script>
 <script>
-    $(document).ready(function () {
+    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-        $("#edit-library-tooltip").tooltip();
+        $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
-
-        // Populate watch time stats
-        $.ajax({
-            url: 'library_watch_time_stats',
-            async: true,
-            data: { section_id: section_id },
-            complete: function(xhr, status) {
-                $("#library-time-stats").html(xhr.responseText);
-            }
-        });
-
-        // Populate user stats
-        $.ajax({
-            url: 'library_user_stats',
-            async: true,
-            data: { section_id: section_id },
-            complete: function(xhr, status) {
-                $("#library-user-stats").html(xhr.responseText);
-            }
     });
 
     function loadHistoryTable() {
@@ -410,14 +391,10 @@ DOCUMENTATION :: END
         clearSearchButton('history_table-SID-${data["section_id"]}', history_table);
     }
 
-        $( "#history-tab-btn" ).one( "click", function() {
+    $('a[href="#tabs-history"]').on('shown.bs.tab', function() {
         loadHistoryTable();
     });
 
-        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-            $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
-        });
-
     % if _session['user_group'] == 'admin':
     function loadMediaInfoTable() {
         // Build media info table
@@ -440,7 +417,7 @@ DOCUMENTATION :: END
         clearSearchButton('media_info_table-SID-${data["section_id"]}', media_info_table);
     }
 
-        $( "#media-info-tab-btn" ).one( "click", function() {
+    $('a[href="#tabs-mediainfo"]').on('shown.bs.tab', function() {
         loadMediaInfoTable();
     });
 
@@ -452,6 +429,8 @@ DOCUMENTATION :: END
         refresh_table = false;
     });
 
+    $("#edit-library-tooltip").tooltip();
+
     // Load edit library modal
     $("#toggle-edit-library-modal").click(function() {
         $("#edit-library-tooltip").tooltip('hide');
@@ -620,6 +599,41 @@ DOCUMENTATION :: END
             $("#recently-added-page-right").removeClass("disabled");
         }
     });
+
+    $(document).ready(function () {
+
+        // Javascript to enable link to tab
+        var hash = document.location.hash;
+        var prefix = "tab_";
+        if (hash) {
+            $('.user-info-nav a[href='+hash.replace(prefix,"")+']').tab('show').trigger('show.bs.tab');
+        }
+
+        // Change hash for page-reload
+        $('.user-info-nav a').on('shown.bs.tab', function (e) {
+            window.location.hash = e.target.hash.replace("#", "#" + prefix);
+        });
+
+        // Populate watch time stats
+        $.ajax({
+            url: 'library_watch_time_stats',
+            async: true,
+            data: { section_id: section_id },
+            complete: function(xhr, status) {
+                $("#library-time-stats").html(xhr.responseText);
+            }
+        });
+
+        // Populate user stats
+        $.ajax({
+            url: 'library_user_stats',
+            async: true,
+            data: { section_id: section_id },
+            complete: function(xhr, status) {
+                $("#library-user-stats").html(xhr.responseText);
+            }
+        });
+
     });
 </script>
 % endif

data/interfaces/default/user.html

@@ -61,19 +61,19 @@ DOCUMENTATION :: END
                                 % endif
                             </div>
                             <div class="user-info-nav">
-                                <ul class="user-info-nav">
+                                <ul class="user-info-nav" role="tablist">
-                                    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
+                                    <li class="active"><a href="#tabs-profile" role="tab" data-toggle="tab">Profile</a></li>
-                                    <li><a id="history-tab-btn" href="#userHistory" data-toggle="tab">History</a></li>
+                                    <li><a id="history-tab-btn" href="#tabs-history" role="tab" data-toggle="tab">History</a></li>
-                                    <li><a id="sync-tab-btn" href="#userSyncItems" data-toggle="tab">Synced Items</a></li>
+                                    <li><a id="sync-tab-btn" href="#tabs-synceditems" role="tab" data-toggle="tab">Synced Items</a></li>
-                                    <li><a id="ip-tab-btn" href="#userAddresses" data-toggle="tab">IP Addresses</a></li>
+                                    <li><a id="ip-tab-btn" href="#tabs-ipaddresses" role="tab" data-toggle="tab">IP Addresses</a></li>
-                                    <li><a id="login-tab-btn" href="#userLogins" data-toggle="tab">Tautulli Logins</a></li>
+                                    <li><a id="login-tab-btn" href="#tabs-tautullilogins" role="tab" data-toggle="tab">Tautulli Logins</a></li>
                                 </ul>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="tab-content">
-                    <div class="tab-pane active" id="profile">
+                    <div role="tabpanel" class="tab-pane active" id="tabs-profile">
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-md-12">
@@ -134,7 +134,7 @@ DOCUMENTATION :: END
                             </div>
                         </div>
                     </div>
-                    <div class="tab-pane" id="userHistory">
+                    <div role="tabpanel" class="tab-pane" id="tabs-history">
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-md-12">
@@ -200,7 +200,7 @@ DOCUMENTATION :: END
                             </div>
                         </div>
                     </div>
-                    <div class="tab-pane" id="userSyncItems">
+                    <div role="tabpanel" class="tab-pane" id="tabs-synceditems">
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-md-12">
@@ -240,7 +240,7 @@ DOCUMENTATION :: END
                             </div>
                         </div>
                     </div>
-                    <div class="tab-pane" id="userAddresses">
+                    <div role="tabpanel" class="tab-pane" id="tabs-ipaddresses">
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-md-12">
@@ -271,7 +271,7 @@ DOCUMENTATION :: END
                             </div>
                         </div>
                     </div>
-                    <div class="tab-pane" id="userLogins">
+                    <div role="tabpanel" class="tab-pane" id="tabs-tautullilogins">
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-md-12">
@@ -369,14 +369,7 @@ DOCUMENTATION :: END
 <script src="${http_root}js/dataTables.bootstrap.min.js"></script>
 <script src="${http_root}js/dataTables.bootstrap.pagination.js"></script>
 % if data:
-<script src="${http_root}js/moment-with-locale.js"></script>
-<script src="${http_root}js/tables/history_table.js${cache_param}"></script>
-<script src="${http_root}js/tables/user_ips.js${cache_param}"></script>
-<script src="${http_root}js/tables/sync_table.js${cache_param}"></script>
-<script src="${http_root}js/tables/login_logs.js${cache_param}"></script>
 <script>
-    $(document).ready(function () {
-
     % if str(data['user_id']).isdigit():
     var user_id = ${data['user_id']};
     % else:
@@ -384,27 +377,20 @@ DOCUMENTATION :: END
     % endif
 
     var username = '${data['username'].replace("'", "\\'")}';
-
+</script>
-        $("#edit-user-tooltip").tooltip();
+<script src="${http_root}js/moment-with-locale.js"></script>
-
+<script src="${http_root}js/tables/history_table.js${cache_param}"></script>
-        // Populate watch time stats
+<script src="${http_root}js/tables/user_ips.js${cache_param}"></script>
-        $.ajax({
+<script src="${http_root}js/tables/sync_table.js${cache_param}"></script>
-            url: 'user_watch_time_stats',
+<script src="${http_root}js/tables/login_logs.js${cache_param}"></script>
-            async: true,
+<script>
-            data: { user_id: user_id, user: username },
+    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-            complete: function(xhr, status) {
+        $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
-                $("#user-time-stats").html(xhr.responseText);
-            }
     });
 
-        // Populate platform stats
+    $('a[href="#tabs-profile"]').on('shown.bs.tab', function() {
-        $.ajax({
+        var media_type = null;
-            url: 'user_player_stats',
+        loadHistoryTable(media_type);
-            async: true,
-            data: { user_id: user_id, user: username },
-            complete: function(xhr, status) {
-                $("#user-player-stats").html(xhr.responseText);
-            }
     });
 
     function loadHistoryTable(media_type) {
@@ -437,29 +423,12 @@ DOCUMENTATION :: END
         });
     }
 
-        $( "#history-tab-btn" ).one( "click", function() {
+    $('a[href="#tabs-history"]').on('shown.bs.tab', function() {
         var media_type = null;
         loadHistoryTable(media_type);
     });
 
-        $( "#ip-tab-btn" ).one( "click", function() {
+    $('a[href="#tabs-synceditems"]').on('shown.bs.tab', function() {
-            // Build user IP table
-            user_ip_table_options.ajax = {
-                url: 'get_user_ips',
-                type: 'post',
-                data: function ( d ) {
-                    return { 
-                        json_data: JSON.stringify( d ),
-                        user_id: user_id
-                    };
-                }
-            }
-            user_ip_table = $('#user_ip_table-UID-${data["user_id"]}').DataTable(user_ip_table_options);
-
-            clearSearchButton('user_ip_table-UID-${data["user_id"]}', user_ip_table);
-        });
-
-        $( "#sync-tab-btn" ).one( "click", function() {
         // Build user sync table
         sync_table_options.ajax = {
             url: 'get_sync',
@@ -476,7 +445,24 @@ DOCUMENTATION :: END
         clearSearchButton('sync_table-UID-${data["user_id"]}', sync_table);
     });
 
-        $( "#login-tab-btn" ).one( "click", function() {
+    $('a[href="#tabs-ipaddresses"]').on('shown.bs.tab', function() {
+        // Build user IP table
+        user_ip_table_options.ajax = {
+            url: 'get_user_ips',
+            type: 'post',
+            data: function ( d ) {
+                return {
+                    json_data: JSON.stringify( d ),
+                    user_id: user_id
+                };
+            }
+        }
+        user_ip_table = $('#user_ip_table-UID-${data["user_id"]}').DataTable(user_ip_table_options);
+
+        clearSearchButton('user_ip_table-UID-${data["user_id"]}', user_ip_table);
+    });
+
+    $('a[href="#tabs-tautullilogins"]').on('shown.bs.tab', function() {
         // Build user login table
         login_log_table_options.ajax = {
             url: 'get_user_logins',
@@ -493,11 +479,9 @@ DOCUMENTATION :: END
         clearSearchButton('login_log_table-UID-${data["user_id"]}', login_log_table);
     });
 
-        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-            $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
-        });
-
     % if _session['user_group'] == 'admin':
+    $("#edit-user-tooltip").tooltip();
+
     // Load edit user modal
     $("#toggle-edit-user-modal").click(function() {
         $("#edit-user-tooltip").tooltip('hide');
@@ -611,6 +595,41 @@ DOCUMENTATION :: END
             $("#recently-watched-page-right").removeClass("disabled");
         }
     });
+
+    $(document).ready(function () {
+
+        // Javascript to enable link to tab
+        var hash = document.location.hash;
+        var prefix = "tab_";
+        if (hash) {
+            $('.user-info-nav a[href='+hash.replace(prefix,"")+']').tab('show').trigger('show.bs.tab');
+        }
+
+        // Change hash for page-reload
+        $('.user-info-nav a').on('shown.bs.tab', function (e) {
+            window.location.hash = e.target.hash.replace("#", "#" + prefix);
+        });
+
+        // Populate watch time stats
+        $.ajax({
+            url: 'user_watch_time_stats',
+            async: true,
+            data: { user_id: user_id, user: username },
+            complete: function(xhr, status) {
+                $("#user-time-stats").html(xhr.responseText);
+            }
+        });
+
+        // Populate platform stats
+        $.ajax({
+            url: 'user_player_stats',
+            async: true,
+            data: { user_id: user_id, user: username },
+            complete: function(xhr, status) {
+                $("#user-player-stats").html(xhr.responseText);
+            }
+        });
+
     });
 </script>
 % endif