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;
}
/* Add to body to switch dark mode */
/* Add to body to switch to dark mode */
.dark-theme {
--main-background: #141414;
--secondary-background: #242424;

14
public/index.html
View File

@ -9,13 +9,13 @@
<body>
<aside role="navigation" id="sidebar">
<i class="material-icons side_icon">menu</i>
<i onclick="changeTab(event, 'main', 'search_tab')" 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="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="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="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="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="about" onclick="changeTab(event, 'main', 'about_tab')" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i>
<i id="main_search_tablink" class="main_tablinks"></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" id="main_charts_tablink" class="material-icons side_icon main_tablinks">bubble_chart</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" id="main_analyzer_tablink" class="material-icons side_icon main_tablinks">link</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" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i>
</aside>
<main id="main_content">
<div id="middle_section">

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

@ -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)