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

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

@@ -1,209 +0,0 @@
-/* 边栏分区 */
-import { Container, diffY, menuToggle, showContents, sideBar } from '../globals/globalVars';
-import { clipBoard } from '../globals/tools';
-import { pageScroll, transition } from '../library/anime';
-import { $dom } from '../library/dom';
-export const sideBarToggleHandle = (event, force) => {
-    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.child('.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') {
-                showContents.display('none');
-            }
-            return;
-        }
-        if (item === 'contents') {
-            showContents.display('');
-        }
-        const tab = document.createElement('li');
-        const span = document.createElement('span');
-        const text = document.createTextNode(element.attr('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;
-            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) => {
-        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 = target.parentNode;
-        while (!parent.matches('.contents')) {
-            if (parent.matches('li')) {
-                parent.addClass('active');
-                const t = $dom(parent.child('a.toc-link').attr('href'));
-                if (t) {
-                    t.addClass('active');
-                }
-            }
-            parent = 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.attr('href')));
-        if (!anchor)
-            return null;
-        const alink = anchor.child('a.anchor');
-        const anchorScroll = (event) => {
-            event.preventDefault();
-            const target = $dom(decodeURI(event.currentTarget.attr('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.attr('href'));
-        });
-        return anchor;
-    });
-    const tocElement = 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) + (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(Container.changeOrGetHeight())));
-};
-export const goToCommentHandle = () => {
-    pageScroll($dom('#comments'));
-};
-export const menuActive = () => {
-    $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 = !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');
-        }
-    });
-};

package/source/js/_app/fireworks.js

@@ -1,10 +0,0 @@
-import firework from 'mouse-firework';
-/*
-*  烟花分区
-*/
-export function initFireworks() {
-    if (typeof CONFIG.fireworks === 'undefined') {
-        return;
-    }
-    firework(CONFIG.fireworks);
-}

package/source/js/_app/globals/globalVars.js

@@ -1,80 +0,0 @@
-import { $dom } from '../library/dom';
-import initProto from '../library/proto';
-initProto();
-export const statics = CONFIG.statics.indexOf('//') > 0 ? CONFIG.statics : CONFIG.root;
-export const scrollAction = { x: 0, y: 0 };
-export let diffY = 0;
-export let originTitle, titleTime;
-export const BODY = document.getElementsByTagName('body')[0];
-export const HTML = document.documentElement;
-export const Container = $dom('#container');
-export const loadCat = $dom('#loading');
-export const siteNav = $dom('#nav');
-export const siteHeader = $dom('#header');
-export const menuToggle = siteNav.child('.toggle');
-export const quickBtn = $dom('#quick');
-export const sideBar = $dom('#sidebar');
-export const siteBrand = $dom('#brand');
-export let toolBtn = $dom('#tool');
-export let toolPlayer;
-export let backToTop;
-export let goToComment;
-export let showContents;
-export let siteSearch = $dom('#search');
-export let siteNavHeight, headerHightInner, headerHight;
-export let oWinHeight = window.innerHeight;
-export let oWinWidth = window.innerWidth;
-export let LOCAL_HASH = 0;
-export let LOCAL_URL = window.location.href;
-export let pjax;
-export function setSiteNavHeight(value) {
-    siteNavHeight = value;
-}
-export function setHeaderHightInner(value) {
-    headerHightInner = value;
-}
-export function setHeaderHight(value) {
-    headerHight = value;
-}
-export function setOWinHeight(value) {
-    oWinHeight = value;
-}
-export function setOWinWidth(value) {
-    oWinWidth = value;
-}
-export function setDiffY(value) {
-    diffY = value;
-}
-export function setTitleTime(value) {
-    titleTime = value;
-}
-export function setLocalHash(value) {
-    LOCAL_HASH = value;
-}
-export function setLocalUrl(value) {
-    LOCAL_URL = value;
-}
-export function setPjax(value) {
-    pjax = value;
-}
-export function setOriginTitle(value) {
-    originTitle = value;
-}
-export function setToolPlayer(value) {
-    toolPlayer = value;
-}
-export function setBackToTop(value) {
-    backToTop = value;
-}
-export function setGoToComment(value) {
-    goToComment = value;
-}
-export function setShowContents(value) {
-    showContents = value;
-}
-export function setToolBtn(value) {
-    toolBtn = value;
-}
-export function setSiteSearch(value) {
-    siteSearch = value;
-}

package/source/js/_app/globals/handles.js

