feat: improved sidebar links; feat: removed a bunch of functions from changeTab function
This commit is contained in:
Roberto Tonino
parent
d965c1e65b
commit
6c4fdc2acf
File diff suppressed because one or more lines are too long
@ -639,18 +639,16 @@ export default {
|
||||
accountNum: 0,
|
||||
accounts: []
|
||||
}),
|
||||
beforeDestroy() {
|
||||
console.log('settings bef dest')
|
||||
// this.$refs.root.style.display = 'none'
|
||||
},
|
||||
mounted() {
|
||||
console.log('settings mounted')
|
||||
// this.$refs.root.style.display = 'block'
|
||||
|
||||
this.locales = this.$i18n.availableLocales
|
||||
|
||||
EventBus.$on('settingsTab:revertSettings', this.revertSettings)
|
||||
EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
|
||||
this.revertSettings()
|
||||
this.revertCredentials()
|
||||
|
||||
// EventBus.$on('settingsTab:revertSettings', this.revertSettings)
|
||||
// EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
|
||||
|
||||
this.$refs.loggedInInfo.classList.add('hide')
|
||||
|
||||
|
||||
@ -1,75 +1,96 @@
|
||||
<template>
|
||||
<aside id="sidebar" role="navigation" @click="handleSidebarClick">
|
||||
<span
|
||||
<router-link
|
||||
tag="span"
|
||||
id="main_home_tablink"
|
||||
class="main_tablinks"
|
||||
:class="{ active: activeTablink === 'home' }"
|
||||
role="link"
|
||||
aria-label="home"
|
||||
:to="{ name: 'Home' }"
|
||||
@click.native="activeTablink = 'home'"
|
||||
>
|
||||
<i class="material-icons side_icon">home</i>
|
||||
<span class="main_tablinks_text">{{ $t('sidebar.home') }}</span>
|
||||
</span>
|
||||
<span
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="span"
|
||||
id="main_search_tablink"
|
||||
class="main_tablinks"
|
||||
:class="{ active: activeTablink === 'search' }"
|
||||
role="link"
|
||||
aria-label="search"
|
||||
:to="{ name: 'Search' }"
|
||||
@click.native="activeTablink = 'search'"
|
||||
>
|
||||
<i class="material-icons side_icon">search</i>
|
||||
<span class="main_tablinks_text">{{ $t('sidebar.search') }}</span>
|
||||
</span>
|
||||
<span
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="span"
|
||||
id="main_charts_tablink"
|
||||
class="main_tablinks"
|
||||
:class="{ active: activeTablink === 'charts' }"
|
||||
role="link"
|
||||
aria-label="charts"
|
||||
:to="{ name: 'Charts' }"
|
||||
@click.native="activeTablink = 'charts'"
|
||||
>
|
||||
<i class="material-icons side_icon">show_chart</i>
|
||||
<span class="main_tablinks_text">{{ $t('sidebar.charts') }}</span>
|
||||
</span>
|
||||
<span
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="span"
|
||||
id="main_favorites_tablink"
|
||||
class="main_tablinks"
|
||||
:class="{ active: activeTablink === 'favorites' }"
|
||||
role="link"
|
||||
aria-label="favorites"
|
||||
:to="{ name: 'Favorites' }"
|
||||
@click.native="activeTablink = 'favorites'"
|
||||
>
|
||||
<i class="material-icons side_icon">star</i>
|
||||
<span class="main_tablinks_text">{{ $t('sidebar.favorites') }}</span>
|
||||
</span>
|
||||
<span
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="span"
|
||||
id="main_analyzer_tablink"
|
||||
class="main_tablinks"
|
||||
:class="{ active: activeTablink === 'analyzer' }"
|
||||
role="link"
|
||||
aria-label="link analyzer"
|
||||
:to="{ name: 'Link Analyzer' }"
|
||||
@click.native="activeTablink = 'analyzer'"
|
||||
>
|
||||
<i class="material-icons side_icon">link</i>
|
||||
<span class="main_tablinks_text">{{ $t('sidebar.linkAnalyzer') }}</span>
|
||||
</span>
|
||||
<span
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="span"
|
||||
id="main_settings_tablink"
|
||||
class="main_tablinks"
|
||||
:class="{ active: activeTablink === 'settings' }"
|
||||
role="link"
|
||||
aria-label="settings"
|
||||
:to="{ name: 'Settings' }"
|
||||
@click.native="activeTablink = 'settings'"
|
||||
>
|
||||
<i class="material-icons side_icon">settings</i>
|
||||
<span class="main_tablinks_text">{{ $t('sidebar.settings') }}</span>
|
||||
</span>
|
||||
<span
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="span"
|
||||
id="main_about_tablink"
|
||||
class="main_tablinks"
|
||||
:class="{ active: activeTablink === 'about' }"
|
||||
role="link"
|
||||
aria-label="info"
|
||||
:to="{ name: 'About' }"
|
||||
@click.native="activeTablink = 'about'"
|
||||
>
|
||||
<i class="material-icons side_icon">info</i>
|
||||
<span class="main_tablinks_text">{{ $t('sidebar.about') }}</span>
|
||||
</span>
|
||||
</router-link>
|
||||
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
|
||||
<i class="material-icons side_icon side_icon--theme">palette</i>
|
||||
<div id="theme_togglers">
|
||||
@ -164,80 +185,6 @@ export default {
|
||||
|
||||
document.documentElement.removeEventListener('transitionend', transitionHandler)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Handles click Event on the sidebar and changes tab
|
||||
* according to clicked icon.
|
||||
* Uses event delegation
|
||||
* @param {Event} event
|
||||
*/
|
||||
handleSidebarClick(event) {
|
||||
const { target } = event
|
||||
|
||||
const wantToChangeTab = target.matches('.main_tablinks') || target.parentElement.matches('.main_tablinks')
|
||||
|
||||
if (!wantToChangeTab) return
|
||||
|
||||
let sidebarEl = target.matches('.main_tablinks') ? target : target.parentElement
|
||||
let targetID = sidebarEl.id
|
||||
let selectedTab = null
|
||||
|
||||
this.activeTablink = targetID.match(/main_(\w+)_tablink/)[1]
|
||||
|
||||
switch (targetID) {
|
||||
case 'main_search_tablink':
|
||||
selectedTab = 'search_tab'
|
||||
this.$router.push({
|
||||
name: 'Search'
|
||||
})
|
||||
break
|
||||
case 'main_home_tablink':
|
||||
selectedTab = 'home_tab'
|
||||
this.$router.push({
|
||||
name: 'Home'
|
||||
})
|
||||
break
|
||||
case 'main_charts_tablink':
|
||||
selectedTab = 'charts_tab'
|
||||
this.$router.push({
|
||||
name: 'Charts'
|
||||
})
|
||||
break
|
||||
case 'main_favorites_tablink':
|
||||
selectedTab = 'favorites_tab'
|
||||
this.$router.push({
|
||||
name: 'Favorites'
|
||||
// query: {
|
||||
// tab: 'playlist'
|
||||
// }
|
||||
})
|
||||
break
|
||||
case 'main_analyzer_tablink':
|
||||
selectedTab = 'analyzer_tab'
|
||||
this.$router.push({
|
||||
name: 'Link Analyzer'
|
||||
})
|
||||
break
|
||||
case 'main_settings_tablink':
|
||||
selectedTab = 'settings_tab'
|
||||
this.$router.push({
|
||||
name: 'Settings'
|
||||
})
|
||||
break
|
||||
case 'main_about_tablink':
|
||||
selectedTab = 'about_tab'
|
||||
this.$router.push({
|
||||
name: 'About'
|
||||
})
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
if (!selectedTab) return
|
||||
|
||||
changeTab(sidebarEl, 'main', selectedTab)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
108
src/js/tabs.js
108
src/js/tabs.js
@ -8,30 +8,19 @@ window.main_selected = ''
|
||||
window.windows_stack = []
|
||||
window.currentStack = {}
|
||||
|
||||
/**
|
||||
* Changes the tab to the wanted one
|
||||
* Need to understand the difference from showTab
|
||||
*
|
||||
* Needs EventBus
|
||||
*/
|
||||
export function changeTab(sidebarEl, section, tabName) {
|
||||
window.windows_stack = []
|
||||
window.currentStack = {}
|
||||
|
||||
// hideTabContent(section)
|
||||
// * Only in section search
|
||||
updateTabLink(section)
|
||||
|
||||
// * Only when clicking the settings icon in the sidebar
|
||||
resetSettings(tabName)
|
||||
// resetSettings(tabName)
|
||||
|
||||
// showSelectedTab(tabName)
|
||||
|
||||
// * Only in section main & search
|
||||
// * Only in section search
|
||||
setSelectedTab(section, tabName)
|
||||
|
||||
// setSidebarElementActive(sidebarEl)
|
||||
|
||||
// * Only if window.main_selected === 'search_tab'
|
||||
checkNeedToLoadMoreContent()
|
||||
}
|
||||
@ -55,18 +44,6 @@ function checkNeedToLoadMoreContent() {
|
||||
}
|
||||
}
|
||||
|
||||
function setSidebarElementActive(sidebarEl) {
|
||||
sidebarEl.classList.add('active')
|
||||
}
|
||||
|
||||
function showSelectedTab(tabName) {
|
||||
// * The tab we want to show
|
||||
console.log('Tabs who get display block')
|
||||
if (document.getElementById(tabName)) {
|
||||
document.getElementById(tabName).style.display = 'block'
|
||||
}
|
||||
}
|
||||
|
||||
function resetSettings(tabName) {
|
||||
if (tabName === 'settings_tab' && window.main_selected !== 'settings_tab') {
|
||||
EventBus.$emit('settingsTab:revertSettings')
|
||||
@ -74,28 +51,12 @@ function resetSettings(tabName) {
|
||||
}
|
||||
}
|
||||
|
||||
function hideTabContent(section) {
|
||||
// * The visualized content of the tab
|
||||
// ! Can be more than one per tab, happens in MainSearch and Favorites tab
|
||||
// ! because they have more tablinks (see below)
|
||||
|
||||
const tabContent = document.getElementsByClassName(`${section}_tabcontent`)
|
||||
|
||||
for (let i = 0; i < tabContent.length; i++) {
|
||||
if (!tabContent[i] || tabContent[i].matches('.main_tabcontent')) continue
|
||||
|
||||
tabContent[i].style.display = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
function updateTabLink(section) {
|
||||
// * Tabs inside the actual tab (like albums, tracks, playlists...)
|
||||
// * or sidebar links
|
||||
if (section == 'main') return
|
||||
|
||||
const tabLinks = document.getElementsByClassName(`${section}_tablinks`)
|
||||
// console.log(tabLinks)
|
||||
// console.trace()
|
||||
|
||||
for (let i = 0; i < tabLinks.length; i++) {
|
||||
tabLinks[i].classList.remove('active')
|
||||
@ -116,50 +77,6 @@ export function showView(viewType, event) {
|
||||
name,
|
||||
params
|
||||
})
|
||||
|
||||
// showTab(viewType, id)
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the passed tab, keeping track of the one that the user is coming from.
|
||||
*
|
||||
* Needs EventBus
|
||||
*/
|
||||
function showTab(type, id, back = false) {
|
||||
return
|
||||
// updateStack(type, id, back)
|
||||
window.tab = type === 'artist' ? 'artist_tab' : 'tracklist_tab'
|
||||
// displayTabs()
|
||||
}
|
||||
|
||||
function updateStack(type, id, back) {
|
||||
if (window.windows_stack.length === 0) {
|
||||
window.windows_stack.push({
|
||||
tab: window.main_selected
|
||||
})
|
||||
} else if (!back) {
|
||||
if (window.currentStack.type === 'artist') {
|
||||
EventBus.$emit('artistTab:updateSelected')
|
||||
}
|
||||
|
||||
window.windows_stack.push(window.currentStack)
|
||||
}
|
||||
|
||||
window.currentStack = { type, id }
|
||||
}
|
||||
|
||||
function displayTabs() {
|
||||
let tabcontent = document.getElementsByClassName('main_tabcontent')
|
||||
|
||||
for (let i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = 'none'
|
||||
}
|
||||
|
||||
let newTab = document.getElementById(window.tab)
|
||||
|
||||
if (newTab) {
|
||||
newTab.style.display = 'block'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -168,27 +85,8 @@ function displayTabs() {
|
||||
* Needs EventBus and socket
|
||||
*/
|
||||
export function backTab() {
|
||||
router.back()
|
||||
|
||||
// ! Need to implement the memory of the opened artist tab
|
||||
return
|
||||
|
||||
if (window.windows_stack.length == 1) {
|
||||
console.log(window.main_selected)
|
||||
if (document.getElementById(`main_${window.main_selected}link`)) {
|
||||
// document.getElementById(`main_${window.main_selected}link`).click()
|
||||
}
|
||||
} else {
|
||||
// Retrieving tab type and tab id
|
||||
let data = window.windows_stack.pop()
|
||||
let { type, id, selected } = data
|
||||
|
||||
if (type === 'artist' && selected) {
|
||||
EventBus.$emit('artistTab:changeTab', selected)
|
||||
}
|
||||
|
||||
// showTab(type, id, true)
|
||||
}
|
||||
router.back()
|
||||
}
|
||||
|
||||
export function init() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user