From 77c3ebe6b0942785ccd8a68f950a521ade751e77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E4=BA=91=E8=8B=8D=E7=8B=97?= Date: Sat, 4 Feb 2023 17:40:16 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=9A=B4=E9=9C=B2=E7=BB=99=E5=85=A8=E5=B1=80=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/hexo-theme-async-ts/global.d.ts | 3 + package/hexo-theme-async-ts/src/global.ts | 112 ++++++++++++++++++++++ package/hexo-theme-async-ts/src/utils.ts | 100 ------------------- 3 files changed, 115 insertions(+), 100 deletions(-) create mode 100644 package/hexo-theme-async-ts/src/global.ts diff --git a/package/hexo-theme-async-ts/global.d.ts b/package/hexo-theme-async-ts/global.d.ts index 82a12a54..b628479e 100644 --- a/package/hexo-theme-async-ts/global.d.ts +++ b/package/hexo-theme-async-ts/global.d.ts @@ -77,6 +77,9 @@ declare interface Window { postUpdate: string } + // LocomotiveScroll 实例 + locomotiveScrollInstance: any + asyncFun: { [key: string]: Function } diff --git a/package/hexo-theme-async-ts/src/global.ts b/package/hexo-theme-async-ts/src/global.ts new file mode 100644 index 00000000..dc73344a --- /dev/null +++ b/package/hexo-theme-async-ts/src/global.ts @@ -0,0 +1,112 @@ +import { utils } from "./utils"; + +/** + * 执行页面切换动画 + * @param wait + * @returns + */ +const pageLoading = function (wait: number = 600): Promise { + return new Promise(resolve => { + utils.q('html').classList.add('is-animating'); + utils.q(".trm-scroll-container").style.opacity = 0; + setTimeout(function () { + utils.q('html').classList.remove('is-animating'); + utils.q(".trm-scroll-container").style.opacity = 1; + resolve() + }, wait); + }) +} + +/** + * 执行主题切换动画 + * @param wait + * @returns + */ +const themeLoading = function (wait: number = 600): Promise { + /* Content area */ + const scroll_container = utils.q("#trm-scroll-container"); + /* Animated mask layers */ + const mode_swich_animation_frame = utils.q('.trm-mode-swich-animation-frame'); + + return new Promise(resolve => { + /* Start to switch theme animation */ + mode_swich_animation_frame.classList.add('trm-active'); + scroll_container.style.opacity = 0; + setTimeout(() => { + /* End switch theme animation */ + setTimeout(() => { + mode_swich_animation_frame.classList.remove('trm-active'); + scroll_container.style.opacity = 1; + }, wait); + resolve() + }, wait); + }) +} + +/** + * 切换单双栏 + */ +const switchSingleColumn = function () { + document.body.classList.toggle('trm-single-column') +} + +/** + * 阅读模式切换 + */ +const switchReadMode = function () { + const $body = document.body + $body.classList.add('trm-read-mode') + const newEle = document.createElement('button') + newEle.type = 'button' + newEle.title = window.ASYNC_CONFIG.i18n.exit_read_mode + newEle.className = `trm-exit-readmode trm-glow` + newEle.innerHTML = utils.icons(window.ASYNC_CONFIG.icons.close, window.ASYNC_CONFIG.icontype) + $body.appendChild(newEle) + + function clickFn() { + $body.classList.remove('trm-read-mode') + newEle.remove() + newEle.removeEventListener('click', clickFn) + } + + newEle.addEventListener('click', clickFn) +} + +/** + * 主题切换 + * @param type + */ +const switchThemeMode = function (type: 'style-dark' | 'style-light') { + themeLoading().then(() => { + const fun = type === 'style-dark' ? 'add' : 'remove'; + utils.q('.trm-mode-swich-animation').classList[fun]('trm-active'); + document.documentElement.classList[fun]('dark') + + localStorage.setItem('theme-mode', type) + setThemeColor() + + // 适配 Giscus + typeof window.changeGiscusTheme === 'function' && window.changeGiscusTheme() + }) +} + +/** + * 设置移动端-状态栏主题 + * @param colorVal + */ +const setThemeColor = function (colorVal = '--theme-bg-color') { + let themeColor = getComputedStyle(document.documentElement).getPropertyValue(colorVal) + let themeColorDom = utils.q('meta[name="theme-color"]') + if (themeColor && themeColorDom) { + themeColorDom.content = themeColor + } +} + +export default { + pageLoading, + themeLoading, + switchSingleColumn, + switchReadMode, + switchThemeMode, + setThemeColor +} \ No newline at end of file diff --git a/package/hexo-theme-async-ts/src/utils.ts b/package/hexo-theme-async-ts/src/utils.ts index 3c54c198..32e862a5 100644 --- a/package/hexo-theme-async-ts/src/utils.ts +++ b/package/hexo-theme-async-ts/src/utils.ts @@ -187,104 +187,4 @@ export const utils = { } return result } -} - -// 挂载到全局 -export const asyncFun = { - /** - * 执行页面切换动画 - * @param wait - * @returns - */ - pageLoading(wait: number = 600): Promise { - return new Promise(resolve => { - utils.q('html').classList.add('is-animating'); - utils.q(".trm-scroll-container").style.opacity = 0; - setTimeout(function () { - utils.q('html').classList.remove('is-animating'); - utils.q(".trm-scroll-container").style.opacity = 1; - resolve() - }, wait); - }) - }, - /** - * 执行主题切换动画 - * @param wait - * @returns - */ - themeLoading(wait: number = 600): Promise { - /* Content area */ - const scroll_container = utils.q("#trm-scroll-container"); - /* Animated mask layers */ - const mode_swich_animation_frame = utils.q('.trm-mode-swich-animation-frame'); - - return new Promise(resolve => { - /* Start to switch theme animation */ - mode_swich_animation_frame.classList.add('trm-active'); - scroll_container.style.opacity = 0; - setTimeout(() => { - /* End switch theme animation */ - setTimeout(() => { - mode_swich_animation_frame.classList.remove('trm-active'); - scroll_container.style.opacity = 1; - }, wait); - resolve() - }, wait); - }) - }, - /** - * 切换单双栏 - */ - switchSingleColumn() { - document.body.classList.toggle('trm-single-column') - }, - /** - * 阅读模式切换 - */ - switchReadMode() { - const $body = document.body - $body.classList.add('trm-read-mode') - const newEle = document.createElement('button') - newEle.type = 'button' - newEle.title = window.ASYNC_CONFIG.i18n.exit_read_mode - newEle.className = `trm-exit-readmode trm-glow` - newEle.innerHTML = utils.icons(window.ASYNC_CONFIG.icons.close, window.ASYNC_CONFIG.icontype) - $body.appendChild(newEle) - - function clickFn() { - $body.classList.remove('trm-read-mode') - newEle.remove() - newEle.removeEventListener('click', clickFn) - } - - newEle.addEventListener('click', clickFn) - }, - /** - * 主题切换 - * @param type - */ - switchThemeMode(type: 'style-dark' | 'style-light') { - asyncFun.themeLoading().then(() => { - const fun = type === 'style-dark' ? 'add' : 'remove'; - utils.q('.trm-mode-swich-animation').classList[fun]('trm-active'); - document.documentElement.classList[fun]('dark') - - localStorage.setItem('theme-mode', type) - asyncFun.setThemeColor() - - // 适配 Giscus - typeof window.changeGiscusTheme === 'function' && window.changeGiscusTheme() - }) - }, - /** - * 设置移动端-状态栏主题 - * @param colorVal - */ - setThemeColor(colorVal = '--theme-bg-color') { - let themeColor = getComputedStyle(document.documentElement).getPropertyValue(colorVal) - let themeColorDom = utils.q('meta[name="theme-color"]') - if (themeColor && themeColorDom) { - themeColorDom.content = themeColor - } - } } \ No newline at end of file