Added open tab functions to all elements

Made tabbed function work properly

public/index.html

@@ -37,7 +37,7 @@
 									<div v-if="(section != 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)" class="search_section">
 										<h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 										<!-- Top result -->
-										<div v-if="section == 'TOP_RESULT'" class="top_result" v-on:click="window[results.TOP_RESULT[0].__TYPE__.toLowerCase()+'View'](event)" v-bind:data-id="results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : ''">
+										<div v-if="section == 'TOP_RESULT'" class="top_result clickable" v-on:click="window[results.TOP_RESULT[0].__TYPE__.toLowerCase()+'View'](event)" v-bind:data-id="results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : ''">
 											<div class="cover_container">
 												<img v-bind:src="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + results.TOP_RESULT[0].ART_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + results.TOP_RESULT[0].ALB_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'https://e-cdns-images.dzcdn.net/images/'+ results.TOP_RESULT[0].PICTURE_TYPE +'/' + results.TOP_RESULT[0].PLAYLIST_PICTURE :'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'"
 													v-bind:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
@@ -54,15 +54,15 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 												<tr v-for="track in results.TRACK.data.slice(0, 6)" class="track_row">
 													<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
 													<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
-													<td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
+													<td class="breakline"><span class="clickable" v-on:click="artistView(event)" v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
-													<td class="breakline">{{track.ALB_TITLE}}</td>
+													<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.ALB_ID">{{track.ALB_TITLE}}</td>
 													<td>{{convertDuration(track.DURATION)}}</td>
 													<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
 												</tr>
 											</table>
 										</div>
 										<div v-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only">
-											<div v-for="release in results[section].data.slice(0, 10)" class="release" v-on:click="window[section.toLowerCase()+'View'](event)" v-bind:data-id="section == 'ARTIST' ? release.ART_ID : section == 'ALBUM' ? release.ALB_ID : section == 'PLAYLIST' ? release.PLAYLIST_ID : ''">
+											<div v-for="release in results[section].data.slice(0, 10)" class="release clickable" v-on:click="window[section.toLowerCase()+'View'](event)" v-bind:data-id="section == 'ARTIST' ? release.ART_ID : section == 'ALBUM' ? release.ALB_ID : section == 'PLAYLIST' ? release.PLAYLIST_ID : ''">
 												<div class="cover_container">
 													<img v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'" v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'">
 													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/'+(section == 'ARTIST' ? 'artist/'+release.ART_ID : section == 'ALBUM' ? 'album/'+release.ALB_ID : section == 'PLAYLIST' ? 'playlist/'+release.PLAYLIST_ID : '')" class="download_overlay"><i class="material-icons">get_app</i></div>
@@ -94,8 +94,8 @@ <h1>No Tracks found</h1>
 									<tr v-for="track in results.data" class="track_row">
 										<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
 										<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
-										<td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
+										<td class="breakline"><span class="clickable" v-on:click="artistView(event)" v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
-										<td class="breakline">{{track.ALB_TITLE}}</td>
+										<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.ALB_ID">{{track.ALB_TITLE}}</td>
 										<td>{{convertDuration(track.DURATION)}}</td>
 										<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
 									</tr>
@@ -107,7 +107,7 @@ <h1>No Tracks found</h1>
 									<h1>No Albums found</h1>
 								</div>
 								<div class="release_grid" v-if="results.data.length > 0">
-									<div v-for="release in results.data" class="release">
+									<div v-for="release in results.data" class="release clickable" v-on:click="albumView(event)" v-bind:data-id="release.ALB_ID">
 										<div class="cover_container">
 											<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
 											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/album/'+release.ALB_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
@@ -123,7 +123,7 @@ <h1>No Albums found</h1>
 									<h1>No Artists found</h1>
 								</div>
 								<div class="release_grid" v-if="results.data.length > 0">
-									<div v-for="release in results.data" class="release">
+									<div v-for="release in results.data" class="release clickable" v-on:click="artistView(event)" v-bind:data-id="release.ART_ID">
 										<div class="cover_container">
 											<img class="circle coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
 											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/artist/'+release.ART_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
@@ -139,7 +139,7 @@ <h1>No Artists found</h1>
 									<h1>No Playlists found</h1>
 								</div>
 								<div class="release_grid" v-if="results.data.length > 0">
-									<div v-for="release in results.data" class="release">
+									<div v-for="release in results.data" class="release clickable" v-on:click="playlistView(event)" v-bind:data-id="release.PLAYLIST_ID">
 										<div class="cover_container">
 											<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'">
 											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/playlist/'+release.PLAYLIST_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
@@ -421,8 +421,8 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
 										<td><i class="material-icons">play_arrow</i></td>
 										<td>{{ track.track_position }}</td>
 										<td><i v-if="track.explicit_lyrics" class="material-icons">explicit</i>{{ track.title }} <span v-if="track.title_version">{{track.title_version}}</span></td>
-										<td>{{ track.artist.name }}</td>
+										<td class="clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">{{ track.artist.name }}</td>
-										<td v-if="type == 'Playlist'">{{ track.album.title }}</td>
+										<td class="clickable" v-if="type == 'Playlist'" v-on:click="albumView(event)" v-bind:data-id="track.album.id">{{ track.album.title }}</td>
 										<td>{{ convertDuration(track.duration) }}</td>
 										<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
 									</tr>

