hexo-theme-shokax 0.4.5 → 0.4.6-beta1

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

@@ -1,137 +1,137 @@
-import { $dom } from './dom'
-
-export const insertAfter = function (el: Element, 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: Element, 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.parentNode.insertBefore(box, parent)
-  parent.parentNode.removeChild(parent)
-  box.appendChild(parent)
-}
-
-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
-}
-
-export default function initProto () {
-  Object.assign(HTMLElement.prototype, {
-    /**
-   * 找到此节点所有符合selector选择器的子节点
-     * @deprecated Will be removed in the v0.5
-   */
-    find (selector: string): NodeListOf<HTMLElement> {
-      return $dom.all(selector, this)
-    },
-    /**
-     * 这个方法接受三个参数：
-     * type 表示操作类型（'add'、'remove'、'toggle'），
-     * className 是一个或多个要操作的类名，
-     * display 是一个可选的布尔值，用于在执行切换操作时指定类名是否应显示或隐藏。
-     * 该方法会根据操作类型执行相应的类名操作。
-     * @deprecated Will be removed in the v0.5
-   */
-    _class (type: string, className: string, display?: boolean): void {
-      const classNames = className.indexOf(' ') ? className.split(' ') : [className]
-      classNames.forEach((name) => {
-        if (type === 'toggle') {
-          this.classList.toggle(name, display)
-        } else {
-          this.classList[type](name)
-        }
-      })
-    },
-    /**
-     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'add'，然后执行添加类名的操作。
-     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
-     * @deprecated Will be removed in the v0.5
-     */
-    addClass (className: string): EventTarget {
-      this._class('add', className)
-      return this
-    },
-    /**
-     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'remove'，然后执行移除类名的操作。
-     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
-     * @deprecated Will be removed in the v0.5
-     */
-    removeClass (className: string): EventTarget {
-      this._class('remove', className)
-      return this
-    },
-    /**
-     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'toggle'，然后执行切换类名的操作。
-     * 如果提供了 display 参数，它将根据布尔值决定是否显示或隐藏类名。
-     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
-     * @deprecated Will be removed in the v0.5
-     */
-    toggleClass (className: string, display?: boolean): EventTarget {
-      this._class('toggle', className, display)
-      return this
-    },
-    /**
-     * 这个方法返回一个布尔值，表示元素是否包含指定的类名。
-     * @deprecated Will be removed in the v0.5
-     */
-    hasClass (className: string): boolean {
-      return this.classList.contains(className)
-    }
-  })
-}
+import { $dom } from './dom'
+
+export const insertAfter = function (el: Element, 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: Element, 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.parentNode.insertBefore(box, parent)
+  parent.parentNode.removeChild(parent)
+  box.appendChild(parent)
+}
+
+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
+}
+
+export default function initProto () {
+  Object.assign(HTMLElement.prototype, {
+    /**
+   * 找到此节点所有符合selector选择器的子节点
+     * @deprecated Will be removed in the v0.5
+   */
+    find (selector: string): NodeListOf<HTMLElement> {
+      return $dom.all(selector, this)
+    },
+    /**
+     * 这个方法接受三个参数：
+     * type 表示操作类型（'add'、'remove'、'toggle'），
+     * className 是一个或多个要操作的类名，
+     * display 是一个可选的布尔值，用于在执行切换操作时指定类名是否应显示或隐藏。
+     * 该方法会根据操作类型执行相应的类名操作。
+     * @deprecated Will be removed in the v0.5
+   */
+    _class (type: string, className: string, display?: boolean): void {
+      const classNames = className.indexOf(' ') ? className.split(' ') : [className]
+      classNames.forEach((name) => {
+        if (type === 'toggle') {
+          this.classList.toggle(name, display)
+        } else {
+          this.classList[type](name)
+        }
+      })
+    },
+    /**
+     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'add'，然后执行添加类名的操作。
+     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     * @deprecated Will be removed in the v0.5
+     */
+    addClass (className: string): EventTarget {
+      this._class('add', className)
+      return this
+    },
+    /**
+     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'remove'，然后执行移除类名的操作。
+     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     * @deprecated Will be removed in the v0.5
+     */
+    removeClass (className: string): EventTarget {
+      this._class('remove', className)
+      return this
+    },
+    /**
+     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'toggle'，然后执行切换类名的操作。
+     * 如果提供了 display 参数，它将根据布尔值决定是否显示或隐藏类名。
+     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     * @deprecated Will be removed in the v0.5
+     */
+    toggleClass (className: string, display?: boolean): EventTarget {
+      this._class('toggle', className, display)
+      return this
+    },
+    /**
+     * 这个方法返回一个布尔值，表示元素是否包含指定的类名。
+     * @deprecated Will be removed in the v0.5
+     */
+    hasClass (className: string): boolean {
+      return this.classList.contains(className)
+    }
+  })
+}

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

