From 21a19d7850518e9a4cc4ec20fef4d30ac4fd8aa2 Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Fri, 17 Apr 2020 22:11:53 +0200 Subject: [PATCH] removed onclick attributes on tab icons and added delegated event handler to sidebar --- public/css/modules/base.css | 2 +- public/index.html | 14 +++---- public/js/app/tabs.js | 77 ++++++++++++++++++++++++++++--------- 3 files changed, 66 insertions(+), 27 deletions(-) diff --git a/public/css/modules/base.css b/public/css/modules/base.css index 3f47eb6..2b216a4 100644 --- a/public/css/modules/base.css +++ b/public/css/modules/base.css @@ -15,7 +15,7 @@ --toast-text: #ffffffde; } -/* Add to body to switch dark mode */ +/* Add to body to switch to dark mode */ .dark-theme { --main-background: #141414; --secondary-background: #242424; diff --git a/public/index.html b/public/index.html index 77d9949..a9575f2 100644 --- a/public/index.html +++ b/public/index.html @@ -9,13 +9,13 @@
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)