hexo-theme-shokax 0.2.9 → 0.3.0

package/source/js/_app/{components.js → components/sidebar.js}

@@ -1,4 +1,4 @@
-const sideBarToggleHandle = function (event, force) {
+const sideBarToggleHandle = (event, force) => {
     if (sideBar.hasClass('on')) {
         sideBar.removeClass('on');
         menuToggle.removeClass('close');
@@ -14,25 +14,24 @@ const sideBarToggleHandle = function (event, force) {
             sideBar.style = '';
         }
         else {
-            transition(sideBar, 'slideRightIn', function () {
+            transition(sideBar, 'slideRightIn', () => {
                 sideBar.addClass('on');
                 menuToggle.addClass('close');
             });
         }
     }
 };
-const sideBarTab = function () {
+const sideBarTab = () => {
     const sideBarInner = sideBar.child('.inner');
-    const panels = sideBar.find('.panel');
     if (sideBar.child('.tab')) {
         sideBarInner.removeChild(sideBar.child('.tab'));
     }
     const list = document.createElement('ul');
     let active = 'active';
     list.className = 'tab';
-    ['contents', 'related', 'overview'].forEach(function (item) {
+    ['contents', 'related', 'overview'].forEach((item) => {
         const element = sideBar.child('.panel.' + item);
-        if (element.innerHTML.replace(/(^\s*)|(\s*$)/g, '').length < 1) {
+        if (element.innerHTML.trim().length < 1) {
             if (item === 'contents') {
                 showContents.display('none');
             }
@@ -54,14 +53,14 @@ const sideBarTab = function () {
         else {
             element.removeClass('active');
         }
-        tab.addEventListener('click', function (event) {
+        tab.addEventListener('click', (event) => {
             const target = event.currentTarget;
             if (target.hasClass('active'))
                 return;
-            sideBar.find('.tab .item').forEach(function (element) {
+            sideBar.find('.tab .item').forEach((element) => {
                 element.removeClass('active');
             });
-            sideBar.find('.panel').forEach(function (element) {
+            sideBar.find('.panel').forEach((element) => {
                 element.removeClass('active');
             });
             sideBar.child('.panel.' + target.className.replace(' item', '')).addClass('active');
@@ -78,18 +77,18 @@ const sideBarTab = function () {
         sideBar.child('.panels').style.paddingTop = '.625rem';
     }
 };
-const sidebarTOC = function () {
-    const activateNavByIndex = function (index, lock) {
+const sidebarTOC = () => {
+    const activateNavByIndex = (index) => {
         const target = navItems[index];
         if (!target)
             return;
         if (target.hasClass('current')) {
             return;
         }
-        $dom.each('.toc .active', function (element) {
+        $dom.each('.toc .active', (element) => {
             element && element.removeClass('active current');
         });
-        sections.forEach(function (element) {
+        sections.forEach((element) => {
             element && element.removeClass('active');
         });
         target.addClass('active current');
@@ -113,32 +112,32 @@ const sidebarTOC = function () {
     if (navItems.length < 1) {
         return;
     }
-    let sections = Array.prototype.slice.call(navItems) || [];
+    let sections = [...navItems];
     let activeLock = null;
-    sections = sections.map(function (element, index) {
+    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 = function (event) {
+        const anchorScroll = (event) => {
             event.preventDefault();
             const target = $dom(decodeURI(event.currentTarget.attr('href')));
             activeLock = index;
-            pageScroll(target, null, function () {
+            pageScroll(target, null, () => {
                 activateNavByIndex(index);
                 activeLock = null;
             });
         };
         link.addEventListener('click', anchorScroll);
-        alink && alink.addEventListener('click', function (event) {
+        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 = function (entries) {
+    const findIndex = (entries) => {
         let index = 0;
         let entry = entries[index];
         if (entry.boundingClientRect.top > 0) {
@@ -155,8 +154,8 @@ const sidebarTOC = function () {
         }
         return sections.indexOf(entry.target);
     };
-    const createIntersectionObserver = function () {
-        const observer = new IntersectionObserver(function (entries, observe) {
+    const createIntersectionObserver = () => {
+        const observer = new IntersectionObserver((entries) => {
             const index = findIndex(entries) + (diffY < 0 ? 1 : 0);
             if (activeLock === null) {
                 activateNavByIndex(index);
@@ -164,23 +163,23 @@ const sidebarTOC = function () {
         }, {
             rootMargin: '0px 0px -100% 0px', threshold: 0
         });
-        sections.forEach(function (element) {
+        sections.forEach((element) => {
             element && observer.observe(element);
         });
     };
     createIntersectionObserver();
 };
-const backToTopHandle = function () {
+const backToTopHandle = () => {
     pageScroll(0);
 };
-const goToBottomHandle = function () {
+const goToBottomHandle = () => {
     pageScroll(parseInt(String(Container.changeOrGetHeight())));
 };
-const goToCommentHandle = function () {
+const goToCommentHandle = () => {
     pageScroll($dom('#comments'));
 };
-const menuActive = function () {
-    $dom.each('.menu .item:not(.title)', function (element) {
+const menuActive = () => {
+    $dom.each('.menu .item:not(.title)', (element) => {
         const target = element.child('a[href]');
         const parentItem = element.parentNode.parentNode;
         if (!target)

package/source/js/_app/fireworks.js

@@ -29,51 +29,41 @@ function setParticuleDirection(p) {
 }
 function createParticule(x, y) {
     const p = {
-        x: undefined,
-        y: undefined,
+        x,
+        y,
         color: undefined,
         radius: undefined,
         endPos: undefined,
-        draw: undefined
+        draw() {
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
+            ctx.fillStyle = p.color;
+            ctx.fill();
+        }
     };
-    p.x = x;
-    p.y = y;
     p.color = colors[anime.random(0, colors.length - 1)];
     p.radius = anime.random(16, 32);
     p.endPos = setParticuleDirection(p);
-    p.draw = function () {
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
-        ctx.fillStyle = p.color;
-        ctx.fill();
-    };
     return p;
 }
 function createCircle(x, y) {
     const p = {
-        x: undefined,
-        y: undefined,
-        color: undefined,
-        radius: undefined,
+        x,
+        y,
+        color: '#FFF',
+        radius: 0.1,
         endPos: undefined,
-        alpha: undefined,
-        lineWidth: undefined,
-        draw: undefined
-    };
-    p.x = x;
-    p.y = y;
-    p.color = '#FFF';
-    p.radius = 0.1;
-    p.alpha = 0.5;
-    p.lineWidth = 6;
-    p.draw = function () {
-        ctx.globalAlpha = p.alpha;
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
-        ctx.lineWidth = p.lineWidth;
-        ctx.strokeStyle = p.color;
-        ctx.stroke();
-        ctx.globalAlpha = 1;
+        alpha: 0.5,
+        lineWidth: 6,
+        draw() {
+            ctx.globalAlpha = p.alpha;
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
+            ctx.lineWidth = p.lineWidth;
+            ctx.strokeStyle = p.color;
+            ctx.stroke();
+            ctx.globalAlpha = 1;
+        }
     };
     return p;
 }
@@ -93,12 +83,8 @@ function animateParticules(x, y) {
         duration: anime.random(1200, 1800),
         easing: 'easeOutExpo',
         update: renderParticule,
-        x: function (p) {
-            return p.endPos.x;
-        },
-        y: function (p) {
-            return p.endPos.y;
-        },
+        x: p => p.endPos.x,
+        y: p => p.endPos.y,
         radius: 0.1
     }).add({
         targets: circle,
@@ -116,11 +102,11 @@ function animateParticules(x, y) {
 }
 const render = anime({
     duration: Infinity,
-    update: function () {
+    update() {
         ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
     }
 });
-const hasAncestor = function (node, name) {
+const hasAncestor = (node, name) => {
     name = name.toUpperCase();
     do {
         if (node === null || node === undefined)
@@ -130,7 +116,7 @@ const hasAncestor = function (node, name) {
     } while ((node = node.parentNode) !== null);
     return false;
 };
-document.addEventListener(tap, function (e) {
+document.addEventListener(tap, (e) => {
     if (hasAncestor(e.target, 'a')) {
         return;
     }

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

@@ -0,0 +1,26 @@
+const statics = CONFIG.statics.indexOf('//') > 0 ? CONFIG.statics : CONFIG.root;
+const scrollAction = { x: 0, y: 0 };
+let diffY = 0;
+let originTitle, titleTime;
+const BODY = document.getElementsByTagName('body')[0];
+const HTML = document.documentElement;
+const Container = $dom('#container');
+const loadCat = $dom('#loading');
+const siteNav = $dom('#nav');
+const siteHeader = $dom('#header');
+const menuToggle = siteNav.child('.toggle');
+const quickBtn = $dom('#quick');
+const sideBar = $dom('#sidebar');
+const siteBrand = $dom('#brand');
+let toolBtn = $dom('#tool');
+let toolPlayer;
+let backToTop;
+let goToComment;
+let showContents;
+let siteSearch = $dom('#search');
+let siteNavHeight, headerHightInner, headerHight;
+let oWinHeight = window.innerHeight;
+let oWinWidth = window.innerWidth;
+let LOCAL_HASH = 0;
+let LOCAL_URL = window.location.href;
+let pjax;

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

@@ -0,0 +1,105 @@
+const resizeHandle = (event) => {
+    siteNavHeight = siteNav.changeOrGetHeight();
+    headerHightInner = siteHeader.changeOrGetHeight();
+    headerHight = headerHightInner + $dom('#waves').changeOrGetHeight();
+    if (oWinWidth !== window.innerWidth) {
+        sideBarToggleHandle(null, 1);
+    }
+    oWinHeight = window.innerHeight;
+    oWinWidth = window.innerWidth;
+};
+const scrollHandle = (event) => {
+    const winHeight = window.innerHeight;
+    const docHeight = getDocHeight();
+    const contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight;
+    const SHOW = window.scrollY > headerHightInner;
+    const startScroll = window.scrollY > 0;
+    if (SHOW) {
+        changeMetaTheme('#FFF');
+    }
+    else {
+        changeMetaTheme('#222');
+    }
+    siteNav.toggleClass('show', SHOW);
+    toolBtn.toggleClass('affix', startScroll);
+    siteBrand.toggleClass('affix', startScroll);
+    sideBar.toggleClass('affix', window.scrollY > headerHight && document.body.offsetWidth > 991);
+    if (typeof scrollAction.y === 'undefined') {
+        scrollAction.y = window.scrollY;
+    }
+    diffY = 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 { }
+    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);
+    }
+};
+const clickMenu = () => {
+    const menuElement = $dom('#clickMenu');
+    window.oncontextmenu = function (event) {
+        if (event.ctrlKey) {
+            return;
+        }
+        event.preventDefault();
+        let x = event.offsetX;
+        let y = event.offsetY;
+        const winWidth = window.innerWidth;
+        const winHeight = window.innerHeight;
+        const menuWidth = menuElement.offsetWidth;
+        const menuHeight = menuElement.offsetHeight;
+        x = winWidth - menuWidth >= x ? x : winWidth - menuWidth;
+        y = winHeight - menuHeight >= y ? y : winHeight - menuHeight;
+        menuElement.style.top = y + 'px';
+        menuElement.style.left = x + 'px';
+        menuElement.classList.add('active');
+        $dom.each('.clickSubmenu', (submenu) => {
+            if (x > (winWidth - menuWidth - submenu.offsetWidth)) {
+                submenu.style.left = '-200px';
+            }
+            else {
+                submenu.style.left = '';
+                submenu.style.right = '-200px';
+            }
+        });
+    };
+    window.addEventListener('click', () => {
+        menuElement.classList.remove('active');
+    });
+};
+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);
+                }
+                titleTime = setTimeout(() => {
+                    document.title = originTitle;
+                }, 2000);
+                break;
+        }
+    });
+};

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

@@ -0,0 +1,48 @@
+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');
+    }
+};
+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();
+        }
+    }
+};
+const changeMetaTheme = (color) => {
+    if (HTML.attr('data-theme') === 'dark') {
+        color = '#222';
+    }
+    $dom('meta[name="theme-color"]').attr('content', color);
+};
+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

@@ -0,0 +1,60 @@
+const lazyload = lozad('img, [data-background-image]', {
+    loaded(el) {
+        el.addClass('lozaded');
+    }
+});
+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;
+    }
+};
+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);
+        }
+        const interval = parseInt(String(now - updateTime));
+        const days = parseInt(String(CONFIG.outime.days)) || 30;
+        if (interval > (days * 86400000)) {
+            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

@@ -0,0 +1,75 @@
+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);
+};
+const pagePosition = () => {
+    if (CONFIG.auto_scroll) {
+        $storage.set(LOCAL_URL, String(scrollAction.y));
+    }
+};
+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);
+        LOCAL_HASH = 1;
+    }
+    if (comment && anchor && !LOCAL_HASH) {
+        pageScroll(target);
+        LOCAL_HASH = 1;
+    }
+};
+const clipBoard = (str, callback) => {
+    if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(str).then(() => {
+            callback && callback(true);
+        }, () => {
+            callback && callback(false);
+        });
+    }
+    else {
+        const ta = BODY.createChild('textarea', {
+            style: {
+                top: window.scrollY + 'px',
+                position: 'absolute',
+                opacity: '0'
+            },
+            readOnly: true,
+            value: str
+        });
+        const selection = document.getSelection();
+        const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
+        ta.select();
+        ta.setSelectionRange(0, str.length);
+        ta.readOnly = false;
+        const result = document.execCommand('copy');
+        callback && callback(result);
+        ta.blur();
+        if (selected) {
+            selection.removeAllRanges();
+            selection.addRange(selected);
+        }
+        BODY.removeChild(ta);
+    }
+};

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

@@ -0,0 +1,85 @@
+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:
+            animation = type;
+            display = type.display;
+            break;
+    }
+    anime(Object.assign({
+        targets: target,
+        duration: 200,
+        easing: 'linear',
+        begin() {
+            begin && begin();
+        },
+        complete() {
+            target.display(display);
+            complete && complete();
+        }
+    }, animation)).play();
+};
+const pageScroll = (target, offset, complete) => {
+    const opt = {
+        targets: typeof offset === 'number' ? target.parentNode : document.scrollingElement,
+        duration: 500,
+        easing: 'easeInOutQuad',
+        scrollTop: offset || (typeof target === 'number' ? target : (target ? target.getTop() + document.documentElement.scrollTop - siteNavHeight : 0)),
+        complete() {
+            complete && complete();
+        }
+    };
+    anime(opt).play();
+};