hexo-theme-shokax 0.2.9 → 0.3.0

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

@@ -0,0 +1,22 @@
+const getDocHeight = () => $dom('main > .inner').offsetHeight;
+const $dom = (selector, element = document) => {
+    if (selector[0] === '#') {
+        return element.getElementById(selector.substring(1));
+    }
+    return element.querySelector(selector);
+};
+$dom.all = (selector, element = document) => {
+    return element.querySelectorAll(selector);
+};
+$dom.each = (selector, callback, element) => {
+    $dom.all(selector, element).forEach(callback);
+};
+$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);
+};

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

@@ -0,0 +1,32 @@
+const assetUrl = (asset, type) => {
+    const str = CONFIG[asset][type];
+    if (str.includes('gh') || str.includes('combine')) {
+        return `https://cdn.jsdelivr.net/${str}`;
+    }
+    if (str.includes('npm')) {
+        return `https://cdn.jsdelivr.net/${str}`;
+    }
+    if (str.includes('http')) {
+        return str;
+    }
+    return `/${str}`;
+};
+const vendorJs = (type, callback, condition) => {
+    if (LOCAL[type]) {
+        getScript(assetUrl('js', type), callback || function () {
+            window[type] = true;
+        }, condition || window[type]);
+    }
+};
+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

@@ -0,0 +1,105 @@
+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;
+    },
+    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) {
+            this.style.height = typeof h === 'number' ? h + 'rem' : h;
+        }
+        return this.getBoundingClientRect().height;
+    },
+    changeOrGetWidth(w) {
+        if (w) {
+            this.style.width = typeof w === 'number' ? w + 'rem' : w;
+        }
+        return this.getBoundingClientRect().width;
+    },
+    getTop() {
+        return this.getBoundingClientRect().top;
+    },
+    left() {
+        return this.getBoundingClientRect().left;
+    },
+    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);
+        }
+    },
+    display(d) {
+        if (d == null) {
+            return this.style.display;
+        }
+        else {
+            this.style.display = d;
+            return this;
+        }
+    },
+    child(selector) {
+        return $dom(selector, this);
+    },
+    find(selector) {
+        return $dom.all(selector, this);
+    },
+    _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);
+            }
+        });
+    },
+    addClass(className) {
+        this._class('add', className);
+        return this;
+    },
+    removeClass(className) {
+        this._class('remove', className);
+        return this;
+    },
+    toggleClass(className, display) {
+        this._class('toggle', className, display);
+        return this;
+    },
+    hasClass(className) {
+        return this.classList.contains(className);
+    }
+});

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

@@ -0,0 +1,57 @@
+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');
+        }
+    });
+}
+const getScript = (url, callback, condition) => {
+    if (condition) {
+        callback();
+    }
+    else {
+        let script = document.createElement('script');
+        script.onload = function (_, isAbort) {
+            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);
+    }
+};
+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) {
+        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

@@ -0,0 +1,11 @@
+const $storage = {
+    set(key, value) {
+        localStorage.setItem(key, value);
+    },
+    get(key) {
+        return localStorage.getItem(key);
+    },
+    del(key) {
+        localStorage.removeItem(key);
+    }
+};

package/source/js/_app/{vue.js → library/vue.js}

@@ -10,16 +10,16 @@ Vue.createApp({
                 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 = function () {
+            const hideNeko = () => {
                 transition(neko, {
                     delay: 2500,
                     opacity: 0
-                }, function () {
+                }, () => {
                     BODY.removeChild(neko);
                 });
             };
             if (btn.hasClass('i-sun')) {
-                c = function () {
+                c = () => {
                     neko.addClass('dark');
                     changeTheme('dark');
                     $storage.set('theme', 'dark');
@@ -28,16 +28,16 @@ Vue.createApp({
             }
             else {
                 neko.addClass('dark');
-                c = function () {
+                c = () => {
                     neko.removeClass('dark');
                     changeTheme();
                     $storage.set('theme', 'light');
                     hideNeko();
                 };
             }
-            transition(neko, 1, function () {
+            transition(neko, 1, () => {
                 setTimeout(c, 210);
-            }, function () {
+            }, () => {
                 neko.display('block');
             });
         }

package/source/js/_app/page/comment.js

@@ -0,0 +1,19 @@
+const 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

@@ -0,0 +1,57 @@
+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 });
+        });
+    });
+};
+const registerExtURL = () => {
+    $dom.each('span.exturl', (element) => {
+        const link = document.createElement('a');
+        link.href = decodeURIComponent(window.atob(element.dataset.url).split('').map((c) => {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        }).join(''));
+        link.rel = 'noopener external nofollow noreferrer';
+        link.target = '_blank';
+        link.className = element.className;
+        link.title = element.title || element.innerText;
+        link.innerHTML = element.innerHTML;
+        if (element.dataset.backgroundImage) {
+            link.dataset.backgroundImage = element.dataset.backgroundImage;
+        }
+        element.parentNode.replaceChild(link, element);
+    });
+};

package/source/js/_app/page/fancybox.js

@@ -0,0 +1,59 @@
+const postFancybox = (p) => {
+    if ($dom(p + ' .md img')) {
+        vendorCss('fancybox');
+        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) => {
+                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,
+                helpers: {
+                    overlay: {
+                        locked: false
+                    }
+                }
+            });
+        }, window.jQuery);
+    }
+};

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