@@ -1,98 +0,0 @@
-import { sideBarToggleHandle } from '../components/sidebar';
-import { $dom, getDocHeight } from '../library/dom';
-import { backToTop, diffY, headerHight, headerHightInner, oWinWidth, originTitle, scrollAction, sideBar, siteBrand, siteHeader, siteNav, statics, titleTime, toolBtn, setSiteNavHeight, setHeaderHightInner, setHeaderHight, setOWinHeight, setOWinWidth, setDiffY, setTitleTime } from './globalVars';
-import { changeMetaTheme } from './themeColor';
-import { Loader } from './thirdparty';
-export const resizeHandle = () => {
-    // 获取 siteNav 的高度
-    setSiteNavHeight(siteNav.changeOrGetHeight());
-    // 获取 siteHeader 的高度
-    setHeaderHightInner(siteHeader.changeOrGetHeight());
-    // 获取 #waves 的高度
-    setHeaderHight(headerHightInner + $dom('#waves').changeOrGetHeight());
-    // 判断窗口宽度是否改变
-    if (oWinWidth !== window.innerWidth) {
-        sideBarToggleHandle(null, 1);
-    }
-    // 记录窗口高度和宽度
-    setOWinHeight(window.innerHeight);
-    setOWinWidth(window.innerWidth);
-};
-export const scrollHandle = () => {
-    // 获取窗口高度
-    const winHeight = window.innerHeight;
-    // 获取文档高度
-    const docHeight = getDocHeight();
-    // 计算可见内容高度
-    const contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight;
-    // 判断页面是否滚动超过 headerHightInner
-    const SHOW = window.scrollY > headerHightInner;
-    // 判断页面是否开始滚动
-    const startScroll = window.scrollY > 0;
-    // 根据条件修改 meta theme
-    if (SHOW) {
-        changeMetaTheme('#FFF');
-    }
-    else {
-        changeMetaTheme('#222');
-    }
-    // 控制导航栏的显示隐藏
-    siteNav.toggleClass('show', SHOW);
-    // 控制网站 logo 的显示隐藏
-    toolBtn.toggleClass('affix', startScroll);
-    // 控制侧边栏的显示隐藏，当滚动高度大于 headerHight 且窗口宽度大于 991px 时显示
-    siteBrand.toggleClass('affix', startScroll);
-    sideBar.toggleClass('affix', window.scrollY > headerHight && document.body.offsetWidth > 991);
-    // 初始化滚动时导航栏的显示方向
-    if (typeof scrollAction.y === 'undefined') {
-        scrollAction.y = window.scrollY;
-    }
-    setDiffY(scrollAction.y - window.scrollY);
-    // 控制滑动时导航栏显示
-    if (diffY < 0) {
-        siteNav.removeClass('up');
-        siteNav.toggleClass('down', SHOW);
-    }
-    else if (diffY > 0) {
-        siteNav.removeClass('down');
-        siteNav.toggleClass('up', SHOW);
-    }
-    else { /* empty */ }
-    scrollAction.y = window.scrollY;
-    // 计算滚动百分比
-    const scrollPercent = Math.round(Math.min(100 * window.scrollY / contentVisibilityHeight, 100)) + '%';
-    // 更新回到顶部按钮的文字
-    if (backToTop.child('span').innerText !== scrollPercent) {
-        backToTop.child('span').innerText = scrollPercent;
-    }
-    // 更新百分比进度条的宽度
-    if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
-        $dom('.percent').changeOrGetWidth(scrollPercent);
-    }
-};
-// 可见度监听(离开页面和返回时更改document的title)
-export const visibilityListener = () => {
-    const iconNode = $dom('[rel="icon"]');
-    document.addEventListener('visibilitychange', () => {
-        switch (document.visibilityState) {
-            case 'hidden':
-                iconNode.attr('href', statics + CONFIG.favicon.hidden);
-                document.title = LOCAL.favicon.hide;
-                if (CONFIG.loader.switch) {
-                    Loader.show();
-                }
-                clearTimeout(titleTime);
-                break;
-            case 'visible':
-                iconNode.attr('href', statics + CONFIG.favicon.normal);
-                document.title = LOCAL.favicon.show;
-                if (CONFIG.loader.switch) {
-                    Loader.hide(1000);
-                }
-                setTitleTime(setTimeout(() => {
-                    document.title = originTitle;
-                }, 2000));
-                break;
-        }
-    });
-};

package/source/js/_app/globals/themeColor.js

