hexo-theme-shokax 0.4.4 → 0.4.6-beta1

package/source/js/_app/globals/themeColor.ts

@@ -1,64 +1,63 @@
-import { $storage } from '../library/storage'
-import { $dom } from '../library/dom'
-import { CONFIG, HTML } from './globalVars'
-
-/**
- * 更改日夜模式
- */
-export const changeTheme = (type?: string) => {
-  const btn = <HTMLElement>$dom('.theme .ic')
-  if (type === 'dark') {
-    HTML.setAttribute('data-theme', type)
-    btn.removeClass('i-sun')
-    btn.addClass('i-moon')
-  } else {
-    HTML.removeAttribute('data-theme')
-    btn.removeClass('i-moon')
-    btn.addClass('i-sun')
-  }
-}
-
-/**
- * 自动调整黑夜白天
- * 优先级: 手动选择>时间>跟随系统
- */
-export const autoDarkmode = () => {
-  if (CONFIG.auto_dark.enable) {
-    if (new Date().getHours() >= CONFIG.auto_dark.start || new Date().getHours() <= CONFIG.auto_dark.end) {
-      changeTheme('dark')
-    } else {
-      changeTheme()
-    }
-  }
-}
-
-/**
- * 更改主题的meta
- */
-export const changeMetaTheme = (color: string): void => {
-  if (HTML.getAttribute('data-theme') === 'dark') {
-    color = '#222'
-  }
-
-  $dom('meta[name="theme-color"]').setAttribute('content', color)
-}
-
-// 记忆日夜模式切换和系统亮暗模式监听
-export const themeColorListener = () => {
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (mediaQueryList) => {
-    if (mediaQueryList.matches) {
-      changeTheme('dark')
-    } else {
-      changeTheme()
-    }
-  })
-
-  const t = $storage.get('theme')
-  if (t) {
-    changeTheme(t)
-  } else {
-    if (CONFIG.darkmode) {
-      changeTheme('dark')
-    }
-  }
-}
+import { $storage } from '../library/storage'
+import { CONFIG, HTML } from './globalVars'
+
+/**
+ * 更改日夜模式
+ */
+export const changeTheme = (type?: string) => {
+  const btn = document.querySelector('.theme .ic')
+  if (type === 'dark') {
+    HTML.setAttribute('data-theme', type)
+    btn.removeClass('i-sun')
+    btn.addClass('i-moon')
+  } else {
+    HTML.removeAttribute('data-theme')
+    btn.removeClass('i-moon')
+    btn.addClass('i-sun')
+  }
+}
+
+/**
+ * 自动调整黑夜白天
+ * 优先级: 手动选择>时间>跟随系统
+ */
+export const autoDarkmode = () => {
+  if (CONFIG.auto_dark.enable) {
+    if (new Date().getHours() >= CONFIG.auto_dark.start || new Date().getHours() <= CONFIG.auto_dark.end) {
+      changeTheme('dark')
+    } else {
+      changeTheme()
+    }
+  }
+}
+
+/**
+ * 更改主题的meta
+ */
+export const changeMetaTheme = (color: string): void => {
+  if (HTML.getAttribute('data-theme') === 'dark') {
+    color = '#222'
+  }
+
+  document.querySelector('meta[name="theme-color"]').setAttribute('content', color)
+}
+
+// 记忆日夜模式切换和系统亮暗模式监听
+export const themeColorListener = () => {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (mediaQueryList) => {
+    if (mediaQueryList.matches) {
+      changeTheme('dark')
+    } else {
+      changeTheme()
+    }
+  })
+
+  const t = $storage.get('theme')
+  if (t) {
+    changeTheme(t)
+  } else {
+    if (CONFIG.darkmode) {
+      changeTheme('dark')
+    }
+  }
+}

package/source/js/_app/globals/thirdparty.ts

