hexo-theme-shokax 0.3.12 → 0.4.0-alpha.1

package/source/js/_app/components/sidebar.ts

@@ -0,0 +1,237 @@
+/* 边栏分区 */
+
+import { Container, diffY, menuToggle, showContents, sideBar } from '../globals/globalVars'
+import { clipBoard } from '../globals/tools'
+import { pageScroll, transition } from '../library/anime'
+import { $dom } from '../library/dom'
+
+export const sideBarToggleHandle = (event:Event, force?:number) => {
+  if (sideBar.hasClass('on')) {
+    sideBar.removeClass('on')
+    menuToggle.removeClass('close')
+    if (force) {
+      // @ts-ignore
+      // noinspection JSConstantReassignment
+      sideBar.style = ''
+    } else {
+      transition(sideBar, 'slideRightOut')
+    }
+  } else {
+    if (force) {
+      // @ts-ignore
+      // noinspection JSConstantReassignment
+      sideBar.style = ''
+    } else {
+      transition(sideBar, 'slideRightIn', () => {
+        sideBar.addClass('on')
+        menuToggle.addClass('close')
+      })
+    }
+  }
+}
+
+export const sideBarTab = () => {
+  const sideBarInner = sideBar.child('.inner')
+
+  if (sideBar.child('.tab')) {
+    sideBarInner.removeChild(sideBar.child('.tab'))
+  }
+
+  const list = document.createElement('ul'); let active = 'active'
+  list.className = 'tab';
+
+  ['contents', 'related', 'overview'].forEach((item) => {
+    const element = sideBar.child('.panel.' + item)
+
+    if (element.innerHTML.trim().length < 1) {
+      if (item === 'contents') {
+        showContents.display('none')
+      }
+      return
+    }
+
+    if (item === 'contents') {
+      showContents.display('')
+    }
+
+    const tab = document.createElement('li')
+    const span = document.createElement('span')
+    const text = document.createTextNode(element.getAttribute('data-title'))
+    span.appendChild(text)
+    tab.appendChild(span)
+    tab.addClass(item + ' item')
+
+    if (active) {
+      element.addClass(active)
+      tab.addClass(active)
+    } else {
+      element.removeClass('active')
+    }
+    tab.addEventListener('click', (event) => {
+      const target = event.currentTarget as HTMLElement
+      if (target.hasClass('active')) return
+
+      sideBar.find('.tab .item').forEach((element) => {
+        element.removeClass('active')
+      })
+
+      sideBar.find('.panel').forEach((element) => {
+        element.removeClass('active')
+      })
+
+      sideBar.child('.panel.' + target.className.replace(' item', '')).addClass('active')
+
+      target.addClass('active')
+    })
+
+    list.appendChild(tab)
+    active = ''
+  })
+
+  if (list.childNodes.length > 1) {
+    sideBarInner.insertBefore(list, sideBarInner.childNodes[0])
+    sideBar.child('.panels').style.paddingTop = ''
+  } else {
+    sideBar.child('.panels').style.paddingTop = '.625rem'
+  }
+}
+
+export const sidebarTOC = () => {
+  const activateNavByIndex = (index:number): void => {
+    const target = navItems[index]
+
+    if (!target) return
+
+    if (target.hasClass('current')) {
+      return
+    }
+
+    $dom.each('.toc .active', (element) => {
+      element && element.removeClass('active current')
+    })
+
+    sections.forEach((element) => {
+      element && element.removeClass('active')
+    })
+
+    target.addClass('active current')
+    sections[index] && sections[index].addClass('active')
+
+    let parent = <Element> target.parentNode
+
+    while (!parent.matches('.contents')) {
+      if (parent.matches('li')) {
+        parent.addClass('active')
+        const t = $dom(parent.child('a.toc-link').getAttribute('href'))
+        if (t) {
+          t.addClass('active')
+        }
+      }
+      parent = <Element> parent.parentNode
+    }
+    // Scrolling to center active TOC element if TOC content is taller than viewport.
+    if (getComputedStyle(sideBar).display !== 'none' && tocElement.hasClass('active')) {
+      pageScroll(tocElement, target.offsetTop - (tocElement.offsetHeight / 4))
+    }
+  }
+  const navItems = $dom.all('.contents li')
+
+  if (navItems.length < 1) {
+    return
+  }
+
+  let sections = [...navItems]
+  let activeLock = null
+
+  sections = sections.map((element, index) => {
+    const link = element.child('a.toc-link')
+    const anchor = $dom(decodeURI(link.getAttribute('href')))
+    if (!anchor) return null
+    const alink = anchor.child('a.anchor')
+
+    const anchorScroll = (event:MouseEvent) => {
+      event.preventDefault()
+      const target = $dom(decodeURI((event.currentTarget as HTMLElement).getAttribute('href')))
+
+      activeLock = index
+      pageScroll(target, null, () => {
+        activateNavByIndex(index)
+        activeLock = null
+      })
+    }
+
+    // TOC item animation navigate.
+    link.addEventListener('click', anchorScroll)
+    alink && alink.addEventListener('click', (event) => {
+      anchorScroll(event)
+      clipBoard(CONFIG.hostname + '/' + LOCAL.path + (event.currentTarget as HTMLElement).getAttribute('href'))
+    })
+    return anchor
+  })
+
+  const tocElement = sideBar.child('.contents.panel')
+
+  const findIndex = (entries: IntersectionObserverEntry[]) => {
+    let index = 0
+    let entry = entries[index]
+
+    if (entry.boundingClientRect.top > 0) {
+      index = sections.indexOf(entry.target as HTMLElement)
+      return index === 0 ? 0 : index - 1
+    }
+    for (; index < entries.length; index++) {
+      if (entries[index].boundingClientRect.top <= 0) {
+        entry = entries[index]
+      } else {
+        return sections.indexOf(entry.target as HTMLElement)
+      }
+    }
+    return sections.indexOf(entry.target as HTMLElement)
+  }
+
+  const createIntersectionObserver = () => {
+    const observer = new IntersectionObserver((entries) => {
+      const index = findIndex(entries) + (diffY < 0 ? 1 : 0)
+      if (activeLock === null) {
+        activateNavByIndex(index)
+      }
+    }, {
+      rootMargin: '0px 0px -100% 0px', threshold: 0
+    })
+
+    sections.forEach((element) => {
+      element && observer.observe(element)
+    })
+  }
+
+  createIntersectionObserver()
+}
+
+export const backToTopHandle = () => {
+  pageScroll(0)
+}
+
+export const goToBottomHandle = () => {
+  pageScroll(parseInt(String(Container.changeOrGetHeight())))
+}
+
+export const goToCommentHandle = () => {
+  pageScroll($dom('#comments'))
+}
+
+export const menuActive = () => {
+  $dom.each('.menu .item:not(.title)', (element) => {
+    const target = <HTMLAnchorElement> element.child('a[href]')
+    const parentItem = element.parentNode.parentNode
+    if (!target) return
+    const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '')
+    const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname)
+    const active = target.hostname === location.hostname && (isSamePath || isSubPath)
+    element.toggleClass('active', active)
+    if (element.parentNode.child('.active') && parentItem.hasClass('dropdown')) {
+      parentItem.removeClass('active').addClass('expand')
+    } else {
+      parentItem.removeClass('expand')
+    }
+  })
+}

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