@@ -1,62 +0,0 @@
-import { $storage } from '../library/storage';
-import { $dom } from '../library/dom';
-import { HTML } from './globalVars';
-/**
- * 更改日夜模式
- */
-export const changeTheme = (type) => {
-    const btn = $dom('.theme .ic');
-    if (type === 'dark') {
-        HTML.attr('data-theme', type);
-        btn.removeClass('i-sun');
-        btn.addClass('i-moon');
-    }
-    else {
-        HTML.attr('data-theme', null);
-        btn.removeClass('i-moon');
-        btn.addClass('i-sun');
-    }
-};
-/**
- * 自动调整黑夜白天
- * 优先级: 手动选择>时间>跟随系统
- */
-export const autoDarkmode = () => {
-    if (CONFIG.auto_dark.enable) {
-        if (new Date().getHours() >= CONFIG.auto_dark.start || new Date().getHours() <= CONFIG.auto_dark.end) {
-            changeTheme('dark');
-        }
-        else {
-            changeTheme();
-        }
-    }
-};
-/**
- * 更改主题的meta
- */
-export const changeMetaTheme = (color) => {
-    if (HTML.attr('data-theme') === 'dark') {
-        color = '#222';
-    }
-    $dom('meta[name="theme-color"]').attr('content', color);
-};
-// 记忆日夜模式切换和系统亮暗模式监听
-export const themeColorListener = () => {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (mediaQueryList) => {
-        if (mediaQueryList.matches) {
-            changeTheme('dark');
-        }
-        else {
-            changeTheme();
-        }
-    });
-    const t = $storage.get('theme');
-    if (t) {
-        changeTheme(t);
-    }
-    else {
-        if (CONFIG.darkmode) {
-            changeTheme('dark');
-        }
-    }
-};

package/source/js/_app/globals/thirdparty.js

@@ -1,62 +0,0 @@
-// 与第三方js的交互或第三方嵌入js
-import { loadCat } from './globalVars';
-import { transition } from '../library/anime';
-// 加载动画
-export const Loader = {
-    timer: undefined,
-    lock: false,
-    show() {
-        clearTimeout(this.timer);
-        document.body.removeClass('loaded');
-        loadCat.attr('style', 'display:block');
-        Loader.lock = false;
-    },
-    hide(sec) {
-        if (!CONFIG.loader.start) {
-            sec = -1;
-        }
-        this.timer = setTimeout(this.vanish, sec || 3000);
-    },
-    vanish() {
-        if (Loader.lock) {
-            return;
-        }
-        if (CONFIG.loader.start) {
-            transition(loadCat, 0);
-        }
-        document.body.addClass('loaded');
-        Loader.lock = true;
-    }
-};
-export const isOutime = () => {
-    let updateTime;
-    if (CONFIG.outime.enable && LOCAL.outime) {
-        const times = document.getElementsByTagName('time');
-        if (times.length === 0) {
-            return;
-        }
-        const posts = document.getElementsByClassName('body md');
-        if (posts.length === 0) {
-            return;
-        }
-        const now = Date.now(); // 当前时间戳
-        const pubTime = new Date(times[0].dateTime); // 文章发布时间戳
-        if (times.length === 1) {
-            updateTime = pubTime; // 文章发布时间亦是最后更新时间
-        }
-        else {
-            updateTime = new Date(times[1].dateTime); // 文章最后更新时间戳
-        }
-        // @ts-ignore
-        const interval = parseInt(String(now - updateTime)); // 时间差
-        const days = parseInt(String(CONFIG.outime.days)) || 30; // 设置时效，默认硬编码 30 天
-        // 最后一次更新时间超过 days 天（毫秒）
-        if (interval > (days * 86400000)) {
-            // @ts-ignore
-            const publish = parseInt(String((now - pubTime) / 86400000));
-            const updated = parseInt(String(interval / 86400000));
-            const template = LOCAL.template.replace('{{publish}}', String(publish)).replace('{{updated}}', String(updated));
-            posts[0].insertAdjacentHTML('afterbegin', template);
-        }
-    }
-};

package/source/js/_app/globals/tools.js

