hexo-theme-shokax 0.4.4 → 0.4.6-beta1

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

@@ -1,239 +1,239 @@
-/* 边栏分区 */
-
-import { CONFIG, Container, diffY, menuToggle, showContents, sideBar } from '../globals/globalVars'
-import { clipBoard } from '../globals/tools'
-import { pageScroll, transition } from '../library/anime'
-import { $dom } from '../library/dom'
-import initProto, { child, getHeight, setDisplay } from '../library/proto'
-
-initProto()
-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 = child(sideBar, '.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') {
-        setDisplay(showContents, 'none')
-      }
-      return
-    }
-
-    if (item === 'contents') {
-      setDisplay(showContents, '')
-    }
-
-    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(getHeight(Container))))
-}
-
-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.onclick && 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')
-    }
-  })
-}
+/* 边栏分区 */
+
+import { CONFIG, Container, diffY, menuToggle, showContents, sideBar } from '../globals/globalVars'
+import { clipBoard } from '../globals/tools'
+import { pageScroll, transition } from '../library/anime'
+import { $dom } from '../library/dom'
+import initProto, { getHeight, setDisplay } from '../library/proto'
+
+initProto()
+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.querySelector('.inner')
+
+  if (sideBar.querySelector('.tab')) {
+    sideBarInner.removeChild(sideBar.querySelector('.tab'))
+  }
+
+  const list = document.createElement('ul'); let active = 'active'
+  list.className = 'tab';
+
+  ['contents', 'related', 'overview'].forEach((item) => {
+    const element = sideBar.querySelector('.panel.' + item)
+
+    if (element.innerHTML.trim().length < 1) {
+      if (item === 'contents') {
+        setDisplay(showContents, 'none')
+      }
+      return
+    }
+
+    if (item === 'contents') {
+      setDisplay(showContents, '')
+    }
+
+    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.querySelector('.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.querySelector('.panels') as HTMLElement).style.paddingTop = ''
+  } else {
+    (sideBar.querySelector('.panels') as HTMLElement).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 = document.querySelector(parent.querySelector('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 as HTMLElement), target.offsetTop - ((tocElement as HTMLElement).offsetHeight / 4))
+    }
+  }
+  const navItems = $dom.all('.contents li')
+
+  if (navItems.length < 1) {
+    return
+  }
+
+  let sections = [...navItems] as HTMLElement[]
+  let activeLock = null
+
+  sections = sections.map((element, index) => {
+    const link = element.querySelector('a.toc-link')
+    const anchor = document.querySelector(decodeURI(link.getAttribute('href')))
+    if (!anchor) return null
+    const alink = anchor.querySelector('a.anchor')
+
+    const anchorScroll = (event:MouseEvent) => {
+      event.preventDefault()
+      const target = document.querySelector(decodeURI((event.currentTarget as HTMLElement).getAttribute('href')))
+
+      activeLock = index
+      pageScroll((target as HTMLElement), null, () => {
+        activateNavByIndex(index)
+        activeLock = null
+      })
+    }
+
+    // TOC item animation navigate.
+    link.addEventListener('click', anchorScroll)
+    alink && alink.addEventListener('click', (event) => {
+      anchorScroll(<MouseEvent>event)
+      clipBoard(CONFIG.hostname + '/' + LOCAL.path + (event.currentTarget as HTMLElement).getAttribute('href'))
+    })
+    return (anchor as HTMLElement)
+  })
+
+  const tocElement = sideBar.querySelector('.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(getHeight(Container))))
+}
+
+export const goToCommentHandle = () => {
+  pageScroll(document.getElementById('comments'))
+}
+
+export const menuActive = () => {
+  $dom.each('.menu .item:not(.title)', (element) => {
+    const target = <HTMLAnchorElement> element.querySelector('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.onclick && target.hostname === location.hostname && (isSamePath || isSubPath)
+    element.toggleClass('active', active)
+    if (element.parentNode.querySelector('.active') && parentItem.hasClass('dropdown')) {
+      parentItem.removeClass('active').addClass('expand')
+    } else {
+      parentItem.removeClass('expand')
+    }
+  })
+}

package/source/js/_app/components/tcomments.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.twikooRecentComments = exports.twikooComment = void 0;
+const twikoo_1 = __importDefault(require("twikoo"));
+const globalVars_1 = require("../globals/globalVars");
+const vue_1 = require("vue");
+const twikooComment = function () {
+    twikoo_1.default.init({
+        envId: globalVars_1.CONFIG.twikoo.envId,
+        el: '#comments',
+        region: globalVars_1.CONFIG.twikoo.region
+    });
+};
+exports.twikooComment = twikooComment;
+const twikooRecentComments = async function () {
+    let comments = [];
+    const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '');
+    const res = await twikoo_1.default.getRecentComments({
+        envId: globalVars_1.CONFIG.twikoo.envId,
+        pageSize: 10
+    });
+    res.forEach(function (item) {
+        let cText = item.commentText;
+        if (item.commentText.length > 50) {
+            cText = item.commentText.substring(0, 50) + '...';
+        }
+        const siteLink = item.url + '#' + item.id;
+        comments.push({
+            href: siteLink,
+            nick: item.nick,
+            time: item.relativeTime,
+            text: cText
+        });
+    });
+    (0, vue_1.createApp)({
+        data() {
+            return {
+                coms: comments,
+                root
+            };
+        }
+    }).mount('#new-comment');
+};
+exports.twikooRecentComments = twikooRecentComments;

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

@@ -1,55 +1,54 @@
-import * as twikoo from 'twikoo'
-import { CONFIG } from '../globals/globalVars'
-import { $dom } from '../library/dom'
-
-export const twikooComment = function () {
-  twikoo.init({
-    envId: CONFIG.twikoo.envId,
-    el: '#comments',
-    region: CONFIG.twikoo.region
-  })
-}
-
-export const twikooRecentComments = async function () {
-  let comments = []
-  const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '')
-  const res = await twikoo.getRecentComments({
-    envId: CONFIG.twikoo.envId,
-    pageSize: 10
-  })
-  res.forEach(function (item) {
-    let cText = item.commentText
-    if (item.commentText.length > 50) {
-      cText = item.commentText.substring(0, 50) + '...'
-    }
-    const siteLink = item.url + '#' + item.id
-    comments.push({
-      href: siteLink,
-      nick: item.nick,
-      time: item.relativeTime,
-      text: cText
-    })
-  })
-  const newComments = new DocumentFragment()
-  comments.forEach(function (item) {
-    const commentEl = document.createElement('li')
-    const commentLink = document.createElement('a')
-    const commentTime = document.createElement('span')
-    const commentText = document.createElement('span')
-
-    commentText.innerText = item.text
-    commentTime.className = 'breadcrumb'
-    commentTime.innerText = `${item.nick} @ ${item.time}`
-    commentLink.href = root + item.href
-    commentLink['data-pjax-state'] = 'data-pjax-state'
-    commentEl.className = 'item'
-
-    commentText.appendChild(document.createElement('br'))
-    commentLink.appendChild(commentTime)
-    commentLink.appendChild(commentText)
-    commentEl.appendChild(commentLink)
-    newComments.appendChild(commentEl)
-  })
-
-  $dom('#new-comment').appendChild(newComments)
-}
+import * as twikoo from 'twikoo'
+import { CONFIG } from '../globals/globalVars'
+
+export const twikooComment = function () {
+  twikoo.init({
+    envId: CONFIG.twikoo.envId,
+    el: '#comments',
+    region: CONFIG.twikoo.region
+  })
+}
+
+export const twikooRecentComments = async function () {
+  let comments = []
+  const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '')
+  const res = await twikoo.getRecentComments({
+    envId: CONFIG.twikoo.envId,
+    pageSize: 10
+  })
+  res.forEach(function (item) {
+    let cText = item.commentText
+    if (item.commentText.length > 50) {
+      cText = item.commentText.substring(0, 50) + '...'
+    }
+    const siteLink = item.url + '#' + item.id
+    comments.push({
+      href: siteLink,
+      nick: item.nick,
+      time: item.relativeTime,
+      text: cText
+    })
+  })
+  const newComments = new DocumentFragment()
+  comments.forEach(function (item) {
+    const commentEl = document.createElement('li')
+    const commentLink = document.createElement('a')
+    const commentTime = document.createElement('span')
+    const commentText = document.createElement('span')
+
+    commentText.innerText = item.text
+    commentTime.className = 'breadcrumb'
+    commentTime.innerText = `${item.nick} @ ${item.time}`
+    commentLink.href = root + item.href
+    commentLink['data-pjax-state'] = 'data-pjax-state'
+    commentEl.className = 'item'
+
+    commentText.appendChild(document.createElement('br'))
+    commentLink.appendChild(commentTime)
+    commentLink.appendChild(commentText)
+    commentEl.appendChild(commentLink)
+    newComments.appendChild(commentEl)
+  })
+
+  document.getElementById('new-comment').appendChild(newComments)
+}