♻️ Refactor script builder

Fix #50 (comment)

src/main/java/top/mczhengyi/vditor/utils/ScriptBuilder.java

@@ -0,0 +1,35 @@
+package top.mczhengyi.vditor.utils;
+
+/**
+ * Script Builder
+ * 用于构造Script、内嵌Script、样式表
+ * @author zhengyi59
+ */
+public class ScriptBuilder {
+    private final StringBuilder script;
+
+    ScriptBuilder() {
+        this.script = new StringBuilder();
+    }
+
+    public ScriptBuilder script(String path, String id) {
+        this.script.append("<script src=\"/plugins/vditor-mde/assets/static/%s?version=${version}\" id=\"vditor-%s\"></script>"
+            .formatted(path, id));
+        return this;
+    }
+
+    public ScriptBuilder innerScript(String script) {
+        this.script.append("<script>%s</script>".formatted(script));
+        return this;
+    }
+
+    public ScriptBuilder stylesheet(String path, String id) {
+        this.script.append("<link rel=\"stylesheet\" type=\"text/css\" href=\"/plugins/vditor-mde/assets/static/%s?version=${version}\" id=\"vditor-%s\" />"
+            .formatted(path, id));
+        return  this;
+    }
+
+    public String getScript() {
+        return this.script.toString();
+    }
+}

src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java

