evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

removed onclick attributes on tab icons and added delegated event handler to sidebar

Browse Source
This commit is contained in:
Roberto Tonino 2020-04-17 22:11:53 +02:00
parent e98dcdcf9b
commit 21a19d7850
3 changed files with 66 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/modules/base.css
View File

@ -15,7 +15,7 @@
--toast-text: #ffffffde; --toast-text: #ffffffde;
} }
/* Add to body to switch dark mode */ /* Add to body to switch to dark mode */
.dark-theme { .dark-theme {
--main-background: #141414; --main-background: #141414;
--secondary-background: #242424; --secondary-background: #242424;

14
public/index.html
View File

@ -9,13 +9,13 @@
<body> <body>
<aside role="navigation" id="sidebar"> <aside role="navigation" id="sidebar">
<i class="material-icons side_icon">menu</i> <i class="material-icons side_icon">menu</i>
<i onclick="changeTab(event, 'main', 'search_tab')" id="main_search_tablink" class="main_tablinks"></i> <i id="main_search_tablink" class="main_tablinks"></i>
<i role="link" aria-label="home" onclick="changeTab(event, 'main', 'home_tab')" id="main_home_tablink" class="material-icons side_icon main_tablinks">home</i> <i role="link" aria-label="home" id="main_home_tablink" class="material-icons side_icon main_tablinks">home</i>
<i role="link" aria-label="charts" onclick="changeTab(event, 'main', 'charts_tab')" id="main_charts_tablink" class="material-icons side_icon main_tablinks">bubble_chart</i> <i role="link" aria-label="charts" id="main_charts_tablink" class="material-icons side_icon main_tablinks">bubble_chart</i>
<i role="link" aria-label="favorites" onclick="changeTab(event, 'main', 'favorites_tab')" id="main_favorites_tablink" class="material-icons side_icon main_tablinks">album</i> <i role="link" aria-label="favorites" id="main_favorites_tablink" class="material-icons side_icon main_tablinks">album</i>
<i role="link" aria-label="link analyzer" onclick="changeTab(event, 'main', 'analyzer_tab')" id="main_analyzer_tablink" class="material-icons side_icon main_tablinks">link</i> <i role="link" aria-label="link analyzer" id="main_analyzer_tablink" class="material-icons side_icon main_tablinks">link</i>
<i role="link" aria-label="settings" onclick="changeTab(event, 'main', 'settings_tab')" id="main_settings_tablink" class="material-icons side_icon main_tablinks">settings</i> <i role="link" aria-label="settings" id="main_settings_tablink" class="material-icons side_icon main_tablinks">settings</i>
<i role="link" aria-label="about" onclick="changeTab(event, 'main', 'about_tab')" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i> <i role="link" aria-label="about" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i>
</aside> </aside>
<main id="main_content"> <main id="main_content">
<div id="middle_section"> <div id="middle_section">

65
public/js/app/tabs.js
View File

@ -4,7 +4,7 @@ var windows_stack = []
var currentStack = {} var currentStack = {}
function changeTab(evt, section, tabName) { function changeTab(evt, section, tabName) {
console.log( {evt, section, tabName} ); console.log({ evt, section, tabName })
windows_stack = [] windows_stack = []
currentStack = {} currentStack = {}
var i, tabcontent, tablinks var i, tabcontent, tablinks
@ -14,16 +14,19 @@ function changeTab(evt, section, tabName) {
} }
tablinks = document.getElementsByClassName(section + '_tablinks') tablinks = document.getElementsByClassName(section + '_tablinks')
for (i = 0; i < tablinks.length; i++) { 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') { if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
settingsTab.settings = { ...lastSettings } settingsTab.settings = { ...lastSettings }
} }
console.log( {tabName} );
document.getElementById(tabName).style.display = 'block' document.getElementById(tabName).style.display = 'block'
window[section + '_selected'] = tabName 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 // Check if you need to load more content in the search tab
if ( if (
document.getElementById('content').offsetHeight >= document.getElementById('content').scrollHeight && document.getElementById('content').offsetHeight >= document.getElementById('content').scrollHeight &&
@ -35,14 +38,10 @@ function changeTab(evt, section, tabName) {
} }
function showTab(type, id) { function showTab(type, id) {
if (windows_stack.length == 0) if (windows_stack.length == 0) windows_stack.push({ tab: main_selected })
windows_stack.push({tab: main_selected}) else windows_stack.push(currentStack)
else if (type == 'artist') tab = 'artist_tab'
windows_stack.push(currentStack) else tab = 'tracklist_tab'
if (type == 'artist')
tab = 'artist_tab'
else
tab = 'tracklist_tab'
currentStack = { type: type, id: id } currentStack = { type: type, id: id }
let tabcontent = document.getElementsByClassName('main_tabcontent') let tabcontent = document.getElementsByClassName('main_tabcontent')
for (let i = 0; i < tabcontent.length; i++) { for (let i = 0; i < tabcontent.length; i++) {
@ -53,9 +52,49 @@ function showTab(type, id){
function backTab() { function backTab() {
if (windows_stack.length == 1) { if (windows_stack.length == 1) {
clickElement("main_"+main_selected+"link") clickElement('main_' + main_selected + 'link')
} else { } else {
let tabObj = windows_stack.pop() let tabObj = windows_stack.pop()
showTab(tabObj.type, tabObj.id) 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)