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

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

@@ -1,84 +1,82 @@
 import { $dom } from './dom'
 
+export const insertAfter = function (el: HTMLElement, element: HTMLElement): void {
+  const parent = el.parentNode
+  if (parent.lastChild === el) {
+    parent.appendChild(element)
+  } else {
+    parent.insertBefore(element, el.nextSibling)
+  }
+}
+
+/**
+ * 创建一个子节点并放置
+ */
+export const createChild = function (parent: HTMLElement, tag: string, obj: object, positon?: string): HTMLElement {
+  const child = document.createElement(tag)
+  Object.assign(child, obj)
+  switch (positon) {
+    case 'after':
+      insertAfter(parent, child)
+      break
+    case 'replace':
+      parent.innerHTML = ''
+      parent.appendChild(child)
+      break
+    default:
+      parent.appendChild(child)
+  }
+  return child
+}
+
+/**
+ *  此方法使用`<div>`包装一个 DOM 元素
+ * @param parent
+ * @param obj 需要被包装的对象
+ */
+export const wrapObject = function (parent: HTMLElement, obj: any): void {
+  const box = document.createElement('div')
+  Object.assign(box, obj)
+  parent.insertBefore(box, obj)
+  parent.removeChild(obj)
+  box.appendChild(obj)
+}
+
+export const getHeight = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().height
+}
+
+export const setWidth = function (el: HTMLElement, w: number|string): void {
+  el.style.width = typeof w === 'number' ? w + 'rem' : w
+}
+
+export const getWidth = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().width
+}
+
+export const getTop = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().top
+}
+
+export const getLeft = function (el: HTMLElement): number {
+  return el.getBoundingClientRect().left
+}
+
+export const getDisplay = function (el: HTMLElement): string {
+  return el.style.display
+}
+
+export const setDisplay = function (el: HTMLElement, d: string): HTMLElement {
+  el.style.display = d
+  return el
+}
+
+// TODO 未完成迁移
+export const child = function (el: HTMLElement, selector: string): HTMLElement {
+  return $dom(selector, (el as unknown as Document))
+}
 export default function initProto () {
   Object.assign(HTMLElement.prototype, {
-  /**
-   * 创建一个子节点并放置
-   */
-    createChild (tag: string, obj: ElementCreationOptions, positon?: string): HTMLElement {
-      const child = document.createElement(tag)
-      Object.assign(child, obj)
-      switch (positon) {
-        case 'after':
-          this.insertAfter(child)
-          break
-        case 'replace':
-          this.innerHTML = ''
-          this.appendChild(child)
-          break
-        default:
-          this.appendChild(child)
-      }
-      return child
-    },
-    /**
-     *  此方法使用`<div>`包装一个 DOM 元素
-     * @param obj 需要被包装的对象
-     */
-    wrapObject (obj: HTMLElement) {
-      const box = document.createElement('div')
-      Object.assign(box, obj)
-      this.parentNode.insertBefore(box, this)
-      this.parentNode.removeChild(this)
-      box.appendChild(this)
-    },
-    changeOrGetHeight (h?: number | string): number {
-      if (h) {
-      // TODO 0rem是期望的值吗?
-        this.style.height = typeof h === 'number' ? h + 'rem' : h
-      }
-      return this.getBoundingClientRect().height
-    },
-    /**
-   此函数将元素的宽度设置为指定值,如果未提供值,则返回元素的宽度.<br />
-   宽度可以作为数字提供(假定它以`rem`为单位).作为字符串提供则直接设置为元素宽度
-   */
-    changeOrGetWidth (w?: number | string): number {
-      if (w) {
-      // TODO 0rem是期望的值吗?
-        this.style.width = typeof w === 'number' ? w + 'rem' : w
-      }
-      return this.getBoundingClientRect().width
-    },
-    getTop (): number {
-      return this.getBoundingClientRect().top
-    },
-    left (): number {
-      return this.getBoundingClientRect().left
-    },
-    /**
-   * 将此节点插入父节点的下一个节点之前
-   */
-    insertAfter (element: HTMLElement): void {
-      const parent = this.parentNode
-      if (parent.lastChild === this) {
-        parent.appendChild(element)
-      } else {
-        parent.insertBefore(element, this.nextSibling)
-      }
-    },
-    /**
-   * 当d为空时返回此节点的CSSStyle display属性 <br />
-   * 反之,将d设置为此节点的CSSStyle display属性
-   */
-    display (d?: string): string | EventTarget {
-      if (d == null) {
-        return this.style.display
-      } else {
-        this.style.display = d
-        return this
-      }
-    },
     /**
    * 找到此节点第一个符合selector选择器的子节点
    */

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

@@ -3,58 +3,48 @@ import { transition } from './anime'
 import { $dom } from './dom'
 import { BODY } from '../globals/globalVars'
 import { changeTheme } from '../globals/themeColor'
-
+import { child, createChild, setDisplay } from './proto'
 export function initVue () {
-  Vue.createApp(
-    {
-      data () {
-        return {
-
-        }
-      },
-      methods: {
-        changeThemeByBtn () {
-          let c: { (): void; (): void; (): void }
-          const btn = $dom('.theme').child('.ic')
+  function changeThemeByBtn () {
+    let c: { (): void; (): void; (): void }
+    const btn = child($dom('.theme'), '.ic')
 
-          const neko = BODY.createChild('div', {
-            id: 'neko',
-            innerHTML: '<div class="planet"><div class="sun"></div><div class="moon"></div></div><div class="body"><div class="face"><section class="eyes left"><span class="pupil"></span></section><section class="eyes right"><span class="pupil"></span></section><span class="nose"></span></div></div>'
-          })
+    const neko = createChild(BODY, 'div', {
+      id: 'neko',
+      innerHTML: '<div class="planet"><div class="sun"></div><div class="moon"></div></div><div class="body"><div class="face"><section class="eyes left"><span class="pupil"></span></section><section class="eyes right"><span class="pupil"></span></section><span class="nose"></span></div></div>'
+    })
 
-          const hideNeko = () => {
-            transition(neko, {
-            // @ts-ignore
-              delay: 2500,
-              opacity: 0
-            }, () => {
-              BODY.removeChild(neko)
-            })
-          }
+    const hideNeko = () => {
+      transition(neko, {
+        // @ts-ignore
+        delay: 2500,
+        opacity: 0
+      }, () => {
+        BODY.removeChild(neko)
+      })
+    }
 
-          if (btn.hasClass('i-sun')) {
-            c = () => {
-              neko.addClass('dark')
-              changeTheme('dark')
-              $storage.set('theme', 'dark')
-              hideNeko()
-            }
-          } else {
-            neko.addClass('dark')
-            c = () => {
-              neko.removeClass('dark')
-              changeTheme()
-              $storage.set('theme', 'light')
-              hideNeko()
-            }
-          }
-          transition(neko, 1, () => {
-            setTimeout(c, 210)
-          }, () => {
-            neko.display('block')
-          })
-        }
+    if (btn.hasClass('i-sun')) {
+      c = () => {
+        neko.addClass('dark')
+        changeTheme('dark')
+        $storage.set('theme', 'dark')
+        hideNeko()
+      }
+    } else {
+      neko.addClass('dark')
+      c = () => {
+        neko.removeClass('dark')
+        changeTheme()
+        $storage.set('theme', 'light')
+        hideNeko()
       }
     }
-  ).mount('#rightNav')
+    transition(neko, 1, () => {
+      setTimeout(c, 210)
+    }, () => {
+      setDisplay(neko, 'block')
+    })
+  }
+  child($dom('#rightNav'), '.theme .ic').addEventListener('click', changeThemeByBtn)
 }

package/source/js/_app/page/fancybox.ts

@@ -1,5 +1,6 @@
 import { $dom } from '../library/dom'
 import { vendorCss, vendorJs } from '../library/loadFile'
+import { insertAfter } from '../library/proto'
 
 export const postFancybox = (p:string) => {
   if ($dom(p + ' .md img')) {
@@ -38,7 +39,7 @@ export const postFancybox = (p:string) => {
           const txt = document.createTextNode(info)
           para.appendChild(txt)
           para.addClass(captionClass)
-          element.insertAfter(para)
+          insertAfter(element, para)
         }
       })
 

package/source/js/_app/page/post.ts

@@ -4,6 +4,7 @@ import { clipBoard, showtip } from '../globals/tools'
 import { BODY } from '../globals/globalVars'
 import { pageScroll, transition } from '../library/anime'
 import { mediaPlayer } from '../player'
+import { getDisplay, setDisplay, wrapObject } from '../library/proto'
 
 export const postBeauty = () => {
   if (!$dom('.md')) { return }
@@ -57,7 +58,7 @@ export const postBeauty = () => {
   })
 
   $dom.each('.md table', (element) => {
-    element.wrapObject({
+    wrapObject(element, {
       className: 'table-container'
     })
   })
@@ -174,11 +175,11 @@ export const postBeauty = () => {
     element.addEventListener('click', (event) => {
       event.preventDefault()
       const qr = $dom('#qr')
-      if (qr.display() === 'inline-flex') {
+      if (getDisplay(qr) === 'inline-flex') {
         transition(qr, 0)
       } else {
         transition(qr, 1, () => {
-          qr.display('inline-flex')
+          setDisplay(qr, 'inline-flex')
         }) // slideUpBigIn
       }
     })

package/source/js/_app/page/search.ts

@@ -1,12 +1,17 @@
-import { BODY, setSiteSearch, siteSearch } from '../globals/globalVars'
+import { BODY, CONFIG, setSiteSearch, siteSearch } from '../globals/globalVars'
 import { transition } from '../library/anime'
 import { $dom } from '../library/dom'
+import { searchBox, configure, stats, hits, pagination } from 'instantsearch.js/es/widgets'
+import type { HitHighlightResult } from 'instantsearch.js/es/types/results'
+import instantsearch from 'instantsearch.js'
+import algoliasearch from 'algoliasearch/lite'
+import {createChild} from "../library/proto";
 
 export function algoliaSearch (pjax) {
   if (CONFIG.search === null) { return }
 
   if (!siteSearch) {
-    setSiteSearch(BODY.createChild('div', {
+    setSiteSearch(createChild(BODY, 'div', {
       id: 'search',
       innerHTML: '<div class="inner"><div class="header"><span class="icon"><i class="ic i-search"></i></span><div class="search-input-container"></div><span class="close-btn"><i class="ic i-times-circle"></i></span></div><div class="results"><div class="inner"><div id="search-stats"></div><div id="search-hits"></div><div id="search-pagination"></div></div></div></div>'
     }))
@@ -15,8 +20,9 @@ export function algoliaSearch (pjax) {
   const search = instantsearch({
     indexName: CONFIG.search.indexName,
     searchClient: algoliasearch(CONFIG.search.appID, CONFIG.search.apiKey),
+    // TODO 移除弃用函数
     searchFunction (helper) {
-      const searchInput = <HTMLInputElement><unknown>$dom('.search-input')
+      const searchInput = $dom('.search-input') as HTMLInputElement
       if (searchInput.value) {
         helper.search()
       }
@@ -29,11 +35,11 @@ export function algoliaSearch (pjax) {
 
   // Registering Widgets
   search.addWidgets([
-    instantsearch.widgets.configure({
+    configure({
       hitsPerPage: CONFIG.search.hits.per_page || 10
     }),
 
-    instantsearch.widgets.searchBox({
+    searchBox({
       container: '.search-input-container',
       placeholder: LOCAL.search.placeholder,
       // Hide default icons of algolia search
@@ -45,24 +51,24 @@ export function algoliaSearch (pjax) {
       }
     }),
 
-    instantsearch.widgets.stats({
+    stats({
       container: '#search-stats',
       templates: {
         text (data) {
           const stats = LOCAL.search.stats
-            .replace(/\$\{hits}/, data.nbHits)
-            .replace(/\$\{time}/, data.processingTimeMS)
+            .replace(/\$\{hits}/, data.nbHits.toString())
+            .replace(/\$\{time}/, data.processingTimeMS.toString())
           return stats + '<span class="algolia-powered"></span><hr>'
         }
       }
     }),
 
-    instantsearch.widgets.hits({
+    hits({
       container: '#search-hits',
       templates: {
         item (data) {
           const cats = data.categories ? '<span>' + data.categories.join('<i class="ic i-angle-right"></i>') + '</span>' : ''
-          return '<a href="' + CONFIG.root + data.path + '">' + cats + data._highlightResult.title.value + '</a>'
+          return '<a href="' + CONFIG.root + data.path + '">' + cats + (data._highlightResult.title as HitHighlightResult).value + '</a>'
         },
         empty (data) {
           return '<div id="hits-empty">' +
@@ -75,7 +81,7 @@ export function algoliaSearch (pjax) {
       }
     }),
 
-    instantsearch.widgets.pagination({
+    pagination({
       container: '#search-pagination',
       scrollTo: false,
       showFirst: false,

package/source/js/_app/page/tab.ts

@@ -1,5 +1,6 @@
 import { pageScroll } from '../library/anime'
 import { $dom } from '../library/dom'
+import { createChild } from '../library/proto'
 
 export const tabFormat = () => {
   // tab
@@ -29,13 +30,13 @@ export const tabFormat = () => {
 
     let ul = box.child('.nav ul')
     if (!ul) {
-      ul = box.createChild('div', {
+      ul = createChild(box, 'div', {
         className: 'nav',
         innerHTML: '<ul></ul>'
       }).child('ul')
     }
 
-    const li = ul.createChild('li', {
+    const li = createChild(ul, 'li', {
       innerHTML: title
     })
 

package/source/js/_app/pjax/domInit.ts

@@ -15,21 +15,22 @@ import {
 import { Loader } from '../globals/thirdparty'
 import { $dom } from '../library/dom'
 import { mediaPlayer } from '../player'
+import { child, createChild } from '../library/proto'
 
 export default function domInit () {
   $dom.each('.overview .menu > .item', (el) => {
-    siteNav.child('.menu').appendChild(el.cloneNode(true))
+    child(siteNav, '.menu').appendChild(el.cloneNode(true))
   })
 
   loadCat.addEventListener('click', Loader.vanish)
   menuToggle.addEventListener('click', sideBarToggleHandle)
   $dom('.dimmer').addEventListener('click', sideBarToggleHandle)
 
-  quickBtn.child('.down').addEventListener('click', goToBottomHandle)
-  quickBtn.child('.up').addEventListener('click', backToTopHandle)
+  child(quickBtn, '.down').addEventListener('click', goToBottomHandle)
+  child(quickBtn, '.up').addEventListener('click', backToTopHandle)
 
   if (!toolBtn) {
-    setToolBtn(siteHeader.createChild('div', {
+    setToolBtn(createChild(siteHeader, 'div', {
       id: 'tool',
       innerHTML: '<div class="item player"></div><div class="item contents"><i class="ic i-list-ol"></i></div><div class="item chat"><i class="ic i-comments"></i></div><div class="item back-to-top"><i class="ic i-arrow-up"></i><span>0%</span></div>'
     }))

package/source/js/_app/pjax/refresh.ts

@@ -1,11 +1,11 @@
 import { $dom } from '../library/dom'
 import { cardActive } from '../page/common'
-import { postBeauty } from '../page/post'
 import { pageScroll, transition } from '../library/anime'
 import { vendorCss, vendorJs } from '../library/loadFile'
 import { pjaxScript } from '../library/scriptPjax'
 import { resizeHandle } from '../globals/handles'
 import {
+  CONFIG,
   loadCat,
   menuToggle,
   setLocalHash, setLocalUrl, setOriginTitle,
@@ -53,7 +53,10 @@ export const siteRefresh = (reload) => {
   sideBarTab()
   sidebarTOC()
 
-  postBeauty()
+  import('../page/post').then(({ postBeauty }) => {
+    postBeauty()
+  })
+
   if (__shokax_tabs__) {
     tabFormat()
   }

package/source/js/_app/pjax/siteInit.ts

@@ -1,19 +1,17 @@
 import domInit from './domInit'
 import { pjaxReload, siteRefresh } from './refresh'
 import { cloudflareInit } from '../library/scriptPjax'
-import { algoliaSearch } from '../page/search'
-import { pjax, setPjax } from '../globals/globalVars'
+import { CONFIG, pjax, setPjax } from '../globals/globalVars'
 import { autoDarkmode, themeColorListener } from '../globals/themeColor'
 import { resizeHandle, scrollHandle, visibilityListener } from '../globals/handles'
 import { pagePosition } from '../globals/tools'
 import Pjax from 'theme-shokax-pjax'
 import { initVue } from '../library/vue'
 import { lazyLoad } from 'unlazy'
-import firework from 'mouse-firework'
 
 const siteInit = () => {
-  domInit()
   initVue()
+  domInit()
 
   setPjax(new Pjax({
     selectors: [
@@ -28,7 +26,10 @@ const siteInit = () => {
   }))
 
   CONFIG.quicklink.ignores = LOCAL.ignores
-  quicklink.listen(CONFIG.quicklink)
+  import('quicklink').then(({ listen }) => {
+    listen(CONFIG.quicklink)
+  })
+
   autoDarkmode()
 
   if (__shokax_VL__) {
@@ -36,11 +37,15 @@ const siteInit = () => {
   }
   themeColorListener()
   if (__shokax_search__) {
-    algoliaSearch(pjax)
+    import('../page/search').then(({ algoliaSearch }) => {
+      algoliaSearch(pjax)
+    })
   }
 
   if (__shokax_fireworks__) {
-    firework(CONFIG.fireworks)
+    import('mouse-firework').then((firework) => {
+      firework.default(CONFIG.fireworks)
+    })
   }
   lazyLoad()
 

package/source/js/_app/player.ts

@@ -1,9 +1,10 @@
-import { originTitle } from './globals/globalVars'
+import { CONFIG, originTitle } from './globals/globalVars'
 import { showtip } from './globals/tools'
 import { pageScroll } from './library/anime'
 import { $dom } from './library/dom'
 import { $storage } from './library/storage'
 import { tabFormat } from './page/tab'
+import { createChild, getLeft, getWidth, setDisplay, setWidth } from './library/proto'
 
 let NOWPLAYING = null
 
@@ -16,7 +17,7 @@ export const mediaPlayer = (t, config?) => {
       t.player.options.btns.forEach((item) => {
         if (buttons.el[item]) { return }
 
-        buttons.el[item] = t.createChild('div', {
+        buttons.el[item] = createChild(t, 'div', {
           className: item + ' btn',
           onclick (event) {
             t.player.fetch().then(() => {
@@ -64,7 +65,7 @@ export const mediaPlayer = (t, config?) => {
 
         opt.className = item + opt.className + ' btn'
 
-        that.btns[item] = that.el.createChild('div', opt)
+        that.btns[item] = createChild(that.el, 'div', opt)
       })
 
       that.btns.volume.bar = that.btns.volume.child('.bar')
@@ -130,10 +131,10 @@ export const mediaPlayer = (t, config?) => {
     },
     update (percent) {
       controller.btns.volume.className = 'volume ' + (!source.muted && percent > 0 ? 'on' : 'off') + ' btn'
-      controller.btns.volume.bar.changeOrGetWidth(Math.floor(percent * 100) + '%')
+      setWidth(controller.btns.volume.bar, Math.floor(percent * 100) + '%')
     },
     percent (e, el) {
-      let percentage = ((e.clientX || e.changedTouches[0].clientX) - el.left()) / el.changeOrGetWidth()
+      let percentage = ((e.clientX || e.changedTouches[0].clientX) - getLeft(el)) / getWidth(el)
       percentage = Math.max(percentage, 0)
       return Math.min(percentage, 1)
     }
@@ -151,13 +152,13 @@ export const mediaPlayer = (t, config?) => {
           progress.el.remove()
         }
 
-        progress.el = current.createChild('div', {
+        progress.el = createChild(current, 'div', {
           className: 'progress'
         });
 
         (progress.el as HTMLElement).setAttribute('data-dtime', utils.secondToTime(0))
 
-        progress.bar = progress.el.createChild('div', {
+        progress.bar = createChild(progress.el, 'div', {
           className: 'bar'
         })
 
@@ -169,14 +170,14 @@ export const mediaPlayer = (t, config?) => {
       }
     },
     update (percent) {
-      progress.bar.changeOrGetWidth(Math.floor(percent * 100) + '%');
+      setWidth(progress.bar, Math.floor(percent * 100) + '%');
       (progress.el as HTMLElement).setAttribute('data-ptime', utils.secondToTime(percent * source.duration))
     },
     seeking (type) {
       if (type) { progress.el.addClass('seeking') } else { progress.el.removeClass('seeking') }
     },
     percent (e, el) {
-      let percentage = ((e.clientX || e.changedTouches[0].clientX) - el.left()) / el.changeOrGetWidth()
+      let percentage = ((e.clientX || e.changedTouches[0].clientX) - getLeft(el)) / getWidth(el)
       percentage = Math.max(percentage, 0)
       return Math.min(percentage, 1)
     },
@@ -258,7 +259,7 @@ export const mediaPlayer = (t, config?) => {
         const id = 'list-' + t.player._id + '-' + item.group
         let tab = $dom('#' + id)
         if (!tab) {
-          tab = el.createChild('div', {
+          tab = createChild(el, 'div', {
             id,
             className: t.player.group ? 'tab' : '',
             innerHTML: '<ol></ol>'
@@ -269,7 +270,7 @@ export const mediaPlayer = (t, config?) => {
           }
         }
 
-        item.el = tab.child('ol').createChild('li', {
+        item.el = createChild(tab.child('ol'), 'li', {
           title: item.name + ' - ' + item.artist,
           innerHTML: '<span class="info"><span>' + item.name + '</span><span>' + item.artist + '</span></span>',
           onclick (event) {
@@ -329,7 +330,7 @@ export const mediaPlayer = (t, config?) => {
     create () {
       if (this.el) { return }
 
-      this.el = t.createChild('div', {
+      this.el = createChild(t, 'div', {
         className: 'player-info',
         innerHTML: (t.player.options.type === 'audio' ? '<div class="preview"></div>' : '') + '<div class="controller"></div><div class="playlist"></div>'
       }, 'after')
@@ -469,7 +470,7 @@ export const mediaPlayer = (t, config?) => {
         this.pause()
       }
       for (const el in buttons.el) {
-        buttons.el[el].display(d)
+        setDisplay(buttons.el[el], d)
       }
       return this
     },
@@ -662,7 +663,7 @@ export const mediaPlayer = (t, config?) => {
           lrc += '<p' + (index === 0 ? ' class="current"' : '') + '>' + line[1] + '</p>'
         })
 
-        this.el = box.createChild('div', {
+        this.el = createChild(box, 'div', {
           className: 'inner',
           innerHTML: lrc
         }, 'replace')
@@ -783,7 +784,7 @@ export const mediaPlayer = (t, config?) => {
     buttons.create()
 
     // 初始化audio or video
-    source = t.createChild(t.player.options.type, events)
+    source = createChild(t, t.player.options.type, events)
     // 初始化播放列表、预览、控件按钮等
     info.create()
 

package/scripts/filters/locals.d.ts

@@ -1 +0,0 @@
-declare const fmtNum: (num: any) => any;