From 4c5bcbef21977f953ad6c7090c2a08db768b8f8d Mon Sep 17 00:00:00 2001 From: XPoet Date: Sat, 23 Jan 2021 01:02:56 +0800 Subject: [PATCH] perf: manage style status uniformly with localStorage --- source/js/dark-light-toggle.js | 21 ++++----- source/js/main.js | 30 ++++++++++++ source/js/utils.js | 86 +++++++++++++++++++++++----------- 3 files changed, 98 insertions(+), 39 deletions(-) diff --git a/source/js/dark-light-toggle.js b/source/js/dark-light-toggle.js index 8b6749e..83d45a5 100644 --- a/source/js/dark-light-toggle.js +++ b/source/js/dark-light-toggle.js @@ -1,3 +1,5 @@ +/* global KEEP */ + KEEP.initModeToggle = () => { KEEP.utils.modeToggle = { @@ -18,19 +20,16 @@ KEEP.initModeToggle = () => { this.iconDom.className = 'fas fa-sun'; this.articleContent.classList.add('night-code-theme'); } - localStorage.setItem(this.localStorageKey, JSON.stringify( - { - prefersColorScheme: prefersColorScheme, - isDark: isDark - } - )); + KEEP.styleStatus.isDark = isDark; + KEEP.styleStatus.prefersColorScheme = prefersColorScheme; + KEEP.setStyleStatus(); }, initModeStatus() { - this.modeConfig = JSON.parse(localStorage.getItem(this.localStorageKey)); - if (this.modeConfig) { - if (this.modeConfig.prefersColorScheme === 'dark') { - if (this.modeConfig.isDark) { + const styleStatus = KEEP.getStyleStatus(); + if (styleStatus) { + if (styleStatus.prefersColorScheme === 'dark') { + if (styleStatus.isDark) { document.body.classList.remove('light-mode'); this.articleContent.classList.remove('night-code-theme'); this.iconDom.className = 'fas fa-sun'; @@ -41,7 +40,7 @@ KEEP.initModeToggle = () => { } } else { - if (this.modeConfig.isDark) { + if (styleStatus.isDark) { document.body.classList.remove('dark-mode'); this.articleContent.classList.remove('night-code-theme'); this.iconDom.className = 'fas fa-moon'; diff --git a/source/js/main.js b/source/js/main.js index 79d7503..512098c 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,3 +1,5 @@ +/* global KEEP */ + window.addEventListener('DOMContentLoaded', () => { KEEP.themeInfo = { @@ -6,11 +8,39 @@ window.addEventListener('DOMContentLoaded', () => { repository: 'https://github.com/XPoet/hexo-theme-keep' } + KEEP.localStorageKey = 'KEEP-THEME-STATUS'; + + KEEP.styleStatus = { + isExpandPageWidth: false, + prefersColorScheme: 'light', + isDark: false, + fontSizeLevel: 0 + } + // print theme base info KEEP.printThemeInfo = () => { console.log(`\n %c ${KEEP.themeInfo.theme} %c ${KEEP.themeInfo.repository} \n`, `color: #fadfa3; background: #333; padding: 5px 0;`, `background: #fadfa3; padding: 5px 0;`); } + // set styleStatus to localStorage + KEEP.setStyleStatus = () => { + localStorage.setItem(KEEP.localStorageKey, JSON.stringify(KEEP.styleStatus)); + } + + // get styleStatus from localStorage + KEEP.getStyleStatus = () => { + let temp = localStorage.getItem(KEEP.localStorageKey); + if (temp) { + temp = JSON.parse(temp); + for (let key in KEEP.styleStatus) { + KEEP.styleStatus[key] = temp[key]; + } + return temp; + } else { + return null; + } + } + KEEP.refresh = () => { KEEP.initUtils(); KEEP.initHeaderShrink(); diff --git a/source/js/utils.js b/source/js/utils.js index eb75bc4..ed752d0 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -1,3 +1,5 @@ +/* global KEEP */ + KEEP.initUtils = () => { KEEP.utils = { @@ -14,7 +16,7 @@ KEEP.initUtils = () => { innerHeight: window.innerHeight, pjaxProgressBarTimer: null, prevScrollValue: 0, - defaultFontSize: 0, + fontSizeLevel: 0, isHasScrollProgressBar: KEEP.theme_config.style.scroll.progress_bar.enable === true, isHasScrollPercent: KEEP.theme_config.style.scroll.percent.enable === true, @@ -78,23 +80,35 @@ KEEP.initUtils = () => { // global font adjust globalFontAdjust() { - const initFontSize = document.defaultView.getComputedStyle(document.body).fontSize; - const fs = Number(initFontSize.substring(0, initFontSize.length - 2)); + const fontSize = document.defaultView.getComputedStyle(document.body).fontSize; + const fs = parseFloat(fontSize); - const setFontSize = (defaultFontSize) => { - this.html_root_dom.style.fontSize = `${fs * (1 + defaultFontSize * 0.05)}px`; + const initFontSize = () => { + const styleStatus = KEEP.getStyleStatus(); + if (styleStatus) { + this.fontSizeLevel = styleStatus.fontSizeLevel; + setFontSize(this.fontSizeLevel); + } } + const setFontSize = (fontSizeLevel) => { + this.html_root_dom.style.fontSize = `${fs * (1 + fontSizeLevel * 0.05)}px`; + KEEP.styleStatus.fontSizeLevel = fontSizeLevel; + KEEP.setStyleStatus(); + } + + initFontSize(); + document.querySelector('.tool-font-adjust-plus').addEventListener('click', () => { - if (this.defaultFontSize >= 5) return; - this.defaultFontSize++; - setFontSize(this.defaultFontSize); + if (this.fontSizeLevel === 5) return; + this.fontSizeLevel++; + setFontSize(this.fontSizeLevel); }); document.querySelector('.tool-font-adjust-minus').addEventListener('click', () => { - if (this.defaultFontSize <= 0) return; - this.defaultFontSize--; - setFontSize(this.defaultFontSize); + if (this.fontSizeLevel <= 0) return; + this.fontSizeLevel--; + setFontSize(this.fontSizeLevel); }); }, @@ -115,9 +129,9 @@ KEEP.initUtils = () => { headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'; } - toolExpandDom.addEventListener('click', () => { - isExpand = !isExpand; - + const setPageWidth = (isExpand) => { + KEEP.styleStatus.isExpandPageWidth = isExpand; + KEEP.setStyleStatus(); if (isExpand) { iconDom.classList.remove('fa-arrows-alt-h'); iconDom.classList.add('fa-compress-arrows-alt'); @@ -129,8 +143,24 @@ KEEP.initUtils = () => { headerContentDom.style.maxWidth = headerMaxWidth; mainContentDom.style.maxWidth = defaultMaxWidth; } + } + const initPageWidth = () => { + const styleStatus = KEEP.getStyleStatus(); + if (styleStatus) { + isExpand = styleStatus.isExpandPageWidth; + setPageWidth(isExpand); + } + } + + initPageWidth(); + + toolExpandDom.addEventListener('click', () => { + isExpand = !isExpand; + setPageWidth(isExpand) }); + + }, // go comment anchor @@ -215,34 +245,34 @@ KEEP.initUtils = () => { timestamp /= 1000; - const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12) - const __M = Math.floor(timestamp / (60 * 60 * 24 * 30)) - const __W = Math.floor(timestamp / (60 * 60 * 24) / 7) - const __d = Math.floor(timestamp / (60 * 60 * 24)) - const __h = Math.floor(timestamp / (60 * 60) % 24) - const __m = Math.floor(timestamp / 60 % 60) - const __s = Math.floor(timestamp % 60) + const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12); + const __M = Math.floor(timestamp / (60 * 60 * 24 * 30)); + const __W = Math.floor(timestamp / (60 * 60 * 24) / 7); + const __d = Math.floor(timestamp / (60 * 60 * 24)); + const __h = Math.floor(timestamp / (60 * 60) % 24); + const __m = Math.floor(timestamp / 60 % 60); + const __s = Math.floor(timestamp % 60); if (__Y > 0) { - return this.setHowLongAgoLanguage(__Y, l.year) + return this.setHowLongAgoLanguage(__Y, l.year); } else if (__M > 0) { - return this.setHowLongAgoLanguage(__M, l.month) + return this.setHowLongAgoLanguage(__M, l.month); } else if (__W > 0) { - return this.setHowLongAgoLanguage(__W, l.week) + return this.setHowLongAgoLanguage(__W, l.week); } else if (__d > 0) { - return this.setHowLongAgoLanguage(__d, l.day) + return this.setHowLongAgoLanguage(__d, l.day); } else if (__h > 0) { - return this.setHowLongAgoLanguage(__h, l.hour) + return this.setHowLongAgoLanguage(__h, l.hour); } else if (__m > 0) { - return this.setHowLongAgoLanguage(__m, l.minute) + return this.setHowLongAgoLanguage(__m, l.minute); } else if (__s > 0) { - return this.setHowLongAgoLanguage(__s, l.second) + return this.setHowLongAgoLanguage(__s, l.second); } },