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

added expertimental theme toggler in sidebar

Browse Source
This commit is contained in:
Roberto Tonino
2020-05-13 22:17:43 +02:00
parent 9424fc4641
commit b28b2e0aee
6 changed files with 90 additions and 42132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/app.js
View File

@@ -86,6 +86,11 @@ function startApp() {
Search.linkListeners()
TrackPreview.init()
if ('true' === localStorage.getItem('darkMode')) {
document.querySelector('.theme_toggler.active').classList.remove('active')
document.querySelector('.theme_toggler#dark').classList.add('active')
}
document.getElementById('logged_in_info').classList.add('hide')
if (localStorage.getItem('arl')) {
@@ -95,10 +100,13 @@ function startApp() {
$('#login_input_arl').val(arl)
document.getElementById('home_not_logged_in').classList.add('hide')
}
if ('true' === localStorage.getItem('slimDownloads')) {
document.getElementById('download_list').classList.add('slim')
}
let spotifyUser = localStorage.getItem('spotifyUser')
if (spotifyUser != '') {
socket.emit('update_userSpotifyPlaylists', spotifyUser)
}

41
src/js/modules/tabs.js
View File

@@ -80,12 +80,21 @@ function linkListeners() {
* @since 0.1.0
*/
function handleSidebarClick(event) {
if (!(event.target.matches('.main_tablinks') || event.target.parentElement.matches('.main_tablinks'))) {
if (
!(
event.target.matches('.main_tablinks') ||
event.target.parentElement.matches('.main_tablinks') ||
event.target.parentElement.parentElement.matches('.main_tablinks')
)
)
return
}
let sidebarEl = event.target.matches('.main_tablinks') ? event.target : event.target.parentElement
let targetID = sidebarEl.getAttribute('id')
let sidebarEl = event.target.matches('.main_tablinks')
? event.target
: event.target.parentElement.matches('.main_tablinks')
? event.target.parentElement
: event.target.parentElement.parentElement
let targetID = sidebarEl.id
switch (targetID) {
case 'main_search_tablink':
@@ -109,6 +118,30 @@ function handleSidebarClick(event) {
case 'main_about_tablink':
changeTab(sidebarEl, 'main', 'about_tab')
break
case 'theme_selector':
if (!event.target.matches('.theme_toggler')) return
event.target.parentElement.querySelector('.theme_toggler.active').classList.remove('active')
event.target.classList.add('active')
let wantDarkMode = event.target.id === 'dark'
document.querySelectorAll('*').forEach(el => {
el.style.transition = 'all 200ms ease-in-out'
})
document.documentElement.addEventListener('transitionend', function transitionHandler() {
document.querySelectorAll('*').forEach(el => {
el.style.transition = ''
})
document.documentElement.removeEventListener('transitionend', transitionHandler)
})
document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
localStorage.setItem('darkMode', wantDarkMode)
break
default:
break