diff --git a/public/js/app/tabs.js b/public/js/app/tabs.js
index f5504a8..a669509 100644
--- a/public/js/app/tabs.js
+++ b/public/js/app/tabs.js
@@ -4,7 +4,7 @@ var windows_stack = []
var currentStack = {}
function changeTab(evt, section, tabName) {
- console.log( {evt, section, tabName} );
+ console.log({ evt, section, tabName })
windows_stack = []
currentStack = {}
var i, tabcontent, tablinks
@@ -14,16 +14,19 @@ function changeTab(evt, section, tabName) {
}
tablinks = document.getElementsByClassName(section + '_tablinks')
for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(' active', '')
+ tablinks[i].classList.remove('active')
}
if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
settingsTab.settings = { ...lastSettings }
}
- console.log( {tabName} );
-
+
document.getElementById(tabName).style.display = 'block'
window[section + '_selected'] = tabName
- evt.currentTarget.className += ' active'
+
+ // Not choosing .currentTarget beacuse the event
+ // is delegated, so it refers to #sidebar
+ evt.target.classList.add('active')
+
// Check if you need to load more content in the search tab
if (
document.getElementById('content').offsetHeight >= document.getElementById('content').scrollHeight &&
@@ -34,16 +37,12 @@ function changeTab(evt, section, tabName) {
}
}
-function showTab(type, id){
- if (windows_stack.length == 0)
- windows_stack.push({tab: main_selected})
- else
- windows_stack.push(currentStack)
- if (type == 'artist')
- tab = 'artist_tab'
- else
- tab = 'tracklist_tab'
- currentStack = {type: type, id: id}
+function showTab(type, id) {
+ if (windows_stack.length == 0) windows_stack.push({ tab: main_selected })
+ else windows_stack.push(currentStack)
+ if (type == 'artist') tab = 'artist_tab'
+ else tab = 'tracklist_tab'
+ currentStack = { type: type, id: id }
let tabcontent = document.getElementsByClassName('main_tabcontent')
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none'
@@ -51,11 +50,51 @@ function showTab(type, id){
document.getElementById(tab).style.display = 'block'
}
-function backTab(){
- if (windows_stack.length == 1){
- clickElement("main_"+main_selected+"link")
- }else{
+function backTab() {
+ if (windows_stack.length == 1) {
+ clickElement('main_' + main_selected + 'link')
+ } else {
let tabObj = windows_stack.pop()
showTab(tabObj.type, tabObj.id)
}
}
+
+/**
+ * Handles click Event on the sidebar and changes tab
+ * according to clicked icon.
+ * Uses event delegation
+ * @param {Event} event
+ * @since ?.?.?
+ */
+function handleSidebarClick(event) {
+ let targetID = event.target.id
+
+ switch (targetID) {
+ case 'main_search_tablink':
+ changeTab(event, 'main', 'search_tab')
+ break
+ case 'main_home_tablink':
+ changeTab(event, 'main', 'home_tab')
+ break
+ case 'main_charts_tablink':
+ changeTab(event, 'main', 'charts_tab')
+ break
+ case 'main_favorites_tablink':
+ changeTab(event, 'main', 'favorites_tab')
+ break
+ case 'main_analyzer_tablink':
+ changeTab(event, 'main', 'analyzer_tab')
+ break
+ case 'main_settings_tablink':
+ changeTab(event, 'main', 'settings_tab')
+ break
+ case 'main_about_tablink':
+ changeTab(event, 'main', 'about_tab')
+ break
+
+ default:
+ break
+ }
+}
+
+document.getElementById('sidebar').addEventListener('click', handleSidebarClick)