removed onclick events on settings buttons and on quality modal, changed download tab style logic

2020-04-19 18:55:24 +02:00 · 2020-04-19 18:55:24 +02:00 · a64dfa84b6
commit a64dfa84b6
parent 2a5d3c2677
9 changed files with 283 additions and 166 deletions
--- a/public/css/modules/download-tab.css
+++ b/public/css/modules/download-tab.css
@ -1,30 +1,28 @@
 /* Download tab section */
-div#download_tab_container {
+
+#download_tab_container {
+	min-width: 300px;
+	height: 100%;
 	background-color: var(--panels-background);
 	color: var(--panels-text);
-	height: 100%;
-	width: auto;
-	display: flex;
+	display: block;
+	flex-direction: column;
 }

-div#download_tab_bar {
-	height: 100%;
-	width: 32px;
+#toggle_download_tab {
+	width: 25px;
+	height: 25px;
 }

-div#download_tab_bar>label {
-	writing-mode: vertical-rl;
-	line-height: 32px;
-	padding-top: 8px;
-}
-
-div#download_tab {
-	height: 100%;
-	width: 300px;
-	display: none;
+#toggle_download_tab::before {
+	font-family: 'Material Icons';
+	font-style: normal;
+	font-weight: 400;
+	content: 'chevron_right';
 }

 .download_bar_icon {
+	cursor: pointer;
 	font-size: 24px;
 	margin: 4px;
 }
@ -125,3 +123,36 @@ div#download_tab {
 .download_object>.download_bar>.progress {
 	margin: 0px;
 }
+
+/* ===== Hidden tab styles ===== */
+#download_tab_container.tab_hidden {
+	min-width: 32px;
+}
+
+#download_tab_container.tab_hidden #toggle_download_tab::before {
+	font-family: 'Material Icons';
+	font-style: normal;
+	font-weight: 400;
+	content: 'chevron_left';
+}
+
+#download_tab_container.tab_hidden::after {
+	content: 'downloads';
+	display: flex;
+	align-items: center;
+	text-transform: capitalize;
+	writing-mode: vertical-rl;
+	line-height: 32px;
+}
+
+#download_tab_container.tab_hidden #queue_buttons {
+	display: none;
+}
+
+#download_tab_container.tab_hidden #download_list {
+	display: none;
+}
+
+#download_tab_container.tab_hidden #download_tab_label {
+	display: inline;
+}
--- a/public/index.html
+++ b/public/index.html
@ -21,7 +21,7 @@
 			<div id="middle_section">
 				<header id="search"><input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search..." autofocus></header>
 				<section id="content"><div id="container">
-					<!-- <div id="v-app" style="height: 300px;"><app/></div> -->
+					<!-- <div id="v-app"><app/></div> -->
 					<div id="search_tab" class="main_tabcontent">
 						<div class="tab">
 							<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
@ -168,12 +168,12 @@ <h1>Settings</h1>
 							<img id="settings_picture" src="" alt="Profile Picture" class="circle" style="width: 125px;height:125px; margin-right: 12px;"/>
 							<div>
 								<p>You are logged in as <b id="settings_username"></b></p>
-								<button onclick="logout()" id="settings_btn_logout">Logout</button>
+								<button id="settings_btn_logout">Logout</button>
 							</div>
 						</div>
 						<div class="inline-flex">
 							<input autocomplete="off" type="password" id="login_input_arl" placeholder="ARL"/>
-							<button onclick="copyARLtoClipboard()" id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
+							<button id="settings_btn_copyArl"><i class="material-icons">assignment</i></button>
 						</div>
 						<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my own ARL?</a></p>
 						<p><button onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
@ -358,7 +358,7 @@ <h1>Settings</h1>
 							</div>
 						</div>
 						<footer>
-							<button onclick="saveSettings()">Save</button>
+							<button id="settings_btn_save">Save</button>
 						</footer>
 					</div>

@ -444,30 +444,24 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
 				</div></section>
 			</div>

