From ea7755675cc0f083bc6262f3774bb28da58a1912 Mon Sep 17 00:00:00 2001
From: RemixDev <RemixDev64@gmail.com>
Date: Thu, 9 Apr 2020 14:44:51 +0200
Subject: [PATCH] Added click on title to change tab in All section

---
 public/index.html     | 10 +++++-----
 public/js/frontend.js | 24 +++++++++---------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/public/index.html b/public/index.html
index a4e198e..7c908fd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,17 +27,17 @@
 					<div id="search_tab" class="main_tabcontent">
 						<div class="tab">
 							<button class="search_tablinks" id="search_defaultopen" onclick="changeTab(event, 'search', 'main_search')">All</button>
-							<button class="search_tablinks" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
-							<button class="search_tablinks" onclick="changeTab(event, 'search', 'album_search')">Album</button>
-							<button class="search_tablinks" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
-							<button class="search_tablinks" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
+							<button class="search_tablinks" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
+							<button class="search_tablinks" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
+							<button class="search_tablinks" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
+							<button class="search_tablinks" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
 						</div>
 						<div id="search_tab_content">
 							<!-- ### Main Search Tab ### -->
 							<div id="main_search" class="search_tabcontent">
 								<template v-for="section in results.ORDER">
 									<div v-if="(section != 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)" class="search_section">
-										<h1>{{ names[section] }}</h1>
+										<h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 										<!-- Top result -->
 										<div v-if="section == 'TOP_RESULT'" class="top_result">
 											<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'"
diff --git a/public/js/frontend.js b/public/js/frontend.js
index ac6a8b1..ae7bfa4 100644
--- a/public/js/frontend.js
+++ b/public/js/frontend.js
@@ -67,20 +67,8 @@ function changeTab(evt, section, tabName) {
   evt.currentTarget.className += " active";
 }
 
-// searchTab
-
-function searchTab(evt, tabName) {
-  var i, tabcontent, tablinks;
-  tabcontent = document.getElementsByClassName("search_tabcontent");
-  for (i = 0; i < tabcontent.length; i++) {
-    tabcontent[i].style.display = "none";
-  }
-  tablinks = document.getElementsByClassName("search_tablinks");
-  for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].className = tablinks[i].className.replace(" active", "");
-  }
-  document.getElementById(tabName).style.display = "block";
-  evt.currentTarget.className += " active";
+function clickElement(button){
+	return document.getElementById(button).click()
 }
 
 var mainSearch = new Vue({
@@ -100,8 +88,14 @@ var mainSearch = new Vue({
 			TRACK: {},
 			TOP_RESULT: [],
 			PLAYLIST: {}
+		},
+  },
+	methods: {
+		changeSearchTab: function (section) {
+			if (section != "TOP_RESULT")
+				clickElement('search_'+section.toLowerCase()+'_tab')
 		}
-  }
+	}
 })
 
 var trackSearch = new Vue({