evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added click on title to change tab in All section

Browse Source
This commit is contained in:
RemixDev 2020-04-09 14:44:51 +02:00
parent 81253078f5
commit ea7755675c
2 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@ -27,17 +27,17 @@
<div id="search_tab" class="main_tabcontent"> <div id="search_tab" class="main_tabcontent">
<div class="tab"> <div class="tab">
<button class="search_tablinks" id="search_defaultopen" onclick="changeTab(event, 'search', 'main_search')">All</button> <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" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
<button class="search_tablinks" onclick="changeTab(event, 'search', 'album_search')">Album</button> <button class="search_tablinks" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
<button class="search_tablinks" onclick="changeTab(event, 'search', 'artist_search')">Artist</button> <button class="search_tablinks" id="search_artist_tab" 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_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
</div> </div>
<div id="search_tab_content"> <div id="search_tab_content">
<!-- ### Main Search Tab ### --> <!-- ### Main Search Tab ### -->
<div id="main_search" class="search_tabcontent"> <div id="main_search" class="search_tabcontent">
<template v-for="section in results.ORDER"> <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"> <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 --> <!-- Top result -->
<div v-if="section == 'TOP_RESULT'" class="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'" <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'"

22
public/js/frontend.js
View File

@ -67,20 +67,8 @@ function changeTab(evt, section, tabName) {
evt.currentTarget.className += " active"; evt.currentTarget.className += " active";
} }
// searchTab function clickElement(button){
return document.getElementById(button).click()
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";
} }
var mainSearch = new Vue({ var mainSearch = new Vue({
@ -100,6 +88,12 @@ var mainSearch = new Vue({
TRACK: {}, TRACK: {},
TOP_RESULT: [], TOP_RESULT: [],
PLAYLIST: {} PLAYLIST: {}
},
},
methods: {
changeSearchTab: function (section) {
if (section != "TOP_RESULT")
clickElement('search_'+section.toLowerCase()+'_tab')
} }
} }
}) })