SAK-40364: Roster > navBar needs updating for active tab styling (sak…

…aiproject#5835)
LongsightGroup · Jul 31, 2018 · ea5d2fc · ea5d2fc
1 parent d01b6f9
commit ea5d2fc
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/roster2/src/handlebars/navbar.handlebars b/roster2/src/handlebars/navbar.handlebars
@@ -1,3 +1,3 @@
-    <li id="navbar_overview_link" role="menuitem"><span class="firstToolBarItem current"><a title="{{translate 'navbar_overview_tooltip'}}" href="javascript:;">{{translate 'navbar_overview'}}</a></span></li>
+    <li id="navbar_overview_link" role="menuitem" class="firstToolBarItem"><span><a title="{{translate 'navbar_overview_tooltip'}}" href="javascript:;">{{translate 'navbar_overview'}}</a></span></li>
     <li id="navbar_enrollment_status_link" role="menuitem"><span><a title="{{translate 'navbar_status_tooltip'}}" href="javascript:;">{{translate 'navbar_status'}}</a></span></li>
     <li id="navbar_permissions_link" role="menuitem"><span><a title="{{translate 'navbar_permissions_tooltip'}}" href="javascript:;">{{translate 'navbar_permissions'}}</a></span></li>
diff --git a/roster2/src/webapp/js/roster.js b/roster2/src/webapp/js/roster.js
@@ -91,12 +91,20 @@
 
     };
 
+    roster.changeActiveTab = function(activeID) {
+        $(activeID + ' > span').addClass('current');
+        var tabText = $(activeID + ' > span > a').text()
+        $(activeID + ' > span > a').remove();
+        $(activeID + ' > span').text(tabText);
+    }
+
     roster.switchState = function (state, args) {
 
         roster.currentState = state;
-
-        $('#roster_navbar > li > span').removeClass('current');
 
+        // Re-initialize the navbar
+        roster.initNavBar();
+
         // so we can return to the previous state after viewing permissions
         if (state !== roster.STATE_PERMISSIONS) {
             roster.rosterLastStateNotPermissions = state;
@@ -128,7 +136,7 @@
             roster.groupToView = (args && args.group) ? args.group : null;
             roster.nextPage = 0;
 
-            $('#navbar_overview_link > span').addClass('current');
+            roster.changeActiveTab('#navbar_overview_link');
 
             $('#roster_header').html('');
             $('#roster_section_filter').html('');
@@ -206,7 +214,7 @@
             roster.nextPage = 0;
             roster.groupToView = null;
 
-            $('#navbar_enrollment_status_link > span').addClass('current');
+            roster.changeActiveTab('#navbar_enrollment_status_link');
 
             if (null === roster.enrollmentSetToView && null != roster.site.siteEnrollmentSets[0]) {
                 roster.enrollmentSetToView = roster.site.siteEnrollmentSets[0].id;
@@ -268,7 +276,7 @@
             });
         } else if (roster.STATE_PERMISSIONS === state) {
 
-            $('#navbar_permissions_link > span').addClass('current');
+            roster.changeActiveTab('#navbar_permissions_link');
 
             $('#roster_section_filter').html('');
             $('#roster_search').html('');
@@ -746,24 +754,7 @@
         roster.nextPage = 0;
         roster.currentState = null;
 
-        // We need the toolbar in a template so we can swap in the translations
-        roster.render('navbar', {}, 'roster_navbar');
 
-        $('#navbar_overview_link > span > a').click(function (e) {
-            return roster.switchState(roster.STATE_OVERVIEW);
-        });
-
-        $('#navbar_enrollment_status_link > span > a').on('click', function (e) {
-            return roster.switchState(roster.STATE_ENROLLMENT_STATUS);
-        });
-
-        $('#navbar_print_link > span > a').click(function (e) {
-            return roster.switchState(roster.STATE_PRINT);
-        });
-
-        $('#navbar_permissions_link > span > a').click(function (e) {
-            return roster.switchState(roster.STATE_PERMISSIONS);
-        });
 
         if (!roster.currentUserPermissions.viewOfficialPhoto) {
             // The official photo permission should always override the
@@ -785,6 +776,28 @@
         });
     };
 
+    roster.initNavBar = function() {
+
+        // We need the toolbar in a template so we can swap in the translations
+        roster.render('navbar', {}, 'roster_navbar');
+
+        $('#navbar_overview_link > span > a').click(function (e) {
+            return roster.switchState(roster.STATE_OVERVIEW);
+        });
+
+        $('#navbar_enrollment_status_link > span > a').on('click', function (e) {
+            return roster.switchState(roster.STATE_ENROLLMENT_STATUS);
+        });
+
+        $('#navbar_print_link > span > a').click(function (e) {
+            return roster.switchState(roster.STATE_PRINT);
+        });
+
+        $('#navbar_permissions_link > span > a').click(function (e) {
+            return roster.switchState(roster.STATE_PERMISSIONS);
+        });
+    };
+
     roster.loadSiteDataAndInit = function () {
 
         $.ajax({