hexo-theme-shokax 0.4.5 → 0.4.6-beta1

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

@@ -1,89 +1,88 @@
-import { CONFIG } from '../globals/globalVars'
-import { init, RecentComments } from '@waline/client'
-import { pageviewCount } from '@waline/client/pageview'
-
-import { $dom } from '../library/dom'
-
-export const walineComment = function () {
-  init({
-    el: '#comments',
-    serverURL: CONFIG.waline.serverURL,
-    lang: CONFIG.waline.lang,
-    locale: CONFIG.waline.locale,
-    emoji: CONFIG.waline.emoji,
-    meta: CONFIG.waline.meta,
-    requiredMeta: CONFIG.waline.requiredMeta,
-    wordLimit: CONFIG.waline.wordLimit,
-    pageSize: CONFIG.waline.pageSize,
-    pageview: CONFIG.waline.pageview,
-    path: window.location.pathname,
-    dark: 'html[data-theme="dark"]'
-  })
-}
-
-export const walinePageview = function () {
-  // TODO waline 上游此模块存在问题
-  pageviewCount({
-    serverURL: CONFIG.waline.serverURL,
-    path: window.location.pathname
-  })
-}
-
-export const walineRecentComments = async function () {
-  const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '')
-  let items = []
-  const { comments } = await RecentComments({
-    serverURL: CONFIG.waline.serverURL.replace(/\/+$/, ''),
-    count: 10
-  })
-  // TODO 疑似 waline API 返回格式与文档不一致，需要确认是否为上游问题
-  // @ts-ignore
-  comments.data.forEach(function (item) {
-    let cText = (item.orig.length > 50) ? item.orig.substring(0, 50) + '...' : item.orig
-    item.url = item.url.startsWith('/') ? item.url : '/' + item.url
-    const siteLink = item.url + '#' + item.objectId
-
-    const time = new Date(item.time)
-    const now = new Date()
-    const diff = now.valueOf() - time.valueOf()
-    let dateStr:string
-    if (diff < 3600000) {
-      dateStr = `${Math.floor(diff / 60000)} 分钟前`
-    } else if (diff < 86400000) {
-      dateStr = `${Math.floor(diff / 3600000)} 小时前`
-    } else if (diff < 2592000000) {
-      dateStr = `${Math.floor(diff / 86400000)} 天前`
-    } else {
-      dateStr = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
-    }
-
-    items.push({
-      href: siteLink,
-      nick: item.nick,
-      time: dateStr,
-      text: cText
-    })
-  })
-  const newComments = new DocumentFragment()
-  items.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)
-}
+import { CONFIG } from '../globals/globalVars'
+import { init, RecentComments } from '@waline/client'
+import { pageviewCount } from '@waline/client/pageview'
+await import('@waline/client/style')
+
+export const walineComment = function () {
+  init({
+    el: '#comments',
+    serverURL: CONFIG.waline.serverURL,
+    lang: CONFIG.waline.lang,
+    locale: CONFIG.waline.locale,
+    emoji: CONFIG.waline.emoji,
+    meta: CONFIG.waline.meta,
+    requiredMeta: CONFIG.waline.requiredMeta,
+    wordLimit: CONFIG.waline.wordLimit,
+    pageSize: CONFIG.waline.pageSize,
+    pageview: CONFIG.waline.pageview,
+    path: window.location.pathname,
+    dark: 'html[data-theme="dark"]'
+  })
+}
+
+export const walinePageview = function () {
+  // TODO waline 上游此模块存在问题
+  pageviewCount({
+    serverURL: CONFIG.waline.serverURL,
+    path: window.location.pathname
+  })
+}
+
+export const walineRecentComments = async function () {
+  const root = shokax_siteURL.replace(/^(https?:\/\/)?[^/]*/, '')
+  let items = []
+  const { comments } = await RecentComments({
+    serverURL: CONFIG.waline.serverURL.replace(/\/+$/, ''),
+    count: 10
+  })
+  // TODO 疑似 waline API 返回格式与文档不一致，需要确认是否为上游问题
+  // @ts-ignore
+  comments.data.forEach(function (item) {
+    let cText = (item.orig.length > 50) ? item.orig.substring(0, 50) + '...' : item.orig
+    item.url = item.url.startsWith('/') ? item.url : '/' + item.url
+    const siteLink = item.url + '#' + item.objectId
+
+    const time = new Date(item.time)
+    const now = new Date()
+    const diff = now.valueOf() - time.valueOf()
+    let dateStr:string
+    if (diff < 3600000) {
+      dateStr = `${Math.floor(diff / 60000)} 分钟前`
+    } else if (diff < 86400000) {
+      dateStr = `${Math.floor(diff / 3600000)} 小时前`
+    } else if (diff < 2592000000) {
+      dateStr = `${Math.floor(diff / 86400000)} 天前`
+    } else {
+      dateStr = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
+    }
+
+    items.push({
+      href: siteLink,
+      nick: item.nick,
+      time: dateStr,
+      text: cText
+    })
+  })
+  const newComments = new DocumentFragment()
+  items.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)
+}

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

