hexo-theme-shokax 0.4.4 → 0.4.6-beta1

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

@@ -1,42 +1,43 @@
-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 })
-    })
-  })
-}
+import { $dom } from '../library/dom'
+
+export const cardActive = () => {
+  if (!document.querySelector('.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)
+  })
+
+  document.querySelector('.index.wrap .item:first-child').addClass('show')
+
+  $dom.each('.cards .item', (element) => {
+    ['mouseenter', 'touchstart'].forEach((item) => {
+      element.addEventListener(item, () => {
+        const cardEle = document.querySelector('.cards .item.active')
+        if (cardEle) {
+          cardEle.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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postFancybox = void 0;
+const dom_1 = require("../library/dom");
+const loadFile_1 = require("../library/loadFile");
+const proto_1 = require("../library/proto");
+const postFancybox = (p) => {
+    if ((0, dom_1.$dom)(p + ' .md img')) {
+        (0, loadFile_1.vendorCss)('fancybox');
+        (0, loadFile_1.vendorCss)('justifiedGallery');
+        (0, loadFile_1.vendorJs)('fancybox', () => {
+            const q = jQuery.noConflict();
+            dom_1.$dom.each(p + ' p.gallery', (element) => {
+                const box = document.createElement('div');
+                box.className = 'gallery';
+                box.setAttribute('data-height', String(element.getAttribute('data-height') || 220));
+                box.innerHTML = element.innerHTML.replace(/<br>/g, '');
+                element.parentNode.insertBefore(box, element);
+                element.remove();
+            });
+            dom_1.$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.getAttribute('title'))) {
+                    $imageWrapLink.attr('data-caption', info);
+                    const para = document.createElement('span');
+                    const txt = document.createTextNode(info);
+                    para.appendChild(txt);
+                    para.addClass(captionClass);
+                    (0, proto_1.insertAfter)(element, para);
+                }
+            });
+            dom_1.$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.setAttribute('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);
+    }
+};
+exports.postFancybox = postFancybox;

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

@@ -1,71 +1,72 @@
-import { $dom } from '../library/dom'
-import { vendorCss, vendorJs } from '../library/loadFile'
-import { insertAfter } from '../library/proto'
-
-export const postFancybox = (p:string) => {
-  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.setAttribute('data-height', String(element.getAttribute('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.getAttribute('title'))) {
-          $imageWrapLink.attr('data-caption', info)
-          const para = document.createElement('span')
-          const txt = document.createTextNode(info)
-          para.appendChild(txt)
-          para.addClass(captionClass)
-          insertAfter(element, 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.setAttribute('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)
-  }
-}
+import { $dom } from '../library/dom'
+import { vendorCss, vendorJs } from '../library/loadFile'
+import { insertAfter } from '../library/proto'
+
+// TODO 使用PhotoSwipe替换Fancybox
+export const postFancybox = (p:string) => {
+  if (document.querySelector(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.setAttribute('data-height', String(element.getAttribute('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.getAttribute('title'))) {
+          $imageWrapLink.attr('data-caption', info)
+          const para = document.createElement('span')
+          const txt = document.createTextNode(info)
+          para.appendChild(txt)
+          para.addClass(captionClass)
+          insertAfter(element, 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.setAttribute('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)
+  }
+}

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

@@ -0,0 +1,253 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postBeauty = void 0;
+const dom_1 = require("../library/dom");
+const fancybox_1 = require("./fancybox");
+const tools_1 = require("../globals/tools");
+const globalVars_1 = require("../globals/globalVars");
+const anime_1 = require("../library/anime");
+const player_1 = require("../player");
+const proto_1 = require("../library/proto");
+const postBeauty = () => {
+    if (!(0, dom_1.$dom)('.md')) {
+        return;
+    }
+    if (__shokax_fancybox__) {
+        (0, fancybox_1.postFancybox)('.post.block');
+    }
+    (0, dom_1.$dom)('.post.block').oncopy = (event) => {
+        (0, tools_1.showtip)(LOCAL.copyright);
+        if (LOCAL.nocopy) {
+            event.preventDefault();
+            return;
+        }
+        const copyright = (0, dom_1.$dom)('#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 {
+                // @ts-ignore
+                if (window.clipboardData) {
+                    // @ts-ignore
+                    return window.clipboardData.setData('text', textData);
+                }
+            }
+        }
+    };
+    dom_1.$dom.each('li ruby', (element) => {
+        let parent = element.parentNode;
+        // @ts-ignore
+        if (element.parentNode.tagName !== 'LI') {
+            parent = element.parentNode.parentNode;
+        }
+        parent.addClass('ruby');
+    });
+    dom_1.$dom.each('ol[start]', (element) => {
+        // @ts-ignore
+        element.style.counterReset = 'counter ' + parseInt(element.getAttribute('start') - 1);
+    });
+    dom_1.$dom.each('.md table', (element) => {
+        (0, proto_1.wrapObject)(element, {
+            className: 'table-container'
+        });
+    });
+    dom_1.$dom.each('.highlight > .table-container', (element) => {
+        element.className = 'code-container';
+    });
+    dom_1.$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';
+                });
+                (0, tools_1.clipBoard)(code, (result) => {
+                    target.child('.ic').className = result ? 'ic i-check' : 'ic i-times';
+                    target.blur();
+                    (0, tools_1.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;
+            globalVars_1.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');
+                }
+                (0, anime_1.pageScroll)(element);
+            }
+            else {
+                element.addClass('fullscreen');
+                globalVars_1.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();
+                    (0, anime_1.pageScroll)(code_container);
+                }
+                else {
+                    showCode();
+                }
+            });
+        }
+    });
+    dom_1.$dom.each('pre.mermaid > svg', (element) => {
+        const temp = element;
+        temp.style.maxWidth = '';
+    });
+    dom_1.$dom.each('.reward button', (element) => {
+        element.addEventListener('click', (event) => {
+            event.preventDefault();
+            const qr = (0, dom_1.$dom)('#qr');
+            if ((0, proto_1.getDisplay)(qr) === 'inline-flex') {
+                (0, anime_1.transition)(qr, 0);
+            }
+            else {
+                (0, anime_1.transition)(qr, 1, () => {
+                    (0, proto_1.setDisplay)(qr, 'inline-flex');
+                }); // slideUpBigIn
+            }
+        });
+    });
+    // quiz
+    if (__shokax_quiz__) {
+        dom_1.$dom.each('.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_1.$dom.each('.quiz > p', (element) => {
+            element.addEventListener('click', () => {
+                element.parentNode.toggleClass('show');
+            });
+        });
+        dom_1.$dom.each('.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.setAttribute('data-type', LOCAL.quiz[type]);
+        });
+        dom_1.$dom.each('.quiz .mistake', (element) => {
+            element.setAttribute('data-type', LOCAL.quiz.mistake);
+        });
+    }
+    dom_1.$dom.each('div.tags a', (element) => {
+        element.className = ['primary', 'success', 'info', 'warning', 'danger'][Math.floor(Math.random() * 5)];
+    });
+    if (__shokax_player__) {
+        dom_1.$dom.each('.md div.player', (element) => {
+            (0, player_1.mediaPlayer)(element, {
+                type: element.getAttribute('data-type'),
+                mode: 'order',
+                btns: []
+            }).player.load(JSON.parse(element.getAttribute('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);
+        });
+    }
+};
+exports.postBeauty = postBeauty;