@@ -10,42 +10,17 @@ public class ScriptUtils {
         PROPERTY_PLACEHOLDER_HELPER = new PropertyPlaceholderHelper("${", "}");
 
     public static String renderScript(RenderConfig renderConfig) {
-        StringBuilder script = new StringBuilder();
-        script.append(basicScript(renderConfig));
-        // 如果是跟随Joe 3.0则注入脚本
-        if ("joe".equals(renderConfig.getDarkMode()))
-            script.append(joeDarkMode());
-        return script.toString();
-    }
-
-    public static String basicScript(RenderConfig renderConfig) {
-        return """
-                <link rel="stylesheet" type="text/css" href="/plugins/vditor-mde/assets/static/vditor-render.css?version=${version}" id="vditor-style" />
-                <script src="/plugins/vditor-mde/assets/static/dist/method.min.js?version=${version}"></script>
-                <script src="/plugins/vditor-mde/assets/static/render.js?version=${version}" id="vditor-render"
-                  data-dark="%s" data-mediaRender="%s"></script>
-                """.formatted(renderConfig.getDarkMode(), renderConfig.getMediaRender());
-    }
-
-    public static String joeDarkMode() {
-        return """
-            <script>
-            window.addEventListener("load", () => {
-                var html = document.getElementsByTagName("html")[0]
-                if (!html) return
-                setTheme(html.dataset.mode)
-                var callback = (mutation) => {
-                    if (mutation[0].attributeName=="data-mode") {
-                        console.log("CHANGED")
-                        var mode = mutation[0].target.dataset.mode
-                        setTheme(mode)
-                    }
-                }
-                var observer = new MutationObserver(callback)
-                observer.observe(html, {attributes:true})
-            })
-            </script>
-            """;
+        ScriptBuilder script = new ScriptBuilder();
+        script.stylesheet("vditor-render.css", "style")
+            .script("dist/method.min.js", "methods")
+            .script("render.js", "render");
+        if (renderConfig.getMediaRender())
+            script.script("external/media-render.js", "media");
+        if (!renderConfig.getDarkMode().equals("disabled")) {
+            script.script("dark-mode/dark-%s.js".formatted(renderConfig.getDarkMode()), "dark-mode");
+        }
+        script.innerScript("initRender()");
+        return script.getScript();
     }
 
     public static String setContentProperty(String script, PluginWrapper pluginWrapper) {

src/main/resources/static/dark-mode/dark-joe.js

@@ -0,0 +1,7 @@
+window.addEventListener("load", () => {
+    console.log("Use Joe Dark Mode")
+    let html = document.getElementsByTagName("html")[0]
+    if (!html) return
+    const mode = html.dataset.mode
+    setDarkMode(mode === "dark")
+})

src/main/resources/static/dark-mode/dark-system.js

@@ -0,0 +1,5 @@
+window.addEventListener("load", () => {
+    console.log("Use System Dark Mode")
+    let media = window.matchMedia('(prefers-color-scheme: dark)');
+    setDarkMode(media.matches)
+})

src/main/resources/static/external/media-render.js

@@ -0,0 +1,8 @@
+addExternal((conf) => {
+    console.log("Run External Function: Media Render!")
+    let mediaRenderOption = document.getElementById("vditor-render").dataset.mediarender
+    if (mediaRenderOption==="true") {
+        let article = document.getElementById("vditor-render").parentElement;
+        Vditor.mediaRender(article)
+    }
+})

src/main/resources/static/render.js

@@ -1,11 +1,32 @@
 const THEME_PREFIX="/plugins/vditor-mde/assets/static/themes"
 const CDN = "/plugins/vditor-mde/assets/static"
 
-window.addEventListener("load", () => {
-    // 暗色模式初始化
-    let dark = initDarkMode()
-    setTheme(dark?"dark":"light")
+/** 拓展处理 ({dark}) => void */
+let functionList = []
+let darkMode = false
 
+/**
+ * 处理渲染
+ * @param func
+ */
+function addExternal(func) {
+    functionList.push(func)
+}
+
+/**
+ * 设置暗色模式
+ * @param {Boolean} dark
+ */
+function setDarkMode(dark = false) {
+    darkMode = dark
+}
+
+/**
+ * 渲染
+ * @param dark
+ */
+function render(dark) {
+    Vditor.setContentTheme(dark?"dark":"light", THEME_PREFIX)
     const root = document.getElementById("vditor-render").parentElement
     root.classList.add("vditor-reset")
     // Render
@@ -18,56 +39,17 @@ window.addEventListener("load", () => {
     Vditor.graphvizRender(root, CDN)
     Vditor.flowchartRender(root, CDN)
     Vditor.haloRender(root, CDN)
-    // Render Media
-    let mediaRenderOption = document.getElementById("vditor-render").dataset.mediarender
-    if (mediaRenderOption==="true") {
-        let article = document.getElementById("vditor-render").parentElement;
-        Vditor.mediaRender(article)
-    }
-})
-
-/**
- * 初始化暗色模式策略
- * 创建所需监听器
- * @returns {boolean} 初始暗黑模式状态
- */
-function initDarkMode() {
-    let darkModeChange = document.getElementById("vditor-render").dataset.dark
-    let dark = false
-    // 检测暗黑模式策略
-    switch (darkModeChange) {
-            // 禁用暗黑模式
-        case "disabled": break
-            // 跟随系统
-        case "system":
-            dark = initSystemDarkMode()
-    }
-    return dark
-}
-
-
-/**
- * 系统模式暗黑模式策略
- * @returns {boolean}
- */
-function initSystemDarkMode() {
-    let media = window.matchMedia('(prefers-color-scheme: dark)');
-    let callback = (e) => {
-        let prefersDarkMode = e.matches;
-        setTheme(prefersDarkMode?"dark":"light")
-    };
-    if (typeof media.addEventListener === 'function') {
-        media.addEventListener('change', callback);
-    } else if (typeof media.addListener === 'function') {
-        media.addListener(callback);
-    }
-    return media.matches
+    // Run External Plugin
+    functionList.forEach(func => {
+        func({
+            dark
+        })
+    })
 }
 
 /**
- * 配置主题
- * @param theme 主题
+ * 页面加载完成时处理任务
  */
-function setTheme(theme) {
-    Vditor.setContentTheme(theme, THEME_PREFIX)
+function initRender() {
+    window.addEventListener("load", () => render(darkMode))
 }