@@ -0,0 +1,244 @@
+"use strict";
+/* 边栏分区 */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuActive = exports.goToCommentHandle = exports.goToBottomHandle = exports.backToTopHandle = exports.sidebarTOC = exports.sideBarTab = exports.sideBarToggleHandle = void 0;
+const globalVars_1 = require("../globals/globalVars");
+const tools_1 = require("../globals/tools");
+const anime_1 = require("../library/anime");
+const dom_1 = require("../library/dom");
+const proto_1 = __importStar(require("../library/proto"));
+(0, proto_1.default)();
+const sideBarToggleHandle = (event, force) => {
+    if (globalVars_1.sideBar.hasClass('on')) {
+        globalVars_1.sideBar.removeClass('on');
+        globalVars_1.menuToggle.removeClass('close');
+        if (force) {
+            // @ts-ignore
+            // noinspection JSConstantReassignment
+            globalVars_1.sideBar.style = '';
+        }
+        else {
+            (0, anime_1.transition)(globalVars_1.sideBar, 'slideRightOut');
+        }
+    }
+    else {
+        if (force) {
+            // @ts-ignore
+            // noinspection JSConstantReassignment
+            globalVars_1.sideBar.style = '';
+        }
+        else {
+            (0, anime_1.transition)(globalVars_1.sideBar, 'slideRightIn', () => {
+                globalVars_1.sideBar.addClass('on');
+                globalVars_1.menuToggle.addClass('close');
+            });
+        }
+    }
+};
+exports.sideBarToggleHandle = sideBarToggleHandle;
+const sideBarTab = () => {
+    const sideBarInner = (0, proto_1.child)(globalVars_1.sideBar, '.inner');
+    if (globalVars_1.sideBar.child('.tab')) {
+        sideBarInner.removeChild(globalVars_1.sideBar.child('.tab'));
+    }
+    const list = document.createElement('ul');
+    let active = 'active';
+    list.className = 'tab';
+    ['contents', 'related', 'overview'].forEach((item) => {
+        const element = globalVars_1.sideBar.child('.panel.' + item);
+        if (element.innerHTML.trim().length < 1) {
+            if (item === 'contents') {
+                (0, proto_1.setDisplay)(globalVars_1.showContents, 'none');
+            }
+            return;
+        }
+        if (item === 'contents') {
+            (0, proto_1.setDisplay)(globalVars_1.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;
+            if (target.hasClass('active'))
+                return;
+            globalVars_1.sideBar.find('.tab .item').forEach((element) => {
+                element.removeClass('active');
+            });
+            globalVars_1.sideBar.find('.panel').forEach((element) => {
+                element.removeClass('active');
+            });
+            globalVars_1.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]);
+        globalVars_1.sideBar.child('.panels').style.paddingTop = '';
+    }
+    else {
+        globalVars_1.sideBar.child('.panels').style.paddingTop = '.625rem';
+    }
+};
+exports.sideBarTab = sideBarTab;
+const sidebarTOC = () => {
+    const activateNavByIndex = (index) => {
+        const target = navItems[index];
+        if (!target)
+            return;
+        if (target.hasClass('current')) {
+            return;
+        }
+        dom_1.$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 = target.parentNode;
+        while (!parent.matches('.contents')) {
+            if (parent.matches('li')) {
+                parent.addClass('active');
+                const t = (0, dom_1.$dom)(parent.child('a.toc-link').getAttribute('href'));
+                if (t) {
+                    t.addClass('active');
+                }
+            }
+            parent = parent.parentNode;
+        }
+        // Scrolling to center active TOC element if TOC content is taller than viewport.
+        if (getComputedStyle(globalVars_1.sideBar).display !== 'none' && tocElement.hasClass('active')) {
+            (0, anime_1.pageScroll)(tocElement, target.offsetTop - (tocElement.offsetHeight / 4));
+        }
+    };
+    const navItems = dom_1.$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 = (0, dom_1.$dom)(decodeURI(link.getAttribute('href')));
+        if (!anchor)
+            return null;
+        const alink = anchor.child('a.anchor');
+        const anchorScroll = (event) => {
+            event.preventDefault();
+            const target = (0, dom_1.$dom)(decodeURI(event.currentTarget.getAttribute('href')));
+            activeLock = index;
+            (0, anime_1.pageScroll)(target, null, () => {
+                activateNavByIndex(index);
+                activeLock = null;
+            });
+        };
+        // TOC item animation navigate.
+        link.addEventListener('click', anchorScroll);
+        alink && alink.addEventListener('click', (event) => {
+            anchorScroll(event);
+            (0, tools_1.clipBoard)(globalVars_1.CONFIG.hostname + '/' + LOCAL.path + event.currentTarget.getAttribute('href'));
+        });
+        return anchor;
+    });
+    const tocElement = globalVars_1.sideBar.child('.contents.panel');
+    const findIndex = (entries) => {
+        let index = 0;
+        let entry = entries[index];
+        if (entry.boundingClientRect.top > 0) {
+            index = sections.indexOf(entry.target);
+            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);
+            }
+        }
+        return sections.indexOf(entry.target);
+    };
+    const createIntersectionObserver = () => {
+        const observer = new IntersectionObserver((entries) => {
+            const index = findIndex(entries) + (globalVars_1.diffY < 0 ? 1 : 0);
+            if (activeLock === null) {
+                activateNavByIndex(index);
+            }
+        }, {
+            rootMargin: '0px 0px -100% 0px', threshold: 0
+        });
+        sections.forEach((element) => {
+            element && observer.observe(element);
+        });
+    };
+    createIntersectionObserver();
+};
+exports.sidebarTOC = sidebarTOC;
+const backToTopHandle = () => {
+    (0, anime_1.pageScroll)(0);
+};
+exports.backToTopHandle = backToTopHandle;
+const goToBottomHandle = () => {
+    (0, anime_1.pageScroll)(parseInt(String((0, proto_1.getHeight)(globalVars_1.Container))));
+};
+exports.goToBottomHandle = goToBottomHandle;
+const goToCommentHandle = () => {
+    (0, anime_1.pageScroll)((0, dom_1.$dom)('#comments'));
+};
+exports.goToCommentHandle = goToCommentHandle;
+const menuActive = () => {
+    dom_1.$dom.each('.menu .item:not(.title)', (element) => {
+        const target = 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 = !globalVars_1.CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
+        const active = 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');
+        }
+    });
+};
+exports.menuActive = menuActive;