@@ -1,63 +1,63 @@
-// 与第三方js的交互或第三方嵌入js
-
-import { CONFIG, loadCat } from './globalVars'
-import { transition } from '../library/anime'
-
-// 加载动画
-export const Loader = {
-  timer: undefined,
-  lock: false,
-  show () {
-    clearTimeout(this.timer)
-    document.body.removeClass('loaded')
-    loadCat.setAttribute('style', 'display:block')
-    Loader.lock = false
-  },
-  hide (sec?: number) {
-    if (!CONFIG.loader.start) {
-      sec = -1
-    }
-    this.timer = setTimeout(this.vanish, sec || 3000)
-  },
-  vanish (): void {
-    if (Loader.lock) {
-      return
-    }
-    if (CONFIG.loader.start) {
-      transition(loadCat, 0)
-    }
-    document.body.addClass('loaded')
-    Loader.lock = true
-  }
-}
-
-export const isOutime = (): void => {
-  let updateTime: Date
-  const times = document.getElementsByTagName('time')
-  if (times.length === 0) {
-    return
-  }
-  const posts = document.getElementsByClassName('body md')
-  if (posts.length === 0) {
-    return
-  }
-
-  const now = Date.now() // 当前时间戳
-  const pubTime = new Date(times[0].dateTime) // 文章发布时间戳
-  if (times.length === 1) {
-    updateTime = pubTime // 文章发布时间亦是最后更新时间
-  } else {
-    updateTime = new Date(times[1].dateTime) // 文章最后更新时间戳
-  }
-  // @ts-ignore
-  const interval = parseInt(String(now - updateTime)) // 时间差
-  const days = parseInt(String(CONFIG.outime.days)) || 30 // 设置时效，默认硬编码 30 天
-  // 最后一次更新时间超过 days 天（毫秒）
-  if (interval > (days * 86400000)) {
-    // @ts-ignore
-    const publish = parseInt(String((now - pubTime) / 86400000))
-    const updated = parseInt(String(interval / 86400000))
-    const template = LOCAL.template.replace('{{publish}}', String(publish)).replace('{{updated}}', String(updated))
-    posts[0].insertAdjacentHTML('afterbegin', template)
-  }
-}
+// 与第三方js的交互或第三方嵌入js
+
+import { CONFIG, loadCat } from './globalVars'
+import { transition } from '../library/anime'
+
+// 加载动画
+export const Loader = {
+  timer: undefined,
+  lock: false,
+  show () {
+    clearTimeout(this.timer)
+    document.body.removeClass('loaded')
+    loadCat.setAttribute('style', 'display:block')
+    Loader.lock = false
+  },
+  hide (sec?: number) {
+    if (!CONFIG.loader.start) {
+      sec = -1
+    }
+    this.timer = setTimeout(this.vanish, sec || 3000)
+  },
+  vanish (): void {
+    if (Loader.lock) {
+      return
+    }
+    if (CONFIG.loader.start) {
+      transition(loadCat, 0)
+    }
+    document.body.addClass('loaded')
+    Loader.lock = true
+  }
+}
+
+export const isOutime = (): void => {
+  let updateTime: Date
+  const times = document.getElementsByTagName('time')
+  if (times.length === 0) {
+    return
+  }
+  const posts = document.getElementsByClassName('body md')
+  if (posts.length === 0) {
+    return
+  }
+
+  const now = Date.now() // 当前时间戳
+  const pubTime = new Date(times[0].dateTime) // 文章发布时间戳
+  if (times.length === 1) {
+    updateTime = pubTime // 文章发布时间亦是最后更新时间
+  } else {
+    updateTime = new Date(times[1].dateTime) // 文章最后更新时间戳
+  }
+  // @ts-ignore
+  const interval = parseInt(String(now - updateTime)) // 时间差
+  const days = parseInt(String(CONFIG.outime.days)) || 30 // 设置时效，默认硬编码 30 天
+  // 最后一次更新时间超过 days 天（毫秒）
+  if (interval > (days * 86400000)) {
+    // @ts-ignore
+    const publish = parseInt(String((now - pubTime) / 86400000))
+    const updated = parseInt(String(interval / 86400000))
+    const template = LOCAL.template.replace('{{publish}}', String(publish)).replace('{{updated}}', String(updated))
+    posts[0].insertAdjacentHTML('afterbegin', template)
+  }
+}

