started moving tabs logic into vue components

src/js/components/TheAboutTab.vue

@@ -1,4 +1,4 @@
-<template>
+<template functional>
 	<div id="about_tab" class="main_tabcontent">
 		<h2 class="page_heading">About</h2>
 		<p>
@@ -80,15 +80,3 @@
 	</div>
 </template>
 
-<script>
-export default {
-	name: 'the-about-tab',
-	// Without this empty data rollup watcher throws an error
-	data() {
-		return {}
-	}
-}
-</script>
-
-<style>
-</style>

src/js/components/TheFavoritesTab.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="favorites_tab" class="main_tabcontent">
+	<div id="favorites_tab" class="main_tabcontent" @click="handleFavoritesTabClick">
 		<h2 class="page_heading">
 			Favorites
 			<div
@@ -183,7 +183,7 @@
 
 <script>
 import { socket } from '@/js/socket.js'
-import { showView } from '@/js/tabs.js'
+import { showView, changeTab } from '@/js/tabs.js'
 import Downloads from '@/js/downloads.js'
 import TrackPreview from '@/js/track-preview.js'
 import Utils from '@/js/utils.js'
@@ -209,6 +209,36 @@ export default {
 		previewMouseEnter: TrackPreview.previewMouseEnter,
 		previewMouseLeave: TrackPreview.previewMouseLeave,
 		convertDuration: Utils.convertDuration,
+		handleFavoritesTabClick(event) {
+			const {
+				target,
+				target: { id }
+			} = event
+			let selectedTab = null
+			console.log(id)
+
+			switch (id) {
+				case 'favorites_playlist_tab':
+					selectedTab = 'playlist_favorites'
+					break
+				case 'favorites_album_tab':
+					selectedTab = 'album_favorites'
+					break
+				case 'favorites_artist_tab':
+					selectedTab = 'artist_favorites'
+					break
+				case 'favorites_track_tab':
+					selectedTab = 'track_favorites'
+					break
+
+				default:
+					break
+			}
+
+			if (!selectedTab) return
+
+			changeTab(target, 'favorites', selectedTab)
+		},
 		addToQueue(e) {
 			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)

src/js/components/TheMainSearch.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="search_tab" class="main_tabcontent">
+	<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick">
 		<div :class="{ hide: results.query != '' }">
 			<h2>Start searching!</h2>
 			<p>
@@ -443,6 +443,8 @@ import Downloads from '@/js/downloads.js'
 import TrackPreview from '@/js/track-preview.js'
 import Utils from '@/js/utils.js'
 import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
+
+import { changeTab } from '@/js/tabs.js'
 import EventBus from '@/js/EventBus.js'
 
 export default {
@@ -516,6 +518,38 @@ export default {
 		playPausePreview: TrackPreview.playPausePreview,
 		previewMouseEnter: TrackPreview.previewMouseEnter,
 		previewMouseLeave: TrackPreview.previewMouseLeave,
+		handleSearchTabClick(event) {
+			const {
+				target,
+				target: { id }
+			} = event
+			let selectedTab = null
+
+			switch (id) {
+				case 'search_all_tab':
+					selectedTab = 'main_search'
+					break
+				case 'search_track_tab':
+					selectedTab = 'track_search'
+					break
+				case 'search_album_tab':
+					selectedTab = 'album_search'
+					break
+				case 'search_artist_tab':
+					selectedTab = 'artist_search'
+					break
+				case 'search_playlist_tab':
+					selectedTab = 'playlist_search'
+					break
+
+				default:
+					break
+			}
+
+			if (!selectedTab) return
+
+			changeTab(target, 'search', selectedTab)
+		},
 		handleClickTopResult(event) {
 			let topResultType = this.results.allTab.TOP_RESULT[0].type
 

src/js/components/TheSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-	<aside id="sidebar" role="navigation">
+	<aside id="sidebar" role="navigation" @click="handleSidebarClick">
 		<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home">
 			<i class="material-icons side_icon">home</i>
 			<span class="main_tablinks_text">Home</span>
@@ -63,7 +63,30 @@
 	</aside>
 </template>
 
+<style scoped>
+#network-status {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	margin-top: auto;
+	bottom: 0;
+}
+
+#network-status.online i.material-icons {
+	color: hsl(151, 100%, 31%);
+}
+
+#network-status.offline i.material-icons svg {
+	fill: red;
+	width: 1em;
+	height: 1em;
+}
+</style>
+
 <script>
+import { changeTab } from '@/js/tabs.js'
+
 export default {
 	name: 'the-sidebar',
 	data() {
@@ -107,28 +130,56 @@ 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
+
+			switch (targetID) {
+				case 'main_search_tablink':
+					selectedTab = 'search_tab'
+					break
+				case 'main_home_tablink':
+					selectedTab = 'home_tab'
+					break
+				case 'main_charts_tablink':
+					selectedTab = 'charts_tab'
+					break
+				case 'main_favorites_tablink':
+					selectedTab = 'favorites_tab'
+					break
+				case 'main_analyzer_tablink':
+					selectedTab = 'analyzer_tab'
+					break
+				case 'main_settings_tablink':
+					selectedTab = 'settings_tab'
+					break
+				case 'main_about_tablink':
+					selectedTab = 'about_tab'
+					break
+
+				default:
+					break
+			}
+
+			if (!selectedTab) return
+
+			changeTab(sidebarEl, 'main', selectedTab)
 		}
 	}
 }
 </script>
 
