dev: prevent some circular dependency

Author: Lhcfl

layout/tags.pug

@@ -11,7 +11,6 @@ block content
   if theme.useTagCloud
     .autopagerize_page_element: .content
       .tag_box
-        script(type="text/javascript", charset="utf-8", src="/js/tagcloud.js")
         script(type="text/javascript", charset="utf-8", src="/js/tagcanvas.js")
         #myCanvasContainer.widget.tagcloud(align="center")
           canvas#resCanvas

source/js/tagcanvas.js

@@ -2553,4 +2553,60 @@
     },
     window,
   );
+
+  function addLoadEvent(func) {
+    var oldonload = window.onload;
+    if (typeof window.onload != 'function') {
+      window.onload = func;
+    } else {
+      window.onload = function () {
+        oldonload();
+        func();
+      };
+    }
+  }
+
+  addLoadEvent(function () {
+    console.log('tag cloud plugin rock and roll!');
+    try {
+      var wid = document.body.clientWidth;
+      var textHeight = wid / 18;
+      if (textHeight > 40) {
+        textHeight = 40;
+      }
+      var wid2 = parseInt(document.body.clientWidth * 0.45);
+      if (wid2 < 320) {
+        wid2 = 320;
+      }
+      document.getElementById('resCanvas').width = wid2;
+      document.getElementById('resCanvas').height = wid2;
+
+      TagCanvas.textFont = 'PingHei, PingFang SC, Helvetica Neue, Microsoft YaHei';
+      TagCanvas.textColour = '#333';
+      TagCanvas.textHeight = textHeight;
+      TagCanvas.outlineColour = '#E2E1D1';
+      TagCanvas.maxSpeed = 0.07;
+      TagCanvas.freezeActive = true;
+      TagCanvas.outlineMethod = 'block';
+      TagCanvas.minBrightness = 0.2;
+      TagCanvas.depth = 0.92;
+      TagCanvas.pulsateTo = 0.6;
+      TagCanvas.initial = [0.1, -0.1];
+      TagCanvas.decel = 0.98;
+      TagCanvas.reverse = true;
+      TagCanvas.hideTags = false;
+      TagCanvas.shadow = '#ccf';
+      TagCanvas.shadowBlur = 3;
+      TagCanvas.weight = false;
+      TagCanvas.imageScale = null;
+      TagCanvas.fadeIn = 1000;
+      TagCanvas.clickToFront = 600;
+      TagCanvas.lock = false;
+      TagCanvas.Start('resCanvas');
+      TagCanvas.tc['resCanvas'].Wheel(true);
+    } catch (e) {
+      console.log(e);
+      document.getElementById('myCanvasContainer').style.display = 'none';
+    }
+  });
 })();

source/js/tagcloud.js

@@ -1,5 +1,6 @@
 import { CommentConfig } from '@/types/comment';
 import { Anatolo } from './anatolo';
+import { router } from './router';
 
 let config: CommentConfig | null = null;
 
@@ -49,6 +50,8 @@ export async function load(retry = 3) {
   }
 }
 
+router.onPageChange(load);
+
 export function setConfig(conf: CommentConfig) {
   config = conf;
 }

src/anatolo/comment.ts

@@ -1,11 +1,11 @@
 import { make_friends_list } from '@/utils/main';
 import { AnatoloRef } from './ref';
 import { site } from './site';
-import { load as loadComment } from './comment';
 
 type RouterState = { url: string; body: string; title: string; scrollY?: number };
 
 export class AnatoloRouter {
+  pageChangeFns: (() => void)[] = [];
   routerStates = new Map<string, RouterState>();
   __animating = new AnatoloRef(false);
   __loading = new AnatoloRef(false);
@@ -212,14 +212,25 @@ export class AnatoloRouter {
 
   handlePage() {
     this.scrollToHash();
-    loadComment().catch(() => {});
-    make_friends_list();
+    this.pageChangeFns.forEach((fn) => {
+      try {
+        fn();
+      } catch (error) {
+        console.error(error);
+      }
+    });
   }
 
   onPopState(event: PopStateEvent) {
     event.preventDefault();
     this.routeTo(window.location.href, false);
   }
+
+  onPageChange(fn: () => void) {
+    this.pageChangeFns.push(fn);
+  }
 }
 
 export const router = new AnatoloRouter();
+
+router.onPageChange(make_friends_list);

src/anatolo/router.ts

@@ -0,0 +1,22 @@
+import { success } from '@/components/success';
+
+export async function copyToClipboard(text: string) {
+  try {
+    await window.navigator.clipboard.writeText(text);
+  } catch (err) {
+    // fallback
+    const t = document.createElement('textarea');
+    t.value = text;
+    t.style.width = '0';
+    t.style.position = 'fixed';
+    t.style.left = '-999px';
+    t.style.top = '10px';
+    t.setAttribute('readonly', 'readonly');
+    document.body.appendChild(t);
+    t.select();
+    document.execCommand('copy');
+    document.body.removeChild(t);
+  } finally {
+    success();
+  }
+}

src/utils/copy-to-clipboard.ts

@@ -0,0 +1,13 @@
+export function escapeHTML(str: any) {
+  return String(str).replace(
+    /[&<>'"]/g,
+    (tag) =>
+      ({
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        "'": '&#39;',
+        '"': '&quot;',
+      })[tag] || tag,
+  );
+}

src/utils/escape-html.ts

@@ -1,4 +1,5 @@
-import { escapeHTML, h } from './main';
+import { escapeHTML } from './escape-html';
+import { h } from './html-helper';
 
 export function make_friends_list() {
   try {

src/utils/friend-link.tsx

@@ -1,4 +1,3 @@
-import { success } from '@/components/success';
 export { h } from './html-helper';
 
 export function nextTick(fn: () => void) {
@@ -7,39 +6,6 @@ export function nextTick(fn: () => void) {
   }, 10);
 }
 
-export function escapeHTML(str: any) {
-  return String(str).replace(
-    /[&<>'"]/g,
-    (tag) =>
-      ({
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        "'": '&#39;',
-        '"': '&quot;',
-      })[tag] || tag,
-  );
-}
-
+export { escapeHTML } from './escape-html';
 export { make_friends_list } from './friend-link';
-
-export async function copyToClipboard(text: string) {
-  try {
-    await window.navigator.clipboard.writeText(text);
-  } catch (err) {
-    // fallback
-    const t = document.createElement('textarea');
-    t.value = text;
-    t.style.width = '0';
-    t.style.position = 'fixed';
-    t.style.left = '-999px';
-    t.style.top = '10px';
-    t.setAttribute('readonly', 'readonly');
-    document.body.appendChild(t);
-    t.select();
-    document.execCommand('copy');
-    document.body.removeChild(t);
-  } finally {
-    success();
-  }
-}
+export { copyToClipboard } from './copy-to-clipboard';