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

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();
-};

package/source/js/_app/library/dom.js

@@ -1,34 +0,0 @@
-const getDocHeight = () => $dom('main > .inner').offsetHeight;
-/**
- * 获取一个dom选择器对应的元素
- */
-const $dom = (selector, element = document) => {
-    // 在测试环境中这能优化0.01-0.02ms左右
-    if (selector[0] === '#') {
-        return element.getElementById(selector.substring(1));
-    }
-    return element.querySelector(selector);
-};
-/**
- * 获取具有此选择器的所有dom节点
- */
-$dom.all = (selector, element = document) => {
-    return element.querySelectorAll(selector);
-};
-/**
- * 获取具有此选择器的所有dom节点,并依次执行callback函数
- */
-$dom.each = (selector, callback, element) => {
-    $dom.all(selector, element).forEach(callback);
-};
-// TODO 异步化意义不明确，代码实现存在问题
-$dom.asyncify = async (selector, element = document) => {
-    if (selector[0] === '#') {
-        return element.getElementById(selector.substring(1));
-    }
-    return element.querySelector(selector);
-};
-$dom.asyncifyEach = (selector, callback, element) => {
-    $dom.all(selector, element).forEach(callback);
-};
-export { $dom, getDocHeight };

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

@@ -1,36 +0,0 @@
-import { getScript } from './scriptPjax';
-/**
- * 用途是根据不同的资源名称和类型生成相应的资源 URL。
- */
-const assetUrl = (asset, type) => {
-    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, callback, condition) => {
-    if (LOCAL[type]) {
-        getScript(assetUrl('js', type), callback || function () {
-            window[type] = true;
-        }, condition || window[type]);
-    }
-};
-export const vendorCss = (type, condition) => {
-    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.js

@@ -1,163 +0,0 @@
-import { $dom } from './dom';
-export default function initProto() {
-    Object.assign(HTMLElement.prototype, {
-        /**
-         * 创建一个子节点并放置
-         */
-        createChild(tag, obj, positon) {
-            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) {
-            const box = document.createElement('div');
-            Object.assign(box, obj);
-            this.parentNode.insertBefore(box, this);
-            this.parentNode.removeChild(this);
-            box.appendChild(this);
-        },
-        changeOrGetHeight(h) {
-            if (h) {
-                // TODO 0rem是期望的值吗?
-                this.style.height = typeof h === 'number' ? h + 'rem' : h;
-            }
-            return this.getBoundingClientRect().height;
-        },
-        /**
-       此函数将元素的宽度设置为指定值,如果未提供值,则返回元素的宽度.<br />
-       宽度可以作为数字提供(假定它以`rem`为单位).作为字符串提供则直接设置为元素宽度
-       */
-        changeOrGetWidth(w) {
-            if (w) {
-                // TODO 0rem是期望的值吗?
-                this.style.width = typeof w === 'number' ? w + 'rem' : w;
-            }
-            return this.getBoundingClientRect().width;
-        },
-        getTop() {
-            return this.getBoundingClientRect().top;
-        },
-        left() {
-            return this.getBoundingClientRect().left;
-        },
-        /**
-       * 该函数接受两个参数：`type`字符串和 `value`字符串的可选参数。该函数具有基于参数值的三个主要逻辑分支。 <br />
-       * 1. `value`如果是`null`，则该函数从当前上下文中删除具有`type`函数名称的属性。 <br />
-       * 2. `value`如果为真，则该函数将使用`type`参数指定的名称将属性设置为当前上下文中`value`参数的值。然后，该函数返回当前上下文。 <br />
-       * 3. `value`如果不是真，则该函数返回属性的值，该值具有当前上下文中的参数指定的名称。
-       */
-        attr(type, value) {
-            if (value === null) {
-                return this.removeAttribute(type);
-            }
-            if (value) {
-                this.setAttribute(type, value);
-                return this;
-            }
-            else {
-                return this.getAttribute(type);
-            }
-        },
-        /**
-       * 将此节点插入父节点的下一个节点之前
-       */
-        insertAfter(element) {
-            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) {
-            if (d == null) {
-                return this.style.display;
-            }
-            else {
-                this.style.display = d;
-                return this;
-            }
-        },
-        /**
-       * 找到此节点第一个符合selector选择器的子节点
-       */
-        child(selector) {
-            return $dom(selector, this);
-        },
-        /**
-       * 找到此节点所有符合selector选择器的子节点
-       */
-        find(selector) {
-            return $dom.all(selector, this);
-        },
-        /**
-         * 这个方法接受三个参数：
-         * type 表示操作类型（'add'、'remove'、'toggle'），
-         * className 是一个或多个要操作的类名，
-         * display 是一个可选的布尔值，用于在执行切换操作时指定类名是否应显示或隐藏。
-         * 该方法会根据操作类型执行相应的类名操作。
-       */
-        _class(type, className, display) {
-            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) {
-            this._class('add', className);
-            return this;
-        },
-        /**
-         * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'remove'，然后执行移除类名的操作。
-         * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
-         */
-        removeClass(className) {
-            this._class('remove', className);
-            return this;
-        },
-        /**
-         * 这个方法是对 _class 方法的封装，调用时会将操作类型设为 'toggle'，然后执行切换类名的操作。
-         * 如果提供了 display 参数，它将根据布尔值决定是否显示或隐藏类名。
-         * 最后，它返回当前的 EventTarget，通常是 DOM 元素本身，以支持链式调用。
-         */
-        toggleClass(className, display) {
-            this._class('toggle', className, display);
-            return this;
-        },
-        /**
-         * 这个方法返回一个布尔值，表示元素是否包含指定的类名。
-         */
-        hasClass(className) {
-            return this.classList.contains(className);
-        }
-    });
-}

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

@@ -1,70 +0,0 @@
-// 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, callback, condition) => {
-    // url: 脚本文件的URL地址
-    // callback: 当脚本加载完成时要执行的回调函数
-    // condition: 可选的条件参数，如果存在，则执行callback
-    if (condition) {
-        // 如果条件存在，则执行回调函数
-        callback();
-    }
-    else {
-        let script = document.createElement('script');
-        // @ts-ignore
-        script.onload = function (_, isAbort) {
-            // _: 事件对象
-            // 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) => {
-    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.js

@@ -1,12 +0,0 @@
-// Html5LocalStorage的一个API
-export const $storage = {
-    set(key, value) {
-        localStorage.setItem(key, value);
-    },
-    get(key) {
-        return localStorage.getItem(key);
-    },
-    del(key) {
-        localStorage.removeItem(key);
-    }
-};

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

@@ -1,53 +0,0 @@
-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;
-                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/comment.js

@@ -1,23 +0,0 @@
-import { $dom } from '../library/dom';
-import { transition } from '../library/anime';
-import { goToComment } from '../globals/globalVars';
-// TODO 此函数在twikoo下可能不适用
-export default function loadComments() {
-    const element = $dom('#comments');
-    if (!element) {
-        goToComment.display('none');
-        return;
-    }
-    else {
-        goToComment.display('');
-    }
-    const io = new IntersectionObserver((entries, observer) => {
-        const entry = entries[0];
-        // vendorCss('valine')
-        if (entry.isIntersecting || entry.intersectionRatio > 0) {
-            transition($dom('#comments'), 'bounceUpIn');
-            observer.disconnect();
-        }
-    });
-    io.observe(element);
-}

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

@@ -1,41 +0,0 @@
-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.js

@@ -1,65 +0,0 @@
-import { $dom } from '../library/dom';
-import { vendorCss, vendorJs } from '../library/loadFile';
-export const postFancybox = (p) => {
-    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.attr('data-height', String(element.attr('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.attr('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.attr('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);
-    }
-};