@@ -1,72 +1,72 @@
-// rocket-loader & Auto minify(cloudflare) 补丁
-// cloudflare 的上述功能会导致DOMContentLoaded事件无法触发，此补丁会将DOMContentLoaded重定向为load事件
-export function cloudflareInit () {
-  let inCloudFlare = true
-  window.addEventListener('DOMContentLoaded', function () {
-    inCloudFlare = false
-  })
-
-  if (document.readyState === 'loading') {
-    window.addEventListener('load', function () {
-      if (inCloudFlare) {
-        window.dispatchEvent(new Event('DOMContentLoaded'))
-        console.log('%c ☁️cloudflare patch ' + '%c running(rocket & minify)', 'color: white; background: #ff8c00; padding: 5px 3px;', 'padding: 4px;border:1px solid #ff8c00')
-      }
-    })
-  }
-}
-
-export const getScript = (url: string, callback?: Function, condition?: string): void => {
-  // url: 脚本文件的URL地址
-  // callback: 当脚本加载完成时要执行的回调函数
-  // condition: 可选的条件参数，如果存在，则执行callback
-  if (condition) {
-    // 如果条件存在，则执行回调函数
-    callback()
-  } else {
-    let script = document.createElement('script')
-
-    // @ts-ignore
-    script.onload = function (_, isAbort: boolean) {
-      // _: 事件对象
-      // isAbort: 是否中止
-      // @ts-ignore
-      if (isAbort || !script.readyState) {
-        console.log('abort!')
-        script.onload = null
-        script = undefined
-        if (!isAbort && callback) setTimeout(callback, 0)
-      }
-    }
-    script.src = url
-    document.head.appendChild(script)
-  }
-}
-
-export const pjaxScript = (element: HTMLScriptElement) => {
-  const { text, parentNode, id, className, type, src, dataset } = element
-  const code = text || element.textContent || element.innerHTML || ''
-  parentNode.removeChild(element)
-  const script = document.createElement('script')
-  if (id) {
-    script.id = id
-  }
-  if (className) {
-    script.className = className
-  }
-  if (type) {
-    script.type = type
-  }
-  if (src) {
-    // Force synchronous loading of peripheral JS.
-    script.src = src
-    script.async = false
-  }
-  if (dataset.pjax !== undefined) {
-    script.dataset.pjax = ''
-  }
-  if (code !== '') {
-    script.appendChild(document.createTextNode(code))
-  }
-  parentNode.appendChild(script)
-}
+// rocket-loader & Auto minify(cloudflare) 补丁
+// cloudflare 的上述功能会导致DOMContentLoaded事件无法触发，此补丁会将DOMContentLoaded重定向为load事件
+export function cloudflareInit () {
+  let inCloudFlare = true
+  window.addEventListener('DOMContentLoaded', function () {
+    inCloudFlare = false
+  })
+
+  if (document.readyState === 'loading') {
+    window.addEventListener('load', function () {
+      if (inCloudFlare) {
+        window.dispatchEvent(new Event('DOMContentLoaded'))
+        console.log('%c ☁️cloudflare patch ' + '%c running(rocket & minify)', 'color: white; background: #ff8c00; padding: 5px 3px;', 'padding: 4px;border:1px solid #ff8c00')
+      }
+    })
+  }
+}
+
+export const getScript = (url: string, callback?: Function, condition?: string): void => {
+  // url: 脚本文件的URL地址
+  // callback: 当脚本加载完成时要执行的回调函数
+  // condition: 可选的条件参数，如果存在，则执行callback
+  if (condition) {
+    // 如果条件存在，则执行回调函数
+    callback()
+  } else {
+    let script = document.createElement('script')
+
+    // @ts-ignore
+    script.onload = function (_, isAbort: boolean) {
+      // _: 事件对象
+      // isAbort: 是否中止
+      // @ts-ignore
+      if (isAbort || !script.readyState) {
+        console.log('abort!')
+        script.onload = null
+        script = undefined
+        if (!isAbort && callback) setTimeout(callback, 0)
+      }
+    }
+    script.src = url
+    document.head.appendChild(script)
+  }
+}
+
+export const pjaxScript = (element: HTMLScriptElement) => {
+  const { text, parentNode, id, className, type, src, dataset } = element
+  const code = text || element.textContent || element.innerHTML || ''
+  parentNode.removeChild(element)
+  const script = document.createElement('script')
+  if (id) {
+    script.id = id
+  }
+  if (className) {
+    script.className = className
+  }
+  if (type) {
+    script.type = type
+  }
+  if (src) {
+    // Force synchronous loading of peripheral JS.
+    script.src = src
+    script.async = false
+  }
+  if (dataset.pjax !== undefined) {
+    script.dataset.pjax = ''
+  }
+  if (code !== '') {
+    script.appendChild(document.createTextNode(code))
+  }
+  parentNode.appendChild(script)
+}

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

