delegated theme changing to sidebar component

This commit is contained in:
Roberto Tonino 2020-07-06 19:02:03 +02:00
parent b716e89560
commit 26ed9e6a7d
6 changed files with 53 additions and 66 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -20,7 +20,6 @@ import Search from '@/js/search.js'
function startApp() {
mountApp()
setCurrentUserTheme()
Downloads.init()
QualityModal.init()
@ -43,23 +42,6 @@ function initClient() {
document.addEventListener('DOMContentLoaded', startApp)
window.addEventListener('pywebviewready', initClient)
/* ===== General functions ===== */
/**
* Sets the current theme according to
* the localStorage saved theme.
*/
function setCurrentUserTheme() {
let selectedTheme = localStorage.getItem('selectedTheme')
if (selectedTheme) {
let activeClass = 'theme_toggler--active'
document.querySelector(`.${activeClass}`).classList.remove(activeClass)
document.querySelector(`.theme_toggler[data-theme-variant="${selectedTheme}"]`).classList.add(activeClass)
}
}
/* ===== Socketio listeners ===== */
// Debug messages for socketio

@ -31,9 +31,21 @@
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
<i class="material-icons side_icon side_icon--theme">palette</i>
<div id="theme_togglers">
<div class="theme_toggler" data-theme-variant="purple"></div>
<div class="theme_toggler" data-theme-variant="dark"></div>
<div class="theme_toggler theme_toggler--active" data-theme-variant="light"></div>
<div
class="theme_toggler theme_toggler--purple"
:class="{ 'theme_toggler--active': activeTheme === 'purple' }"
@click="changeTheme('purple')"
/>
<div
class="theme_toggler theme_toggler--dark"
:class="{ 'theme_toggler--active': activeTheme === 'dark' }"
@click="changeTheme('dark')"
/>
<div
class="theme_toggler theme_toggler--light"
:class="{ 'theme_toggler--active': activeTheme === 'light' }"
@click="changeTheme('light')"
/>
</div>
</span>
<div id="network-status" :class="{ online: appOnline, offline: !appOnline }">
@ -56,10 +68,12 @@ export default {
name: 'the-sidebar',
data() {
return {
appOnline: null
appOnline: null,
activeTheme: 'light'
}
},
mounted() {
/* === Online status handling === */
this.appOnline = navigator.onLine
window.addEventListener('online', () => {
@ -69,6 +83,31 @@ export default {
window.addEventListener('offline', () => {
this.appOnline = false
})
/* === Current theme handling === */
this.activeTheme = localStorage.getItem('selectedTheme') || 'light'
},
methods: {
changeTheme(newTheme) {
if (newTheme === this.activeTheme) return
this.activeTheme = newTheme
document.documentElement.setAttribute('data-theme', newTheme)
localStorage.setItem('selectedTheme', newTheme)
// Animating everything to have a smoother theme switch
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)
})
}
}
}
</script>

@ -76,20 +76,11 @@ function handleSidebarClick(event) {
const { target } = event
const wantToChangeTab = target.matches('.main_tablinks') || target.parentElement.matches('.main_tablinks')
const wantToChangeTheme = target.matches('.theme_toggler')
if (!(wantToChangeTab || wantToChangeTheme)) return
if (!wantToChangeTab) return
let sidebarEl
let targetID
if (wantToChangeTab) {
sidebarEl = target.matches('.main_tablinks') ? target : target.parentElement
targetID = sidebarEl.id
} else {
sidebarEl = target
targetID = 'theme_toggler'
}
let sidebarEl = target.matches('.main_tablinks') ? target : target.parentElement
let targetID = sidebarEl.id
switch (targetID) {
case 'main_search_tablink':
@ -113,31 +104,6 @@ function handleSidebarClick(event) {
case 'main_about_tablink':
changeTab(sidebarEl, 'main', 'about_tab')
break
case 'theme_toggler':
document.querySelector('.theme_toggler--active').classList.remove('theme_toggler--active')
sidebarEl.classList.add('theme_toggler--active')
const {
dataset: { themeVariant }
} = sidebarEl
document.documentElement.setAttribute('data-theme', themeVariant)
localStorage.setItem('selectedTheme', themeVariant)
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)
})
break
default:
break

@ -123,15 +123,15 @@ $sidebar-delay: 75ms;
border-width: 3px;
}
&[data-theme-variant='light'] {
&--light {
background: white;
}
&[data-theme-variant='dark'] {
&--dark {
background: hsl(0, 0%, 8%);
}
&[data-theme-variant='purple'] {
&--purple {
background: hsl(261, 85%, 37%);
}
}