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

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

@@ -0,0 +1,41 @@
+import { getScript } from './scriptPjax'
+
+/**
+ * 用途是根据不同的资源名称和类型生成相应的资源 URL。
+ */
+const assetUrl = (asset: string, type: string): string => {
+  const str = CONFIG[asset][type]
+  if (str.includes('http')) {
+    return str
+  }
+  if (str.includes('gh') || str.includes('combine')) {
+    return `https://cdn.jsdelivr.net/${str}`
+  }
+  if (str.includes('npm')) {
+    return `https://cdn.jsdelivr.net/${str}`
+  }
+  return `/${str}`
+}
+
+export const vendorJs = (type: string, callback?: Function, condition?: string) => {
+  if (LOCAL[type]) {
+    getScript(assetUrl('js', type), callback || function () {
+      window[type] = true
+    }, condition || window[type])
+  }
+}
+
+export const vendorCss = (type: string, condition?: string): void => {
+  if (window['css' + type]) {
+    return
+  }
+
+  if (LOCAL[type]) {
+    document.head.createChild('link', {
+      rel: 'stylesheet',
+      href: assetUrl('css', type)
+    })
+
+    window['css' + type] = true
+  }
+}

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

@@ -0,0 +1,143 @@
+import { $dom } from './dom'
+
+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选择器的子节点
+   */
+    child (selector: string): HTMLElement {
+      return $dom(selector, this)
+    },
+    /**
+   * 找到此节点所有符合selector选择器的子节点
+   */
+    find (selector: string): NodeListOf<HTMLElement> {
+      return $dom.all(selector, this)
+    },
+    /**
+     * 这个方法接受三个参数：
+     * type 表示操作类型（'add'、'remove'、'toggle'），
+     * className 是一个或多个要操作的类名，
+     * display 是一个可选的布尔值，用于在执行切换操作时指定类名是否应显示或隐藏。
+     * 该方法会根据操作类型执行相应的类名操作。
+   */
+    _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 元素本身，以支持链式调用。
+     */
+    addClass (className: string): EventTarget {
+      this._class('add', className)
+      return this
+    },
+    /**
+     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'remove'，然后执行移除类名的操作。
+     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     */
+    removeClass (className: string): EventTarget {
+      this._class('remove', className)
+      return this
+    },
+    /**
+     * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'toggle'，然后执行切换类名的操作。
+     * 如果提供了 display 参数，它将根据布尔值决定是否显示或隐藏类名。
+     * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
+     */
+    toggleClass (className: string, display?: boolean): EventTarget {
+      this._class('toggle', className, display)
+      return this
+    },
+    /**
+     * 这个方法返回一个布尔值，表示元素是否包含指定的类名。
+     */
+    hasClass (className: string): boolean {
+      return this.classList.contains(className)
+    }
+  })
+}

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

@@ -0,0 +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)
+}

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

@@ -0,0 +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)
+  }
+}

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

@@ -0,0 +1,60 @@
+import { $storage } from './storage'
+import { transition } from './anime'
+import { $dom } from './dom'
+import { BODY } from '../globals/globalVars'
+import { changeTheme } from '../globals/themeColor'
+
+export function initVue () {
+  Vue.createApp(
+    {
+      data () {
+        return {
+
+        }
+      },
+      methods: {
+        changeThemeByBtn () {
+          let c: { (): void; (): void; (): void }
+          const btn = $dom('.theme').child('.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 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')
+          })
+        }
+      }
+    }
+  ).mount('#rightNav')
+}

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

@@ -0,0 +1,42 @@
+import { $dom } from '../library/dom'
+
+export const cardActive = () => {
+  if (!$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.each('.index.wrap article.item, .index.wrap section.item', (article) => {
+    io.observe(article)
+  })
+
+  $dom('.index.wrap .item:first-child').addClass('show')
+
+  $dom.each('.cards .item', (element) => {
+    ['mouseenter', 'touchstart'].forEach((item) => {
+      element.addEventListener(item, () => {
+        if ($dom('.cards .item.active')) {
+          $dom('.cards .item.active').removeClass('active')
+        }
+        element.addClass('active')
+      }, { passive: true })
+    });
+    ['mouseleave'].forEach((item) => {
+      element.addEventListener(item, () => {
+        element.removeClass('active')
+      }, { passive: true })
+    })
+  })
+}

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

@@ -0,0 +1,70 @@
+import { $dom } from '../library/dom'
+import { vendorCss, vendorJs } from '../library/loadFile'
+
+export const postFancybox = (p:string) => {
+  if ($dom(p + ' .md img')) {
+    vendorCss('fancybox')
+    vendorCss('justifiedGallery')
+    vendorJs('fancybox', () => {
+      const q = jQuery.noConflict()
+
+      $dom.each(p + ' p.gallery', (element) => {
+        const box = document.createElement('div')
+        box.className = 'gallery'
+        box.setAttribute('data-height', String(element.getAttribute('data-height') || 220))
+
+        box.innerHTML = element.innerHTML.replace(/<br>/g, '')
+
+        element.parentNode.insertBefore(box, element)
+        element.remove()
+      })
+
+      $dom.each(p + ' .md img:not(.emoji):not(.vemoji)', (element) => {
+        const $image = q(element)
+        const imageLink = $image.attr('data-src') || $image.attr('src') // 替换
+        const $imageWrapLink = $image.wrap('<a class="fancybox" href="' + imageLink + '" itemscope itemtype="https://schema.org/ImageObject" itemprop="url"></a>').parent('a')
+        let info; let captionClass = 'image-info'
+        if (!$image.is('a img')) {
+          $image.data('safe-src', imageLink)
+          if (!$image.is('.gallery img')) {
+            $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default')
+          } else {
+            captionClass = 'jg-caption'
+          }
+        }
+        if ((info = element.getAttribute('title'))) {
+          $imageWrapLink.attr('data-caption', info)
+          const para = document.createElement('span')
+          const txt = document.createTextNode(info)
+          para.appendChild(txt)
+          para.addClass(captionClass)
+          element.insertAfter(para)
+        }
+      })
+
+      $dom.each(p + ' div.gallery', (el, i) => {
+        // @ts-ignore
+        q(el).justifiedGallery({
+          rowHeight: q(el).data('height') || 120,
+          rel: 'gallery-' + i
+        }).on('jg.complete', function () {
+          q(this).find('a').each((k, ele) => {
+            ele.setAttribute('data-fancybox', 'gallery-' + i)
+          })
+        })
+      })
+
+      q.fancybox.defaults.hash = false
+      q(p + ' .fancybox').fancybox({
+        loop: true,
+        // @ts-ignore
+        helpers: {
+          overlay: {
+            locked: false
+          }
+        }
+      })
+      // @ts-ignore
+    }, window.jQuery)
+  }
+}