made tabs logic global, started moving downloads logic into Vue

src/js/app.js

@@ -12,7 +12,7 @@ import $ from 'jquery'
 import { socket } from '@/js/socket.js'
 import { toast } from '@/js/toasts.js'
 import Downloads from '@/js/downloads.js'
-import Tabs from '@/js/tabs.js'
+import { init as initTabs } from '@/js/tabs.js'
 
 /* ===== App initialization ===== */
 
@@ -20,7 +20,7 @@ function startApp() {
 	mountApp()
 
 	Downloads.init()
-	Tabs.init()
+	initTabs()
 	TrackPreview.init()
 }
 

src/js/components/ArtistTab.vue

@@ -91,7 +91,7 @@
 import { isEmpty, orderBy } from 'lodash-es'
 import { socket } from '@/js/socket.js'
 import Downloads from '@/js/downloads.js'
-import { showView, updateSelected } from '@/js/tabs.js'
+import { showView } from '@/js/tabs.js'
 import EventBus from '@/js/EventBus'
 
 export default {
@@ -144,7 +144,7 @@ export default {
 			return this.currentTab
 		},
 		updateSelected() {
-			updateSelected(this.currentTab)
+			window.currentStack.selected = this.currentTab
 		},
 		checkNewRelease(date) {
 			let g1 = new Date()

src/js/components/TheContent.vue

@@ -53,12 +53,12 @@ export default {
 
 			if (
 				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(window.search_selected) === -1
 			) {
 				return
 			}
 
-			this.newScrolled = search_selected.split('_')[0]
+			this.newScrolled = window.search_selected.split('_')[0]
 
 			await this.$nextTick()
 

src/js/components/TheDownloadTab.vue

@@ -0,0 +1,129 @@
+<template>
+	<div
+		id="download_tab_container"
+		class="tab_hidden"
+		@transitionend="$refs.container.style.transition = ''"
+		ref="container"
+	>
+		<div id="download_tab_drag_handler" @mousedown.prevent="startDrag" ref="dragHandler"></div>
+		<i
+			id="toggle_download_tab"
+			class="material-icons download_bar_icon"
+			@click.prevent="toggleDownloadTab"
+			ref="toggler"
+		></i>
+		<div id="queue_buttons">
+			<i id="open_downloads_folder" class="material-icons download_bar_icon hide" @click="openDownloadsFolder">
+				folder_open
+			</i>
+			<i id="clean_queue" class="material-icons download_bar_icon" @click="cleanQueue">clear_all</i>
+			<i id="cancel_queue" class="material-icons download_bar_icon" @click="cancelQueue">delete_sweep</i>
+		</div>
+		<div id="download_list" @click="handleListClick" ref="list"></div>
+	</div>
+</template>
+
+<script>
+import { socket } from '@/js/socket.js'
+
+const tabMinWidth = 250
+const tabMaxWidth = 500
+
+export default {
+	data: () => ({
+		cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300
+	}),
+	mounted() {
+		// Check if download tab has slim entries
+		if ('true' === localStorage.getItem('slimDownloads')) {
+			this.$refs.list.classList.add('slim')
+		}
+
+		if ('true' === localStorage.getItem('downloadTabOpen')) {
+			this.$refs.container.classList.remove('tab_hidden')
+
+			this.setTabWidth(this.cachedTabWidth)
+		}
+
+		document.addEventListener('mouseup', () => {
+			document.removeEventListener('mousemove', this.handleDrag)
+		})
+
+		window.addEventListener('beforeunload', () => {
+			localStorage.setItem('downloadTabWidth', this.cachedTabWidth)
+		})
+	},
+	methods: {
+		setTabWidth(newWidth) {
+			if (undefined === newWidth) {
+				this.$refs.container.style.width = ''
+				this.$refs.list.style.width = ''
+			} else {
+				this.$refs.container.style.width = newWidth + 'px'
+				this.$refs.list.style.width = newWidth + 'px'
+			}
+		},
+		handleListClick(event) {
+			const { target } = event
+
+			if (!target.matches('.queue_icon[data-uuid]')) {
+				return
+			}
+
+			let icon = target.innerText
+			let uuid = $(target).data('uuid')
+
+			switch (icon) {
+				case 'remove':
+					socket.emit('removeFromQueue', uuid)
+					break
+				default:
+			}
+		},
+		toggleDownloadTab(clickEvent) {
+			console.log('toggle')
+			this.setTabWidth()
+
+			this.$refs.container.style.transition = 'all 250ms ease-in-out'
+
+			// Toggle returns a Boolean based on the action it performed
+			let isHidden = this.$refs.container.classList.toggle('tab_hidden')
+
+			if (!isHidden) {
+				this.setTabWidth(this.cachedTabWidth)
+			}
+
+			localStorage.setItem('downloadTabOpen', !isHidden)
+		},
+		cleanQueue() {
+			socket.emit('removeFinishedDownloads')
+		},
+		cancelQueue() {
+			socket.emit('cancelAllDownloads')
+		},
+		openDownloadsFolder() {
+			if (window.clientMode) {
+				socket.emit('openDownloadsFolder')
+			}
+		},
+		handleDrag(event) {
+			let newWidth = window.innerWidth - event.pageX + 2
+
+			if (newWidth < tabMinWidth) {
+				newWidth = tabMinWidth
+			} else if (newWidth > tabMaxWidth) {
+				newWidth = tabMaxWidth
+			}
+
+			this.cachedTabWidth = newWidth
+			this.setTabWidth(newWidth)
+		},
+		startDrag() {
+			document.addEventListener('mousemove', this.handleDrag)
+		}
+	}
+}
+</script>
+
+<style>
+</style>

src/js/components/TheErrorsTab.vue

@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import { changeTab } from '@/js/tabs.js'
+
 import EventBus from '@/js/EventBus'
 
 export default {
@@ -32,13 +34,15 @@ export default {
 			this.title = ''
 			this.errors = []
 		},
-		showErrors(data) {
+		showErrors(data, eventTarget) {
 			this.title = data.artist + ' - ' + data.title
 			this.errors = data.errors
+
+			changeTab(eventTarget, 'main', 'errors_tab')
 		}
 	},
 	mounted() {
-		EventBus.$on('showErrors', this.showErrors)
+		EventBus.$on('showTabErrors', this.showErrors)
 	}
 }
 </script>

src/js/components/TheMainContent.vue

@@ -1,26 +1,18 @@
 <template>
 	<main id="main_content">
 		<TheMiddleSection />
-
-		<div id="download_tab_container" class="tab_hidden">
-			<div id="download_tab_drag_handler"></div>
-			<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
-			<div id="queue_buttons">
-				<i id="open_downloads_folder" class="material-icons download_bar_icon hide">folder_open</i>
-				<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
-				<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
-			</div>
-			<div id="download_list"></div>
-		</div>
+		<TheDownloadTab />
 	</main>
 </template>
 
 <script>
 import TheMiddleSection from '@components/TheMiddleSection.vue'
+import TheDownloadTab from '@components/TheDownloadTab.vue'
 
 export default {
 	components: {
-		TheMiddleSection
+		TheMiddleSection,
+		TheDownloadTab
 	}
 }
 </script>

src/js/components/TheSearchBar.vue

@@ -20,8 +20,9 @@
 <script>
 import { isValidURL } from '@/js/utils.js'
 import Downloads from '@/js/downloads.js'
-import Tabs from '@/js/tabs.js'
+
 import EventBus from '@/js/EventBus.js'
+import { socket } from '@/js/socket.js'
 
 export default {
 	methods: {
@@ -36,7 +37,8 @@ export default {
 					this.$root.$emit('QualityModal:open', term)
 				} else {
 					if (main_selected === 'analyzer_tab') {
-						Tabs.analyzeLink(term)
+						EventBus.$emit('linkAnalyzerTab:reset')
+						socket.emit('analyzeLink', term)
 					} else {
 						Downloads.sendAddToQueue(term)
 					}

src/js/downloads.js

@@ -1,100 +1,18 @@
 import $ from 'jquery'
 import { socket } from '@/js/socket.js'
 import { toast } from '@/js/toasts.js'
-import { showErrors } from '@/js/tabs.js'
+import EventBus from '@/js/EventBus'
 
 /* ===== Locals ===== */
-const tabMinWidth = 250
-const tabMaxWidth = 500
 
-let cachedTabWidth = parseInt(localStorage.getItem('downloadTabWidth')) || 300
 let queueList = {}
 let queue = []
 let queueComplete = []
-let tabContainerEl
 let listEl
-let dragHandlerEl
 
 function init() {
 	// Find download DOM elements
-	tabContainerEl = document.getElementById('download_tab_container')
 	listEl = document.getElementById('download_list')
-	dragHandlerEl = document.getElementById('download_tab_drag_handler')
-
-	// Check if download tab has slim entries
-	if ('true' === localStorage.getItem('slimDownloads')) {
-		listEl.classList.add('slim')
-	}
-
-	// Check if download tab should be open
-	if ('true' === localStorage.getItem('downloadTabOpen')) {
-		tabContainerEl.classList.remove('tab_hidden')
-
-		setTabWidth(cachedTabWidth)
-	}
-
-	linkListeners()
-}
-
-function linkListeners() {
-	listEl.addEventListener('click', handleListClick)
-	document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
-
-	// Queue buttons
-	document.getElementById('clean_queue').addEventListener('click', () => {
-		socket.emit('removeFinishedDownloads')
-	})
-
-	document.getElementById('cancel_queue').addEventListener('click', () => {
-		socket.emit('cancelAllDownloads')
-	})
-
-	document.getElementById('open_downloads_folder').addEventListener('click', () => {
-		if (window.clientMode) socket.emit('openDownloadsFolder')
-	})
-
-	// Downloads tab drag handling
-	dragHandlerEl.addEventListener('mousedown', event => {
-		event.preventDefault()
-
-		document.addEventListener('mousemove', handleDrag)
-	})
-
-	document.addEventListener('mouseup', () => {
-		document.removeEventListener('mousemove', handleDrag)
-	})
-
-	tabContainerEl.addEventListener('transitionend', () => {
-		tabContainerEl.style.transition = ''
-	})
-
-	window.addEventListener('beforeunload', () => {
-		localStorage.setItem('downloadTabWidth', cachedTabWidth)
-	})
-}
-
-function setTabWidth(newWidth) {
-	if (undefined === newWidth) {
-		tabContainerEl.style.width = ''
-		listEl.style.width = ''
-	} else {
-		tabContainerEl.style.width = newWidth + 'px'
-		listEl.style.width = newWidth + 'px'
-	}
-}
-
-function handleDrag(event) {
-	let newWidth = window.innerWidth - event.pageX + 2
-
-	if (newWidth < tabMinWidth) {
-		newWidth = tabMinWidth
-	} else if (newWidth > tabMaxWidth) {
-		newWidth = tabMaxWidth
-	}
-
-	cachedTabWidth = newWidth
-
-	setTabWidth(newWidth)
 }
 
 function sendAddToQueue(url, bitrate = null) {
@@ -103,7 +21,7 @@ function sendAddToQueue(url, bitrate = null) {
 	}
 }
 
-function addToQueue(queueItem, current = false) {
+function _addToQueue(queueItem, current = false) {
 	queueList[queueItem.uuid] = queueItem
 	if (queueItem.downloaded + queueItem.failed == queueItem.size) {
 		if (queueComplete.indexOf(queueItem.uuid) == -1) queueComplete.push(queueItem.uuid)
@@ -154,8 +72,8 @@ function addToQueue(queueItem, current = false) {
 			let failed_button = $('#download_' + queueItem.uuid).find('.queue_failed_button')
 			result_icon.addClass('clickable')
 			failed_button.addClass('clickable')
-			result_icon.bind('click', { item: queueItem }, showErrors)
-			failed_button.bind('click', { item: queueItem }, showErrors)
+			result_icon.bind('click', { item: queueItem }, showErrorsTab)
+			failed_button.bind('click', { item: queueItem }, showErrorsTab)
 			if (queueItem.failed >= queueItem.size) {
 				result_icon.text('error')
 			} else {
@@ -166,75 +84,44 @@ function addToQueue(queueItem, current = false) {
 	if (!queueItem.init) toast(`${queueItem.title} added to queue`, 'playlist_add_check')
 }
 
-function initQueue(data) {
+// ? Temporary?
+function showErrorsTab(clickEvent) {
+	EventBus.$emit('showTabErrors', clickEvent.data.item, clickEvent.target)
+}
+
+function _initQueue(data) {
 	const { queue, queueComplete, currentItem, queueList } = data
 
 	if (queueComplete.length) {
 		queueComplete.forEach(item => {
 			queueList[item].init = true
-			addToQueue(queueList[item])
+			_addToQueue(queueList[item])
 		})
 	}
 
 	if (currentItem) {
 		queueList[currentItem].init = true
-		addToQueue(queueList[currentItem], true)
+		_addToQueue(queueList[currentItem], true)
 	}
 
 	queue.forEach(item => {
 		queueList[item].init = true
-		addToQueue(queueList[item])
+		_addToQueue(queueList[item])
 	})
 }
 
-function startDownload(uuid) {
+function _startDownload(uuid) {
 	$('#bar_' + uuid)
 		.removeClass('indeterminate')
 		.addClass('determinate')
 }
 
-socket.on('startDownload', startDownload)
+socket.on('startDownload', _startDownload)
 
-function handleListClick(event) {
-	const { target } = event
+socket.on('init_downloadQueue', _initQueue)
+socket.on('addedToQueue', _addToQueue)
 
-	if (!target.matches('.queue_icon[data-uuid]')) {
-		return
-	}
-
-	let icon = target.innerText
-	let uuid = $(target).data('uuid')
-
-	switch (icon) {
-		case 'remove':
-			socket.emit('removeFromQueue', uuid)
-			break
-		default:
-	}
-}
-
-// Show/Hide Download Tab
-function toggleDownloadTab(clickEvent) {
-	clickEvent.preventDefault()
-
-	setTabWidth()
-
-	tabContainerEl.style.transition = 'all 250ms ease-in-out'
-
-	// Toggle returns a Boolean based on the action it performed
-	let isHidden = tabContainerEl.classList.toggle('tab_hidden')
-
-	if (!isHidden) {
-		setTabWidth(cachedTabWidth)
-	}
-
-	localStorage.setItem('downloadTabOpen', !isHidden)
-}
-
-socket.on('init_downloadQueue', initQueue)
-socket.on('addedToQueue', addToQueue)
-
-function removeFromQueue(uuid) {
+function _removeFromQueue(uuid) {
 	let index = queue.indexOf(uuid)
 	if (index > -1) {
 		queue.splice(index, 1)
@@ -243,9 +130,9 @@ function removeFromQueue(uuid) {
 	}
 }
 
-socket.on('removedFromQueue', removeFromQueue)
+socket.on('removedFromQueue', _removeFromQueue)
 
-function finishDownload(uuid) {
+function _finishDownload(uuid) {
 	if (queue.indexOf(uuid) > -1) {
 		toast(`${queueList[uuid].title} finished downloading.`, 'done')
 		$('#bar_' + uuid).css('width', '100%')
@@ -256,8 +143,8 @@ function finishDownload(uuid) {
 			let failed_button = $('#download_' + uuid).find('.queue_failed_button')
 			result_icon.addClass('clickable')
 			failed_button.addClass('clickable')
-			result_icon.bind('click', { item: queueList[uuid] }, showErrors)
-			failed_button.bind('click', { item: queueList[uuid] }, showErrors)
+			result_icon.bind('click', { item: queueList[uuid] }, showErrorsTab)
+			failed_button.bind('click', { item: queueList[uuid] }, showErrorsTab)
 			if (queueList[uuid].failed >= queueList[uuid].size) {
 				result_icon.text('error')
 			} else {
@@ -276,9 +163,9 @@ function finishDownload(uuid) {
 	}
 }
 
-socket.on('finishDownload', finishDownload)
+socket.on('finishDownload', _finishDownload)
 
-function removeAllDownloads(currentItem) {
+function _removeAllDownloads(currentItem) {
 	queueComplete = []
 	if (currentItem == '') {
 		queue = []
@@ -295,18 +182,18 @@ function removeAllDownloads(currentItem) {
 	}
 }
 
-socket.on('removedAllDownloads', removeAllDownloads)
+socket.on('removedAllDownloads', _removeAllDownloads)
 
-function removedFinishedDownloads() {
+function _removedFinishedDownloads() {
 	queueComplete.forEach(item => {
 		$('#download_' + item).remove()
 	})
 	queueComplete = []
 }
 
-socket.on('removedFinishedDownloads', removedFinishedDownloads)
+socket.on('removedFinishedDownloads', _removedFinishedDownloads)
 
-function updateQueue(update) {
+function _updateQueue(update) {
 	// downloaded and failed default to false?
 	const { uuid, downloaded, failed, progress } = update
 
@@ -334,10 +221,9 @@ function updateQueue(update) {
 	}
 }
 
-socket.on('updateQueue', updateQueue)
+socket.on('updateQueue', _updateQueue)
 
 export default {
 	init,
-	sendAddToQueue,
-	addToQueue
+	sendAddToQueue
 }

src/js/tabs.js

@@ -6,9 +6,7 @@ import EventBus from '@/js/EventBus'
 window.search_selected = ''
 window.main_selected = ''
 window.windows_stack = []
-
-/* ===== Locals ===== */
-let currentStack = {}
+window.currentStack = {}
 
 // Exporting this function out of the default export
 // because it's used in components that are needed
@@ -39,25 +37,17 @@ export function showView(viewType, event) {
 	showTab(viewType, id)
 }
 
-export function showErrors(event) {
-	EventBus.$emit('showErrors', event.data.item)
-	changeTab(event.target, 'main', 'errors_tab')
-}
-
-export function updateSelected(newSelected) {
-	currentStack.selected = newSelected
-}
-
-function analyzeLink(link) {
-	EventBus.$emit('linkAnalyzerTab:reset')
-	socket.emit('analyzeLink', link)
-}
-
+/**
+ * Changes the tab to the wanted one
+ * Need to understand the difference from showTab
+ *
+ * Needs EventBus
+ */
 export function changeTab(sidebarEl, section, tabName) {
 	// console.error('CHANGE TAB')
 	// console.log(Array.from(arguments))
-	windows_stack = []
-	currentStack = {}
+	window.windows_stack = []
+	window.currentStack = {}
 
 	// * The visualized content of the tab
 	// ! Can be more than one per tab, happens in MainSearch and Favorites tab
@@ -75,7 +65,7 @@ export function changeTab(sidebarEl, section, tabName) {
 		tabLinks[i].classList.remove('active')
 	}
 
-	if (tabName === 'settings_tab' && main_selected !== 'settings_tab') {
+	if (tabName === 'settings_tab' && window.main_selected !== 'settings_tab') {
 		EventBus.$emit('settingsTab:revertSettings')
 		EventBus.$emit('settingsTab:revertCredentials')
 	}
@@ -83,61 +73,70 @@ export function changeTab(sidebarEl, section, tabName) {
 	document.getElementById(tabName).style.display = 'block'
 
 	if (section === 'main') {
-		main_selected = tabName
+		window.main_selected = tabName
 	} else if ('search' === section) {
-		search_selected = tabName
+		window.search_selected = tabName
 	}
 
 	sidebarEl.classList.add('active')
 
 	// Check if you need to load more content in the search tab
 	if (
-		main_selected === 'search_tab' &&
-		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) !== -1
+		window.main_selected === 'search_tab' &&
+		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) !== -1
 	) {
-		EventBus.$emit('mainSearch:checkLoadMoreContent', search_selected)
+		EventBus.$emit('mainSearch:checkLoadMoreContent', window.search_selected)
 	}
 }
 
+/**
+ * Shows the passed tab, keeping track of the one that the user is coming from.
+ *
+ * Needs TrackPreview and EventBus
+ */
 function showTab(type, id, back = false) {
-	// console.error('SHOW TAB')
-	if (windows_stack.length == 0) {
-		windows_stack.push({ tab: main_selected })
+	if (window.windows_stack.length === 0) {
+		window.windows_stack.push({ tab: window.main_selected })
 	} else if (!back) {
-		if (currentStack.type === 'artist') {
+		if (window.currentStack.type === 'artist') {
 			EventBus.$emit('artistTab:updateSelected')
 		}
 
-		windows_stack.push(currentStack)
+		window.windows_stack.push(window.currentStack)
 	}
 
-	window.tab = type == 'artist' ? 'artist_tab' : 'tracklist_tab'
+	window.tab = type === 'artist' ? 'artist_tab' : 'tracklist_tab'
 
-	currentStack = { type, id }
+	window.currentStack = { type, id }
 	let tabcontent = document.getElementsByClassName('main_tabcontent')
 
 	for (let i = 0; i < tabcontent.length; i++) {
 		tabcontent[i].style.display = 'none'
 	}
 
-	document.getElementById(tab).style.display = 'block'
+	document.getElementById(window.tab).style.display = 'block'
+
 	TrackPreview.stopStackedTabsPreview()
 }
 
+/**
+ * Goes back to the previous tab according to the global window stack.
+ *
+ * Needs TrackPreview, EventBus and socket
+ */
 function backTab() {
-	// console.error('BACL TAB')
-	if (windows_stack.length == 1) {
-		document.getElementById(`main_${main_selected}link`).click()
+	if (window.windows_stack.length == 1) {
+		document.getElementById(`main_${window.main_selected}link`).click()
 	} else {
 		// Retrieving tab type and tab id
-		let data = windows_stack.pop()
-		let { type, id } = data
+		let data = window.windows_stack.pop()
+		let { type, id, selected } = data
 
 		if (type === 'artist') {
 			EventBus.$emit('artistTab:reset')
 
-			if (data.selected) {
-				EventBus.$emit('artistTab:changeTab', data.selected)
+			if (selected) {
+				EventBus.$emit('artistTab:changeTab', selected)
 			}
 		} else {
 			EventBus.$emit('tracklistTab:reset')
@@ -150,25 +149,17 @@ function backTab() {
 	TrackPreview.stopStackedTabsPreview()
 }
 
-function linkListeners() {
-	const backButtons = Array.from(document.getElementsByClassName('back-button'))
+function _linkListeners() {
+	const backButtons = Array.prototype.slice.call(document.getElementsByClassName('back-button'))
 
 	backButtons.forEach(button => {
 		button.addEventListener('click', backTab)
 	})
 }
 
-function init() {
+export function init() {
 	// Open default tab
 	changeTab(document.getElementById('main_home_tablink'), 'main', 'home_tab')
 
-	linkListeners()
-}
-
-export default {
-	init,
-	changeTab,
-	showView,
-	analyzeLink,
-	showErrors
+	_linkListeners()
 }