feat: improved sidebar links; feat: removed a bunch of functions from changeTab function

src/components/TheSettingsTab.vue

@@ -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)
+		this.revertSettings()
-		EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
+		this.revertCredentials()
+
+		// EventBus.$on('settingsTab:revertSettings', this.revertSettings)
+		// EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
 
 		this.$refs.loggedInInfo.classList.add('hide')
 

src/components/TheSidebar.vue

@@ -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>
+		</router-link>
-		<span
+		<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>
+		</router-link>
-		<span
+		<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>
+		</router-link>
-		<span
+		<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>
+		</router-link>
-		<span
+		<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>
+		</router-link>
-		<span
+		<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>
+		</router-link>
-		<span
+		<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)
 		}
 	}
 }

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 search
-
-	// * Only in section main & 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
+	router.back()
-
-	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)
-	}
 }
 
 export function init() {