-			<div id="download_tab_container">
-				<div id="download_tab_bar">
-					<i id="show_download_tab" class="material-icons download_bar_icon">chevron_left</i>
-					<label>downloads</label>
-				</div>
-				<div id="download_tab">
-					<i id="hide_download_tab" class="material-icons download_bar_icon">chevron_right</i>
-					<div class="inline-flex right">
+			<div id="download_tab_container" class="tab_hidden">
+				<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
+				<div id="queue_buttons" class="right">
 					<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" class=""></div>
-				</div>
+				<div id="download_list"></div>
 			</div>
 		</main>
 		<div id="modal_quality" class="smallmodal">
 			<!-- Modal content -->
 			<div class="smallmodal-content">
-				<button onclick="modalQualityButton(9)">Download FLAC</button><br>
-				<button onclick="modalQualityButton(3)">Download MP3 320kbps</button><br>
-				<button onclick="modalQualityButton(1)">Download MP3 128kbps</button><br>
-				<button onclick="modalQualityButton(15)">Download 360 Reality Audio [HQ]</button><br>
-				<button onclick="modalQualityButton(14)">Download 360 Reality Audio [MQ]</button><br>
-				<button onclick="modalQualityButton(13)">Download 360 Reality Audio [LQ]</button><br>
+				<button class="quality-button" data-quality-value="9">Download FLAC</button><br>
+				<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button><br>
+				<button class="quality-button" data-quality-value="1">Download MP3 128kbps</button><br>
+				<button class="quality-button" data-quality-value="15">Download 360 Reality Audio [HQ]</button><br>
+				<button class="quality-button" data-quality-value="14">Download 360 Reality Audio [MQ]</button><br>
+				<button class="quality-button" data-quality-value="13">Download 360 Reality Audio [LQ]</button><br>
 			</div>
 		</div>
 	</body>
@ -479,6 +473,7 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
 	<script type="text/javascript" src="/public/js/vendor/toastify.js"></script>
 	<!-- <script type="text/javascript" src="/public/js/app/v-app.js"></script> -->
 	<script type="text/javascript" src="/public/js/app/app.js"></script>
+	<script type="text/javascript" src="/public/js/app/settings.js"></script>
 	<script type="text/javascript" src="/public/js/app/tabs.js"></script>
 	<script type="text/javascript" src="/public/js/app/stackedTabs.js"></script>
 	<script type="text/javascript" src="/public/js/app/utils.js"></script>
--- a/public/js/app/app.js
+++ b/public/js/app/app.js
@ -19,8 +19,8 @@ function toast(msg, icon = null, dismiss = true, id = null) {
 			else icon = `<i class="material-icons">${icon}</i>`
 			toastDOM.find('.toast-icon').html(icon)
 		}