@@ -1,12 +1,12 @@
-// Html5LocalStorage的一个API
-export const $storage = {
-  set (key: string, value: string): void {
-    localStorage.setItem(key, value)
-  },
-  get (key: string): string {
-    return localStorage.getItem(key)
-  },
-  del (key: string): void {
-    localStorage.removeItem(key)
-  }
-}
+// Html5LocalStorage的一个API
+export const $storage = {
+  set (key: string, value: string): void {
+    localStorage.setItem(key, value)
+  },
+  get (key: string): string {
+    return localStorage.getItem(key)
+  },
+  del (key: string): void {
+    localStorage.removeItem(key)
+  }
+}

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initVue = void 0;
+const storage_1 = require("./storage");
+const anime_1 = require("./anime");
+const dom_1 = require("./dom");
+const globalVars_1 = require("../globals/globalVars");
+const themeColor_1 = require("../globals/themeColor");
+const proto_1 = require("./proto");
+function initVue() {
+    function changeThemeByBtn() {
+        let c;
+        const btn = (0, proto_1.child)((0, dom_1.$dom)('.theme'), '.ic');
+        const neko = (0, proto_1.createChild)(globalVars_1.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 = () => {
+            (0, anime_1.transition)(neko, {
+                // @ts-ignore
+                delay: 2500,
+                opacity: 0
+            }, () => {
+                globalVars_1.BODY.removeChild(neko);
+            });
+        };
+        if (btn.hasClass('i-sun')) {
+            c = () => {
+                neko.addClass('dark');
+                (0, themeColor_1.changeTheme)('dark');
+                storage_1.$storage.set('theme', 'dark');
+                hideNeko();
+            };
+        }
+        else {
+            neko.addClass('dark');
+            c = () => {
+                neko.removeClass('dark');
+                (0, themeColor_1.changeTheme)();
+                storage_1.$storage.set('theme', 'light');
+                hideNeko();
+            };
+        }
+        (0, anime_1.transition)(neko, 1, () => {
+            setTimeout(c, 210);
+        }, () => {
+            (0, proto_1.setDisplay)(neko, 'block');
+        });
+    }
+    (0, proto_1.child)((0, dom_1.$dom)('#rightNav'), '.theme .ic').addEventListener('click', changeThemeByBtn);
+}
+exports.initVue = initVue;

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

@@ -1,49 +1,49 @@
-import { $storage } from './storage'
-import { transition } from './anime'
-import { BODY } from '../globals/globalVars'
-import { changeTheme } from '../globals/themeColor'
-import { createChild, setDisplay } from './proto'
-export function initVue () {
-  function changeThemeByBtn () {
-    let c: { (): void; (): void; (): void }
-    const btn = document.querySelector('.theme').querySelector('.ic')
-
-    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)
-      })
-    }
-
-    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)
-    }, () => {
-      setDisplay(neko, 'block')
-    })
-  }
-  document.getElementById('rightNav').querySelector('.theme .ic').addEventListener('click', changeThemeByBtn)
-}
+import { $storage } from './storage'
+import { transition } from './anime'
+import { BODY } from '../globals/globalVars'
+import { changeTheme } from '../globals/themeColor'
+import { createChild, setDisplay } from './proto'
+export function initVue () {
+  function changeThemeByBtn () {
+    let c: { (): void; (): void; (): void }
+    const btn = document.querySelector('.theme').querySelector('.ic')
+
+    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)
+      })
+    }
+
+    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)
+    }, () => {
+      setDisplay(neko, 'block')
+    })
+  }
+  document.getElementById('rightNav').querySelector('.theme .ic').addEventListener('click', changeThemeByBtn)
+}

package/source/js/_app/page/common.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardActive = void 0;
+const dom_1 = require("../library/dom");
+const cardActive = () => {
+    if (!(0, dom_1.$dom)('.index.wrap')) {
+        return;
+    }
+    const io = new IntersectionObserver((entries) => {
+        entries.forEach((article) => {
+            if (article.target.hasClass('show')) {
+                io.unobserve(article.target);
+            }
+            else {
+                if (article.isIntersecting || article.intersectionRatio > 0) {
+                    article.target.addClass('show');
+                    io.unobserve(article.target);
+                }
+            }
+        });
+    }, {
+        root: null,
+        threshold: [0.3]
+    });
+    dom_1.$dom.each('.index.wrap article.item, .index.wrap section.item', (article) => {
+        io.observe(article);
+    });
+    (0, dom_1.$dom)('.index.wrap .item:first-child').addClass('show');
+    dom_1.$dom.each('.cards .item', (element) => {
+        ['mouseenter', 'touchstart'].forEach((item) => {
+            element.addEventListener(item, () => {
+                if ((0, dom_1.$dom)('.cards .item.active')) {
+                    (0, dom_1.$dom)('.cards .item.active').removeClass('active');
+                }
+                element.addClass('active');
+            }, { passive: true });
+        });
+        ['mouseleave'].forEach((item) => {
+            element.addEventListener(item, () => {
+                element.removeClass('active');
+            }, { passive: true });
+        });
+    });
+};
+exports.cardActive = cardActive;