-<style scoped>
-#network-status {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-	margin-top: auto;
-	bottom: 0;
-}
-
-#network-status.online i.material-icons {
-	color: hsl(151, 100%, 31%);
-}
-
-#network-status.offline i.material-icons svg {
-	fill: red;
-	width: 1em;
-	height: 1em;
-}
-</style>

src/js/tabs.js

@@ -14,6 +14,7 @@ let currentStack = {}
 // because it's used in components that are needed
 // in this file too
 export function showView(viewType, event) {
+	// console.error('SHOW VIEW')
 	const {
 		currentTarget: {
 			dataset: { id }
@@ -47,144 +48,41 @@ export function updateSelected(newSelected) {
 	currentStack.selected = newSelected
 }
 
-window.test = showErrors
-
 function analyzeLink(link) {
 	EventBus.$emit('linkAnalyzerTab:reset')
 	socket.emit('analyzeLink', link)
 }
 
-function linkListeners() {
+export function changeTab(sidebarEl, section, tabName) {
-	document.getElementById('search_tab').addEventListener('click', handleSearchTabClick)
+	// console.error('CHANGE TAB')
-	document.getElementById('favorites_tab').addEventListener('click', handleFavoritesTabClick)
+	// console.log(Array.from(arguments))
-	document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
-
-	const backButtons = Array.from(document.getElementsByClassName('back-button'))
-
-	backButtons.forEach(button => {
-		button.addEventListener('click', backTab)
-	})
-}
-
-/**
- * Handles click Event on the sidebar and changes tab
- * according to clicked icon.
- * Uses event delegation
- * @param		{Event}		event
- */
-function 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
-
-	switch (targetID) {
-		case 'main_search_tablink':
-			changeTab(sidebarEl, 'main', 'search_tab')
-			break
-		case 'main_home_tablink':
-			changeTab(sidebarEl, 'main', 'home_tab')
-			break
-		case 'main_charts_tablink':
-			changeTab(sidebarEl, 'main', 'charts_tab')
-			break
-		case 'main_favorites_tablink':
-			changeTab(sidebarEl, 'main', 'favorites_tab')
-			break
-		case 'main_analyzer_tablink':
-			changeTab(sidebarEl, 'main', 'analyzer_tab')
-			break
-		case 'main_settings_tablink':
-			changeTab(sidebarEl, 'main', 'settings_tab')
-			break
-		case 'main_about_tablink':
-			changeTab(sidebarEl, 'main', 'about_tab')
-			break
-
-		default:
-			break
-	}
-}
-
-function handleSearchTabClick(event) {
-	const {
-		target,
-		target: { id }
-	} = event
-
-	switch (id) {
-		case 'search_all_tab':
-			changeTab(target, 'search', 'main_search')
-			break
-		case 'search_track_tab':
-			changeTab(target, 'search', 'track_search')
-			break
-		case 'search_album_tab':
-			changeTab(target, 'search', 'album_search')
-			break
-		case 'search_artist_tab':
-			changeTab(target, 'search', 'artist_search')
-			break
-		case 'search_playlist_tab':
-			changeTab(target, 'search', 'playlist_search')
-			break
-
-		default:
-			break
-	}
-}
-
-function handleFavoritesTabClick(event) {
-	const {
-		target,
-		target: { id }
-	} = event
-
-	switch (id) {
-		case 'favorites_playlist_tab':
-			changeTab(target, 'favorites', 'playlist_favorites')
-			break
-		case 'favorites_album_tab':
-			changeTab(target, 'favorites', 'album_favorites')
-			break
-		case 'favorites_artist_tab':
-			changeTab(target, 'favorites', 'artist_favorites')
-			break
-		case 'favorites_track_tab':
-			changeTab(target, 'favorites', 'track_favorites')
-			break
-
-		default:
-			break
-	}
-}
-
-function changeTab(sidebarEl, section, tabName) {
 	windows_stack = []
 	currentStack = {}
-	var i, tabcontent, tablinks
+
-	tabcontent = document.getElementsByClassName(section + '_tabcontent')
+	// * The visualized content of the tab
-	for (i = 0; i < tabcontent.length; i++) {
+	// ! Can be more than one per tab, happens in MainSearch and Favorites tab
-		tabcontent[i].style.display = 'none'
+	// ! because they have more tablinks (see below)
-	}
+	const tabContent = document.getElementsByClassName(`${section}_tabcontent`)
-	tablinks = document.getElementsByClassName(section + '_tablinks')
+
-	// tablinks = document.getElementsByClassName('section-tabs__tab')
+	for (let i = 0; i < tabContent.length; i++) {
-	for (i = 0; i < tablinks.length; i++) {
+		tabContent[i].style.display = 'none'
-		tablinks[i].classList.remove('active')
 	}
 
-	if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
+	// * Tabs inside the actual tab (like albums, tracks, playlists...)
+	const tabLinks = document.getElementsByClassName(`${section}_tablinks`)
+
+	for (let i = 0; i < tabLinks.length; i++) {
+		tabLinks[i].classList.remove('active')
+	}
+
+	if (tabName === 'settings_tab' && main_selected !== 'settings_tab') {
 		EventBus.$emit('settingsTab:revertSettings')
 		EventBus.$emit('settingsTab:revertCredentials')
 	}
 
 	document.getElementById(tabName).style.display = 'block'
 
-	if ('main' === section) {
+	if (section === 'main') {
 		main_selected = tabName
 	} else if ('search' === section) {
 		search_selected = tabName
@@ -194,14 +92,15 @@ function changeTab(sidebarEl, section, tabName) {
 
 	// Check if you need to load more content in the search tab
 	if (
-		main_selected == 'search_tab' &&
+		main_selected === 'search_tab' &&
-		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
+		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) !== -1
 	) {
 		EventBus.$emit('mainSearch:checkLoadMoreContent', search_selected)
 	}
 }
 
 function showTab(type, id, back = false) {
+	// console.error('SHOW TAB')
 	if (windows_stack.length == 0) {
 		windows_stack.push({ tab: main_selected })
 	} else if (!back) {
@@ -226,6 +125,7 @@ function showTab(type, id, back = false) {
 }
 
 function backTab() {
+	// console.error('BACL TAB')
 	if (windows_stack.length == 1) {
 		document.getElementById(`main_${main_selected}link`).click()
 	} else {
@@ -250,6 +150,14 @@ function backTab() {
 	TrackPreview.stopStackedTabsPreview()
 }
 
+function linkListeners() {
+	const backButtons = Array.from(document.getElementsByClassName('back-button'))
+
+	backButtons.forEach(button => {
+		button.addEventListener('click', backTab)
+	})
+}
+
 function init() {
 	// Open default tab
 	changeTab(document.getElementById('main_home_tablink'), 'main', 'home_tab')