package/source/js/_app/globals/tools.ts

@@ -1,75 +1,75 @@
-import { pageScroll } from '../library/anime'
-import { $dom } from '../library/dom'
-import { $storage } from '../library/storage'
-import { BODY, CONFIG, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars'
-import { createChild } from '../library/proto'
-
-// 显示提示(现阶段用于版权及复制结果提示)
-export const showtip = (msg: string): void | never => {
-  if (!msg) {
-    return
-  }
-
-  const tipbox = createChild(BODY, 'div', {
-    innerHTML: msg,
-    className: 'tip'
-  })
-
-  setTimeout(() => {
-    tipbox.addClass('hide')
-    setTimeout(() => {
-      BODY.removeChild(tipbox)
-    }, 300)
-  }, 3000)
-}
-
-export const pagePosition = () => {
-  // 判断配置项是否开启了自动记录滚动位置
-  if (CONFIG.auto_scroll) {
-    // 将当前页面的滚动位置存入本地缓存
-    $storage.set(LOCAL_URL, String(scrollAction.y))
-  }
-}
-
-export const positionInit = (comment?: boolean) => {
-  // 获取页面锚点
-  const anchor = window.location.hash
-
-  let target = null
-  if (LOCAL_HASH) {
-    $storage.del(LOCAL_URL)
-    return
-  }
-
-  if (anchor) {
-    target = $dom(decodeURI(anchor))
-  } else {
-    target = CONFIG.auto_scroll ? parseInt($storage.get(LOCAL_URL)) : 0
-  }
-
-  if (target) {
-    pageScroll(target)
-    setLocalHash(1)
-  }
-
-  if (comment && anchor && !LOCAL_HASH) {
-    pageScroll(target)
-    setLocalHash(1)
-  }
-}
-
-/*
-基于clipboard API的复制功能，仅在https环境下有效
-*/
-export const clipBoard = (str: string, callback?: (result:boolean) => void) => {
-  if (navigator.clipboard && window.isSecureContext) {
-    navigator.clipboard.writeText(str).then(() => {
-      callback && callback(true)
-    }, () => {
-      callback && callback(false)
-    })
-  } else {
-    console.error('Too old browser, clipborad API not supported.')
-    callback && callback(false)
-  }
-}
+import { pageScroll } from '../library/anime'
+import { $dom } from '../library/dom'
+import { $storage } from '../library/storage'
+import { BODY, CONFIG, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars'
+import { createChild } from '../library/proto'
+
+// 显示提示(现阶段用于版权及复制结果提示)
+export const showtip = (msg: string): void | never => {
+  if (!msg) {
+    return
+  }
+
+  const tipbox = createChild(BODY, 'div', {
+    innerHTML: msg,
+    className: 'tip'
+  })
+
+  setTimeout(() => {
+    tipbox.addClass('hide')
+    setTimeout(() => {
+      BODY.removeChild(tipbox)
+    }, 300)
+  }, 3000)
+}
+
+export const pagePosition = () => {
+  // 判断配置项是否开启了自动记录滚动位置
+  if (CONFIG.auto_scroll) {
+    // 将当前页面的滚动位置存入本地缓存
+    $storage.set(LOCAL_URL, String(scrollAction.y))
+  }
+}
+
+export const positionInit = (comment?: boolean) => {
+  // 获取页面锚点
+  const anchor = window.location.hash
+
+  let target = null
+  if (LOCAL_HASH) {
+    $storage.del(LOCAL_URL)
+    return
+  }
+
+  if (anchor) {
+    target = document.querySelector(decodeURI(anchor))
+  } else {
+    target = CONFIG.auto_scroll ? parseInt($storage.get(LOCAL_URL)) : 0
+  }
+
+  if (target) {
+    pageScroll(target)
+    setLocalHash(1)
+  }
+
+  if (comment && anchor && !LOCAL_HASH) {
+    pageScroll(target)
+    setLocalHash(1)
+  }
+}
+
+/*
+基于clipboard API的复制功能，仅在https环境下有效
+*/
+export const clipBoard = (str: string, callback?: (result:boolean) => void) => {
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(str).then(() => {
+      callback && callback(true)
+    }, () => {
+      callback && callback(false)
+    })
+  } else {
+    console.error('Too old browser, clipborad API not supported.')
+    callback && callback(false)
+  }
+}

package/source/js/_app/library/anime.ts

@@ -1,110 +1,110 @@
-import anime from 'theme-shokax-anime'
-import { siteNavHeight } from '../globals/globalVars'
-import type { AnimeOptions } from 'theme-shokax-anime/dist/types'
-import {getTop, setDisplay} from './proto'
-
-/**
- * 参数  动画效果
- * 0  元素逐渐消失
- * 1  元素逐渐出现
- * bounceUpIn  元素从下方弹跳出现
- * shrinkIn  元素从放大到正常大小出现
- * slideRightIn  元素从右侧滑入
- * slideRightOut  元素向右侧滑出
- * TODO 函数功能过于复杂，需要拆分
- */
-export const transition = (target: HTMLElement, type: number|string|Function, complete?: Function, begin?: Function): void => {
-  let animation:Partial<AnimeOptions>
-  let display = 'none'
-  switch (type) {
-    case 0:
-      animation = { opacity: [1, 0] }
-      break
-    case 1:
-      animation = { opacity: [0, 1] }
-      display = 'block'
-      break
-    case 'bounceUpIn':
-      animation = {
-        begin (anim) {
-          setDisplay(target, 'block')
-        },
-        translateY: [
-          { value: -60, duration: 200 },
-          { value: 10, duration: 200 },
-          { value: -5, duration: 200 },
-          { value: 0, duration: 200 }
-        ],
-        opacity: [0, 1]
-      }
-      display = 'block'
-      break
-    case 'shrinkIn':
-      animation = {
-        begin (anim) {
-          setDisplay(target, 'block')
-        },
-        scale: [
-          { value: 1.1, duration: 300 },
-          { value: 1, duration: 200 }
-        ],
-        opacity: 1
-      }
-      display = 'block'
-      break
-    case 'slideRightIn':
-      animation = {
-        begin (anim) {
-          setDisplay(target, 'block')
-        },
-        translateX: ['100%', '0%'],
-        opacity: [0, 1]
-      }
-      display = 'block'
-      break
-    case 'slideRightOut':
-      animation = {
-        translateX: ['0%', '100%'],
-        opacity: [1, 0]
-      }
-      break
-    default:
-      // @ts-ignore
-      animation = type
-      // @ts-ignore
-      display = type.display
-      break
-  }
-  anime(Object.assign({
-    targets: target,
-    duration: 200,
-    easing: 'linear',
-    begin () {
-      begin && begin()
-    },
-    complete () {
-      setDisplay(target, display)
-      complete && complete()
-    }
-  }, animation)).play()
-}
-
-export const pageScroll = (target: HTMLElement|number, offset?: number, complete?: Function) => {
-  // target: 滚动到的目标元素或坐标(number)
-  // offset: 可选的偏移量
-  // complete: 可选的回调函数，在动画完成时调用
-  anime({
-    // 动画目标
-    targets: typeof offset === 'number' && typeof target !== 'number' ? target.parentNode : document.scrollingElement,
-    // 动画持续时间
-    duration: 500,
-    // 动画缓动函数
-    easing: 'easeInOutQuad',
-    // 如果 offset 存在，则滚动到 offset，如果 target 是数字，则滚动到 target，如果 target 是 DOM 元素，则滚动到下述表达式
-    scrollTop: offset || (typeof target === 'number' ? target : (target ? getTop(target) + document.documentElement.scrollTop - siteNavHeight : 0)),
-    // 完成回调函数
-    complete () {
-      complete && complete()
-    }
-  }).play()
-}
+import anime from 'theme-shokax-anime'
+import { siteNavHeight } from '../globals/globalVars'
+import type { AnimeOptions } from 'theme-shokax-anime/dist/types'
+import {getTop, setDisplay} from './proto'
+
+/**
+ * 参数  动画效果
+ * 0  元素逐渐消失
+ * 1  元素逐渐出现
+ * bounceUpIn  元素从下方弹跳出现
+ * shrinkIn  元素从放大到正常大小出现
+ * slideRightIn  元素从右侧滑入
+ * slideRightOut  元素向右侧滑出
+ * TODO 函数功能过于复杂，需要拆分
+ */
+export const transition = (target: HTMLElement, type: number|string|Function, complete?: Function, begin?: Function): void => {
+  let animation:Partial<AnimeOptions>
+  let display = 'none'
+  switch (type) {
+    case 0:
+      animation = { opacity: [1, 0] }
+      break
+    case 1:
+      animation = { opacity: [0, 1] }
+      display = 'block'
+      break
+    case 'bounceUpIn':
+      animation = {
+        begin (anim) {
+          setDisplay(target, 'block')
+        },
+        translateY: [
+          { value: -60, duration: 200 },
+          { value: 10, duration: 200 },
+          { value: -5, duration: 200 },
+          { value: 0, duration: 200 }
+        ],
+        opacity: [0, 1]
+      }
+      display = 'block'
+      break
+    case 'shrinkIn':
+      animation = {
+        begin (anim) {
+          setDisplay(target, 'block')
+        },
+        scale: [
+          { value: 1.1, duration: 300 },
+          { value: 1, duration: 200 }
+        ],
+        opacity: 1
+      }
+      display = 'block'
+      break
+    case 'slideRightIn':
+      animation = {
+        begin (anim) {
+          setDisplay(target, 'block')
+        },
+        translateX: ['100%', '0%'],
+        opacity: [0, 1]
+      }
+      display = 'block'
+      break
+    case 'slideRightOut':
+      animation = {
+        translateX: ['0%', '100%'],
+        opacity: [1, 0]
+      }
+      break
+    default:
+      // @ts-ignore
+      animation = type
+      // @ts-ignore
+      display = type.display
+      break
+  }
+  anime(Object.assign({
+    targets: target,
+    duration: 200,
+    easing: 'linear',
+    begin () {
+      begin && begin()
+    },
+    complete () {
+      setDisplay(target, display)
+      complete && complete()
+    }
+  }, animation)).play()
+}
+
+export const pageScroll = (target: HTMLElement|number, offset?: number, complete?: Function) => {
+  // target: 滚动到的目标元素或坐标(number)
+  // offset: 可选的偏移量
+  // complete: 可选的回调函数，在动画完成时调用
+  anime({
+    // 动画目标
+    targets: typeof offset === 'number' && typeof target !== 'number' ? target.parentNode : document.scrollingElement,
+    // 动画持续时间
+    duration: 500,
+    // 动画缓动函数
+    easing: 'easeInOutQuad',
+    // 如果 offset 存在，则滚动到 offset，如果 target 是数字，则滚动到 target，如果 target 是 DOM 元素，则滚动到下述表达式
+    scrollTop: offset || (typeof target === 'number' ? target : (target ? getTop(target) + document.documentElement.scrollTop - siteNavHeight : 0)),
+    // 完成回调函数
+    complete () {
+      complete && complete()
+    }
+  }).play()
+}