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

Ran eslint fix on existing codebase

Browse Source 
Had to do some manual fixing of the app.js file due to misplaced
comments
This commit is contained in:
Dan Brown
2023-04-18 22:20:02 +01:00
parent 752ee664c2
commit e711290d8b
106 changed files with 905 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/components/add-remove-rows.js
View File

@ -1,6 +1,6 @@
import {onChildEvent} from "../services/dom";
import {uniqueId} from "../services/util";
import {Component} from "./component";
import {onChildEvent} from '../services/dom';
import {uniqueId} from '../services/util';
import {Component} from './component';
/**
* AddRemoveRows
@ -8,6 +8,7 @@ import {Component} from "./component";
* Needs a model row to use when adding a new row.
*/
export class AddRemoveRows extends Component {
setup() {
this.modelRow = this.$refs.model;
this.addButton = this.$refs.add;
@ -19,7 +20,7 @@ export class AddRemoveRows extends Component {
setupListeners() {
this.addButton.addEventListener('click', this.add.bind(this));
onChildEvent(this.$el, this.removeSelector, 'click', (e) => {
onChildEvent(this.$el, this.removeSelector, 'click', e => {
const row = e.target.closest(this.rowSelector);
row.remove();
});
@ -44,9 +45,10 @@ export class AddRemoveRows extends Component {
*/
setClonedInputNames(clone) {
const rowId = uniqueId();
const randRowIdElems = clone.querySelectorAll(`[name*="randrowid"]`);
const randRowIdElems = clone.querySelectorAll('[name*="randrowid"]');
for (const elem of randRowIdElems) {
elem.name = elem.name.split('randrowid').join(rowId);
}
}
}
}

8
resources/js/components/ajax-delete-row.js
View File

@ -1,7 +1,8 @@
import {onSelect} from "../services/dom";
import {Component} from "./component";
import {onSelect} from '../services/dom';
import {Component} from './component';
export class AjaxDeleteRow extends Component {
setup() {
this.row = this.$el;
this.url = this.$opts.url;
@ -24,4 +25,5 @@ export class AjaxDeleteRow extends Component {
this.row.style.pointerEvents = null;
});
}
}
}

10
resources/js/components/ajax-form.js
View File

@ -1,5 +1,5 @@
import {onEnterPress, onSelect} from "../services/dom";
import {Component} from "./component";
import {onEnterPress, onSelect} from '../services/dom';
import {Component} from './component';
/**
* Ajax Form
@ -11,6 +11,7 @@ import {Component} from "./component";
* otherwise will act as a fake form element.
*/
export class AjaxForm extends Component {
setup() {
this.container = this.$el;
this.responseContainer = this.container;
@ -27,7 +28,6 @@ export class AjaxForm extends Component {
}
setupListeners() {
if (this.container.tagName === 'FORM') {
this.container.addEventListener('submit', this.submitRealForm.bind(this));
return;
@ -43,7 +43,7 @@ export class AjaxForm extends Component {
submitFakeForm() {
const fd = new FormData();
const inputs = this.container.querySelectorAll(`[name]`);
const inputs = this.container.querySelectorAll('[name]');
for (const input of inputs) {
fd.append(input.getAttribute('name'), input.value);
}
@ -76,4 +76,4 @@ export class AjaxForm extends Component {
this.responseContainer.style.pointerEvents = null;
}
}
}

13
resources/js/components/attachments-list.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
/**
* Attachments List
@ -13,11 +13,11 @@ export class AttachmentsList extends Component {
}
setupListeners() {
const isExpectedKey = (event) => event.key === 'Control' || event.key === 'Meta';
const isExpectedKey = event => event.key === 'Control' || event.key === 'Meta';
window.addEventListener('keydown', event => {
if (isExpectedKey(event)) {
if (isExpectedKey(event)) {
this.addOpenQueryToLinks();
}
}
}, {passive: true});
window.addEventListener('keyup', event => {
if (isExpectedKey(event)) {
@ -30,7 +30,7 @@ export class AttachmentsList extends Component {
const links = this.container.querySelectorAll('a.attachment-file');
for (const link of links) {
if (link.href.split('?')[1] !== 'open=true') {
link.href = link.href + '?open=true';
link.href += '?open=true';
link.setAttribute('target', '_blank');
}
}
@ -43,4 +43,5 @@ export class AttachmentsList extends Component {
link.removeAttribute('target');
}
}
}
}

6
resources/js/components/attachments.js
View File

@ -1,5 +1,5 @@
import {showLoading} from "../services/dom";
import {Component} from "./component";
import {showLoading} from '../services/dom';
import {Component} from './component';
export class Attachments extends Component {
@ -73,4 +73,4 @@ export class Attachments extends Component {
this.listContainer.classList.remove('hidden');
}
}
}

4
resources/js/components/auto-submit.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class AutoSubmit extends Component {
@ -8,4 +8,4 @@ export class AutoSubmit extends Component {
this.form.submit();
}
}
}

16
resources/js/components/auto-suggest.js
View File

@ -1,7 +1,7 @@
import {escapeHtml} from "../services/util";
import {onChildEvent} from "../services/dom";
import {Component} from "./component";
import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
import {escapeHtml} from '../services/util';
import {onChildEvent} from '../services/dom';
import {Component} from './component';
import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
const ajaxCache = {};
@ -9,6 +9,7 @@ const ajaxCache = {};
* AutoSuggest
*/
export class AutoSuggest extends Component {
setup() {
this.parent = this.$el.parentElement;
this.container = this.$el;
@ -67,9 +68,7 @@ export class AutoSuggest extends Component {
const search = this.input.value.toLowerCase();
const suggestions = await this.loadSuggestions(search, nameFilter);
const toShow = suggestions.filter(val => {
return search === '' || val.toLowerCase().startsWith(search);
}).slice(0, 10);
const toShow = suggestions.filter(val => search === '' || val.toLowerCase().startsWith(search)).slice(0, 10);
this.displaySuggestions(toShow);
}
@ -126,4 +125,5 @@ export class AutoSuggest extends Component {
this.hideSuggestions();
}
}
}
}

20
resources/js/components/back-to-top.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class BackToTop extends Component {
@ -18,7 +18,7 @@ export class BackToTop extends Component {
}
onPageScroll() {
let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
const scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
if (!this.showing && scrollTopPos > this.breakPoint) {
this.button.style.display = 'block';
this.showing = true;
@ -35,15 +35,15 @@ export class BackToTop extends Component {
}
scrollToTop() {
let targetTop = this.targetElem.getBoundingClientRect().top;
let scrollElem = document.documentElement.scrollTop ? document.documentElement : document.body;
let duration = 300;
let start = Date.now();
let scrollStart = this.targetElem.getBoundingClientRect().top;
const targetTop = this.targetElem.getBoundingClientRect().top;
const scrollElem = document.documentElement.scrollTop ? document.documentElement : document.body;
const duration = 300;
const start = Date.now();
const scrollStart = this.targetElem.getBoundingClientRect().top;
function setPos() {
let percentComplete = (1-((Date.now() - start) / duration));
let target = Math.abs(percentComplete * scrollStart);
const percentComplete = (1 - ((Date.now() - start) / duration));
const target = Math.abs(percentComplete * scrollStart);
if (percentComplete > 0) {
scrollElem.scrollTop = target;
requestAnimationFrame(setPos.bind(this));
@ -55,4 +55,4 @@ export class BackToTop extends Component {
requestAnimationFrame(setPos.bind(this));
}
}
}

63
resources/js/components/book-sort.js
View File

@ -1,25 +1,25 @@
import Sortable, {MultiDrag} from "sortablejs";
import {Component} from "./component";
import {htmlToDom} from "../services/dom";
import Sortable, {MultiDrag} from 'sortablejs';
import {Component} from './component';
import {htmlToDom} from '../services/dom';
// Auto sort control
const sortOperations = {
name: function(a, b) {
name(a, b) {
const aName = a.getAttribute('data-name').trim().toLowerCase();
const bName = b.getAttribute('data-name').trim().toLowerCase();
return aName.localeCompare(bName);
},
created: function(a, b) {
created(a, b) {
const aTime = Number(a.getAttribute('data-created'));
const bTime = Number(b.getAttribute('data-created'));
return bTime - aTime;
},
updated: function(a, b) {
updated(a, b) {
const aTime = Number(a.getAttribute('data-updated'));
const bTime = Number(b.getAttribute('data-updated'));
return bTime - aTime;
},
chaptersFirst: function(a, b) {
chaptersFirst(a, b) {
const aType = a.getAttribute('data-type');
const bType = b.getAttribute('data-type');
if (aType === bType) {
@ -27,7 +27,7 @@ const sortOperations = {
}
return (aType === 'chapter' ? -1 : 1);
},
chaptersLast: function(a, b) {
chaptersLast(a, b) {
const aType = a.getAttribute('data-type');
const bType = b.getAttribute('data-type');
if (aType === bType) {
@ -51,7 +51,7 @@ const moveActions = {
run(elem, parent, book) {
const newSibling = elem.previousElementSibling || parent;
newSibling.insertAdjacentElement('beforebegin', elem);
}
},
},
down: {
active(elem, parent, book) {
@ -60,7 +60,7 @@ const moveActions = {
run(elem, parent, book) {
const newSibling = elem.nextElementSibling || parent;
newSibling.insertAdjacentElement('afterend', elem);
}
},
},
next_book: {
active(elem, parent, book) {
@ -69,7 +69,7 @@ const moveActions = {
run(elem, parent, book) {
const newList = book.nextElementSibling.querySelector('ul');
newList.prepend(elem);
}
},
},
prev_book: {
active(elem, parent, book) {
@ -78,7 +78,7 @@ const moveActions = {
run(elem, parent, book) {
const newList = book.previousElementSibling.querySelector('ul');
newList.appendChild(elem);
}
},
},
next_chapter: {
active(elem, parent, book) {
@ -93,7 +93,7 @@ const moveActions = {
const topItems = Array.from(topLevel.parentElement.children);
const index = topItems.indexOf(topLevel);
return topItems.slice(index + 1).find(elem => elem.dataset.type === 'chapter');
}
},
},
prev_chapter: {
active(elem, parent, book) {
@ -108,7 +108,7 @@ const moveActions = {
const topItems = Array.from(topLevel.parentElement.children);
const index = topItems.indexOf(topLevel);
return topItems.slice(0, index).reverse().find(elem => elem.dataset.type === 'chapter');
}
},
},
book_end: {
active(elem, parent, book) {
@ -116,7 +116,7 @@ const moveActions = {
},
run(elem, parent, book) {
book.querySelector('ul').append(elem);
}
},
},
book_start: {
active(elem, parent, book) {
@ -124,7 +124,7 @@ const moveActions = {
},
run(elem, parent, book) {
book.querySelector('ul').prepend(elem);
}
},
},
before_chapter: {
active(elem, parent, book) {
@ -132,7 +132,7 @@ const moveActions = {
},
run(elem, parent, book) {
parent.insertAdjacentElement('beforebegin', elem);
}
},
},
after_chapter: {
active(elem, parent, book) {
@ -140,7 +140,7 @@ const moveActions = {
},
run(elem, parent, book) {
parent.insertAdjacentElement('afterend', elem);
}
},
},
};
@ -197,11 +197,11 @@ export class BookSort extends Component {
let sortFunction = sortOperations[sort];
if (reverse && reversibleTypes.includes(sort)) {
sortFunction = function(a, b) {
return 0 - sortOperations[sort](a, b)
return 0 - sortOperations[sort](a, b);
};
}
for (let list of sortLists) {
for (const list of sortLists) {
const directItems = Array.from(list.children).filter(child => child.matches('li'));
directItems.sort(sortFunction).forEach(sortedItem => {
list.appendChild(sortedItem);
@ -221,7 +221,7 @@ export class BookSort extends Component {
const alreadyAdded = this.container.querySelector(`[data-type="book"][data-id="${entityInfo.id}"]`) !== null;
if (alreadyAdded) return;
const entitySortItemUrl = entityInfo.link + '/sort-item';
const entitySortItemUrl = `${entityInfo.link}/sort-item`;
window.$http.get(entitySortItemUrl).then(resp => {
const newBookContainer = htmlToDom(resp.data);
this.sortContainer.append(newBookContainer);
@ -249,9 +249,9 @@ export class BookSort extends Component {
const chapterGroupConfig = {
name: 'chapter',
pull: ['book', 'chapter'],
put: function(toList, fromList, draggedElem) {
put(toList, fromList, draggedElem) {
return draggedElem.getAttribute('data-type') === 'page';
}
},
};
for (const sortElem of sortElems) {
@ -260,8 +260,8 @@ export class BookSort extends Component {
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65,
onSort: (event) => {
this.ensureNoNestedChapters()
onSort: event => {
this.ensureNoNestedChapters();
this.updateMapInput();
this.updateMoveActionStateForAll();
},
@ -304,7 +304,7 @@ export class BookSort extends Component {
const entityMap = [];
const lists = this.container.querySelectorAll('.sort-list');
for (let list of lists) {
for (const list of lists) {
const bookId = list.closest('[data-type="book"]').getAttribute('data-id');
const directChildren = Array.from(list.children)
.filter(elem => elem.matches('[data-type="page"], [data-type="chapter"]'));
@ -332,9 +332,9 @@ export class BookSort extends Component {
entityMap.push({
id: childId,
sort: index,
parentChapter: parentChapter,
type: type,
book: bookId
parentChapter,
type,
book: bookId,
});
const subPages = childElem.querySelectorAll('[data-type="page"]');
@ -344,7 +344,7 @@ export class BookSort extends Component {
sort: i,
parentChapter: childId,
type: 'page',
book: bookId
book: bookId,
});
}
}
@ -383,4 +383,5 @@ export class BookSort extends Component {
this.updateMoveActionState(item);
}
}
}
}

7
resources/js/components/chapter-contents.js
View File

@ -1,5 +1,5 @@
import {slideUp, slideDown} from "../services/animations";
import {Component} from "./component";
import {slideUp, slideDown} from '../services/animations';
import {Component} from './component';
export class ChapterContents extends Component {
@ -27,6 +27,7 @@ export class ChapterContents extends Component {
click(event) {
event.preventDefault();
this.isOpen ? this.close() : this.open();
this.isOpen ? this.close() : this.open();
}
}

25
resources/js/components/code-editor.js
View File

@ -1,6 +1,5 @@
import {onChildEvent, onEnterPress, onSelect} from "../services/dom";
import {Component} from "./component";
import {onChildEvent, onEnterPress, onSelect} from '../services/dom';
import {Component} from './component';
export class CodeEditor extends Component {
@ -10,7 +9,9 @@ export class CodeEditor extends Component {
editor = null;
callback = null;
history = {};
historyKey = 'code_history';
setup() {
@ -77,13 +78,13 @@ export class CodeEditor extends Component {
button.setAttribute('data-favourite', isFavorite ? 'true' : 'false');
window.$http.patch('/preferences/update-code-language-favourite', {
language: language,
active: isFavorite
language,
active: isFavorite,
});
this.sortLanguageList();
if (isFavorite) {
button.scrollIntoView({block: "center", behavior: "smooth"});
button.scrollIntoView({block: 'center', behavior: 'smooth'});
}
});
}
@ -95,7 +96,7 @@ export class CodeEditor extends Component {
if (aFav && !bFav) {
return -1;
} else if (bFav && !aFav) {
} if (bFav && !aFav) {
return 1;
}
@ -133,7 +134,7 @@ export class CodeEditor extends Component {
this.getPopup().show(() => {
this.editor.focus();
}, () => {
this.addHistory()
this.addHistory();
});
}
@ -162,7 +163,7 @@ export class CodeEditor extends Component {
const isMatch = inputLang === lang;
link.classList.toggle('active', isMatch);
if (isMatch) {
link.scrollIntoView({block: "center", behavior: "smooth"});
link.scrollIntoView({block: 'center', behavior: 'smooth'});
}
}
}
@ -172,8 +173,8 @@ export class CodeEditor extends Component {
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))).toLocaleTimeString();
return `<li><button type="button" data-time="${key}" class="text-item">${localTime}</button></li>`;
}).join('');
}
@ -191,4 +192,4 @@ export class CodeEditor extends Component {
window.sessionStorage.setItem(this.historyKey, historyString);
}
}
}

8
resources/js/components/code-highlighter.js
View File

@ -1,6 +1,6 @@
import {Component} from "./component";
import {Component} from './component';
export class CodeHighlighter extends Component{
export class CodeHighlighter extends Component {
setup() {
const container = this.$el;
@ -8,9 +8,9 @@ export class CodeHighlighter extends Component{
const codeBlocks = container.querySelectorAll('pre');
if (codeBlocks.length > 0) {
window.importVersioned('code').then(Code => {
Code.highlightWithin(container);
Code.highlightWithin(container);
});
}
}
}
}

6
resources/js/components/code-textarea.js
View File

@ -2,14 +2,14 @@
* A simple component to render a code editor within the textarea
* this exists upon.
*/
import {Component} from "./component";
import {Component} from './component';
export class CodeTextarea extends Component {
async setup() {
const mode = this.$opts.mode;
const {mode} = this.$opts;
const Code = await window.importVersioned('code');
Code.inlineEditor(this.$el, mode);
}
}
}

6
resources/js/components/collapsible.js
View File

@ -1,5 +1,5 @@
import {slideDown, slideUp} from "../services/animations";
import {Component} from "./component";
import {slideDown, slideUp} from '../services/animations';
import {Component} from './component';
/**
* Collapsible
@ -45,4 +45,4 @@ export class Collapsible extends Component {
}
}
}
}

5
resources/js/components/component.js
View File

@ -51,8 +51,9 @@ export class Component {
const componentName = this.$name;
const event = new CustomEvent(`${componentName}-${eventName}`, {
bubbles: true,
detail: data
detail: data,
});
this.$el.dispatchEvent(event);
}
}
}

10
resources/js/components/confirm-dialog.js
View File

@ -1,5 +1,5 @@
import {onSelect} from "../services/dom";
import {Component} from "./component";
import {onSelect} from '../services/dom';
import {Component} from './component';
/**
* Custom equivalent of window.confirm() using our popup component.
@ -26,7 +26,7 @@ export class ConfirmDialog extends Component {
});
return new Promise((res, rej) => {
this.res = res;
this.res = res;
});
}
@ -42,9 +42,9 @@ export class ConfirmDialog extends Component {
*/
sendResult(result) {
if (this.res) {
this.res(result)
this.res(result);
this.res = null;
}
}
}
}

4
resources/js/components/custom-checkbox.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class CustomCheckbox extends Component {
@ -30,4 +30,4 @@ export class CustomCheckbox extends Component {
this.display.setAttribute('aria-checked', checked);
}
}
}

5
resources/js/components/details-highlighter.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class DetailsHighlighter extends Component {
@ -19,4 +19,5 @@ export class DetailsHighlighter extends Component {
}
this.dealtWith = true;
}
}
}

10
resources/js/components/dropdown-search.js
View File

@ -1,6 +1,6 @@
import {debounce} from "../services/util";
import {transitionHeight} from "../services/animations";
import {Component} from "./component";
import {debounce} from '../services/util';
import {transitionHeight} from '../services/animations';
import {Component} from './component';
export class DropdownSearch extends Component {
@ -40,7 +40,7 @@ export class DropdownSearch extends Component {
runLocalSearch(searchTerm) {
const listItems = this.listContainerElem.querySelectorAll(this.localSearchSelector);
for (let listItem of listItems) {
for (const listItem of listItems) {
const match = !searchTerm || listItem.textContent.toLowerCase().includes(searchTerm);
listItem.style.display = match ? 'flex' : 'none';
listItem.classList.toggle('hidden', !match);
@ -79,4 +79,4 @@ export class DropdownSearch extends Component {
this.loadingElem.style.display = show ? 'block' : 'none';
}
}
}

22
resources/js/components/dropdown.js
View File

@ -1,6 +1,6 @@
import {onSelect} from "../services/dom";
import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
import {Component} from "./component";
import {onSelect} from '../services/dom';
import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
import {Component} from './component';
/**
* Dropdown
@ -41,7 +41,7 @@ export class Dropdown extends Component {
this.menu.style.position = 'fixed';
this.menu.style.width = `${menuOriginalRect.width}px`;
this.menu.style.left = `${menuOriginalRect.left}px`;
heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top - toggleHeight / 2) : menuOriginalRect.top;
heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top - toggleHeight / 2) : menuOriginalRect.top;
}
// Adjust menu to display upwards if near the bottom of the screen
@ -76,7 +76,7 @@ export class Dropdown extends Component {
}
hideAll() {
for (let dropdown of window.$components.get('dropdown')) {
for (const dropdown of window.$components.get('dropdown')) {
dropdown.hide();
}
}
@ -100,13 +100,13 @@ export class Dropdown extends Component {
}
setupListeners() {
const keyboardNavHandler = new KeyboardNavigationHandler(this.container, (event) => {
const keyboardNavHandler = new KeyboardNavigationHandler(this.container, event => {
this.hide();
this.toggle.focus();
if (!this.bubbleEscapes) {
event.stopPropagation();
}
}, (event) => {
}, event => {
if (event.target.nodeName === 'INPUT') {
event.preventDefault();
event.stopPropagation();
@ -120,10 +120,10 @@ export class Dropdown extends Component {
// Hide menu on option click
this.container.addEventListener('click', event => {
const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
if (possibleChildren.includes(event.target)) {
this.hide();
}
const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
if (possibleChildren.includes(event.target)) {
this.hide();
}
});
onSelect(this.toggle, event => {

21
resources/js/components/dropzone.js
View File

@ -1,8 +1,9 @@
import DropZoneLib from "dropzone";
import {fadeOut} from "../services/animations";
import {Component} from "./component";
import DropZoneLib from 'dropzone';
import {fadeOut} from '../services/animations';
import {Component} from './component';
export class Dropzone extends Component {
setup() {
this.container = this.$el;
this.url = this.$opts.url;
@ -25,19 +26,18 @@ export class Dropzone extends Component {
this.dz.on('sending', _this.onSending.bind(_this));
this.dz.on('success', _this.onSuccess.bind(_this));
this.dz.on('error', _this.onError.bind(_this));
}
},
});
}
onSending(file, xhr, data) {
const token = window.document.querySelector('meta[name=token]').getAttribute('content');
data.append('_token', token);
xhr.ontimeout = (e) => {
xhr.ontimeout = e => {
this.dz.emit('complete', file);
this.dz.emit('error', file, this.timeoutMessage);
}
};
}
onSuccess(file, data) {
@ -55,10 +55,10 @@ export class Dropzone extends Component {
onError(file, errorMessage, xhr) {
this.$emit('error', {file, errorMessage, xhr});
const setMessage = (message) => {
const setMessage = message => {
const messsageEl = file.previewElement.querySelector('[data-dz-errormessage]');
messsageEl.textContent = message;
}
};
if (xhr && xhr.status === 413) {
setMessage(this.uploadLimitMessage);
@ -70,4 +70,5 @@ export class Dropzone extends Component {
removeAll() {
this.dz.removeAllFiles(true);
}
}
}

7
resources/js/components/editor-toolbox.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class EditorToolbox extends Component {
@ -35,11 +35,10 @@ export class EditorToolbox extends Component {
}
setActiveTab(tabName, openToolbox = false) {
// Set button visibility
for (const button of this.buttons) {
button.classList.remove('active');
const bName = button.dataset.tab;
const bName = button.dataset.tab;
if (bName === tabName) button.classList.add('active');
}
@ -55,4 +54,4 @@ export class EditorToolbox extends Component {
}
}
}
}

12
resources/js/components/entity-permissions.js
View File

@ -1,5 +1,5 @@
import {htmlToDom} from "../services/dom";
import {Component} from "./component";
import {htmlToDom} from '../services/dom';
import {Component} from './component';
export class EntityPermissions extends Component {
@ -29,7 +29,7 @@ export class EntityPermissions extends Component {
this.container.addEventListener('click', event => {
const button = event.target.closest('button');
if (button && button.dataset.roleId) {
this.removeRowOnButtonClick(button)
this.removeRowOnButtonClick(button);
}
});
@ -61,8 +61,8 @@ export class EntityPermissions extends Component {
removeRowOnButtonClick(button) {
const row = button.closest('.item-list-row');
const roleId = button.dataset.roleId;
const roleName = button.dataset.roleName;
const {roleId} = button.dataset;
const {roleName} = button.dataset;
const option = document.createElement('option');
option.value = roleId;
@ -72,4 +72,4 @@ export class EntityPermissions extends Component {
row.remove();
}
}
}

8
resources/js/components/entity-search.js
View File

@ -1,7 +1,8 @@
import {onSelect} from "../services/dom";
import {Component} from "./component";
import {onSelect} from '../services/dom';
import {Component} from './component';
export class EntitySearch extends Component {
setup() {
this.entityId = this.$opts.entityId;
this.entityType = this.$opts.entityType;
@ -51,4 +52,5 @@ export class EntitySearch extends Component {
this.loadingBlock.classList.add('hidden');
this.searchInput.value = '';
}
}
}

5
resources/js/components/entity-selector-popup.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class EntitySelectorPopup extends Component {
@ -57,4 +57,5 @@ export class EntitySelectorPopup extends Component {
this.getSelector().reset();
if (this.callback && entity) this.callback(entity);
}
}
}

18
resources/js/components/entity-selector.js
View File

@ -1,5 +1,5 @@
import {onChildEvent} from "../services/dom";
import {Component} from "./component";
import {onChildEvent} from '../services/dom';
import {Component} from './component';
/**
* Entity Selector
@ -65,13 +65,13 @@ export class EntitySelector extends Component {
if (e.code === 'ArrowDown') {
this.focusAdjacent(true);
}
})
});
}
focusAdjacent(forward = true) {
const items = Array.from(this.resultsContainer.querySelectorAll('[data-entity-type]'));
const selectedIndex = items.indexOf(document.activeElement);
const newItem = items[selectedIndex+ (forward ? 1 : -1)] || items[0];
const newItem = items[selectedIndex + (forward ? 1 : -1)] || items[0];
if (newItem) {
newItem.focus();
}
@ -101,7 +101,7 @@ export class EntitySelector extends Component {
window.$http.get(this.searchUrl()).then(resp => {
this.resultsContainer.innerHTML = resp.data;
this.hideLoading();
})
});
}
searchUrl() {
@ -144,13 +144,13 @@ export class EntitySelector extends Component {
const link = item.getAttribute('href');
const name = item.querySelector('.entity-list-item-name').textContent;
const data = {id: Number(id), name: name, link: link};
const data = {id: Number(id), name, link};
if (isSelected) {
item.classList.add('selected');
this.selectedItemData = data;
} else {
window.$events.emit('entity-select-change', null)
window.$events.emit('entity-select-change', null);
}
if (!isDblClick && !isSelected) return;
@ -159,7 +159,7 @@ export class EntitySelector extends Component {
this.confirmSelection(data);
}
if (isSelected) {
window.$events.emit('entity-select-change', data)
window.$events.emit('entity-select-change', data);
}
}
@ -175,4 +175,4 @@ export class EntitySelector extends Component {
this.selectedItemData = null;
}
}
}

10
resources/js/components/event-emit-select.js
View File

@ -1,5 +1,5 @@
import {onSelect} from "../services/dom";
import {Component} from "./component";
import {onSelect} from '../services/dom';
import {Component} from './component';
/**
* EventEmitSelect
@ -12,15 +12,15 @@ import {Component} from "./component";
* All options will be set as the "detail" of the event with
* their values included.
*/
export class EventEmitSelect extends Component{
export class EventEmitSelect extends Component {
setup() {
this.container = this.$el;
this.name = this.$opts.name;
onSelect(this.$el, () => {
this.$emit(this.name, this.$opts);
});
}
}
}

12
resources/js/components/expand-toggle.js
View File

@ -1,5 +1,5 @@
import {slideUp, slideDown} from "../services/animations";
import {Component} from "./component";
import {slideUp, slideDown} from '../services/animations';
import {Component} from './component';
export class ExpandToggle extends Component {
@ -24,8 +24,8 @@ export class ExpandToggle extends Component {
event.preventDefault();
const matchingElems = document.querySelectorAll(this.targetSelector);
for (let match of matchingElems) {
this.isOpen ? this.close(match) : this.open(match);
for (const match of matchingElems) {
this.isOpen ? this.close(match) : this.open(match);
}
this.isOpen = !this.isOpen;
@ -34,8 +34,8 @@ export class ExpandToggle extends Component {
updateSystemAjax(isOpen) {
window.$http.patch(this.updateEndpoint, {
expand: isOpen ? 'true' : 'false'
expand: isOpen ? 'true' : 'false',
});
}
}
}

19
resources/js/components/global-search.js
View File

@ -1,7 +1,7 @@
import {htmlToDom} from "../services/dom";
import {debounce} from "../services/util";
import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
import {Component} from "./component";
import {htmlToDom} from '../services/dom';
import {debounce} from '../services/util';
import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
import {Component} from './component';
/**
* Global (header) search box handling.
@ -25,12 +25,12 @@ export class GlobalSearch extends Component {
// Handle search input changes
this.input.addEventListener('input', () => {
const value = this.input.value;
const {value} = this.input;
if (value.length > 0) {
this.loadingWrap.style.display = 'block';
this.suggestionResultsWrap.style.opacity = '0.5';
updateSuggestionsDebounced(value);
} else {
} else {
this.hideSuggestions();
}
});
@ -55,7 +55,7 @@ export class GlobalSearch extends Component {
if (!this.input.value) {
return;
}
const resultDom = htmlToDom(results);
this.suggestionResultsWrap.innerHTML = '';
@ -71,7 +71,7 @@ export class GlobalSearch extends Component {
this.container.classList.add('search-active');
window.requestAnimationFrame(() => {
this.suggestions.classList.add('search-suggestions-animation');
})
});
}
hideSuggestions() {
@ -79,4 +79,5 @@ export class GlobalSearch extends Component {
this.suggestions.classList.remove('search-suggestions-animation');
this.suggestionResultsWrap.innerHTML = '';
}
}
}

8
resources/js/components/header-mobile-toggle.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class HeaderMobileToggle extends Component {
@ -19,10 +19,10 @@ export class HeaderMobileToggle extends Component {
this.toggleButton.setAttribute('aria-expanded', this.open ? 'true' : 'false');
if (this.open) {
this.elem.addEventListener('keydown', this.onKeyDown);
window.addEventListener('click', this.onWindowClick)
window.addEventListener('click', this.onWindowClick);
} else {
this.elem.removeEventListener('keydown', this.onKeyDown);
window.removeEventListener('click', this.onWindowClick)
window.removeEventListener('click', this.onWindowClick);
}
event.stopPropagation();
}
@ -37,4 +37,4 @@ export class HeaderMobileToggle extends Component {
this.onToggle(event);
}
}
}

8
resources/js/components/image-manager.js
View File

@ -1,5 +1,7 @@
import {onChildEvent, onSelect, removeLoading, showLoading} from "../services/dom";
import {Component} from "./component";
import {
onChildEvent, onSelect, removeLoading, showLoading,
} from '../services/dom';
import {Component} from './component';
export class ImageManager extends Component {
@ -210,4 +212,4 @@ export class ImageManager extends Component {
window.$components.init(this.formContainer);
}
}
}

6
resources/js/components/image-picker.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class ImagePicker extends Component {
@ -31,7 +31,7 @@ export class ImagePicker extends Component {
this.removeInput.setAttribute('disabled', 'disabled');
}
for (let file of this.imageInput.files) {
for (const file of this.imageInput.files) {
this.imageElem.src = window.URL.createObjectURL(file);
}
this.imageElem.classList.remove('none');
@ -54,4 +54,4 @@ export class ImagePicker extends Component {
this.resetInput.setAttribute('disabled', 'disabled');
}
}
}

118
resources/js/components/index.js
View File

@ -1,59 +1,59 @@
export {AddRemoveRows} from "./add-remove-rows.js"
export {AjaxDeleteRow} from "./ajax-delete-row.js"
export {AjaxForm} from "./ajax-form.js"
export {Attachments} from "./attachments.js"
export {AttachmentsList} from "./attachments-list.js"
export {AutoSuggest} from "./auto-suggest.js"
export {AutoSubmit} from "./auto-submit.js"
export {BackToTop} from "./back-to-top.js"
export {BookSort} from "./book-sort.js"
export {ChapterContents} from "./chapter-contents.js"
export {CodeEditor} from "./code-editor.js"
export {CodeHighlighter} from "./code-highlighter.js"
export {CodeTextarea} from "./code-textarea.js"
export {Collapsible} from "./collapsible.js"
export {ConfirmDialog} from "./confirm-dialog"
export {CustomCheckbox} from "./custom-checkbox.js"
export {DetailsHighlighter} from "./details-highlighter.js"
export {Dropdown} from "./dropdown.js"
export {DropdownSearch} from "./dropdown-search.js"
export {Dropzone} from "./dropzone.js"
export {EditorToolbox} from "./editor-toolbox.js"
export {EntityPermissions} from "./entity-permissions"
export {EntitySearch} from "./entity-search.js"
export {EntitySelector} from "./entity-selector.js"
export {EntitySelectorPopup} from "./entity-selector-popup.js"
export {EventEmitSelect} from "./event-emit-select.js"
export {ExpandToggle} from "./expand-toggle.js"
export {GlobalSearch} from "./global-search.js"
export {HeaderMobileToggle} from "./header-mobile-toggle.js"
export {ImageManager} from "./image-manager.js"
export {ImagePicker} from "./image-picker.js"
export {ListSortControl} from "./list-sort-control.js"
export {MarkdownEditor} from "./markdown-editor.js"
export {NewUserPassword} from "./new-user-password.js"
export {Notification} from "./notification.js"
export {OptionalInput} from "./optional-input.js"
export {PageComments} from "./page-comments.js"
export {PageDisplay} from "./page-display.js"
export {PageEditor} from "./page-editor.js"
export {PagePicker} from "./page-picker.js"
export {PermissionsTable} from "./permissions-table.js"
export {Pointer} from "./pointer.js"
export {Popup} from "./popup.js"
export {SettingAppColorScheme} from "./setting-app-color-scheme.js"
export {SettingColorPicker} from "./setting-color-picker.js"
export {SettingHomepageControl} from "./setting-homepage-control.js"
export {ShelfSort} from "./shelf-sort.js"
export {Shortcuts} from "./shortcuts"
export {ShortcutInput} from "./shortcut-input"
export {SortableList} from "./sortable-list.js"
export {SubmitOnChange} from "./submit-on-change.js"
export {Tabs} from "./tabs.js"
export {TagManager} from "./tag-manager.js"
export {TemplateManager} from "./template-manager.js"
export {ToggleSwitch} from "./toggle-switch.js"
export {TriLayout} from "./tri-layout.js"
export {UserSelect} from "./user-select.js"
export {WebhookEvents} from "./webhook-events"
export {WysiwygEditor} from "./wysiwyg-editor.js"
export {AddRemoveRows} from './add-remove-rows.js';
export {AjaxDeleteRow} from './ajax-delete-row.js';
export {AjaxForm} from './ajax-form.js';
export {Attachments} from './attachments.js';
export {AttachmentsList} from './attachments-list.js';
export {AutoSuggest} from './auto-suggest.js';
export {AutoSubmit} from './auto-submit.js';
export {BackToTop} from './back-to-top.js';
export {BookSort} from './book-sort.js';
export {ChapterContents} from './chapter-contents.js';
export {CodeEditor} from './code-editor.js';
export {CodeHighlighter} from './code-highlighter.js';
export {CodeTextarea} from './code-textarea.js';
export {Collapsible} from './collapsible.js';
export {ConfirmDialog} from './confirm-dialog';
export {CustomCheckbox} from './custom-checkbox.js';
export {DetailsHighlighter} from './details-highlighter.js';
export {Dropdown} from './dropdown.js';
export {DropdownSearch} from './dropdown-search.js';
export {Dropzone} from './dropzone.js';
export {EditorToolbox} from './editor-toolbox.js';
export {EntityPermissions} from './entity-permissions';
export {EntitySearch} from './entity-search.js';
export {EntitySelector} from './entity-selector.js';
export {EntitySelectorPopup} from './entity-selector-popup.js';
export {EventEmitSelect} from './event-emit-select.js';
export {ExpandToggle} from './expand-toggle.js';
export {GlobalSearch} from './global-search.js';
export {HeaderMobileToggle} from './header-mobile-toggle.js';
export {ImageManager} from './image-manager.js';
export {ImagePicker} from './image-picker.js';
export {ListSortControl} from './list-sort-control.js';
export {MarkdownEditor} from './markdown-editor.js';
export {NewUserPassword} from './new-user-password.js';
export {Notification} from './notification.js';
export {OptionalInput} from './optional-input.js';
export {PageComments} from './page-comments.js';
export {PageDisplay} from './page-display.js';
export {PageEditor} from './page-editor.js';
export {PagePicker} from './page-picker.js';
export {PermissionsTable} from './permissions-table.js';
export {Pointer} from './pointer.js';
export {Popup} from './popup.js';
export {SettingAppColorScheme} from './setting-app-color-scheme.js';
export {SettingColorPicker} from './setting-color-picker.js';
export {SettingHomepageControl} from './setting-homepage-control.js';
export {ShelfSort} from './shelf-sort.js';
export {Shortcuts} from './shortcuts';
export {ShortcutInput} from './shortcut-input';
export {SortableList} from './sortable-list.js';
export {SubmitOnChange} from './submit-on-change.js';
export {Tabs} from './tabs.js';
export {TagManager} from './tag-manager.js';
export {TemplateManager} from './template-manager.js';
export {ToggleSwitch} from './toggle-switch.js';
export {TriLayout} from './tri-layout.js';
export {UserSelect} from './user-select.js';
export {WebhookEvents} from './webhook-events';
export {WysiwygEditor} from './wysiwyg-editor.js';

4
resources/js/components/list-sort-control.js
View File

@ -2,7 +2,7 @@
* ListSortControl
* Manages the logic for the control which provides list sorting options.
*/
import {Component} from "./component";
import {Component} from './component';
export class ListSortControl extends Component {
@ -45,4 +45,4 @@ export class ListSortControl extends Component {
this.form.submit();
}
}
}

17
resources/js/components/markdown-editor.js
View File

@ -1,5 +1,5 @@
import {Component} from "./component";
import {init as initEditor} from "../markdown/editor";
import {Component} from './component';
import {init as initEditor} from '../markdown/editor';
export class MarkdownEditor extends Component {
@ -16,7 +16,7 @@ export class MarkdownEditor extends Component {
this.divider = this.$refs.divider;
this.displayWrap = this.$refs.displayWrap;
const settingContainer = this.$refs.settingContainer;
const {settingContainer} = this.$refs;
const settingInputs = settingContainer.querySelectorAll('input[type="checkbox"]');
this.editor = null;
@ -49,10 +49,9 @@ export class MarkdownEditor extends Component {
}
setupListeners() {
// Button actions
this.elem.addEventListener('click', event => {
let button = event.target.closest('button[data-action]');
const button = event.target.closest('button[data-action]');
if (button === null) return;
const action = button.getAttribute('data-action');
@ -85,13 +84,13 @@ export class MarkdownEditor extends Component {
handleDividerDrag() {
this.divider.addEventListener('pointerdown', event => {
const wrapRect = this.elem.getBoundingClientRect();
const moveListener = (event) => {
const moveListener = event => {
const xRel = event.pageX - wrapRect.left;
const xPct = Math.min(Math.max(20, Math.floor((xRel / wrapRect.width) * 100)), 80);
this.displayWrap.style.flexBasis = `${100-xPct}%`;
this.displayWrap.style.flexBasis = `${100 - xPct}%`;
this.editor.settings.set('editorWidth', xPct);
};
const upListener = (event) => {
const upListener = event => {
window.removeEventListener('pointermove', moveListener);
window.removeEventListener('pointerup', upListener);
this.display.style.pointerEvents = null;
@ -105,7 +104,7 @@ export class MarkdownEditor extends Component {
});
const widthSetting = this.editor.settings.get('editorWidth');
if (widthSetting) {
this.displayWrap.style.flexBasis = `${100-widthSetting}%`;
this.displayWrap.style.flexBasis = `${100 - widthSetting}%`;
}
}

4
resources/js/components/new-user-password.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class NewUserPassword extends Component {
@ -23,4 +23,4 @@ export class NewUserPassword extends Component {
this.inputContainer.style.display = inviting ? 'none' : 'block';
}
}
}

8
resources/js/components/notification.js
View File

@ -1,13 +1,13 @@
import {Component} from "./component";
import {Component} from './component';
export class Notification extends Component {
export class Notification extends Component {
setup() {
this.container = this.$el;
this.type = this.$opts.type;
this.textElem = this.container.querySelector('span');
this.autoHide = this.$opts.autoHide === 'true';
this.initialShow = this.$opts.show === 'true'
this.initialShow = this.$opts.show === 'true';
this.container.style.display = 'grid';
window.$events.listen(this.type, text => {
@ -47,4 +47,4 @@ export class Notification extends Component {
this.container.removeEventListener('transitionend', this.hideCleanup);
}
}
}

7
resources/js/components/optional-input.js
View File

@ -1,7 +1,8 @@
import {onSelect} from "../services/dom";
import {Component} from "./component";
import {onSelect} from '../services/dom';
import {Component} from './component';
export class OptionalInput extends Component {
setup() {
this.removeButton = this.$refs.remove;
this.showButton = this.$refs.show;
@ -24,4 +25,4 @@ export class OptionalInput extends Component {
});
}
}
}

48
resources/js/components/page-comments.js
View File

@ -1,6 +1,6 @@
import {scrollAndHighlightElement} from "../services/util";
import {Component} from "./component";
import {htmlToDom} from "../services/dom";
import {scrollAndHighlightElement} from '../services/util';
import {Component} from './component';
import {htmlToDom} from '../services/dom';
export class PageComments extends Component {
@ -36,11 +36,11 @@ export class PageComments extends Component {
}
handleAction(event) {
let actionElem = event.target.closest('[action]');
const actionElem = event.target.closest('[action]');
if (event.target.matches('a[href^="#"]')) {
const id = event.target.href.split('#')[1];
scrollAndHighlightElement(document.querySelector('#' + id));
scrollAndHighlightElement(document.querySelector(`#${id}`));
}
if (actionElem === null) return;
@ -68,24 +68,24 @@ export class PageComments extends Component {
if (this.editingComment) this.closeUpdateForm();
commentElem.querySelector('[comment-content]').style.display = 'none';
commentElem.querySelector('[comment-edit-container]').style.display = 'block';
let textArea = commentElem.querySelector('[comment-edit-container] textarea');
let lineCount = textArea.value.split('\n').length;
textArea.style.height = ((lineCount * 20) + 40) + 'px';
const textArea = commentElem.querySelector('[comment-edit-container] textarea');
const lineCount = textArea.value.split('\n').length;
textArea.style.height = `${(lineCount * 20) + 40}px`;
this.editingComment = commentElem;
}
updateComment(event) {
let form = event.target;
const form = event.target;
event.preventDefault();
let text = form.querySelector('textarea').value;
let reqData = {
text: text,
const text = form.querySelector('textarea').value;
const reqData = {
text,
parent_id: this.parentId || null,
};
this.showLoading(form);
let commentId = this.editingComment.getAttribute('comment');
const commentId = this.editingComment.getAttribute('comment');
window.$http.put(`/comment/${commentId}`, reqData).then(resp => {
let newComment = document.createElement('div');
const newComment = document.createElement('div');
newComment.innerHTML = resp.data;
this.editingComment.innerHTML = newComment.children[0].innerHTML;
window.$events.success(this.updatedText);
@ -98,7 +98,7 @@ export class PageComments extends Component {
}
deleteComment(commentElem) {
let id = commentElem.getAttribute('comment');
const id = commentElem.getAttribute('comment');
this.showLoading(commentElem.querySelector('[comment-content]'));
window.$http.delete(`/comment/${id}`).then(resp => {
commentElem.parentNode.removeChild(commentElem);
@ -111,9 +111,9 @@ export class PageComments extends Component {
saveComment(event) {
event.preventDefault();
event.stopPropagation();
let text = this.formInput.value;
let reqData = {
text: text,
const text = this.formInput.value;
const reqData = {
text,
parent_id: this.parentId || null,
};
this.showLoading(this.form);
@ -131,7 +131,7 @@ export class PageComments extends Component {
}
updateCount() {
let count = this.container.children.length;
const count = this.container.children.length;
this.elem.querySelector('[comments-title]').textContent = window.trans_plural(this.countText, count, {count});
}
@ -148,14 +148,14 @@ export class PageComments extends Component {
this.formContainer.parentNode.style.display = 'block';
this.addButtonContainer.style.display = 'none';
this.formInput.focus();
this.formInput.scrollIntoView({behavior: "smooth"});
this.formInput.scrollIntoView({behavior: 'smooth'});
}
hideForm() {
this.formContainer.style.display = 'none';
this.formContainer.parentNode.style.display = 'none';
if (this.getCommentCount() > 0) {
this.elem.appendChild(this.addButtonContainer)
this.elem.appendChild(this.addButtonContainer);
} else {
this.commentCountBar.appendChild(this.addButtonContainer);
}
@ -182,7 +182,7 @@ export class PageComments extends Component {
showLoading(formElem) {
const groups = formElem.querySelectorAll('.form-group');
for (let group of groups) {
for (const group of groups) {
group.style.display = 'none';
}
formElem.querySelector('.form-group.loading').style.display = 'block';
@ -190,10 +190,10 @@ export class PageComments extends Component {
hideLoading(formElem) {
const groups = formElem.querySelectorAll('.form-group');
for (let group of groups) {
for (const group of groups) {
group.style.display = 'block';
}
formElem.querySelector('.form-group.loading').style.display = 'none';
}
}
}

15
resources/js/components/page-display.js
View File

@ -1,6 +1,6 @@
import * as DOM from "../services/dom";
import {scrollAndHighlightElement} from "../services/util";
import {Component} from "./component";
import * as DOM from '../services/dom';
import {scrollAndHighlightElement} from '../services/util';
import {Component} from './component';
export class PageDisplay extends Component {
@ -26,7 +26,7 @@ export class PageDisplay extends Component {
window.$components.first('tri-layout').showContent();
const contentId = child.getAttribute('href').substr(1);
this.goToText(contentId);
window.history.pushState(null, null, '#' + contentId);
window.history.pushState(null, null, `#${contentId}`);
});
}
}
@ -63,7 +63,7 @@ export class PageDisplay extends Component {
// Setup the intersection observer.
const intersectOpts = {
rootMargin: '0px 0px 0px 0px',
threshold: 1.0
threshold: 1.0,
};
const pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
@ -81,7 +81,7 @@ export class PageDisplay extends Component {
}
function toggleAnchorHighlighting(elementId, shouldHighlight) {
DOM.forEach('a[href="#' + elementId + '"]', anchor => {
DOM.forEach(`a[href="#${elementId}"]`, anchor => {
anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
});
}
@ -96,4 +96,5 @@ export class PageDisplay extends Component {
const details = [...this.container.querySelectorAll('details')];
details.forEach(detail => detail.addEventListener('toggle', onToggle));
}
}
}

18
resources/js/components/page-editor.js
View File

@ -1,9 +1,10 @@
import * as Dates from "../services/dates";
import {onSelect} from "../services/dom";
import {debounce} from "../services/util";
import {Component} from "./component";
import * as Dates from '../services/dates';
import {onSelect} from '../services/dom';
import {debounce} from '../services/util';
import {Component} from './component';
export class PageEditor extends Component {
setup() {
// Options
this.draftsEnabled = this.$opts.draftsEnabled === 'true';
@ -93,12 +94,12 @@ export class PageEditor extends Component {
runAutoSave() {
// Stop if manually saved recently to prevent bombarding the server
const savedRecently = (Date.now() - this.autoSave.last < (this.autoSave.frequency)/2);
const savedRecently = (Date.now() - this.autoSave.last < (this.autoSave.frequency) / 2);
if (savedRecently || !this.autoSave.pendingChange) {
return;
}
this.saveDraft()
this.saveDraft();
}
savePage() {
@ -172,7 +173,6 @@ export class PageEditor extends Component {
this.startAutoSave();
}, 1000);
window.$events.emit('success', this.draftDiscardedText);
}
updateChangelogDisplay() {
@ -180,7 +180,7 @@ export class PageEditor extends Component {
if (summary.length === 0) {
summary = this.setChangelogText;
} else if (summary.length > 16) {
summary = summary.slice(0, 16) + '...';
summary = `${summary.slice(0, 16)}...`;
}
this.changelogDisplay.innerText = summary;
}
@ -193,7 +193,7 @@ export class PageEditor extends Component {
event.preventDefault();
const link = event.target.closest('a').href;
/** @var {ConfirmDialog} **/
/** @var {ConfirmDialog} * */
const dialog = window.$components.firstOnElement(this.switchDialogContainer, 'confirm-dialog');
const [saved, confirmed] = await Promise.all([this.saveDraft(), dialog.show()]);

8
resources/js/components/page-picker.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class PagePicker extends Component {
@ -24,7 +24,7 @@ export class PagePicker extends Component {
}
showPopup() {
/** @type {EntitySelectorPopup} **/
/** @type {EntitySelectorPopup} * */
const selectorPopup = window.$components.first('entity-selector-popup');
selectorPopup.show(entity => {
this.setValue(entity.id, entity.name);
@ -44,7 +44,7 @@ export class PagePicker extends Component {
toggleElem(this.defaultDisplay, !hasValue);
toggleElem(this.display, hasValue);
if (hasValue) {
let id = this.getAssetIdFromVal();
const id = this.getAssetIdFromVal();
this.display.textContent = `#${id}, ${name}`;
this.display.href = window.baseUrl(`/link/${id}`);
}
@ -58,4 +58,4 @@ export class PagePicker extends Component {
function toggleElem(elem, show) {
elem.style.display = show ? null : 'none';
}
}

8
resources/js/components/permissions-table.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class PermissionsTable extends Component {
@ -41,7 +41,7 @@ export class PermissionsTable extends Component {
const tableRows = this.container.querySelectorAll(this.rowSelector);
const inputsToToggle = [];
for (let row of tableRows) {
for (const row of tableRows) {
const targetCell = row.children[colIndex];
if (targetCell) {
inputsToToggle.push(...targetCell.querySelectorAll('input[type=checkbox]'));
@ -57,10 +57,10 @@ export class PermissionsTable extends Component {
toggleAllInputs(inputsToToggle) {
const currentState = inputsToToggle.length > 0 ? inputsToToggle[0].checked : false;
for (let checkbox of inputsToToggle) {
for (const checkbox of inputsToToggle) {
checkbox.checked = !currentState;
checkbox.dispatchEvent(new Event('change'));
}
}
}
}

14
resources/js/components/pointer.js
View File

@ -1,7 +1,6 @@
import * as DOM from "../services/dom";
import {Component} from "./component";
import {copyTextToClipboard} from "../services/clipboard";
import * as DOM from '../services/dom';
import {Component} from './component';
import {copyTextToClipboard} from '../services/clipboard';
export class Pointer extends Component {
@ -113,7 +112,7 @@ export class Pointer extends Component {
updateForTarget(element) {
let inputText = this.pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${this.pointerSectionId}`) : `{{@${this.pageId}#${this.pointerSectionId}}}`;
if (this.pointerModeLink && !inputText.startsWith('http')) {
inputText = window.location.protocol + "//" + window.location.host + inputText;
inputText = `${window.location.protocol}//${window.location.host}${inputText}`;
}
this.input.value = inputText;
@ -121,7 +120,7 @@ export class Pointer extends Component {
// Update anchor if present
const editAnchor = this.container.querySelector('#pointer-edit');
if (editAnchor && element) {
const editHref = editAnchor.dataset.editHref;
const {editHref} = editAnchor.dataset;
const elementId = element.id;
// get the first 50 characters.
@ -129,4 +128,5 @@ export class Pointer extends Component {
editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
}
}
}
}

10
resources/js/components/popup.js
View File

@ -1,6 +1,6 @@
import {fadeIn, fadeOut} from "../services/animations";
import {onSelect} from "../services/dom";
import {Component} from "./component";
import {fadeIn, fadeOut} from '../services/animations';
import {onSelect} from '../services/dom';
import {Component} from './component';
/**
* Popup window that will contain other content.
@ -47,7 +47,7 @@ export class Popup extends Component {
show(onComplete = null, onHide = null) {
fadeIn(this.container, 120, onComplete);
this.onkeyup = (event) => {
this.onkeyup = event => {
if (event.key === 'Escape') {
this.hide();
}
@ -56,4 +56,4 @@ export class Popup extends Component {
this.onHide = onHide;
}
}
}

12
resources/js/components/setting-app-color-scheme.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class SettingAppColorScheme extends Component {
@ -14,7 +14,7 @@ export class SettingAppColorScheme extends Component {
this.handleModeChange(newMode);
});
const onInputChange = (event) => {
const onInputChange = event => {
this.updateAppColorsFromInputs();
if (event.target.name.startsWith('setting-app-color')) {
@ -44,7 +44,7 @@ export class SettingAppColorScheme extends Component {
cssId = 'primary';
}
const varName = '--color-' + cssId;
const varName = `--color-${cssId}`;
document.body.style.setProperty(varName, input.value);
}
}
@ -57,9 +57,9 @@ export class SettingAppColorScheme extends Component {
const lightName = input.name.replace('-color', '-color-light');
const hexVal = input.value;
const rgb = this.hexToRgb(hexVal);
const rgbLightVal = 'rgba('+ [rgb.r, rgb.g, rgb.b, '0.15'].join(',') +')';
const rgbLightVal = `rgba(${[rgb.r, rgb.g, rgb.b, '0.15'].join(',')})`;
console.log(input.name, lightName, hexVal, rgbLightVal)
console.log(input.name, lightName, hexVal, rgbLightVal);
const lightColorInput = this.container.querySelector(`input[name="${lightName}"][type="hidden"]`);
lightColorInput.value = rgbLightVal;
}
@ -75,7 +75,7 @@ export class SettingAppColorScheme extends Component {
return {
r: result ? parseInt(result[1], 16) : 0,
g: result ? parseInt(result[2], 16) : 0,
b: result ? parseInt(result[3], 16) : 0
b: result ? parseInt(result[3], 16) : 0,
};
}

5
resources/js/components/setting-color-picker.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class SettingColorPicker extends Component {
@ -17,4 +17,5 @@ export class SettingColorPicker extends Component {
this.colorInput.value = value;
this.colorInput.dispatchEvent(new Event('change', {bubbles: true}));
}
}
}

5
resources/js/components/setting-homepage-control.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class SettingHomepageControl extends Component {
@ -14,4 +14,5 @@ export class SettingHomepageControl extends Component {
const showPagePicker = this.typeControl.value === 'page';
this.pagePickerContainer.style.display = (showPagePicker ? 'block' : 'none');
}
}
}

13
resources/js/components/shelf-sort.js
View File

@ -1,5 +1,5 @@
import Sortable from "sortablejs";
import {Component} from "./component";
import Sortable from 'sortablejs';
import {Component} from './component';
/**
* @type {Object<string, function(HTMLElement, HTMLElement, HTMLElement)>}
@ -66,7 +66,7 @@ export class ShelfSort extends Component {
this.filterBooksByName(this.bookSearchInput.value);
});
this.sortButtonContainer.addEventListener('click' , event => {
this.sortButtonContainer.addEventListener('click', event => {
const button = event.target.closest('button[data-sort]');
if (button) {
this.sortShelfBooks(button.dataset.sort);
@ -78,11 +78,10 @@ export class ShelfSort extends Component {
* @param {String} filterVal
*/
filterBooksByName(filterVal) {
// Set height on first search, if not already set, to prevent the distraction
// of the list height jumping around
if (!this.allBookList.style.height) {
this.allBookList.style.height = this.allBookList.getBoundingClientRect().height + 'px';
this.allBookList.style.height = `${this.allBookList.getBoundingClientRect().height}px`;
}
const books = this.allBookList.children;
@ -100,7 +99,7 @@ export class ShelfSort extends Component {
*/
sortItemActionClick(sortItemAction) {
const sortItem = sortItemAction.closest('.scroll-box-item');
const action = sortItemAction.dataset.action;
const {action} = sortItemAction.dataset;
const actionFunction = itemActions[action];
actionFunction(sortItem, this.shelfBookList, this.allBookList);
@ -136,4 +135,4 @@ export class ShelfSort extends Component {
this.onChange();
}
}
}

10
resources/js/components/shortcut-input.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
/**
* Keys to ignore when recording shortcuts.
@ -18,16 +18,16 @@ export class ShortcutInput extends Component {
this.listenerRecordKey = this.listenerRecordKey.bind(this);
this.input.addEventListener('focus', () => {
this.startListeningForInput();
this.startListeningForInput();
});
this.input.addEventListener('blur', () => {
this.stopListeningForInput();
})
});
}
startListeningForInput() {
this.input.addEventListener('keydown', this.listenerRecordKey)
this.input.addEventListener('keydown', this.listenerRecordKey);
}
/**
@ -51,4 +51,4 @@ export class ShortcutInput extends Component {
this.input.removeEventListener('keydown', this.listenerRecordKey);
}
}
}

18
resources/js/components/shortcuts.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
function reverseMap(map) {
const reversed = {};
@ -8,7 +8,6 @@ function reverseMap(map) {
return reversed;
}
export class Shortcuts extends Component {
setup() {
@ -25,7 +24,6 @@ export class Shortcuts extends Component {
setupListeners() {
window.addEventListener('keydown', event => {
if (event.target.closest('input, select, textarea')) {
return;
}
@ -44,7 +42,6 @@ export class Shortcuts extends Component {
* @param {KeyboardEvent} event
*/
handleShortcutPress(event) {
const keys = [
event.ctrlKey ? 'Ctrl' : '',
event.metaKey ? 'Cmd' : '',
@ -90,7 +87,7 @@ export class Shortcuts extends Component {
return true;
}
console.error(`Shortcut attempted to be ran for element type that does not have handling setup`, el);
console.error('Shortcut attempted to be ran for element type that does not have handling setup', el);
return false;
}
@ -135,10 +132,10 @@ export class Shortcuts extends Component {
const linkage = document.createElement('div');
linkage.classList.add('shortcut-linkage');
linkage.style.left = targetBounds.x + 'px';
linkage.style.top = targetBounds.y + 'px';
linkage.style.width = targetBounds.width + 'px';
linkage.style.height = targetBounds.height + 'px';
linkage.style.left = `${targetBounds.x}px`;
linkage.style.top = `${targetBounds.y}px`;
linkage.style.width = `${targetBounds.width}px`;
linkage.style.height = `${targetBounds.height}px`;
wrapper.append(label, linkage);
@ -159,4 +156,5 @@ export class Shortcuts extends Component {
this.hintsShowing = false;
}
}
}

8
resources/js/components/sortable-list.js
View File

@ -1,5 +1,5 @@
import Sortable from "sortablejs";
import {Component} from "./component";
import Sortable from 'sortablejs';
import {Component} from './component';
/**
* SortableList
@ -9,6 +9,7 @@ import {Component} from "./component";
* the data to set on the data-transfer.
*/
export class SortableList extends Component {
setup() {
this.container = this.$el;
this.handleSelector = this.$opts.handleSelector;
@ -33,4 +34,5 @@ export class SortableList extends Component {
dragoverBubble: false,
});
}
}
}

7
resources/js/components/submit-on-change.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
/**
* Submit on change
@ -9,8 +9,7 @@ export class SubmitOnChange extends Component {
setup() {
this.filter = this.$opts.filter;
this.$el.addEventListener('change', (event) => {
this.$el.addEventListener('change', event => {
if (this.filter && !event.target.matches(this.filter)) {
return;
}
@ -22,4 +21,4 @@ export class SubmitOnChange extends Component {
});
}
}
}

4
resources/js/components/tabs.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
/**
* Tabs
@ -46,4 +46,4 @@ export class Tabs extends Component {
this.$emit('change', {showing: sectionId});
}
}
}

13
resources/js/components/tag-manager.js
View File

@ -1,6 +1,7 @@
import {Component} from "./component";
import {Component} from './component';
export class TagManager extends Component {
setup() {
this.addRemoveComponentEl = this.$refs.addRemove;
this.container = this.$el;
@ -11,8 +12,7 @@ export class TagManager extends Component {
setupListeners() {
this.container.addEventListener('input', event => {
/** @var {AddRemoveRows} **/
/** @var {AddRemoveRows} * */
const addRemoveComponent = window.$components.firstOnElement(this.addRemoveComponentEl, 'add-remove-rows');
if (!this.hasEmptyRows() && event.target.value) {
addRemoveComponent.add();
@ -22,9 +22,8 @@ export class TagManager extends Component {
hasEmptyRows() {
const rows = this.container.querySelectorAll(this.rowSelector);
const firstEmpty = [...rows].find(row => {
return [...row.querySelectorAll('input')].filter(input => input.value).length === 0;
});
const firstEmpty = [...rows].find(row => [...row.querySelectorAll('input')].filter(input => input.value).length === 0);
return firstEmpty !== undefined;
}
}
}

13
resources/js/components/template-manager.js
View File

@ -1,5 +1,5 @@
import * as DOM from "../services/dom";
import {Component} from "./component";
import * as DOM from '../services/dom';
import {Component} from './component';
export class TemplateManager extends Component {
@ -66,7 +66,7 @@ export class TemplateManager extends Component {
async insertTemplate(templateId, action = 'replace') {
const resp = await window.$http.get(`/templates/${templateId}`);
const eventName = 'editor::' + action;
const eventName = `editor::${action}`;
window.$events.emit(eventName, resp.data);
}
@ -79,10 +79,11 @@ export class TemplateManager extends Component {
async performSearch() {
const searchTerm = this.searchInput.value;
const resp = await window.$http.get(`/templates`, {
search: searchTerm
const resp = await window.$http.get('/templates', {
search: searchTerm,
});
this.searchCancel.style.display = searchTerm ? 'block' : 'none';
this.list.innerHTML = resp.data;
}
}
}

4
resources/js/components/toggle-switch.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class ToggleSwitch extends Component {
@ -18,4 +18,4 @@ export class ToggleSwitch extends Component {
this.input.dispatchEvent(changeEvent);
}
}
}

17
resources/js/components/tri-layout.js
View File

@ -1,4 +1,4 @@
import {Component} from "./component";
import {Component} from './component';
export class TriLayout extends Component {
@ -9,8 +9,8 @@ export class TriLayout extends Component {
this.lastLayoutType = 'none';
this.onDestroy = null;
this.scrollCache = {
'content': 0,
'info': 0,
content: 0,
info: 0,
};
this.lastTabShown = 'content';
@ -26,8 +26,8 @@ export class TriLayout extends Component {
updateLayout() {
let newLayout = 'tablet';
if (window.innerWidth <= 1000) newLayout = 'mobile';
if (window.innerWidth >= 1400) newLayout = 'desktop';
if (window.innerWidth <= 1000) newLayout = 'mobile';
if (window.innerWidth >= 1400) newLayout = 'desktop';
if (newLayout === this.lastLayoutType) return;
if (this.onDestroy) {
@ -53,20 +53,19 @@ export class TriLayout extends Component {
for (const tab of this.tabs) {
tab.removeEventListener('click', this.mobileTabClick);
}
}
};
}
setupDesktop() {
//
}
/**
* Action to run when the mobile info toggle bar is clicked/tapped
* @param event
*/
mobileTabClick(event) {
const tab = event.target.dataset.tab;
const {tab} = event.target.dataset;
this.showTab(tab);
}
@ -109,4 +108,4 @@ export class TriLayout extends Component {
this.lastTabShown = tabName;
}
}
}

8
resources/js/components/user-select.js
View File

@ -1,5 +1,5 @@
import {onChildEvent} from "../services/dom";
import {Component} from "./component";
import {onChildEvent} from '../services/dom';
import {Component} from './component';
export class UserSelect extends Component {
@ -20,9 +20,9 @@ export class UserSelect extends Component {
}
hide() {
/** @var {Dropdown} **/
/** @var {Dropdown} * */
const dropdown = window.$components.firstOnElement(this.container, 'dropdown');
dropdown.hide();
}
}
}

4
resources/js/components/webhook-events.js
View File

@ -2,7 +2,7 @@
* Webhook Events
* Manages dynamic selection control in the webhook form interface.
*/
import {Component} from "./component";
import {Component} from './component';
export class WebhookEvents extends Component {
@ -27,4 +27,4 @@ export class WebhookEvents extends Component {
}
}
}
}

8
resources/js/components/wysiwyg-editor.js
View File

@ -1,5 +1,5 @@
import {build as buildEditorConfig} from "../wysiwyg/config";
import {Component} from "./component";
import {build as buildEditorConfig} from '../wysiwyg/config';
import {Component} from './component';
export class WysiwygEditor extends Component {
@ -45,8 +45,8 @@ export class WysiwygEditor extends Component {
*/
getContent() {
return {
html: this.editor.getContent()
html: this.editor.getContent(),
};
}
}
}