moved quality modal logic to quality modal component

src/js/app.js

@@ -12,7 +12,6 @@ import $ from 'jquery'
 import { socket } from '@/js/socket.js'
 import { toast } from '@/js/toasts.js'
 import Downloads from '@/js/downloads.js'
-import QualityModal from '@/js/quality-modal.js'
 import Tabs from '@/js/tabs.js'
 import Search from '@/js/search.js'
 
@@ -22,14 +21,14 @@ function startApp() {
 	mountApp()
 
 	Downloads.init()
-	QualityModal.init()
 	Tabs.init()
 	Search.linkListeners()
 	TrackPreview.init()
 }
 
 function mountApp() {
-	new Vue({
+	// TODO Remove the App instance from the window when deemix will be a complete Vue App
+	window.App = new Vue({
 		render: h => h(App)
 	}).$mount('#app')
 }

src/js/components/ArtistTab.vue

@@ -91,7 +91,6 @@
 import { isEmpty, orderBy } from 'lodash-es'
 import { socket } from '@/js/socket.js'
 import Downloads from '@/js/downloads.js'
-import QualityModal from '@/js/quality-modal.js'
 import { showView, updateSelected } from '@/js/tabs.js'
 import EventBus from '@/js/EventBus'
 
@@ -128,7 +127,7 @@ export default {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
-			QualityModal.open(e.currentTarget.dataset.link)
+			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
 		},
 		sortBy(key) {
 			if (key == this.sortKey) {

src/js/components/TheChartsTab.vue

@@ -115,7 +115,6 @@
 import { socket } from '@/js/socket.js'
 import { showView } from '@/js/tabs.js'
 import Downloads from '@/js/downloads.js'
-import QualityModal from '@/js/quality-modal.js'
 import TrackPreview from '@/js/track-preview.js'
 import Utils from '@/js/utils.js'
 
@@ -141,7 +140,7 @@ export default {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
-			QualityModal.open(e.currentTarget.dataset.link)
+			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
 		},
 		getTrackList(event) {
 			document.getElementById('content').scrollTo(0, 0)

src/js/components/TheFavoritesTab.vue

@@ -185,7 +185,6 @@
 import { socket } from '@/js/socket.js'
 import { showView } from '@/js/tabs.js'
 import Downloads from '@/js/downloads.js'
-import QualityModal from '@/js/quality-modal.js'
 import TrackPreview from '@/js/track-preview.js'
 import Utils from '@/js/utils.js'
 import { toast } from '@/js/toasts'
@@ -215,7 +214,7 @@ export default {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
-			QualityModal.open(e.currentTarget.dataset.link)
+			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
 		},
 		updated_userSpotifyPlaylists(data) {
 			this.spotifyPlaylists = data

src/js/components/TheHomeTab.vue

@@ -56,7 +56,6 @@
 import { socket } from '@/js/socket.js'
 import { showView } from '@/js/tabs.js'
 import Downloads from '@/js/downloads.js'
-import QualityModal from '@/js/quality-modal.js'
 
 export default {
 	name: 'the-home-tab',
@@ -77,7 +76,7 @@ export default {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
-			QualityModal.open(e.currentTarget.dataset.link)
+			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
 		},
 		initHome(data) {
 			const {

src/js/components/TheMainSearch.vue

@@ -440,7 +440,6 @@
 import { socket } from '@/js/socket.js'
 import { showView } from '@/js/tabs.js'
 import Downloads from '@/js/downloads.js'
-import QualityModal from '@/js/quality-modal.js'
 import TrackPreview from '@/js/track-preview.js'
 import Utils from '@/js/utils.js'
 import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
@@ -570,7 +569,7 @@ export default {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
-			QualityModal.open(e.currentTarget.dataset.link)
+			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
 		},
 		numberWithDots: Utils.numberWithDots,
 		convertDuration: Utils.convertDuration,

src/js/components/TheQualityModal.vue

@@ -1,5 +1,5 @@
-<template functional>
-	<div id="modal_quality" class="smallmodal">
+<template>
+	<div id="modal_quality" class="smallmodal" v-show="open" @click="tryToDownloadTrack($event)" ref="modal">
 		<div class="smallmodal-content">
 			<button class="quality-button" data-quality-value="9">Download FLAC</button>
 			<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button>
@@ -12,7 +12,6 @@
 </template>
 <style>
 .smallmodal {
-	display: none;
 	position: fixed;
 	z-index: 1250;
 	left: 0;
@@ -20,7 +19,7 @@
 	width: 100%;
 	height: 100%;
 	overflow: auto;
-	background-color: rgba(0, 0, 0, 0.4);
+	background-color: hsla(0, 0%, 0%, 0.4);
 	animation-duration: 0.3s;
 }
 
@@ -38,3 +37,44 @@
 	margin-bottom: 8px;
 }
 </style>
+<script>
+import Downloads from '@/js/downloads.js'
+
+export default {
+	data: () => ({
+		open: false,
+		url: ''
+	}),
+	mounted() {
+		this.$root.$on('QualityModal:open', this.openModal)
+
+		this.$refs.modal.addEventListener('webkitAnimationEnd', this.handleAnimationEnd)
+	},
+	methods: {
+		tryToDownloadTrack(event) {
+			const { target } = event
+
+			this.$refs.modal.classList.add('animated', 'fadeOut')
+
+			// If true, the click did not happen on a button but outside
+			if (!target.matches('.quality-button')) return
+
+			Downloads.sendAddToQueue(this.url, target.dataset.qualityValue)
+		},
+		openModal(link) {
+			this.url = link
+			this.open = true
+			this.$refs.modal.classList.add('animated', 'fadeIn')
+		},
+		handleAnimationEnd(event) {
+			const { animationName } = event
+
+			this.$refs.modal.classList.remove('animated', animationName)
+
+			if (animationName === 'fadeIn') return
+
+			this.open = false
+		}
+	}
+}
+</script>

src/js/components/TracklistTab.vue

@@ -151,7 +151,6 @@ import { isEmpty } from 'lodash-es'
 import { socket } from '@/js/socket.js'
 import { showView } from '@/js/tabs.js'
 import Downloads from '@/js/downloads.js'
-import QualityModal from '@/js/quality-modal.js'
 import TrackPreview from '@/js/track-preview.js'
 import Utils from '@/js/utils.js'
 import EventBus from '@/js/EventBus'
@@ -187,7 +186,7 @@ export default {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
-			QualityModal.open(e.currentTarget.dataset.link)
+			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
 		},
 		toggleAll(e) {
 			this.body.forEach(item => {

src/js/quality-modal.js

@@ -1,50 +0,0 @@
-import Downloads from '@/js/downloads.js'
-
-const QualityModal = {
-	// Defaults
-	open: false,
-	url: '',
-	element: null
-}
-
-function init() {
-	QualityModal.element = document.getElementById('modal_quality')
-
-	linkListeners()
-}
-
-function open(link) {
-	QualityModal.url = link
-	QualityModal.element.style.display = 'block'
-	QualityModal.element.classList.add('animated', 'fadeIn')
-}
-
-function linkListeners() {
-	QualityModal.element.addEventListener('click', handleClick)
-	QualityModal.element.addEventListener('webkitAnimationEnd', handleAnimationEnd)
-}
-
-function handleClick(event) {
-	const { target } = event
-
-	QualityModal.element.classList.add('animated', 'fadeOut')
-
-	if (!target.matches('.quality-button')) {
-		return
-	}
-
-	let bitrate = target.dataset.qualityValue
-
-	Downloads.sendAddToQueue(QualityModal.url, bitrate)
-}
-
-function handleAnimationEnd() {
-	QualityModal.element.classList.remove('animated', QualityModal.open ? 'fadeOut' : 'fadeIn')
-	QualityModal.element.style.display = QualityModal.open ? 'none' : 'block'
-	QualityModal.open = !QualityModal.open
-}
-
-export default {
-	init,
-	open
-}

src/js/search.js

@@ -1,5 +1,4 @@
 import Utils from '@/js/utils.js'
-import QualityModal from '@/js/quality-modal.js'
 import Downloads from '@/js/downloads.js'
 import Tabs from '@/js/tabs.js'
 import EventBus from '@/js/EventBus.js'
@@ -31,7 +30,8 @@ function handleSearchBarKeyup(e) {
 
 	if (Utils.isValidURL(term)) {
 		if (e.ctrlKey) {
-			QualityModal.open(term)
+			// ! Temporary
+			App.$root.$emit('QualityModal:open', term)
 		} else {
 			if (window.main_selected == 'analyzer_tab') {
 				Tabs.analyzeLink(term)