public/js/app/app.js

@@ -106,7 +106,6 @@ socket.on('logging_in', function () {
 })
 
 socket.on('logged_in', function (data) {
-	console.log(data)
 	switch (data.status) {
 		case 1:
 		case 3:
@@ -168,7 +167,6 @@ var settingsTab = new Vue({
 })
 
 socket.on("init_settings", function(settings, credentials){
-	console.log(settings,credentials)
 	loadSettings(settings, credentials)
 	toast("Settings loaded!", 'settings')
 })

public/js/app/downloadList.js

@@ -3,7 +3,6 @@ var queue = []
 var queueComplete = []
 
 socket.on('init_downloadQueue', function (data) {
-	console.log(data)
 	if (data.queueComplete.length) {
 		data.queueComplete.forEach(item => {
 			addToQueue(data.queueList[item])

public/js/app/search.js

@@ -23,7 +23,6 @@ function scrolledSearch(vueTab) {
 }
 
 function searchUpadate(result) {
-	console.log(result)
 	vueTab = null
 	switch (result.type) {
 		case 'TRACK':
@@ -179,8 +178,6 @@ $("#searchbar").keyup(function(e){
         sendAddToQueue(term);
       }
     }else{
-			console.log( term );
-
 			if (term != MainSearch.results.QUERY || main_selected == 'search_tab'){
 				document.getElementById("search_tab_content").style.display = "none";
 				socket.emit("mainSearch", {term: term});

public/js/app/stackedTabs.js

@@ -87,48 +87,45 @@ var tracklistTab = new Vue({
 	}
 })
 
-function artistView(ev){
+function resetArtistTab(){
-	console.log("ARTIST")
-	let id = ev.currentTarget.dataset.id
 	artistTab.title = "Loading..."
 	artistTab.image = ""
 	artistTab.type = ""
 	artistTab.currentTab = ''
 	artistTab.sortKey = 'release_date'
 	artistTab.sortOrder = 'desc'
-	artistTab.link = 'https://deezer.com/artist/'+id
+	artistTab.link = ''
 	artistTab.head = []
 	artistTab.body = null
+}
+
+function resetTracklistTab(){
+	tracklistTab.title = "Loading..."
+	tracklistTab.image = ""
+	tracklistTab.metadata = ""
+	tracklistTab.label = ""
+	tracklistTab.release_date = ""
+	tracklistTab.explicit = false
+	tracklistTab.type = ""
+	tracklistTab.head = []
+	tracklistTab.body = []
+}
+
+function artistView(ev){
+	let id = ev.currentTarget.dataset.id
+	resetArtistTab()
 	socket.emit('getTracklist', {type: 'artist', id: id})
 	showTab('artist', id)
 }
 function albumView(ev){
-	console.log("ALBUM")
-	tracklistTab.title = "Loading..."
-	tracklistTab.image = ""
-	tracklistTab.metadata = ""
-	tracklistTab.label = ""
-	tracklistTab.release_date = ""
-	tracklistTab.explicit = false
-	tracklistTab.type = ""
-	tracklistTab.head = []
-	tracklistTab.body = []
 	let id = ev.currentTarget.dataset.id
+	resetTracklistTab()
 	socket.emit('getTracklist', {type: 'album', id: id})
 	showTab('album', id)
 }
 function playlistView(ev){
-	console.log("PLAYLIST")
-	tracklistTab.title = "Loading..."
-	tracklistTab.image = ""
-	tracklistTab.metadata = ""
-	tracklistTab.label = ""
-	tracklistTab.release_date = ""
-	tracklistTab.explicit = false
-	tracklistTab.type = ""
-	tracklistTab.head = []
-	tracklistTab.body = []
 	let id = ev.currentTarget.dataset.id
+	resetTracklistTab()
 	socket.emit('getTracklist', {type: 'playlist', id: id})
 	showTab('playlist', id)
 }
@@ -162,7 +159,6 @@ socket.on('show_album', function(data){
 	tracklistTab.metadata = `${data.artist.name} • ${data.tracks.length} songs`
 	tracklistTab.release_date = data.release_date.substring(0,10)
 	tracklistTab.image = data.cover_xl
-	console.log(data.tracks)
 	tracklistTab.head = [
 		{title: '<i class="material-icons">music_note</i>', width: "24px"},
 		{title: '#'},

public/js/app/tabs.js

@@ -4,7 +4,6 @@ var windows_stack = []
 var currentStack = {}
 
 function changeTab(evt, section, tabName) {
-	console.log({ evt, section, tabName })
 	windows_stack = []
 	currentStack = {}
 	var i, tabcontent, tablinks
@@ -55,6 +54,9 @@ function backTab() {
 		clickElement('main_' + main_selected + 'link')
 	} else {
 		let tabObj = windows_stack.pop()
+		if (tabObj.type == 'artist') resetArtistTab()
+		else resetTracklistTab()
+		socket.emit('getTracklist', {type: tabObj.type, id: tabObj.id})
 		showTab(tabObj.type, tabObj.id, true)
 	}
 }