@@ -0,0 +1,98 @@
+import { $dom } from '../library/dom'
+import Pjax from 'theme-shokax-pjax'
+import initProto from '../library/proto'
+
+initProto()
+export const statics = CONFIG.statics.indexOf('//') > 0 ? CONFIG.statics : CONFIG.root
+export const scrollAction: { x: number, y: number } = { x: 0, y: 0 }
+export let diffY = 0
+export let originTitle: string, titleTime: NodeJS.Timeout
+export const BODY = document.getElementsByTagName('body')[0]
+export const HTML = document.documentElement
+export const Container = $dom('#container')
+export const loadCat = $dom('#loading')
+export const siteNav = $dom('#nav')
+export const siteHeader = $dom('#header')
+export const menuToggle = siteNav.child('.toggle')
+export const quickBtn = $dom('#quick')
+export const sideBar = $dom('#sidebar')
+export const siteBrand = $dom('#brand')
+export let toolBtn = $dom('#tool')
+export let toolPlayer
+export let backToTop: HTMLElement
+export let goToComment
+export let showContents
+export let siteSearch = $dom('#search')
+export let siteNavHeight: number, headerHightInner: number, headerHight: number
+export let oWinHeight = window.innerHeight
+export let oWinWidth = window.innerWidth
+export let LOCAL_HASH = 0
+export let LOCAL_URL = window.location.href
+export let pjax:Pjax
+
+export function setSiteNavHeight (value:number):void {
+  siteNavHeight = value
+}
+export function setHeaderHightInner (value:number):void {
+  headerHightInner = value
+}
+
+export function setHeaderHight (value:number):void {
+  headerHight = value
+}
+
+export function setOWinHeight (value:number):void {
+  oWinHeight = value
+}
+
+export function setOWinWidth (value:number):void {
+  oWinWidth = value
+}
+
+export function setDiffY (value:number):void {
+  diffY = value
+}
+
+export function setTitleTime (value:NodeJS.Timeout):void {
+  titleTime = value
+}
+
+export function setLocalHash (value:number):void {
+  LOCAL_HASH = value
+}
+
+export function setLocalUrl (value:string):void {
+  LOCAL_URL = value
+}
+
+export function setPjax (value:Pjax):void {
+  pjax = value
+}
+
+export function setOriginTitle (value:string):void {
+  originTitle = value
+}
+
+export function setToolPlayer (value:any):void {
+  toolPlayer = value
+}
+
+export function setBackToTop (value:HTMLElement):void {
+  backToTop = value
+}
+
+export function setGoToComment (value:any):void {
+  goToComment = value
+}
+
+export function setShowContents (value:any):void {
+  showContents = value
+}
+
+export function setToolBtn (value:HTMLElement):void {
+  toolBtn = value
+}
+
+export function setSiteSearch (value:HTMLElement):void {
+  siteSearch = value
+}

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