@@ -0,0 +1,232 @@
+const postBeauty = () => {
+    loadComments();
+    if (!$dom('.md')) {
+        return;
+    }
+    postFancybox('.post.block');
+    $dom('.post.block').oncopy = async (event) => {
+        showtip(LOCAL.copyright);
+        if (LOCAL.nocopy) {
+            event.preventDefault();
+            return;
+        }
+        const copyright = await $dom.asyncify('#copyright');
+        if (window.getSelection().toString().length > 30 && copyright) {
+            event.preventDefault();
+            const author = '# ' + copyright.child('.author').innerText;
+            const link = '# ' + copyright.child('.link').innerText;
+            const license = '# ' + copyright.child('.license').innerText;
+            const htmlData = author + '<br>' + link + '<br>' + license + '<br><br>' + window.getSelection().toString().replace(/\r\n/g, '<br>');
+            const textData = author + '\n' + link + '\n' + license + '\n\n' + window.getSelection().toString().replace(/\r\n/g, '\n');
+            if (event.clipboardData) {
+                event.clipboardData.setData('text/html', htmlData);
+                event.clipboardData.setData('text/plain', textData);
+            }
+            else {
+                if (window.clipboardData) {
+                    return window.clipboardData.setData('text', textData);
+                }
+            }
+        }
+    };
+    $dom.each('li ruby', (element) => {
+        let parent = element.parentNode;
+        if (element.parentNode.tagName !== 'LI') {
+            parent = element.parentNode.parentNode;
+        }
+        parent.addClass('ruby');
+    });
+    $dom.each('ol[start]', (element) => {
+        element.style.counterReset = 'counter ' + parseInt(element.attr('start') - 1);
+    });
+    $dom.each('.md table', (element) => {
+        element.wrapObject({
+            className: 'table-container'
+        });
+    });
+    $dom.each('.highlight > .table-container', (element) => {
+        element.className = 'code-container';
+    });
+    $dom.each('figure.highlight', (element) => {
+        const code_container = element.child('.code-container');
+        const caption = element.child('figcaption');
+        element.insertAdjacentHTML('beforeend', '<div class="operation"><span class="breakline-btn"><i class="ic i-align-left"></i></span><span class="copy-btn"><i class="ic i-clipboard"></i></span><span class="fullscreen-btn"><i class="ic i-expand"></i></span></div>');
+        const copyBtn = element.child('.copy-btn');
+        if (LOCAL.nocopy) {
+            copyBtn.remove();
+        }
+        else {
+            copyBtn.addEventListener('click', (event) => {
+                const target = event.currentTarget;
+                let comma = '';
+                let code = '';
+                code_container.find('pre').forEach((line) => {
+                    code += comma + line.innerText;
+                    comma = '\n';
+                });
+                clipBoard(code, (result) => {
+                    target.child('.ic').className = result ? 'ic i-check' : 'ic i-times';
+                    target.blur();
+                    showtip(LOCAL.copyright);
+                });
+            }, { passive: true });
+            copyBtn.addEventListener('mouseleave', (event) => {
+                setTimeout(() => {
+                    event.target.child('.ic').className = 'ic i-clipboard';
+                }, 1000);
+            });
+        }
+        const breakBtn = element.child('.breakline-btn');
+        breakBtn.addEventListener('click', (event) => {
+            const target = event.currentTarget;
+            if (element.hasClass('breakline')) {
+                element.removeClass('breakline');
+                target.child('.ic').className = 'ic i-align-left';
+            }
+            else {
+                element.addClass('breakline');
+                target.child('.ic').className = 'ic i-align-justify';
+            }
+        });
+        const fullscreenBtn = element.child('.fullscreen-btn');
+        const removeFullscreen = () => {
+            element.removeClass('fullscreen');
+            element.scrollTop = 0;
+            BODY.removeClass('fullscreen');
+            fullscreenBtn.child('.ic').className = 'ic i-expand';
+        };
+        const fullscreenHandle = () => {
+            if (element.hasClass('fullscreen')) {
+                removeFullscreen();
+                if (code_container && code_container.find('tr').length > 15) {
+                    const showBtn = code_container.child('.show-btn');
+                    code_container.style.maxHeight = '300px';
+                    showBtn.removeClass('open');
+                }
+                pageScroll(element);
+            }
+            else {
+                element.addClass('fullscreen');
+                BODY.addClass('fullscreen');
+                fullscreenBtn.child('.ic').className = 'ic i-compress';
+                if (code_container && code_container.find('tr').length > 15) {
+                    const showBtn = code_container.child('.show-btn');
+                    code_container.style.maxHeight = '';
+                    showBtn.addClass('open');
+                }
+            }
+        };
+        fullscreenBtn.addEventListener('click', fullscreenHandle);
+        caption && caption.addEventListener('click', fullscreenHandle);
+        if (code_container && code_container.find('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.child('.show-btn');
+            const hideCode = () => {
+                code_container.style.maxHeight = '300px';
+                showBtn.removeClass('open');
+            };
+            const showCode = () => {
+                code_container.style.maxHeight = '';
+                showBtn.addClass('open');
+            };
+            showBtn.addEventListener('click', () => {
+                if (showBtn.hasClass('open')) {
+                    removeFullscreen();
+                    hideCode();
+                    pageScroll(code_container);
+                }
+                else {
+                    showCode();
+                }
+            });
+        }
+    });
+    $dom.asyncifyEach('pre.mermaid > svg', (element) => {
+        const temp = element;
+        temp.style.maxWidth = '';
+    });
+    $dom.each('.reward button', (element) => {
+        element.addEventListener('click', (event) => {
+            event.preventDefault();
+            const qr = $dom('#qr');
+            if (qr.display() === 'inline-flex') {
+                transition(qr, 0);
+            }
+            else {
+                transition(qr, 1, () => {
+                    qr.display('inline-flex');
+                });
+            }
+        });
+    });
+    $dom.asyncifyEach('.quiz > ul.options li', (element) => {
+        element.addEventListener('click', () => {
+            if (element.hasClass('correct')) {
+                element.toggleClass('right');
+                element.parentNode.parentNode.addClass('show');
+            }
+            else {
+                element.toggleClass('wrong');
+            }
+        });
+    });
+    $dom.asyncifyEach('.quiz > p', (element) => {
+        element.addEventListener('click', () => {
+            element.parentNode.toggleClass('show');
+        });
+    });
+    $dom.asyncifyEach('.quiz > p:first-child', (element) => {
+        const quiz = element.parentNode;
+        let type = 'choice';
+        if (quiz.hasClass('true') || quiz.hasClass('false')) {
+            type = 'true_false';
+        }
+        if (quiz.hasClass('multi')) {
+            type = 'multiple';
+        }
+        if (quiz.hasClass('fill')) {
+            type = 'gap_fill';
+        }
+        if (quiz.hasClass('essay')) {
+            type = 'essay';
+        }
+        element.attr('data-type', LOCAL.quiz[type]);
+    });
+    $dom.asyncifyEach('.quiz .mistake', (element) => {
+        element.attr('data-type', LOCAL.quiz.mistake);
+    });
+    $dom.each('div.tags a', (element) => {
+        element.className = ['primary', 'success', 'info', 'warning', 'danger'][Math.floor(Math.random() * 5)];
+    });
+    $dom.asyncifyEach('.md div.player', (element) => {
+        mediaPlayer(element, {
+            type: element.attr('data-type'),
+            mode: 'order',
+            btns: []
+        }).player.load(JSON.parse(element.attr('data-src'))).fetch();
+    });
+    const angleDown = document.querySelectorAll('.show-btn .i-angle-down');
+    if (angleDown.length) {
+        const io = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    angleDown.forEach(i => {
+                        i.classList.remove('stop-animation');
+                    });
+                }
+                else {
+                    angleDown.forEach(i => {
+                        i.classList.add('stop-animation');
+                    });
+                }
+            });
+        }, {
+            root: null,
+            threshold: 0.5
+        });
+        angleDown.forEach(i => {
+            io.observe(i);
+        });
+    }
+};