From 00e73947404263dc8eaa080c242a816a2249193c Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Sat, 11 Nov 2023 19:56:23 +0100 Subject: [PATCH] Reduce Scripts needed on start up to reduce critical requests aka speed up initial loading --- public/index.html | 2 - public/scripts/main.js | 15 +++-- public/scripts/theme.js | 83 -------------------------- public/scripts/ui-main.js | 113 ++++++++++++++++++++++++++++++++++++ public/scripts/util-main.js | 17 ------ public/service-worker.js | 5 +- 6 files changed, 124 insertions(+), 111 deletions(-) delete mode 100644 public/scripts/theme.js delete mode 100644 public/scripts/util-main.js diff --git a/public/index.html b/public/index.html index 06ff099..2d51d8d 100644 --- a/public/index.html +++ b/public/index.html @@ -595,8 +595,6 @@ - - diff --git a/public/scripts/main.js b/public/scripts/main.js index 056bb22..51eaa41 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -7,17 +7,19 @@ class PairDrop { this.$headerNotificationButton = $('notification'); this.$editPairedDevicesHeaderBtn = $('edit-paired-devices'); this.$footerInstructionsPairedDevices = $$('.discovery-wrapper .badge-room-secret'); - this.$head = $$('head'); - this.$installBtn = $('install'); this.registerServiceWorker(); Events.on('beforeinstallprompt', e => this.onPwaInstallable(e)); + const persistentStorage = new PersistentStorage(); + const themeUI = new ThemeUI(); + const backgroundCanvas = new BackgroundCanvas(); + Events.on('initial-translation-loaded', _ => { - const backgroundCanvas = new BackgroundCanvas(); + // FooterUI needs translations const footerUI = new FooterUI(); Events.on('fade-in-ui', _ => this.fadeInUI()) @@ -29,6 +31,9 @@ class PairDrop { // Load deferred assets this.loadDeferredAssets(); }); + + // Translate page -> fires 'initial-translation-loaded' on finish + const localization = new Localization(); } registerServiceWorker() { @@ -171,6 +176,4 @@ class PairDrop { } } -const persistentStorage = new PersistentStorage(); -const pairDrop = new PairDrop(); -const localization = new Localization(); \ No newline at end of file +const pairDrop = new PairDrop(); \ No newline at end of file diff --git a/public/scripts/theme.js b/public/scripts/theme.js deleted file mode 100644 index 33ea0b3..0000000 --- a/public/scripts/theme.js +++ /dev/null @@ -1,83 +0,0 @@ -(function(){ - - const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches; - const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches; - - const $themeAuto = document.getElementById('theme-auto'); - const $themeLight = document.getElementById('theme-light'); - const $themeDark = document.getElementById('theme-dark'); - - let currentTheme = localStorage.getItem('theme'); - - if (currentTheme === 'dark') { - setModeToDark(); - } - else if (currentTheme === 'light') { - setModeToLight(); - } - - $themeAuto.addEventListener('click', _ => { - if (currentTheme) { - setModeToAuto(); - } - else { - setModeToDark(); - } - }); - $themeLight.addEventListener('click', _ => { - if (currentTheme !== 'light') { - setModeToLight(); - } - else { - setModeToAuto(); - } - }); - $themeDark.addEventListener('click', _ => { - if (currentTheme !== 'dark') { - setModeToDark(); - } - else { - setModeToLight(); - } - }); - - function setModeToDark() { - document.body.classList.remove('light-theme'); - document.body.classList.add('dark-theme'); - localStorage.setItem('theme', 'dark'); - currentTheme = 'dark'; - - $themeAuto.classList.remove("selected"); - $themeLight.classList.remove("selected"); - $themeDark.classList.add("selected"); - } - - function setModeToLight() { - document.body.classList.remove('dark-theme'); - document.body.classList.add('light-theme'); - localStorage.setItem('theme', 'light'); - currentTheme = 'light'; - - $themeAuto.classList.remove("selected"); - $themeLight.classList.add("selected"); - $themeDark.classList.remove("selected"); - } - - function setModeToAuto() { - document.body.classList.remove('dark-theme'); - document.body.classList.remove('light-theme'); - if (prefersDarkTheme) { - document.body.classList.add('dark-theme'); - } - else if (prefersLightTheme) { - document.body.classList.add('light-theme'); - } - localStorage.removeItem('theme'); - currentTheme = undefined; - - $themeAuto.classList.add("selected"); - $themeLight.classList.remove("selected"); - $themeDark.classList.remove("selected"); - } - -})(); diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js index a9c9f6d..0ff5810 100644 --- a/public/scripts/ui-main.js +++ b/public/scripts/ui-main.js @@ -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() { diff --git a/public/scripts/util-main.js b/public/scripts/util-main.js deleted file mode 100644 index 9143962..0000000 --- a/public/scripts/util-main.js +++ /dev/null @@ -1,17 +0,0 @@ -// Selector shortcuts -const $ = query => document.getElementById(query); -const $$ = query => document.querySelector(query); - -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); - } -} \ No newline at end of file diff --git a/public/service-worker.js b/public/service-worker.js index 16e1e94..10061b8 100644 --- a/public/service-worker.js +++ b/public/service-worker.js @@ -5,7 +5,7 @@ const relativePathsToCache = [ './', 'index.html', 'manifest.json', - 'styles/main-styles.css', + 'styles/styles-main.css', 'styles/deferred-styles.css', 'scripts/localization.js', 'scripts/main.js', @@ -13,10 +13,9 @@ const relativePathsToCache = [ 'scripts/no-sleep.min.js', 'scripts/persistent-storage.js', 'scripts/qr-code.min.js', - 'scripts/theme.js', 'scripts/ui.js', + 'scripts/ui-main.js', 'scripts/util.js', - 'scripts/util-main.js', 'scripts/zip.min.js', 'sounds/blop.mp3', 'sounds/blop.ogg',