478ef3bce7
Since the front-end received much more code (features) than first expected, the files became much too large. For this reason, the JS and CSS code has now been split by component and thus into several small files. However, since there are now many small files, a JS and CSS bundle tool had to come :D.
55 lines
2.3 KiB
JavaScript
55 lines
2.3 KiB
JavaScript
/**************
|
|
* Settings JS *
|
|
***************/
|
|
|
|
function initSettings() {
|
|
const themeElement = document.getElementById("theme");
|
|
const diagramPreviewTypeElement = document.getElementById("diagramPreviewType");
|
|
const editorWatcherTimeoutElement = document.getElementById("editorWatcherTimeout");
|
|
|
|
function openSettings() {
|
|
setVisibility(document.getElementById("settings"), true, true);
|
|
// fill settings form
|
|
themeElement.value = document.appConfig.theme;
|
|
diagramPreviewTypeElement.value = document.appConfig.diagramPreviewType;
|
|
editorWatcherTimeoutElement.value = document.appConfig.editorWatcherTimeout;
|
|
setEditorValue(document.settingsEditor, JSON.stringify(document.appConfig.editorCreateOptions, null, " "));
|
|
}
|
|
function saveSettings() {
|
|
const appConfig = Object.assign({}, document.appConfig);
|
|
appConfig.theme = themeElement.value;
|
|
appConfig.editorWatcherTimeout = editorWatcherTimeoutElement.value;
|
|
appConfig.diagramPreviewType = diagramPreviewTypeElement.value;
|
|
appConfig.editorCreateOptions = JSON.parse(document.settingsEditor.getValue());
|
|
updateConfig(appConfig);
|
|
closeModal("settings");
|
|
}
|
|
function onThemeChanged(event) {
|
|
const theme = event.target.value;
|
|
const editorCreateOptionsString = document.settingsEditor.getValue();
|
|
const replaceTheme = (theme === "dark") ? "vs" : "vs-dark";
|
|
const substituteTheme = (theme === "dark") ? "vs-dark" : "vs";
|
|
const regex = new RegExp('("theme"\\s*:\\s*)"' + replaceTheme + '"', "gm");
|
|
setEditorValue(document.settingsEditor, editorCreateOptionsString.replace(regex, '$1"' + substituteTheme + '"'));
|
|
}
|
|
|
|
// create app config monaco editor
|
|
document.settingsEditor = monaco.editor.create(document.getElementById("settings-monaco-editor"), {
|
|
language: "json", ...document.appConfig.editorCreateOptions
|
|
});
|
|
// add listeners
|
|
themeElement.addEventListener("change", onThemeChanged);
|
|
document.getElementById("settings-ok-btn").addEventListener("click", saveSettings);
|
|
// support Ctrl+, to open the settings
|
|
window.addEventListener("keydown", function(e) {
|
|
if (e.key === "," && (isMac ? e.metaKey : e.ctrlKey)) {
|
|
e.preventDefault();
|
|
if (!isModalOpen("settings")) {
|
|
openSettings();
|
|
}
|
|
}
|
|
}, false);
|
|
// register model listeners
|
|
registerModalListener("settings", openSettings);
|
|
}
|