-import {onChildEvent, onEnterPress, onSelect} from "../services/dom";
+import {onChildEvent, onEnterPress, onSelect} from '../services/dom.ts';
+import {Component} from './component';
-/**
- * Code Editor
- * @extends {Component}
- */
-class CodeEditor {
+export class CodeEditor extends Component {
+
+ /**
+ * @type {null|SimpleEditorInterface}
+ */
+ editor = null;
+
+ /**
+ * @type {?Function}
+ */
+ saveCallback = null;
+
+ /**
+ * @type {?Function}
+ */
+ cancelCallback = null;
+
+ history = {};
+
+ historyKey = 'code_history';
setup() {
this.container = this.$refs.container;
this.popup = this.$el;
this.editorInput = this.$refs.editor;
- this.languageLinks = this.$manyRefs.languageLink;
+ this.languageButtons = this.$manyRefs.languageButton;
+ this.languageOptionsContainer = this.$refs.languageOptionsContainer;
this.saveButton = this.$refs.saveButton;
this.languageInput = this.$refs.languageInput;
this.historyDropDown = this.$refs.historyDropDown;
this.historyList = this.$refs.historyList;
+ this.favourites = new Set(this.$opts.favourites.split(','));
- this.callback = null;
- this.editor = null;
- this.history = {};
- this.historyKey = 'code_history';
this.setupListeners();
+ this.setupFavourites();
}
setupListeners() {
}
});
- onSelect(this.languageLinks, event => {
+ onSelect(this.languageButtons, event => {
const language = event.target.dataset.lang;
this.languageInput.value = language;
this.languageInputChange(language);
});
- onEnterPress(this.languageInput, e => this.save());
- this.languageInput.addEventListener('input', e => this.languageInputChange(this.languageInput.value));
- onSelect(this.saveButton, e => this.save());
+ onEnterPress(this.languageInput, () => this.save());
+ this.languageInput.addEventListener('input', () => this.languageInputChange(this.languageInput.value));
+ onSelect(this.saveButton, () => this.save());
onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
event.preventDefault();
const historyTime = elem.dataset.time;
if (this.editor) {
- this.editor.setValue(this.history[historyTime]);
+ this.editor.setContent(this.history[historyTime]);
+ }
+ });
+ }
+
+ setupFavourites() {
+ for (const button of this.languageButtons) {
+ this.setupFavouritesForButton(button);
+ }
+
+ this.sortLanguageList();
+ }
+
+ /**
+ * @param {HTMLButtonElement} button
+ */
+ setupFavouritesForButton(button) {
+ const language = button.dataset.lang;
+ let isFavorite = this.favourites.has(language);
+ button.setAttribute('data-favourite', isFavorite ? 'true' : 'false');
+
+ onChildEvent(button.parentElement, '.lang-option-favorite-toggle', 'click', () => {
+ isFavorite = !isFavorite;
+
+ if (isFavorite) {
+ this.favourites.add(language);
+ } else {
+ this.favourites.delete(language);
+ }
+
+ button.setAttribute('data-favourite', isFavorite ? 'true' : 'false');
+
+ window.$http.patch('/preferences/update-code-language-favourite', {
+ language,
+ active: isFavorite,
+ });
+
+ this.sortLanguageList();
+ if (isFavorite) {
+ button.scrollIntoView({block: 'center', behavior: 'smooth'});
}
});
}
+ sortLanguageList() {
+ const sortedParents = this.languageButtons.sort((a, b) => {
+ const aFav = a.dataset.favourite === 'true';
+ const bFav = b.dataset.favourite === 'true';
+
+ if (aFav && !bFav) {
+ return -1;
+ } if (bFav && !aFav) {
+ return 1;
+ }
+
+ return a.dataset.lang > b.dataset.lang ? 1 : -1;
+ }).map(button => button.parentElement);
+
+ for (const parent of sortedParents) {
+ this.languageOptionsContainer.append(parent);
+ }
+ }
+
save() {
- if (this.callback) {
- this.callback(this.editor.getValue(), this.languageInput.value);
+ if (this.saveCallback) {
+ this.saveCallback(this.editor.getContent(), this.languageInput.value);
}
this.hide();
}
- open(code, language, callback) {
+ async open(code, language, direction, saveCallback, cancelCallback) {
this.languageInput.value = language;
- this.callback = callback;
+ this.saveCallback = saveCallback;
+ this.cancelCallback = cancelCallback;
- this.show()
- .then(() => this.languageInputChange(language))
- .then(() => window.importVersioned('code'))
- .then(Code => Code.setContent(this.editor, code));
+ await this.show();
+ this.languageInputChange(language);
+ this.editor.setContent(code);
+ this.setDirection(direction);
}
async show() {
}
this.loadHistory();
- this.popup.components.popup.show(() => {
- Code.updateLayout(this.editor);
+ this.getPopup().show(() => {
this.editor.focus();
}, () => {
- this.addHistory()
+ this.addHistory();
+ if (this.cancelCallback) {
+ this.cancelCallback();
+ }
});
}
+ setDirection(direction) {
+ const target = this.editorInput.parentElement;
+ if (direction) {
+ target.setAttribute('dir', direction);
+ } else {
+ target.removeAttribute('dir');
+ }
+ }
+
hide() {
- this.popup.components.popup.hide();
+ this.getPopup().hide();
this.addHistory();
}
+ /**
+ * @returns {Popup}
+ */
+ getPopup() {
+ return window.$components.firstOnElement(this.popup, 'popup');
+ }
+
async updateEditorMode(language) {
- const Code = await window.importVersioned('code');
- Code.setMode(this.editor, language, this.editor.getValue());
+ this.editor.setMode(language, this.editor.getContent());
}
languageInputChange(language) {
this.updateEditorMode(language);
const inputLang = language.toLowerCase();
- let matched = false;
- for (const link of this.languageLinks) {
+ for (const link of this.languageButtons) {
const lang = link.dataset.lang.toLowerCase().trim();
- const isMatch = inputLang && lang.startsWith(inputLang);
+ const isMatch = inputLang === lang;
link.classList.toggle('active', isMatch);
- if (isMatch && !matched) {
- link.scrollIntoView({block: "center", behavior: "smooth"});
- matched = true;
+ if (isMatch) {
+ link.scrollIntoView({block: 'center', behavior: 'smooth'});
}
}
}
const historyKeys = Object.keys(this.history).reverse();
this.historyDropDown.classList.toggle('hidden', historyKeys.length === 0);
this.historyList.innerHTML = historyKeys.map(key => {
- const localTime = (new Date(parseInt(key))).toLocaleTimeString();
- return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
+ const localTime = (new Date(parseInt(key, 10))).toLocaleTimeString();
+ return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
}).join('');
}
addHistory() {
if (!this.editor) return;
- const code = this.editor.getValue();
+ const code = this.editor.getContent();
if (!code) return;
// Stop if we'd be storing the same as the last item
}
}
-
-export default CodeEditor;
\ No newline at end of file
projects / bookstack / blobdiff