webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Converted md settings to localstorage, added preview resize

Browse Source
This commit is contained in:
Dan Brown
2022-11-28 14:08:20 +00:00
parent 38db3a28ea
commit 31c28be57a
8 changed files with 102 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/markdown/editor.js
View File

@ -19,7 +19,7 @@ export async function init(config) {
const editor = {
config,
markdown: new Markdown(),
settings: new Settings(config.settings),
settings: new Settings(config.settingInputs),
};
editor.actions = new Actions(editor);
@ -39,8 +39,8 @@ export async function init(config) {
* @property {Element} displayEl
* @property {HTMLTextAreaElement} inputEl
* @property {String} drawioUrl
* @property {HTMLInputElement[]} settingInputs
* @property {Object<String, String>} text
* @property {Object<String, any>} settings
*/
/**

64
resources/js/markdown/settings.js
View File

@ -1,40 +1,62 @@
import {kebabToCamel} from "../services/text";
export class Settings {
constructor(initialSettings) {
this.settingMap = {};
constructor(settingInputs) {
this.settingMap = {
scrollSync: true,
showPreview: true,
editorWidth: 50,
};
this.changeListeners = {};
this.merge(initialSettings);
this.loadFromLocalStorage();
this.applyToInputs(settingInputs);
this.listenToInputChanges(settingInputs);
}
applyToInputs(inputs) {
for (const input of inputs) {
const name = input.getAttribute('name').replace('md-', '');
input.checked = this.settingMap[name];
}
}
listenToInputChanges(inputs) {
for (const input of inputs) {
input.addEventListener('change', event => {
const name = input.getAttribute('name').replace('md-', '');
this.set(name, input.checked);
});
}
}
loadFromLocalStorage() {
const lsValString = window.localStorage.getItem('md-editor-settings');
if (!lsValString) {
return;
}
const lsVals = JSON.parse(lsValString);
for (const [key, value] of Object.entries(lsVals)) {
if (value !== null && this.settingMap[key] !== undefined) {
this.settingMap[key] = value;
}
}
}
set(key, value) {
key = this.normaliseKey(key);
this.settingMap[key] = value;
window.localStorage.setItem('md-editor-settings', JSON.stringify(this.settingMap));
for (const listener of (this.changeListeners[key] || [])) {
listener(value);
}
}
get(key) {
return this.settingMap[this.normaliseKey(key)] || null;
}
merge(settings) {
for (const [key, value] of Object.entries(settings)) {
this.set(key, value);
}
return this.settingMap[key] || null;
}
onChange(key, callback) {
key = this.normaliseKey(key);
const listeners = this.changeListeners[this.normaliseKey(key)] || [];
const listeners = this.changeListeners[key] || [];
listeners.push(callback);
this.changeListeners[this.normaliseKey(key)] = listeners;
}
normaliseKey(key) {
return kebabToCamel(key.replace('md-', ''));
this.changeListeners[key] = listeners;
}
}