-		if (dismiss !== null && dismiss){
-			setTimeout(function(){
+		if (dismiss !== null && dismiss) {
+			setTimeout(function () {
 				toastObj.hideToast()
 				delete toastsWithId[id]
 			}, 3000)
@ -42,6 +42,7 @@ function toast(msg, icon = null, dismiss = true, id = null) {
 	}
 }

+/* ===== Socketio listeners ===== */
 socket.on('toast', data => {
 	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
 })
@ -51,33 +52,6 @@ socket.on('message', function (msg) {
 	console.log(msg)
 })

-$(function () {
-	if (localStorage.getItem('arl')) {
-		socket.emit('login', localStorage.getItem('arl'))
-		$('#login_input_arl').val(localStorage.getItem('arl'))
-	}
-	// Check if download tab should be open
-	if (eval(localStorage.getItem('downloadTabOpen'))) $('#show_download_tab').click()
-	else $('#hide_download_tab').click()
-
-	// Open default tab
-	document.getElementById('main_home_tablink').click()
-})
-
-// Show/Hide Download Tab
-document.querySelector('#show_download_tab').onclick = ev => {
-	ev.preventDefault()
-	document.querySelector('#download_tab_bar').style.display = 'none'
-	document.querySelector('#download_tab').style.display = 'block'
-	localStorage.setItem('downloadTabOpen', true)
-}
-document.querySelector('#hide_download_tab').onclick = ev => {
-	ev.preventDefault()
-	document.querySelector('#download_tab_bar').style.display = 'block'
-	document.querySelector('#download_tab').style.display = 'none'
-	localStorage.setItem('downloadTabOpen', false)
-}
-
 // Login stuff

 function loginButton() {
@ -87,20 +61,6 @@ function loginButton() {
 	}
 }

-function copyARLtoClipboard() {
-	$('#login_input_arl').attr('type', 'text')
-	let copyText = document.querySelector('#login_input_arl')
-	copyText.select()
-	copyText.setSelectionRange(0, 99999)
-	document.execCommand('copy')
-	$('#login_input_arl').attr('type', 'password')
-	toast('ARL copied to clipboard', 'assignment')
-}
-
-function logout() {
-	socket.emit('logout')
-}
-
 socket.on('logging_in', function () {
 	toast('Logging in', 'loading', false, 'login-toast')
 })
@ -157,68 +117,85 @@ socket.on('logged_out', function () {
 	$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
 })

-// settings stuff
-var settingsTab = new Vue({
-  el: '#settings_tab',
-  data: {
-		settings: {tags: {}},
-		spotifyFeatures: {}
-  }
-})
-
-socket.on("init_settings", function(settings, credentials){
-	loadSettings(settings, credentials)
-	toast("Settings loaded!", 'settings')
-})
-
-socket.on("updateSettings", function(settings, credentials){
-	loadSettings(settings, credentials)
-	toast("Settings updated!", 'settings')
-})
-
-function loadSettings(settings, spotifyCredentials){
-	lastSettings = {...settings}
-	lastCredentials = {...spotifyCredentials}
-	settingsTab.settings = settings
-	settingsTab.spotifyFeatures = spotifyCredentials
-}
-
-function saveSettings(){
-	lastSettings = {...settingsTab.settings}
-	lastCredentials = {...settingsTab.spotifyFeatures}
-	socket.emit("saveSettings", lastSettings, lastCredentials)
-}
-
 // quality modal stuff
-var modalQuality = document.getElementById('modal_quality');
+var modalQuality = document.getElementById('modal_quality')
 modalQuality.open = false

-window.onclick = function(event) {
+window.onclick = function (event) {
 	if (event.target == modalQuality && modalQuality.open) {
 		$(modalQuality).addClass('animated fadeOut')
 	}
 }

 $(modalQuality).on('webkitAnimationEnd', function () {
-	if (modalQuality.open){
+	if (modalQuality.open) {
 		$(this).removeClass('animated fadeOut')
 		$(this).css('display', 'none')
 		modalQuality.open = false
-	}else{
+	} else {
 		$(this).removeClass('animated fadeIn')
 		$(this).css('display', 'block')
 		modalQuality.open = true
 	}
 })

-function openQualityModal(link){
-	$(modalQuality).data("url", link)
+function openQualityModal(link) {
+	$(modalQuality).data('url', link)
 	$(modalQuality).css('display', 'block')
 	$(modalQuality).addClass('animated fadeIn')
 }

-function modalQualityButton(bitrate){
-	var url=$(modalQuality).data("url")
+function modalQualityButton(event) {
+	if (!event.target.matches('.quality-button')) {
+		return
+	}
+
+	let bitrate = event.target.dataset.qualityValue
+
+	var url = $(modalQuality).data('url')
 	sendAddToQueue(url, bitrate)
 	$(modalQuality).addClass('animated fadeOut')
 }
+
+/**
+ * Adds event listeners.
+ * @returns		{void}
+ * @since			0.1.0 (?)
+ */
+function linkEventListeners() {
+	// document.getElementById('show_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, true))
+	// document.getElementById('hide_download_tab').addEventListener('click', handleDownloadTabClick.bind(null, false))
+	document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
+
+	document.getElementById('modal_quality').addEventListener('click', modalQualityButton)
+}
+
+/**
+ * App initialization.
+ * @returns		{void}
+ * @since			0.1.0 (?)
+ */
+function init() {
+	linkEventListeners()
+
+	if ('true' === localStorage.darkMode) {
+		document.documentElement.classList.add('dark-theme')
+	}
+
+	if (localStorage.getItem('arl')) {
+		let arl = localStorage.getItem('arl')
+
+		socket.emit('login', arl)
+		$('#login_input_arl').val(arl)
+	}
+
+	// Check if download tab should be open
+	if ('true' === localStorage.getItem('downloadTabOpen')) {
+		document.querySelector('#download_tab_container').classList.remove('tab_hidden')
+	}
+
+	// Open default tab
+	document.getElementById('main_home_tablink').click()
+}
+
+document.addEventListener('DOMContentLoaded', init)
--- a/public/js/app/components/search-tab/TheMainSearch.vue
+++ b/public/js/app/components/search-tab/TheMainSearch.vue
@ -94,7 +94,6 @@
 		>
 			<h1>No results</h1>
 		</div>
-		<p>marco</p>
 	</div>
 </template>

--- a/public/js/app/downloadList.js
+++ b/public/js/app/downloadList.js
@ -1,3 +1,12 @@
+// Show/Hide Download Tab
+function toggleDownloadTab(ev) {
+	ev.preventDefault()
+
+	let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
+
+	localStorage.setItem('downloadTabOpen', !isHidden)
+}
+
 var queueList = {}
 var queue = []
 var queueComplete = []
--- a/public/js/app/search.js
+++ b/public/js/app/search.js
@ -1,15 +1,5 @@
+/* ===== Scrolled search ===== */
 // Load more content when the search page is at the end
-$('#content').on('scroll', function () {
-	if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
-		if (
-			main_selected == 'search_tab' &&
-			['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
-		) {
-			scrolledSearch(window[search_selected.split('_')[0] + 'Search'])
-		}
-	}
-})
-
 function scrolledSearch(vueTab) {
 	query = vueTab.query
 	if (vueTab.results.next < vueTab.results.total) {
@ -22,7 +12,9 @@ function scrolledSearch(vueTab) {
 	}
 }

-function searchUpadate(result) {
+function searchUpdate(result) {
+	console.log('search update')
+
 	vueTab = null
 	switch (result.type) {
 		case 'TRACK':
@ -43,21 +35,35 @@ function searchUpadate(result) {
 		vueTab.results.data = vueTab.results.data.concat(result.data)
 	}
 }
+
 socket.on('search', function (result) {
-	searchUpadate(result)
+	searchUpdate(result)
 })

+function handleContentScroll() {
+	if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
+		if (
+			main_selected == 'search_tab' &&
+			['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
+		) {
+			scrolledSearch(window[search_selected.split('_')[0] + 'Search'])
+		}
+	}
+}
+
+document.getElementById('content').addEventListener('scroll', debounce(handleContentScroll, 50))
+
 function clickElement(button) {
 	return document.getElementById(button).click()
 }

 function sendAddToQueue(url, bitrate = null) {
-	if (url.indexOf(";") != -1){
-		urls = url.split(";")
-		urls.forEach(url=>{
+	if (url.indexOf(';') != -1) {
+		urls = url.split(';')
+		urls.forEach(url => {
 			socket.emit('addToQueue', { url: url, bitrate: bitrate })
 		})
-	}else if(url != ""){
+	} else if (url != '') {
 		socket.emit('addToQueue', { url: url, bitrate: bitrate })
 	}
 }
@ -88,8 +94,14 @@ let MainSearch = new Vue({
 		changeSearchTab(section) {
 			if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
 		},
-    addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		}
 	}
 })

@ -106,8 +118,14 @@ var trackSearch = new Vue({
 		}
 	},
 	methods: {
-		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		}
 	}
 })

@ -124,8 +142,14 @@ var albumSearch = new Vue({
 		}
 	},
 	methods: {
-		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		}
 	}
 })

@ -142,8 +166,14 @@ var artistSearch = new Vue({
 		}
 	},
 	methods: {
-		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		}
 	}
 })

@ -160,28 +190,34 @@ var playlistSearch = new Vue({
 		}
 	},
 	methods: {
-		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		}
 	}
 })

 let term = null

 // Search section
