archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-17 13:52:04 +00:00
Code Issues Projects Releases Wiki Activity

Added language list favourites sorting, updated styles

Browse source 
- Also made code box be greedier with vertical space.
This commit is contained in:
Dan Brown 2022-07-25 19:13:25 +01:00
parent 7fdc7c68b9
commit 8e5f7c6425
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
3 changed files with 38 additions and 10 deletions
resources/js/components
code-editor.js

26
resources/js/components/code-editor.js
View file

@ -10,7 +10,8 @@ class CodeEditor {
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;
@ -32,7 +33,7 @@ class CodeEditor {
}
});
onSelect(this.languageLinks, event => {
onSelect(this.languageButtons, event => {
const language = event.target.dataset.lang;
this.languageInput.value = language;
this.languageInputChange(language);
@ -52,7 +53,7 @@ class CodeEditor {
}
setupFavourites() {
for (const button of this.languageLinks) {
for (const button of this.languageButtons) {
this.setupFavouritesForButton(button);
}
@ -85,7 +86,22 @@ class CodeEditor {
}
sortLanguageList() {
// TODO
const sortedParents = this.languageButtons.sort((a, b) => {
const aFav = a.dataset.favourite === 'true';
const bFav = b.dataset.favourite === 'true';
if (aFav && !bFav) {
return -1;
} else 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() {
@ -134,7 +150,7 @@ class CodeEditor {
this.updateEditorMode(language);
const inputLang = language.toLowerCase();
for (const link of this.languageLinks) {
for (const link of this.languageButtons) {
const lang = link.dataset.lang.toLowerCase().trim();
const isMatch = inputLang === lang;
link.classList.toggle('active', isMatch);