mirror of
https://github.com/siyuan-note/siyuan.git
synced 2026-02-07 16:04:19 +01:00
182 lines
9.5 KiB
TypeScript
182 lines
9.5 KiB
TypeScript
import {Constants} from "../constants";
|
|
import {addScript} from "../protyle/util/addScript";
|
|
import {addStyle} from "../protyle/util/addStyle";
|
|
/// #if !MOBILE
|
|
import {ipcRenderer} from "electron";
|
|
import {getAllModels} from "../layout/getAll";
|
|
/// #endif
|
|
import {isMobile} from "./functions";
|
|
import {fetchPost} from "./fetch";
|
|
import {exportLayout} from "../layout/util";
|
|
|
|
export const loadAssets = (data: IAppearance) => {
|
|
const defaultStyleElement = document.getElementById("themeDefaultStyle");
|
|
let defaultThemeAddress = `/appearance/themes/${data.mode === 1 ? "midnight" : "daylight"}/${data.customCSS ? "custom" : "theme"}.css?v=${data.customCSS ? new Date().getTime() : Constants.SIYUAN_VERSION}`;
|
|
if ((data.mode === 1 && data.themeDark !== "midnight") || (data.mode === 0 && data.themeLight !== "daylight")) {
|
|
defaultThemeAddress = `/appearance/themes/${data.mode === 1 ? "midnight" : "daylight"}/theme.css?v=${Constants.SIYUAN_VERSION}`;
|
|
}
|
|
if (defaultStyleElement) {
|
|
if (!defaultStyleElement.getAttribute("href").startsWith(defaultThemeAddress)) {
|
|
defaultStyleElement.remove();
|
|
addStyle(defaultThemeAddress, "themeDefaultStyle");
|
|
}
|
|
} else {
|
|
addStyle(defaultThemeAddress, "themeDefaultStyle");
|
|
}
|
|
const styleElement = document.getElementById("themeStyle");
|
|
if ((data.mode === 1 && data.themeDark !== "midnight") || (data.mode === 0 && data.themeLight !== "daylight")) {
|
|
const themeAddress = `/appearance/themes/${data.mode === 1 ? data.themeDark : data.themeLight}/${data.customCSS ? "custom" : "theme"}.css?v=${data.customCSS ? new Date().getTime() : data.themeVer}`;
|
|
if (styleElement) {
|
|
if (!styleElement.getAttribute("href").startsWith(themeAddress)) {
|
|
styleElement.remove();
|
|
addStyle(themeAddress, "themeStyle");
|
|
}
|
|
} else {
|
|
addStyle(themeAddress, "themeStyle");
|
|
}
|
|
} else if (styleElement) {
|
|
styleElement.remove();
|
|
}
|
|
/// #if !MOBILE
|
|
getAllModels().graph.forEach(item => {
|
|
item.searchGraph(false);
|
|
});
|
|
/// #endif
|
|
setCodeTheme();
|
|
|
|
const themeScriptElement = document.getElementById("themeScript");
|
|
const themeScriptAddress = `/appearance/themes/${data.mode === 1 ? data.themeDark : data.themeLight}/theme.js?v=${data.themeVer}`;
|
|
if (themeScriptElement) {
|
|
if (!themeScriptElement.getAttribute("src").startsWith(themeScriptAddress)) {
|
|
themeScriptElement.remove();
|
|
addScript(themeScriptAddress, "themeScript");
|
|
}
|
|
} else {
|
|
addScript(themeScriptAddress, "themeScript");
|
|
}
|
|
|
|
const iconScriptElement = document.getElementById("iconScript");
|
|
const iconURL = `/appearance/icons/${data.icon}/icon.js?v=${data.iconVer}`;
|
|
if (iconScriptElement) {
|
|
if (!iconScriptElement.getAttribute("src").startsWith(iconURL)) {
|
|
iconScriptElement.remove();
|
|
addScript(iconURL, "iconScript");
|
|
}
|
|
} else {
|
|
addScript(iconURL, "iconScript");
|
|
}
|
|
};
|
|
|
|
export const renderSnippet = () => {
|
|
fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 1}, (response) => {
|
|
response.data.snippets.forEach((item: {
|
|
"name": string
|
|
"type": string
|
|
"content": string
|
|
}) => {
|
|
if (item.type === "css") {
|
|
document.head.insertAdjacentHTML("beforeend", `<style id="snippetCSS${item.name}">${item.content}</style>`);
|
|
} else if (item.type === "js") {
|
|
const scriptElement = document.createElement("script");
|
|
scriptElement.type = "text/javascript";
|
|
scriptElement.text = item.content;
|
|
scriptElement.id = `snippetJS${item.name}`;
|
|
document.head.appendChild(scriptElement);
|
|
}
|
|
})
|
|
});
|
|
}
|
|
|
|
export const initAssets = () => {
|
|
const emojiElement = document.getElementById("emojiScript");
|
|
const loadingElement = document.getElementById("loading");
|
|
if (!emojiElement && !window.siyuan.config.appearance.nativeEmoji && !isMobile()) {
|
|
addScript("/appearance/emojis/twitter-emoji.js?v=1.0.0", "emojiScript").then(() => {
|
|
if (loadingElement) {
|
|
loadingElement.remove();
|
|
}
|
|
});
|
|
} else if (loadingElement) {
|
|
setTimeout(() => {
|
|
loadingElement.remove();
|
|
}, 160);
|
|
}
|
|
};
|
|
|
|
export const setInlineStyle = (set = true) => {
|
|
const height = Math.floor(window.siyuan.config.editor.fontSize * 1.625);
|
|
let style = `.b3-typography, .protyle-wysiwyg, .protyle-title {font-size:${window.siyuan.config.editor.fontSize}px !important}
|
|
.b3-typography code:not(.hljs), .protyle-wysiwyg span[data-type~=code] { font-variant-ligatures: ${window.siyuan.config.editor.codeLigatures ? "normal" : "none"} }
|
|
.li > .protyle-action {height:${height + 8}px;line-height: ${height + 8}px}
|
|
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h1, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h2, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h3, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h4, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h5, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h6 {line-height:${height + 8}px;}
|
|
.protyle-wysiwyg [data-node-id].li > .protyle-action:after {height: ${window.siyuan.config.editor.fontSize}px;width: ${window.siyuan.config.editor.fontSize}px;margin:-${window.siyuan.config.editor.fontSize / 2}px 0 0 -${window.siyuan.config.editor.fontSize / 2}px}
|
|
.protyle-wysiwyg [data-node-id].li > .protyle-action svg {height: ${Math.max(14, window.siyuan.config.editor.fontSize - 8)}px}
|
|
.protyle-wysiwyg [data-node-id] [spellcheck="false"] {min-height:${height}px}
|
|
.protyle-wysiwyg .li {min-height:${height + 8}px}
|
|
.protyle-gutters button svg {height:${height}px}
|
|
.protyle-wysiwyg img.emoji, .b3-typography img.emoji {width:${height - 8}px}
|
|
.protyle-wysiwyg .h1 img.emoji, .b3-typography h1 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.75 * 1.25)}px}
|
|
.protyle-wysiwyg .h2 img.emoji, .b3-typography h2 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.55 * 1.25)}px}
|
|
.protyle-wysiwyg .h3 img.emoji, .b3-typography h3 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.38 * 1.25)}px}
|
|
.protyle-wysiwyg .h4 img.emoji, .b3-typography h4 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.25 * 1.25)}px}
|
|
.protyle-wysiwyg .h5 img.emoji, .b3-typography h5 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.13 * 1.25)}px}
|
|
.protyle-wysiwyg .h6 img.emoji, .b3-typography h6 img.emoji {width:${Math.floor(window.siyuan.config.editor.fontSize * 1.25)}px}`;
|
|
if (window.siyuan.config.editor.fontFamily) {
|
|
style += `.b3-typography:not(.b3-typography--default), .protyle-wysiwyg, .protyle-title, .protyle-title__input{font-family: "${window.siyuan.config.editor.fontFamily}", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important;}`;
|
|
}
|
|
if (set) {
|
|
document.getElementById("editorFontSize").innerHTML = style;
|
|
}
|
|
return style;
|
|
};
|
|
|
|
export const setCodeTheme = (cdn = Constants.PROTYLE_CDN) => {
|
|
const protyleHljsStyle = document.getElementById("protyleHljsStyle") as HTMLLinkElement;
|
|
let css;
|
|
if (window.siyuan.config.appearance.mode === 0) {
|
|
css = window.siyuan.config.appearance.codeBlockThemeLight;
|
|
if (!Constants.SIYUAN_CONFIG_APPEARANCE_LIGHT_CODE.includes(css)) {
|
|
css = "default";
|
|
}
|
|
} else {
|
|
css = window.siyuan.config.appearance.codeBlockThemeDark;
|
|
if (!Constants.SIYUAN_CONFIG_APPEARANCE_DARK_CODE.includes(css)) {
|
|
css = "github-dark";
|
|
}
|
|
}
|
|
const href = `${cdn}/js/highlight.js/styles/${css}.min.css?v=11.5.0`;
|
|
if (!protyleHljsStyle) {
|
|
addStyle(href, "protyleHljsStyle");
|
|
} else if (!protyleHljsStyle.href.includes(href)) {
|
|
protyleHljsStyle.remove();
|
|
addStyle(href, "protyleHljsStyle");
|
|
}
|
|
};
|
|
|
|
export const setMode = (modeElementValue: number) => {
|
|
fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, {
|
|
mode: modeElementValue === 2 ? window.siyuan.config.appearance.mode : modeElementValue,
|
|
modeOS: modeElementValue === 2,
|
|
}), response => {
|
|
if ((
|
|
window.siyuan.config.appearance.themeJS && !response.data.modeOS &&
|
|
(
|
|
response.data.mode !== window.siyuan.config.appearance.mode ||
|
|
window.siyuan.config.appearance.themeLight !== response.data.themeLight ||
|
|
window.siyuan.config.appearance.themeDark !== response.data.themeDark
|
|
)
|
|
) ||
|
|
(response.data.modeOS && !window.siyuan.config.appearance.modeOS)
|
|
) {
|
|
exportLayout(true);
|
|
return;
|
|
}
|
|
window.siyuan.config.appearance = response.data
|
|
/// #if !BROWSER
|
|
ipcRenderer.send(Constants.SIYUAN_CONFIG_THEME, response.data.modeOS ? "system" : (response.data.mode === 1 ? "dark" : "light"));
|
|
ipcRenderer.send(Constants.SIYUAN_CONFIG_CLOSE, response.data.closeButtonBehavior);
|
|
/// #endif
|
|
loadAssets(response.data);
|
|
document.querySelector("#barMode use").setAttribute("xlink:href", `#icon${window.siyuan.config.appearance.modeOS ? "Mode" : (window.siyuan.config.appearance.mode === 0 ? "Light" : "Dark")}`);
|
|
});
|
|
}
|