Toggling navigation tabs — JavaScript style.

Today I was faced with the decision on how best to update the navigation bar on our website. We had the chance to update the bar through CSS, or though JavaScript — and for reasons particular to our project, in which we are tracking the “current session” on the back-end in a real-time database, I chose the latter.

Before an tab is clicked and before the ‘session tab’ is set.
Once a tab is clicked, the ‘session tab’ is set and UI changes.

So two things are happening here: the first is that we are saving the ‘current session’ that the user is exploring on the back-end because we want to bring the user to their unfinished work when they log out and log back in. So an event is bound to the tab that pushes to Firebase the current-tab’s name.

At the same time, since we’re working in JavaScript anyway (I figured), we might as well change the UI to give some nice user feedback (as requested by the client). So while we’re at it, we grab the tab elements from the DOM, cycle through them to set the default colors to black, and then re-set the current tab in the color we like.

JSApp.prototype.setSessionTab = function(clicked) {
var currentTab = clicked.id;
var userID = person.uid;
var sessionRef = database.ref('/session').child(userID);
var allTabs = document.getElementsByClassName('tab');
// We need to toggle the tabs to default color if un-selected...
for (var i = 0; i < allTabs.length; i++) {
allTabs[i].style.stroke = '#000000';
allTabs[i].style.fill = '#000000';
}
// ...And dynamically set the current session tab:
document.getElementById(currentTab).style.stroke = '#ec1928';
document.getElementById(currentTab).style.fill = '#ec1928';
sessionRef.update({
current_tab: currentTab
});
};
On the back end: saving he current tab on the cloud.

Voilà — you can manage both the back and the front-end at the same time in your Vanilla JavaScript. I’ll leave the CSS wrangling to someone else…

***