@@ -0,0 +1,122 @@
+import { sideBarToggleHandle } from '../components/sidebar'
+import { $dom, getDocHeight } from '../library/dom'
+import {
+  backToTop,
+  diffY,
+  headerHight,
+  headerHightInner,
+  oWinWidth,
+  originTitle,
+  scrollAction,
+  sideBar,
+  siteBrand,
+  siteHeader,
+  siteNav,
+  statics,
+  titleTime,
+  toolBtn,
+  setSiteNavHeight,
+  setHeaderHightInner,
+  setHeaderHight,
+  setOWinHeight, setOWinWidth, setDiffY, setTitleTime
+} from './globalVars'
+import { changeMetaTheme } from './themeColor'
+import { Loader } from './thirdparty'
+
+export const resizeHandle = () => {
+  // 获取 siteNav 的高度
+  setSiteNavHeight(siteNav.changeOrGetHeight())
+  // 获取 siteHeader 的高度
+  setHeaderHightInner(siteHeader.changeOrGetHeight())
+  // 获取 #waves 的高度
+  setHeaderHight(headerHightInner + $dom('#waves').changeOrGetHeight())
+
+  // 判断窗口宽度是否改变
+  if (oWinWidth !== window.innerWidth) {
+    sideBarToggleHandle(null, 1)
+  }
+
+  // 记录窗口高度和宽度
+  setOWinHeight(window.innerHeight)
+  setOWinWidth(window.innerWidth)
+}
+
+export const scrollHandle = () => {
+  // 获取窗口高度
+  const winHeight = window.innerHeight
+  // 获取文档高度
+  const docHeight = getDocHeight()
+  // 计算可见内容高度
+  const contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight
+  // 判断页面是否滚动超过 headerHightInner
+  const SHOW = window.scrollY > headerHightInner
+  // 判断页面是否开始滚动
+  const startScroll = window.scrollY > 0
+
+  // 根据条件修改 meta theme
+  if (SHOW) {
+    changeMetaTheme('#FFF')
+  } else {
+    changeMetaTheme('#222')
+  }
+
+  // 控制导航栏的显示隐藏
+  siteNav.toggleClass('show', SHOW)
+  // 控制网站 logo 的显示隐藏
+  toolBtn.toggleClass('affix', startScroll)
+  // 控制侧边栏的显示隐藏，当滚动高度大于 headerHight 且窗口宽度大于 991px 时显示
+  siteBrand.toggleClass('affix', startScroll)
+  sideBar.toggleClass('affix', window.scrollY > headerHight && document.body.offsetWidth > 991)
+  // 初始化滚动时导航栏的显示方向
+  if (typeof scrollAction.y === 'undefined') {
+    scrollAction.y = window.scrollY
+  }
+  setDiffY(scrollAction.y - window.scrollY)
+
+  // 控制滑动时导航栏显示
+  if (diffY < 0) {
+    siteNav.removeClass('up')
+    siteNav.toggleClass('down', SHOW)
+  } else if (diffY > 0) {
+    siteNav.removeClass('down')
+    siteNav.toggleClass('up', SHOW)
+  } else { /* empty */ }
+  scrollAction.y = window.scrollY
+  // 计算滚动百分比
+  const scrollPercent = Math.round(Math.min(100 * window.scrollY / contentVisibilityHeight, 100)) + '%'
+  // 更新回到顶部按钮的文字
+  if (backToTop.child('span').innerText !== scrollPercent) {
+    backToTop.child('span').innerText = scrollPercent
+  }
+  // 更新百分比进度条的宽度
+  if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
+    $dom('.percent').changeOrGetWidth(scrollPercent)
+  }
+}
+
+// 可见度监听(离开页面和返回时更改document的title)
+export const visibilityListener = () => {
+  const iconNode = $dom('[rel="icon"]')
+  document.addEventListener('visibilitychange', () => {
+    switch (document.visibilityState) {
+      case 'hidden':
+        iconNode.setAttribute('href', statics + CONFIG.favicon.hidden)
+        document.title = LOCAL.favicon.hide
+        if (CONFIG.loader.switch) {
+          Loader.show()
+        }
+        clearTimeout(titleTime)
+        break
+      case 'visible':
+        iconNode.setAttribute('href', statics + CONFIG.favicon.normal)
+        document.title = LOCAL.favicon.show
+        if (CONFIG.loader.switch) {
+          Loader.hide(1000)
+        }
+        setTitleTime(setTimeout(() => {
+          document.title = originTitle
+        }, 2000))
+        break
+    }
+  })
+}

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

@@ -0,0 +1,64 @@
+import { $storage } from '../library/storage'
+import { $dom } from '../library/dom'
+import { 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')
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+// 与第三方js的交互或第三方嵌入js
+
+import { 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

@@ -0,0 +1,74 @@
+import { pageScroll } from '../library/anime'
+import { $dom } from '../library/dom'
+import { $storage } from '../library/storage'
+import { BODY, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars'
+
+// 显示提示(现阶段用于版权及复制结果提示)
+export const showtip = (msg: string): void | never => {
+  if (!msg) {
+    return
+  }
+
+  const tipbox = BODY.createChild('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)
+  }
+}