mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 07:05:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reduce Scripts needed on start up to reduce critical requests aka speed up initial loading

Browse source
This commit is contained in:
schlagmichdoch 2023-11-11 19:56:23 +01:00
parent bdc8a6b111
commit 00e7394740
6 changed files with 124 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

113
public/scripts/ui-main.js
View file

@ -1,3 +1,116 @@
// Selector shortcuts
const $ = query => document.getElementById(query);
const $$ = query => document.querySelector(query);
// Event listener shortcuts
class Events {
static fire(type, detail = {}) {
window.dispatchEvent(new CustomEvent(type, { detail: detail }));
}
static on(type, callback, options) {
return window.addEventListener(type, callback, options);
}
static off(type, callback, options) {
return window.removeEventListener(type, callback, options);
}
}
// UIs needed on start
class ThemeUI {
constructor() {
this.prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
this.prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
this.$themeAutoBtn = document.getElementById('theme-auto');
this.$themeLightBtn = document.getElementById('theme-light');
this.$themeDarkBtn = document.getElementById('theme-dark');
let currentTheme = this.getCurrentTheme();
if (currentTheme === 'dark') {
this.setModeToDark();
} else if (currentTheme === 'light') {
this.setModeToLight();
}
this.$themeAutoBtn.addEventListener('click', _ => this.onClickAuto());
this.$themeLightBtn.addEventListener('click', _ => this.onClickLight());
this.$themeDarkBtn.addEventListener('click', _ => this.onClickDark());
}
getCurrentTheme() {
return localStorage.getItem('theme');
}
setCurrentTheme(theme) {
localStorage.setItem('theme', theme);
}
onClickAuto() {
if (this.getCurrentTheme()) {
this.setModeToAuto();
} else {
this.setModeToDark();
}
}
onClickLight() {
if (this.getCurrentTheme() !== 'light') {
this.setModeToLight();
} else {
this.setModeToAuto();
}
}
onClickDark() {
if (this.getCurrentTheme() !== 'dark') {
this.setModeToDark();
} else {
this.setModeToLight();
}
}
setModeToDark() {
document.body.classList.remove('light-theme');
document.body.classList.add('dark-theme');
this.setCurrentTheme('dark');
this.$themeAutoBtn.classList.remove("selected");
this.$themeLightBtn.classList.remove("selected");
this.$themeDarkBtn.classList.add("selected");
}
setModeToLight() {
document.body.classList.remove('dark-theme');
document.body.classList.add('light-theme');
this.setCurrentTheme('light');
this.$themeAutoBtn.classList.remove("selected");
this.$themeLightBtn.classList.add("selected");
this.$themeDarkBtn.classList.remove("selected");
}
setModeToAuto() {
document.body.classList.remove('dark-theme');
document.body.classList.remove('light-theme');
if (this.prefersDarkTheme) {
document.body.classList.add('dark-theme');
}
else if (this.prefersLightTheme) {
document.body.classList.add('light-theme');
}
localStorage.removeItem('theme');
this.$themeAutoBtn.classList.add("selected");
this.$themeLightBtn.classList.remove("selected");
this.$themeDarkBtn.classList.remove("selected");
}
}
class FooterUI {
constructor() {