@@ -1,66 +0,0 @@
-import { pageScroll } from '../library/anime';
-import { $dom } from '../library/dom';
-import { $storage } from '../library/storage';
-import { BODY, LOCAL_HASH, LOCAL_URL, scrollAction, setLocalHash } from './globalVars';
-// 显示提示(现阶段用于版权及复制结果提示)
-export const showtip = (msg) => {
-    if (!msg) {
-        return;
-    }
-    const tipbox = BODY.createChild('div', {
-        innerHTML: msg,
-        className: 'tip'
-    });
-    setTimeout(() => {
-        tipbox.addClass('hide');
-        setTimeout(() => {
-            BODY.removeChild(tipbox);
-        }, 300);
-    }, 3000);
-};
-export const pagePosition = () => {
-    // 判断配置项是否开启了自动记录滚动位置
-    if (CONFIG.auto_scroll) {
-        // 将当前页面的滚动位置存入本地缓存
-        $storage.set(LOCAL_URL, String(scrollAction.y));
-    }
-};
-export const positionInit = (comment) => {
-    // 获取页面锚点
-    const anchor = window.location.hash;
-    let target = null;
-    if (LOCAL_HASH) {
-        $storage.del(LOCAL_URL);
-        return;
-    }
-    if (anchor) {
-        target = $dom(decodeURI(anchor));
-    }
-    else {
-        target = CONFIG.auto_scroll ? parseInt($storage.get(LOCAL_URL)) : 0;
-    }
-    if (target) {
-        pageScroll(target);
-        setLocalHash(1);
-    }
-    if (comment && anchor && !LOCAL_HASH) {
-        pageScroll(target);
-        setLocalHash(1);
-    }
-};
-/*
-基于clipboard API的复制功能，仅在https环境下有效
-*/
-export const clipBoard = (str, callback) => {
-    if (navigator.clipboard && window.isSecureContext) {
-        navigator.clipboard.writeText(str).then(() => {
-            callback && callback(true);
-        }, () => {
-            callback && callback(false);
-        });
-    }
-    else {
-        console.error('Too old browser, clipborad API not supported.');
-        callback && callback(false);
-    }
-};

package/source/js/_app/library/anime.js

@@ -1,106 +0,0 @@
-import anime from 'theme-shokax-anime';
-import { siteNavHeight } from '../globals/globalVars';
-/**
- * 参数  动画效果
- * 0  元素逐渐消失
- * 1  元素逐渐出现
- * bounceUpIn  元素从下方弹跳出现
- * shrinkIn  元素从放大到正常大小出现
- * slideRightIn  元素从右侧滑入
- * slideRightOut  元素向右侧滑出
- * TODO 函数功能过于复杂，需要拆分
- */
-export const transition = (target, type, complete, begin) => {
-    let animation;
-    let display = 'none';
-    switch (type) {
-        case 0:
-            animation = { opacity: [1, 0] };
-            break;
-        case 1:
-            animation = { opacity: [0, 1] };
-            display = 'block';
-            break;
-        case 'bounceUpIn':
-            animation = {
-                begin(anim) {
-                    target.display('block');
-                },
-                translateY: [
-                    { value: -60, duration: 200 },
-                    { value: 10, duration: 200 },
-                    { value: -5, duration: 200 },
-                    { value: 0, duration: 200 }
-                ],
-                opacity: [0, 1]
-            };
-            display = 'block';
-            break;
-        case 'shrinkIn':
-            animation = {
-                begin(anim) {
-                    target.display('block');
-                },
-                scale: [
-                    { value: 1.1, duration: 300 },
-                    { value: 1, duration: 200 }
-                ],
-                opacity: 1
-            };
-            display = 'block';
-            break;
-        case 'slideRightIn':
-            animation = {
-                begin(anim) {
-                    target.display('block');
-                },
-                translateX: ['100%', '0%'],
-                opacity: [0, 1]
-            };
-            display = 'block';
-            break;
-        case 'slideRightOut':
-            animation = {
-                translateX: ['0%', '100%'],
-                opacity: [1, 0]
-            };
-            break;
-        default:
-            // @ts-ignore
-            animation = type;
-            // @ts-ignore
-            display = type.display;
-            break;
-    }
-    anime(Object.assign({
-        targets: target,
-        duration: 200,
-        easing: 'linear',
-        begin() {
-            begin && begin();
-        },
-        complete() {
-            target.display(display);
-            complete && complete();
-        }
-    }, animation)).play();
-};
-export const pageScroll = (target, offset, complete) => {
-    // target: 滚动到的目标元素或坐标(number)
-    // offset: 可选的偏移量
-    // complete: 可选的回调函数，在动画完成时调用
-    anime({
-        // 动画目标
-        targets: typeof offset === 'number' && typeof target !== 'number' ? target.parentNode : document.scrollingElement,
-        // 动画持续时间
-        duration: 500,
-        // 动画缓动函数
-        easing: 'easeInOutQuad',
-        // 如果 offset 存在，则滚动到 offset，如果 target 是数字，则滚动到 target，如果 target 是 DOM 元素，则滚动到下述表达式
-        scrollTop: offset || (typeof target === 'number' ? target : (target ? target.getTop() + document.documentElement.scrollTop - siteNavHeight : 0)),
-        // 完成回调函数
-        complete() {
-            complete && complete();
-        }
-    }).play();
-};