hexo-theme-shokax 0.4.24 → 0.5.0-beta1

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

@@ -1,9 +1,7 @@
-import { $dom } from '../library/dom'
 import { postFancybox } from './fancybox'
 import { clipBoard, showtip } from '../globals/tools'
 import { CONFIG, BODY } from '../globals/globalVars'
 import { pageScroll, transition } from '../library/anime'
-import { mediaPlayer } from '../player'
 import { getDisplay, setDisplay, wrapObject } from '../library/proto'
 
 export const postBeauty = () => {
@@ -43,31 +41,31 @@ export const postBeauty = () => {
     }
   }
 
-  $dom.each('li ruby', (element) => {
-    let parent = element.parentNode
+  document.querySelectorAll('li ruby').forEach((element) => {
+    let parent = element.parentNode as HTMLElement
     // @ts-ignore
     if (element.parentNode.tagName !== 'LI') {
-      parent = element.parentNode.parentNode
+      parent = element.parentNode.parentNode as HTMLElement
     }
-    parent.addClass('ruby')
+    parent.classList.add('ruby')
   })
 
-  $dom.each('ol[start]', (element) => {
+  document.querySelectorAll('ol[start]').forEach((element) => {
     // @ts-ignore
     element.style.counterReset = 'counter ' + parseInt(element.getAttribute('start') - 1)
   })
 
-  $dom.each('.md table', (element) => {
+  document.querySelectorAll<HTMLElement>('.md table').forEach((element) => {
     wrapObject(element, {
       className: 'table-container'
     })
   })
 
-  $dom.each('.highlight > .table-container', (element) => {
+  document.querySelectorAll('.highlight > .table-container').forEach((element) => {
     element.className = 'code-container'
   })
 
-  $dom.each('figure.highlight', (element) => {
+  document.querySelectorAll<HTMLElement>('figure.highlight').forEach((element) => {
     const code_container = element.querySelector('.code-container') as HTMLElement
     const caption = element.querySelector('figcaption')
 
@@ -80,7 +78,7 @@ export const postBeauty = () => {
       copyBtn.addEventListener('click', (event) => {
         const target = <HTMLElement>event.currentTarget
         let comma = ''; let code = ''
-        code_container.find('pre').forEach((line) => {
+        code_container.querySelectorAll('pre').forEach((line) => {
           code += comma + line.innerText
           comma = '\n'
         })
@@ -101,61 +99,61 @@ export const postBeauty = () => {
     const breakBtn = element.querySelector('.breakline-btn')
     breakBtn.addEventListener('click', (event) => {
       const target = event.currentTarget as HTMLElement
-      if (element.hasClass('breakline')) {
-        element.removeClass('breakline')
+      if (element.classList.contains('breakline')) {
+        element.classList.remove('breakline')
         target.querySelector('.ic').className = 'ic i-align-left'
       } else {
-        element.addClass('breakline')
+        element.classList.add('breakline')
         target.querySelector('.ic').className = 'ic i-align-justify'
       }
     })
 
     const fullscreenBtn = element.querySelector('.fullscreen-btn')
     const removeFullscreen = () => {
-      element.removeClass('fullscreen')
+      element.classList.remove('fullscreen')
       element.scrollTop = 0
-      BODY.removeClass('fullscreen')
+      BODY.classList.remove('fullscreen')
       fullscreenBtn.querySelector('.ic').className = 'ic i-expand'
     }
     const fullscreenHandle = () => {
-      if (element.hasClass('fullscreen')) {
+      if (element.classList.contains('fullscreen')) {
         removeFullscreen()
-        if (code_container && code_container.find('tr').length > 15) {
+        if (code_container && code_container.querySelectorAll('tr').length > 15) {
           const showBtn = code_container.querySelector('.show-btn')
           code_container.style.maxHeight = '300px'
-          showBtn.removeClass('open')
+          showBtn.classList.remove('open')
         }
         pageScroll(element)
       } else {
-        element.addClass('fullscreen')
-        BODY.addClass('fullscreen')
+        element.classList.add('fullscreen')
+        BODY.classList.add('fullscreen')
         fullscreenBtn.querySelector('.ic').className = 'ic i-compress'
-        if (code_container && code_container.find('tr').length > 15) {
+        if (code_container && code_container.querySelectorAll('tr').length > 15) {
           const showBtn = code_container.querySelector('.show-btn')
           code_container.style.maxHeight = ''
-          showBtn.addClass('open')
+          showBtn.classList.add('open')
         }
       }
     }
     fullscreenBtn.addEventListener('click', fullscreenHandle)
     caption && caption.addEventListener('click', fullscreenHandle)
 
-    if (code_container && code_container.find('tr').length > 15) {
+    if (code_container && code_container.querySelectorAll('tr').length > 15) {
       code_container.style.maxHeight = '300px'
       code_container.insertAdjacentHTML('beforeend', '<div class="show-btn"><i class="ic i-angle-down"></i></div>')
       const showBtn = code_container.querySelector('.show-btn')
 
       const hideCode = () => {
         code_container.style.maxHeight = '300px'
-        showBtn.removeClass('open')
+        showBtn.classList.remove('open')
       }
       const showCode = () => {
         code_container.style.maxHeight = ''
-        showBtn.addClass('open')
+        showBtn.classList.add('open')
       }
 
       showBtn.addEventListener('click', () => {
-        if (showBtn.hasClass('open')) {
+        if (showBtn.classList.contains('open')) {
           removeFullscreen()
           hideCode()
           pageScroll(code_container)
@@ -166,12 +164,12 @@ export const postBeauty = () => {
     }
   })
 
-  $dom.each('pre.mermaid > svg', (element) => {
+  document.querySelectorAll('pre.mermaid > svg').forEach((element) => {
     const temp = <SVGAElement><unknown>element
     temp.style.maxWidth = ''
   })
 
-  $dom.each('.reward button', (element) => {
+  document.querySelectorAll('.reward button').forEach((element) => {
     element.addEventListener('click', (event) => {
       event.preventDefault()
       const qr = document.getElementById('qr')
@@ -187,60 +185,50 @@ export const postBeauty = () => {
 
   // quiz
   if (__shokax_quiz__) {
-    $dom.each('.quiz > ul.options li', (element) => {
+    document.querySelectorAll('.quiz > ul.options li').forEach((element) => {
       element.addEventListener('click', () => {
-        if (element.hasClass('correct')) {
-          element.toggleClass('right')
-          element.parentNode.parentNode.addClass('show')
+        if (element.classList.contains('correct')) {
+          element.classList.toggle('right');
+          (element.parentNode.parentNode as HTMLElement).classList.add('show')
         } else {
-          element.toggleClass('wrong')
+          element.classList.toggle('wrong')
         }
       })
     })
 
-    $dom.each('.quiz > p', (element) => {
+    document.querySelectorAll('.quiz > p').forEach((element) => {
       element.addEventListener('click', () => {
-        element.parentNode.toggleClass('show')
+        (element.parentNode as HTMLElement).classList.toggle('show')
       })
     })
 
-    $dom.each('.quiz > p:first-child', (element) => {
-      const quiz = element.parentNode
+    document.querySelectorAll('.quiz > p:first-child').forEach((element) => {
+      const quiz = element.parentNode as HTMLElement
       let type = 'choice'
-      if (quiz.hasClass('true') || quiz.hasClass('false')) {
+      if (quiz.classList.contains('true') || quiz.classList.contains('false')) {
         type = 'true_false'
       }
-      if (quiz.hasClass('multi')) {
+      if (quiz.classList.contains('multi')) {
         type = 'multiple'
       }
-      if (quiz.hasClass('fill')) {
+      if (quiz.classList.contains('fill')) {
         type = 'gap_fill'
       }
-      if (quiz.hasClass('essay')) {
+      if (quiz.classList.contains('essay')) {
         type = 'essay'
       }
       element.setAttribute('data-type', LOCAL.quiz[type])
     })
 
-    $dom.each('.quiz .mistake', (element) => {
+    document.querySelectorAll('.quiz .mistake').forEach((element) => {
       element.setAttribute('data-type', LOCAL.quiz.mistake)
     })
   }
 
-  $dom.each('div.tags a', (element) => {
+  document.querySelectorAll('div.tags a').forEach((element) => {
     element.className = ['primary', 'success', 'info', 'warning', 'danger'][Math.floor(Math.random() * 5)]
   })
 
-  if (__shokax_player__) {
-    $dom.each('.md div.player', (element) => {
-      mediaPlayer(element, {
-        type: element.getAttribute('data-type'),
-        mode: 'order',
-        btns: []
-      }).player.load(JSON.parse(element.getAttribute('data-src'))).fetch()
-    })
-  }
-
   const angleDown = document.querySelectorAll('.show-btn .i-angle-down')
   if (angleDown.length) {
     const io = new IntersectionObserver((entries) => {

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

@@ -5,7 +5,7 @@ import type { HitHighlightResult } from 'instantsearch.js/es/types/results'
 import instantsearch from 'instantsearch.js'
 import { liteClient as algoliasearch } from 'algoliasearch/lite'
 
-export function algoliaSearch (pjax) {
+export function algoliaSearch () {
   const search = instantsearch({
     indexName: CONFIG.search.indexName,
     searchClient: algoliasearch(CONFIG.search.appID, CONFIG.search.apiKey),
@@ -18,10 +18,6 @@ export function algoliaSearch (pjax) {
     }
   })
 
-  search.on('render', () => {
-    pjax.refresh(document.getElementById("search-hits"))
-  })
-
   // Registering Widgets
   search.addWidgets([
     configure({
@@ -105,7 +101,6 @@ export function algoliaSearch (pjax) {
     }
   })
   document.querySelector('.close-btn').addEventListener('click', onPopupClose)
-  window.addEventListener('pjax:success', onPopupClose)
   window.addEventListener('keyup', (event) => {
     if (event.key === 'Escape') {
       onPopupClose()

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

@@ -1,11 +1,10 @@
 import { pageScroll } from '../library/anime'
-import { $dom } from '../library/dom'
 import { createChild } from '../library/proto'
 
 export const tabFormat = () => {
   // tab
   let first_tab:boolean
-  $dom.each('div.tab', (element) => {
+  document.querySelectorAll('div.tab').forEach((element) => {
     if (element.getAttribute('data-ready')) { return }
 
     const id = element.getAttribute('data-id')
@@ -41,17 +40,17 @@ export const tabFormat = () => {
     })
 
     if (first_tab) {
-      li.addClass('active')
-      element.addClass('active')
+      li.classList.add('active')
+      element.classList.add('active')
     }
 
     li.addEventListener('click', (event) => {
-      const target = event.currentTarget
-      box.find('.active').forEach((el) => {
-        el.removeClass('active')
+      const target = event.currentTarget as HTMLElement
+      box.querySelectorAll('.active').forEach((el) => {
+        el.classList.remove('active')
       })
-      element.addClass('active')
-      target.addClass('active')
+      element.classList.add('active')
+      target.classList.add('active')
     })
 
     box.appendChild(element)

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

@@ -5,20 +5,17 @@ import {
   loadCat,
   menuToggle,
   quickBtn, setBackToTop, setGoToComment, setShowContents, setToolBtn,
-  setToolPlayer,
   showContents,
   siteHeader,
   siteNav,
-  toolBtn,
-  toolPlayer
+  toolBtn
 } from '../globals/globalVars'
 import { Loader } from '../globals/thirdparty'
-import { $dom } from '../library/dom'
-import { mediaPlayer } from '../player'
 import { createChild } from '../library/proto'
+import { initAudioPlayer } from '../player'
 
-export default function domInit () {
-  $dom.each('.overview .menu > .item', (el) => {
+export default async function domInit () {
+  document.querySelectorAll('.overview .menu > .item').forEach((el) => {
     siteNav.querySelector('.menu').appendChild(el.cloneNode(true))
   })
 
@@ -32,11 +29,22 @@ export default function domInit () {
   if (!toolBtn) {
     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>'
+      innerHTML: `<div class="item player">
+                    ${__shokax_player__ ? '<div class="play-pause btn" id="playBtn"></div><div class="music btn btn" id="showBtn"></div>' : ''}
+                  </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>`
     }))
   }
 
-  setToolPlayer(toolBtn.querySelector('.player'))
   setBackToTop(toolBtn.querySelector('.back-to-top'))
   setGoToComment(toolBtn.querySelector('.chat'))
   setShowContents(toolBtn.querySelector('.contents'))
@@ -46,12 +54,9 @@ export default function domInit () {
   showContents.addEventListener('click', sideBarToggleHandle)
 
   if (__shokax_player__) {
-    mediaPlayer(toolPlayer)
-
-    document.querySelector('main').addEventListener('click', () => {
-      toolPlayer.player.mini()
-    })
+    await initAudioPlayer()
   }
+  
 
   const createIntersectionObserver = () => {
     // waves在视口外时停止动画

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

@@ -1,37 +1,13 @@
-import { $dom } from '../library/dom'
 import { cardActive } from '../page/common'
-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,
-  sideBar,
-  toolPlayer
 } from '../globals/globalVars'
-import { pagePosition, positionInit } from '../globals/tools'
+import { positionInit } from '../globals/tools'
 import { menuActive, sideBarTab, sidebarTOC } from '../components/sidebar'
 import { Loader, isOutime } from '../globals/thirdparty'
 import { tabFormat } from '../page/tab'
-import { lazyLoad } from 'unlazy'
-
-export const pjaxReload = () => {
-  pagePosition()
-
-  if (sideBar.hasClass('on')) {
-    transition(sideBar, 0, () => {
-      sideBar.removeClass('on')
-      menuToggle.removeClass('close')
-    }) // 'transition.slideRightOut'
-  }
-  const mainNode = document.getElementById('main')
-  mainNode.innerHTML = ''
-  mainNode.appendChild(loadCat.lastChild.cloneNode(true))
-  pageScroll(0)
-}
 
 export const siteRefresh = async (reload) => {
   if (__shokax_antiFakeWebsite__) {
@@ -45,9 +21,9 @@ export const siteRefresh = async (reload) => {
   setLocalHash(0)
   setLocalUrl(window.location.href)
 
-  vendorCss('katex');
+  // @ts-ignore
+  // await import('katex/dist/katex.min.css')
   await import('katex/dist/contrib/copy-tex.mjs')
-  vendorCss('mermaid')
 
   // 懒加载背景图
   const lazyBg = new IntersectionObserver(function (entries, observer) {
@@ -67,10 +43,6 @@ export const siteRefresh = async (reload) => {
     lazyBg.observe(el)
   })
 
-  if (reload !== 1) {
-    $dom.each('script[data-pjax]', pjaxScript)
-  }
-
   setOriginTitle(document.title)
 
   resizeHandle()
@@ -111,8 +83,6 @@ export const siteRefresh = async (reload) => {
     comment.observe(cpel)
   }
 
-  lazyLoad()
-
   if (__shokax_waline__) {
     import('../components/comments').then(async ({walineRecentComments}) => {
       await walineRecentComments()
@@ -129,10 +99,12 @@ export const siteRefresh = async (reload) => {
     tabFormat()
   }
 
-  if (__shokax_player__) {
-    toolPlayer.player.load(LOCAL.audio || CONFIG.audio || {})
+  if (sessionStorage.getItem('loaded') === 'true') {
+    Loader.hide(30)
+  } else {
+    sessionStorage.setItem('loaded', 'true')
+    Loader.hide(500)
   }
-  Loader.hide(100)
 
   setTimeout(() => {
     positionInit()

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

@@ -1,37 +1,18 @@
 import domInit from './domInit'
-import { pjaxReload, siteRefresh } from './refresh'
-import { cloudflareInit } from '../components/cloudflare'
-import { BODY, CONFIG, pjax, setPjax, setSiteSearch, siteSearch } 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 { $dom } from '../library/dom'
-import { createChild } from '../library/proto'
-import { transition } from '../library/anime'
+import {siteRefresh} from './refresh'
+import {cloudflareInit} from '../components/cloudflare'
+import {BODY, CONFIG, setSiteSearch, siteSearch} from '../globals/globalVars'
+import {autoDarkmode, themeColorListener} from '../globals/themeColor'
+import {resizeHandle, scrollHandle, visibilityListener} from '../globals/handles'
+import {pagePosition} from '../globals/tools'
+import {initVue} from '../library/vue'
+import {createChild} from '../library/proto'
+import {transition} from '../library/anime'
 
 const siteInit = async () => {
   initVue()
   domInit()
 
-  setPjax(new Pjax({
-    selectors: [
-      'head title',
-      '.languages',
-      '.twikoo',
-      '.pjax',
-      '.leancloud-recent-comment',
-      'script[data-config]'
-    ],
-    cacheBust: false
-  }))
-
-  CONFIG.quicklink.ignores = LOCAL.ignores
-  import('quicklink').then(({listen}) => {
-    listen(CONFIG.quicklink)
-  })
-
   autoDarkmode()
 
   if (__shokax_VL__) {
@@ -53,19 +34,16 @@ const siteInit = async () => {
       }
 
       import('../page/search').then(({algoliaSearch}) => {
-        algoliaSearch(pjax)
+        algoliaSearch()
       })
 
       // Handle and trigger popup window
-      // TODO search 只有一个，不需要 each
-      $dom.each('.search', (element) => {
-        element.addEventListener('click', () => {
+      document.querySelector('.search').addEventListener('click', () => {
           document.body.style.overflow = 'hidden'
           transition(siteSearch, 'shrinkIn', () => {
             (document.querySelector('.search-input') as HTMLInputElement).focus()
           }) // transition.shrinkIn
         })
-      })
     }, {once: true, capture: true})
   }
 
@@ -83,18 +61,11 @@ const siteInit = async () => {
     passive: true
   })
 
-  window.addEventListener('pjax:send', pjaxReload, {
-    passive: true
-  })
-
-  window.addEventListener('pjax:success', siteRefresh, {
-    passive: true
-  }) // 默认会传入一个event参数
-
-  window.addEventListener('beforeunload', () => {
+  window.addEventListener('visibilitychange', () => {
     pagePosition()
   })
   await siteRefresh(1)
+  // TODO 修复内页跳转后重复出现加载动画的问题
 }
 
 cloudflareInit()