-$("#searchbar").keyup(function(e){
-  if(e.keyCode == 13){
+$('#searchbar').keyup(function (e) {
+	if (e.keyCode == 13) {
 		term = this.value
-    if (isValidURL(term)){
-      if (e.ctrlKey){
-        openQualityModal(term);
-      }else{
-        sendAddToQueue(term);
+		if (isValidURL(term)) {
+			if (e.ctrlKey) {
+				openQualityModal(term)
+			} else {
+				sendAddToQueue(term)
 			}
-    }else{
-			if (term != MainSearch.results.QUERY || main_selected == 'search_tab'){
-				document.getElementById("search_tab_content").style.display = "none";
-				socket.emit("mainSearch", {term: term});
-			}else{
+		} else {
+			if (term != MainSearch.results.QUERY  || main_selected == 'search_tab') {
+				document.getElementById('search_tab_content').style.display = 'none'
+				socket.emit('mainSearch', { term: term })
+			} else {
 				document.getElementById('search_all_tab').click()
 				document.getElementById('search_tab_content').style.display = 'block'
 				document.getElementById('main_search_tablink').click()
--- a/public/js/app/settings.js
+++ b/public/js/app/settings.js
@ -0,0 +1,54 @@
+const SettingsTab = new Vue({
+	el: '#settings_tab',
+	data: {
+		settings: { tags: {} },
+		spotifyFeatures: {}
+	},
+	methods: {
+		addListeners() {
+			document.getElementById('settings_btn_save').addEventListener('click', saveSettings)
+			document.getElementById('settings_btn_copyArl').addEventListener('click', copyARLtoClipboard)
+			document.getElementById('settings_btn_logout').addEventListener('click', logout)
+		}
+	},
+	mounted() {
+		this.addListeners()
+	}
+})
+
+socket.on('init_settings', function (settings, credentials) {
+	loadSettings(settings, credentials)
+	toast('Settings loaded!', 'settings')
+})
+
+socket.on('updateSettings', function (settings, credentials) {
+	loadSettings(settings, credentials)
+	toast('Settings updated!', 'settings')
+})
+
+function loadSettings(settings, spotifyCredentials) {
+	lastSettings = { ...settings }
+	lastCredentials = { ...spotifyCredentials }
+	SettingsTab.settings = settings
+	SettingsTab.spotifyFeatures = spotifyCredentials
+}
+
+function saveSettings() {
+	lastSettings = { ...SettingsTab.settings }
+	lastCredentials = { ...SettingsTab.spotifyFeatures }
+	socket.emit('saveSettings', lastSettings, lastCredentials)
+}
+
+function copyARLtoClipboard() {
+	$('#login_input_arl').attr('type', 'text')
+	let copyText = document.querySelector('#login_input_arl')
+	copyText.select()
+	copyText.setSelectionRange(0, 99999)
+	document.execCommand('copy')
+	$('#login_input_arl').attr('type', 'password')
+	toast('ARL copied to clipboard', 'assignment')
+}
+
+function logout() {
+	socket.emit('logout')
+}
--- a/public/js/app/tabs.js
+++ b/public/js/app/tabs.js
@ -16,7 +16,7 @@ function changeTab(evt, section, tabName) {
 		tablinks[i].classList.remove('active')
 	}
 	if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
-		settingsTab.settings = { ...lastSettings }
+		SettingsTab.settings = { ...lastSettings }
 	}

 	document.getElementById(tabName).style.display = 'block'
--- a/public/js/app/utils.js
+++ b/public/js/app/utils.js
@ -30,3 +30,19 @@ function convertDurationSeparated(duration) {
 function numberWithDots(x) {
 	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
 }
+
+function debounce(func, wait, immediate) {
+  var timeout
+  return function() {
+    var context = this
+    var args = arguments
+    var later = function() {
+      timeout = null
+      if (!immediate) func.apply(context, args)
+    }
+    var callNow = immediate && !timeout
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+    if (callNow) func.apply(context, args)
+  }
+}