parent
00eb633cf2
commit
dcc0758313
|
@ -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();
|
||||
}
|
||||
}
|
|
@ -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();
|
||||
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");
|
||||
}
|
||||
|
||||
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>
|
||||
""";
|
||||
script.innerScript("initRender()");
|
||||
return script.getScript();
|
||||
}
|
||||
|
||||
public static String setContentProperty(String script, PluginWrapper pluginWrapper) {
|
||||
|
|
|
@ -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")
|
||||
})
|
|
@ -0,0 +1,5 @@
|
|||
window.addEventListener("load", () => {
|
||||
console.log("Use System Dark Mode")
|
||||
let media = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
setDarkMode(media.matches)
|
||||
})
|
|
@ -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)
|
||||
}
|
||||
})
|
|
@ -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)
|
||||
}
|
||||
// Run External Plugin
|
||||
functionList.forEach(func => {
|
||||
func({
|
||||
dark
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* 初始化暗色模式策略
|
||||
* 创建所需监听器
|
||||
* @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
|
||||
}
|
||||
|
||||
/**
|
||||
* 配置主题
|
||||
* @param theme 主题
|
||||
* 页面加载完成时处理任务
|
||||
*/
|
||||
function setTheme(theme) {
|
||||
Vditor.setContentTheme(theme, THEME_PREFIX)
|
||||
function initRender() {
|
||||
window.addEventListener("load", () => render(darkMode))
|
||||
}
|
Loading…
Reference in New Issue