From 11164375beecdb7d73c78f684b8cd1f12bc9b141 Mon Sep 17 00:00:00 2001 From: RemixDev Date: Thu, 9 Apr 2020 12:50:05 +0200 Subject: [PATCH] Implemented simple tab system --- public/css/style.css | 10 +- public/index.html | 218 ++++++++++++++++++++++-------------------- public/js/frontend.js | 23 ++++- 3 files changed, 139 insertions(+), 112 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 13fccbb..42fe879 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -13,6 +13,9 @@ aside#sidebar > .side_icon{ font-size: 24px; margin: 12px; } +.side_icon.active{ + color: #0A84FF; +} /* Rest of the app */ main#main_content{ @@ -85,13 +88,10 @@ div#middle_section { } } -/* Search Tab */ -.search_tabcontent { +/* Tabs */ +.search_tabcontent, .main_tabcontent { display: none; } -#search_tab{ - display: none; -} /* Main Search Tab */ diff --git a/public/index.html b/public/index.html index 6ea8428..ba8eff9 100644 --- a/public/index.html +++ b/public/index.html @@ -11,131 +11,139 @@
-
+
- - - - - + + + + +
- - - - - -
diff --git a/public/js/frontend.js b/public/js/frontend.js index a7177ef..ac6a8b1 100644 --- a/public/js/frontend.js +++ b/public/js/frontend.js @@ -53,6 +53,20 @@ document.querySelector("#hide_download_tab").onclick = (ev)=>{ document.querySelector("#download_tab").style.display = "none"; } +function changeTab(evt, section, tabName) { + var i, tabcontent, tablinks; + tabcontent = document.getElementsByClassName(section+"_tabcontent"); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = "none"; + } + tablinks = document.getElementsByClassName(section+"_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"; +} + // searchTab function searchTab(evt, tabName) { @@ -134,7 +148,7 @@ $("#searchbar").keyup(function(e){ if (isValidURL(term)) doAjax("/download", "POST", null, {url: term}); else{ - document.getElementById("search_tab").style.display = "none"; + document.getElementById("search_tab_content").style.display = "none"; doAjax("/search", "POST", searchHandler, {term: term}); } } @@ -148,5 +162,10 @@ function searchHandler(result){ artistSearch.results = result.ARTIST playlistSearch.results = result.PLAYLIST document.getElementById("search_defaultopen").click(); - document.getElementById("search_tab").style.display = "block"; + document.getElementById("search_tab_content").style.display = "block"; + document.getElementById("show_searchtab").click(); } + +$(function(){ + document.getElementById("main_defaultopen").click(); +})