refactor: rewrite script (#24)

* docs: add thanks * refactor: rewrite footnotes * refactor: rewrite search * chore: rename to el
WingLim · Jul 5, 2021 · 5618eca · 5618eca
1 parent 0f7d522
commit 5618eca
Show file tree

Hide file tree

Showing 5 changed files with 216 additions and 203 deletions.
diff --git a/README.md b/README.md
@@ -149,8 +149,8 @@ Some content...
 ```
 
 ## Thanks to
-- [你好黑暗，我的老朋友 —— 为网站添加用户友好的深色模式支持](https://blog.skk.moe/post/hello-darkmode-my-old-friend/)
-- [Footnotes, citations, and sidenotes](https://prose.yihui.org/about/#footnotes-citations-and-sidenotes)
+- [hugo-theme-stack](https://github.com/CaiJimmy/hugo-theme-stack) for dark mode switch
+- [hugo-prose](https://github.com/yihui/hugo-prose) for float footnotes
 
 ## License
 

diff --git a/assets/ts/features.ts b/assets/ts/features.ts
@@ -1,74 +1,16 @@
 import ThemeColorScheme from "ts/colorScheme";
+import { renderFootnotes } from "ts/footnotes"
 
-(function (d) {
-    let enableFootnotes = false
-    if (d.currentScript) {
-        enableFootnotes = d.currentScript.dataset['enableFootnotes'] == 'true'
-    }
-    let renderFootnotes = function () {
-        const removeEl = (el: Element) => {
-            if (!el) return;
-            el.remove ? el.remove() : el.parentNode.removeChild(el);
-        };
-
-        const insertAfter = (target: HTMLElement, sib: Element) => {
-            target.after ? target.after(sib) : (
-                target.parentNode.insertBefore(sib, target.nextSibling)
-            );
-        };
-
-        const insideOut = (el: Element) => {
-            var p = el.parentNode as HTMLElement, 
-                x = el.innerHTML,
-                c = document.createElement('div');  // a tmp container
-            insertAfter(p, c);
-            c.appendChild(el);
-            el.innerHTML = '';
-            el.appendChild(p);
-            p.innerHTML = x;  // let the original parent have the content of its child
-            insertAfter(c, c.firstElementChild);
-            removeEl(c);
-        };
+let enableFootnotes = false
+if (document.currentScript) {
+    enableFootnotes = document.currentScript.dataset.enableFootnotes == 'true'
+}
 
-        document.querySelectorAll('.footnotes > ol > li[id^="fn"], #refs > div[id^="ref-"]').forEach(function (fn) {
-            let a = document.querySelectorAll('a[href="#' + fn.id + '"]');
-            if (a.length === 0) return;
-            a.forEach(function (el) { el.removeAttribute('href') });
-            let newA = a[0] as HTMLElement;
-            let side = document.createElement('div');
-            side.className = 'side side-right';
-            if (/^fn/.test(fn.id)) {
-                side.innerHTML = fn.innerHTML;
-                var number = newA.innerHTML;   // footnote number
-                side.firstElementChild.innerHTML = '<span class="bg-number">' + number +
-                    '</span> ' + side.firstElementChild.innerHTML;
-                removeEl(side.querySelector('a[href^="#fnref"]'));  // remove backreference
-                let newAParent = newA.parentNode as HTMLElement
-                newAParent.tagName === 'SUP' && insideOut(newA);
-            } else {
-                side.innerHTML = fn.outerHTML;
-                newA = newA.parentNode as HTMLElement;
-            }
-            insertAfter(newA, side);
-            newA.classList.add('note-ref');
-            removeEl(fn);
-        })
-        document.querySelectorAll('.footnotes, #refs').forEach(function (fn) {
-            var items = fn.children;
-            if (fn.id === 'refs') return items.length === 0 && removeEl(fn);
-            // there must be a <hr> and an <ol> left
-            if (items.length !== 2 || items[0].tagName !== 'HR' || items[1].tagName !== 'OL') return;
-            items[1].childElementCount === 0 && removeEl(fn);
-        });
-    };
+const init = () => {
+    new ThemeColorScheme(document.getElementById('dark-mode-button'))
     if (enableFootnotes) {
         renderFootnotes()
     }
-})(document);
-
-
-const init = () => {
-    new ThemeColorScheme(document.getElementById('dark-mode-button'))
 }
 
 window.addEventListener('load', () => {

diff --git a/assets/ts/footnotes.ts b/assets/ts/footnotes.ts
@@ -0,0 +1,56 @@
+const removeEl = (el: Element) => {
+    if (!el) return;
+    el.remove ? el.remove() : el.parentNode.removeChild(el);
+};
+
+const insertAfter = (target: HTMLElement, sib: Element) => {
+    target.after ? target.after(sib) : (
+        target.parentNode.insertBefore(sib, target.nextSibling)
+    );
+};
+
+const insideOut = (el: Element) => {
+    var p = el.parentNode as HTMLElement, 
+        x = el.innerHTML,
+        c = document.createElement('div');  // a tmp container
+    insertAfter(p, c);
+    c.appendChild(el);
+    el.innerHTML = '';
+    el.appendChild(p);
+    p.innerHTML = x;  // let the original parent have the content of its child
+    insertAfter(c, c.firstElementChild);
+    removeEl(c);
+};
+
+export let renderFootnotes = function () {
+    document.querySelectorAll('.footnotes > ol > li[id^="fn"], #refs > div[id^="ref-"]').forEach(function (fn) {
+        let a = document.querySelectorAll('a[href="#' + fn.id + '"]');
+        if (a.length === 0) return;
+        a.forEach(function (el) { el.removeAttribute('href') });
+        let newA = a[0] as HTMLElement;
+        let side = document.createElement('div');
+        side.className = 'side side-right';
+        if (/^fn/.test(fn.id)) {
+            side.innerHTML = fn.innerHTML;
+            var number = newA.innerHTML;   // footnote number
+            side.firstElementChild.innerHTML = '<span class="bg-number">' + number +
+                '</span> ' + side.firstElementChild.innerHTML;
+            removeEl(side.querySelector('a[href^="#fnref"]'));  // remove backreference
+            let newAParent = newA.parentNode as HTMLElement
+            newAParent.tagName === 'SUP' && insideOut(newA);
+        } else {
+            side.innerHTML = fn.outerHTML;
+            newA = newA.parentNode as HTMLElement;
+        }
+        insertAfter(newA, side);
+        newA.classList.add('note-ref');
+        removeEl(fn);
+    })
+    document.querySelectorAll('.footnotes, #refs').forEach(function (fn) {
+        var items = fn.children;
+        if (fn.id === 'refs') return items.length === 0 && removeEl(fn);
+        // there must be a <hr> and an <ol> left
+        if (items.length !== 2 || items[0].tagName !== 'HR' || items[1].tagName !== 'OL') return;
+        items[1].childElementCount === 0 && removeEl(fn);
+    });
+};