diff --git a/resources/js/components/book-sort.js b/resources/js/components/book-sort.js index 2b94ca4a7..3ffadf991 100644 --- a/resources/js/components/book-sort.js +++ b/resources/js/components/book-sort.js @@ -1,4 +1,6 @@ import Sortable from "sortablejs"; +import {Component} from "./component"; +import {htmlToDom} from "../services/dom"; // Auto sort control const sortOperations = { @@ -35,14 +37,14 @@ const sortOperations = { }, }; -class BookSort { +export class BookSort extends Component { - constructor(elem) { - this.elem = elem; - this.sortContainer = elem.querySelector('[book-sort-boxes]'); - this.input = elem.querySelector('[book-sort-input]'); + setup() { + this.container = this.$el; + this.sortContainer = this.$refs.sortContainer; + this.input = this.$refs.input; - const initialSortBox = elem.querySelector('.sort-box'); + const initialSortBox = this.container.querySelector('.sort-box'); this.setupBookSortable(initialSortBox); this.setupSortPresets(); @@ -90,14 +92,12 @@ class BookSort { * @param {Object} entityInfo */ bookSelect(entityInfo) { - const alreadyAdded = this.elem.querySelector(`[data-type="book"][data-id="${entityInfo.id}"]`) !== null; + const alreadyAdded = this.container.querySelector(`[data-type="book"][data-id="${entityInfo.id}"]`) !== null; if (alreadyAdded) return; const entitySortItemUrl = entityInfo.link + '/sort-item'; window.$http.get(entitySortItemUrl).then(resp => { - const wrap = document.createElement('div'); - wrap.innerHTML = resp.data; - const newBookContainer = wrap.children[0]; + const newBookContainer = htmlToDom(resp.data); this.sortContainer.append(newBookContainer); this.setupBookSortable(newBookContainer); }); @@ -155,7 +155,7 @@ class BookSort { */ buildEntityMap() { const entityMap = []; - const lists = this.elem.querySelectorAll('.sort-list'); + const lists = this.container.querySelectorAll('.sort-list'); for (let list of lists) { const bookId = list.closest('[data-type="book"]').getAttribute('data-id'); @@ -202,6 +202,4 @@ class BookSort { } } -} - -export default BookSort; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/chapter-contents.js b/resources/js/components/chapter-contents.js index c824d0f78..37df213e3 100644 --- a/resources/js/components/chapter-contents.js +++ b/resources/js/components/chapter-contents.js @@ -1,9 +1,7 @@ import {slideUp, slideDown} from "../services/animations"; +import {Component} from "./component"; -/** - * @extends {Component} - */ -class ChapterContents { +export class ChapterContents extends Component { setup() { this.list = this.$refs.list; @@ -31,7 +29,4 @@ class ChapterContents { event.preventDefault(); this.isOpen ? this.close() : this.open(); } - } - -export default ChapterContents; diff --git a/resources/js/components/code-highlighter.js b/resources/js/components/code-highlighter.js index 5ffab3775..14bfc97f0 100644 --- a/resources/js/components/code-highlighter.js +++ b/resources/js/components/code-highlighter.js @@ -1,14 +1,16 @@ -class CodeHighlighter { +import {Component} from "./component"; - constructor(elem) { - const codeBlocks = elem.querySelectorAll('pre'); +export class CodeHighlighter extends Component{ + + setup() { + const container = this.$el; + + const codeBlocks = container.querySelectorAll('pre'); if (codeBlocks.length > 0) { window.importVersioned('code').then(Code => { - Code.highlightWithin(elem); + Code.highlightWithin(container); }); } } -} - -export default CodeHighlighter; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/details-highlighter.js b/resources/js/components/details-highlighter.js index 1f3b66c67..6466fb584 100644 --- a/resources/js/components/details-highlighter.js +++ b/resources/js/components/details-highlighter.js @@ -1,21 +1,22 @@ -class DetailsHighlighter { +import {Component} from "./component"; - constructor(elem) { - this.elem = elem; +export class DetailsHighlighter extends Component { + + setup() { + this.container = this.$el; this.dealtWith = false; - elem.addEventListener('toggle', this.onToggle.bind(this)); + + this.container.addEventListener('toggle', this.onToggle.bind(this)); } onToggle() { if (this.dealtWith) return; - if (this.elem.querySelector('pre')) { + if (this.container.querySelector('pre')) { window.importVersioned('code').then(Code => { - Code.highlightWithin(this.elem); + Code.highlightWithin(this.container); }); } this.dealtWith = true; } -} - -export default DetailsHighlighter; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js index 06a89d08c..2625ff4de 100644 --- a/resources/js/components/dropdown.js +++ b/resources/js/components/dropdown.js @@ -1,11 +1,11 @@ import {onSelect} from "../services/dom"; +import {Component} from "./component"; /** * Dropdown * Provides some simple logic to create simple dropdown menus. - * @extends {Component} */ -class DropDown { +export class Dropdown extends Component { setup() { this.container = this.$el; @@ -171,6 +171,4 @@ class DropDown { }); } -} - -export default DropDown; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/entity-selector.js b/resources/js/components/entity-selector.js index e2596998a..1496ea89e 100644 --- a/resources/js/components/entity-selector.js +++ b/resources/js/components/entity-selector.js @@ -1,10 +1,10 @@ import {onChildEvent} from "../services/dom"; +import {Component} from "./component"; /** * Entity Selector - * @extends {Component} */ -class EntitySelector { +export class EntitySelector extends Component { setup() { this.elem = this.$el; @@ -185,6 +185,4 @@ class EntitySelector { this.selectedItemData = null; } -} - -export default EntitySelector; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/index.js b/resources/js/components/index.js index e3fa2cf78..1f8a05173 100644 --- a/resources/js/components/index.js +++ b/resources/js/components/index.js @@ -4,24 +4,24 @@ 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 {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 {BookSort} from "./book-sort.js" +export {ChapterContents} from "./chapter-contents.js" // export {CodeEditor} from "./code-editor.js" -// export {CodeHighlighter} from "./code-highlighter.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 {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 {EntityPermissions} from "./entity-permissions" // export {EntitySearch} from "./entity-search.js" -// export {EntitySelector} from "./entity-selector.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" @@ -32,20 +32,20 @@ export {BackToTop} from "./back-to-top.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 {Notification} from "./notification.js" // export {OptionalInput} from "./optional-input.js" -// export {PageComments} from "./page-comments.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 {Pointer} from "./pointer.js"; // export {Popup} from "./popup.js" // export {SettingAppColorPicker} from "./setting-app-color-picker.js" // export {SettingColorPicker} from "./setting-color-picker.js" // export {ShelfSort} from "./shelf-sort.js" -// export {Shortcuts} from "./shortcuts"; -// export {ShortcutInput} from "./shortcut-input"; +export {Shortcuts} from "./shortcuts" +export {ShortcutInput} from "./shortcut-input" // export {Sidebar} from "./sidebar.js" // export {SortableList} from "./sortable-list.js" // export {SubmitOnChange} from "./submit-on-change.js" diff --git a/resources/js/components/notification.js b/resources/js/components/notification.js index 35bab4ea6..8a0876241 100644 --- a/resources/js/components/notification.js +++ b/resources/js/components/notification.js @@ -1,19 +1,21 @@ +import {Component} from "./component"; -class Notification { +export class Notification extends Component { - constructor(elem) { - this.elem = elem; - this.type = elem.getAttribute('notification'); - this.textElem = elem.querySelector('span'); - this.autohide = this.elem.hasAttribute('data-autohide'); - this.elem.style.display = 'grid'; + 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.container.style.display = 'grid'; window.$events.listen(this.type, text => { this.show(text); }); - elem.addEventListener('click', this.hide.bind(this)); + this.container.addEventListener('click', this.hide.bind(this)); - if (elem.hasAttribute('data-show')) { + if (this.initialShow) { setTimeout(() => this.show(this.textElem.textContent), 100); } @@ -21,14 +23,14 @@ class Notification { } show(textToShow = '') { - this.elem.removeEventListener('transitionend', this.hideCleanup); + this.container.removeEventListener('transitionend', this.hideCleanup); this.textElem.textContent = textToShow; - this.elem.style.display = 'grid'; + this.container.style.display = 'grid'; setTimeout(() => { - this.elem.classList.add('showing'); + this.container.classList.add('showing'); }, 1); - if (this.autohide) { + if (this.autoHide) { const words = textToShow.split(' ').length; const timeToShow = Math.max(2000, 1000 + (250 * words)); setTimeout(this.hide.bind(this), timeToShow); @@ -36,15 +38,13 @@ class Notification { } hide() { - this.elem.classList.remove('showing'); - this.elem.addEventListener('transitionend', this.hideCleanup); + this.container.classList.remove('showing'); + this.container.addEventListener('transitionend', this.hideCleanup); } hideCleanup() { - this.elem.style.display = 'none'; - this.elem.removeEventListener('transitionend', this.hideCleanup); + this.container.style.display = 'none'; + this.container.removeEventListener('transitionend', this.hideCleanup); } -} - -export default Notification; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js index 0264e24c6..726531e95 100644 --- a/resources/js/components/page-comments.js +++ b/resources/js/components/page-comments.js @@ -1,9 +1,8 @@ import {scrollAndHighlightElement} from "../services/util"; +import {Component} from "./component"; +import {htmlToDom} from "../services/dom"; -/** - * @extends {Component} - */ -class PageComments { +export class PageComments extends Component { setup() { this.elem = this.$el; @@ -119,9 +118,7 @@ class PageComments { }; this.showLoading(this.form); window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => { - let newComment = document.createElement('div'); - newComment.innerHTML = resp.data; - let newElem = newComment.children[0]; + const newElem = htmlToDom(resp.data); this.container.appendChild(newElem); window.$components.init(newElem); window.$events.success(this.createdText); @@ -199,6 +196,4 @@ class PageComments { formElem.querySelector('.form-group.loading').style.display = 'none'; } -} - -export default PageComments; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/pointer.js b/resources/js/components/pointer.js index d1967acd0..d884dc721 100644 --- a/resources/js/components/pointer.js +++ b/resources/js/components/pointer.js @@ -1,10 +1,9 @@ import * as DOM from "../services/dom"; import Clipboard from "clipboard/dist/clipboard.min"; +import {Component} from "./component"; -/** - * @extends Component - */ -class Pointer { + +export class Pointer extends Component { setup() { this.container = this.$el; @@ -126,6 +125,4 @@ class Pointer { editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`; } } -} - -export default Pointer; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/shortcut-input.js b/resources/js/components/shortcut-input.js index fa1378988..2a2aaa225 100644 --- a/resources/js/components/shortcut-input.js +++ b/resources/js/components/shortcut-input.js @@ -1,13 +1,12 @@ +import {Component} from "./component"; + /** * Keys to ignore when recording shortcuts. * @type {string[]} */ const ignoreKeys = ['Control', 'Alt', 'Shift', 'Meta', 'Super', ' ', '+', 'Tab', 'Escape']; -/** - * @extends {Component} - */ -class ShortcutInput { +export class ShortcutInput extends Component { setup() { this.input = this.$el; @@ -52,6 +51,4 @@ class ShortcutInput { this.input.removeEventListener('keydown', this.listenerRecordKey); } -} - -export default ShortcutInput; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/components/shortcuts.js b/resources/js/components/shortcuts.js index 4efa3d42b..a87213b2e 100644 --- a/resources/js/components/shortcuts.js +++ b/resources/js/components/shortcuts.js @@ -1,3 +1,5 @@ +import {Component} from "./component"; + function reverseMap(map) { const reversed = {}; for (const [key, value] of Object.entries(map)) { @@ -6,10 +8,8 @@ function reverseMap(map) { return reversed; } -/** - * @extends {Component} - */ -class Shortcuts { + +export class Shortcuts extends Component { setup() { this.container = this.$el; @@ -159,6 +159,4 @@ class Shortcuts { this.hintsShowing = false; } -} - -export default Shortcuts; \ No newline at end of file +} \ No newline at end of file diff --git a/resources/js/services/components.js b/resources/js/services/components.js index 006f16e86..04fd0dcf4 100644 --- a/resources/js/services/components.js +++ b/resources/js/services/components.js @@ -127,7 +127,6 @@ export function register(mapping) { for (const key of keys) { componentMap[camelToKebab(key)] = mapping[key]; } - console.log(componentMap); } /** diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index db9248719..ff60cd50a 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -1,6 +1,6 @@ // System wide notifications -[notification] { +.notification { position: fixed; top: 0; right: 0; diff --git a/resources/views/api-docs/index.blade.php b/resources/views/api-docs/index.blade.php index 8ce24baae..9345a7bce 100644 --- a/resources/views/api-docs/index.blade.php +++ b/resources/views/api-docs/index.blade.php @@ -38,7 +38,7 @@
-
+
@include('api-docs.parts.getting-started')
diff --git a/resources/views/api-docs/parts/endpoint.blade.php b/resources/views/api-docs/parts/endpoint.blade.php index 6e3d93659..60c478fe5 100644 --- a/resources/views/api-docs/parts/endpoint.blade.php +++ b/resources/views/api-docs/parts/endpoint.blade.php @@ -34,14 +34,14 @@ @endif @if($endpoint['example_request'] ?? false) -
+
Example Request 
{{ $endpoint['example_request'] }}
@endif @if($endpoint['example_response'] ?? false) -
+
Example Response 
{{ $endpoint['example_response'] }}
diff --git a/resources/views/books/parts/sort-box.blade.php b/resources/views/books/parts/sort-box.blade.php index f043735bb..ef9929e46 100644 --- a/resources/views/books/parts/sort-box.blade.php +++ b/resources/views/books/parts/sort-box.blade.php @@ -4,11 +4,11 @@ {{ $book->name }}
- {{ trans('entities.books_sort_name') }} - {{ trans('entities.books_sort_created') }} - {{ trans('entities.books_sort_updated') }} - {{ trans('entities.books_sort_chapters_first') }} - {{ trans('entities.books_sort_chapters_last') }} + + + + +
    diff --git a/resources/views/books/sort.blade.php b/resources/views/books/sort.blade.php index a24bd8959..077da101d 100644 --- a/resources/views/books/sort.blade.php +++ b/resources/views/books/sort.blade.php @@ -16,16 +16,16 @@
    -
    +

    {{ trans('entities.books_sort') }}

    -
    +
    @include('books.parts.sort-box', ['book' => $book, 'bookChildren' => $bookChildren])
    {!! csrf_field() !!} - +
    {{ trans('common.cancel') }} diff --git a/resources/views/common/notifications.blade.php b/resources/views/common/notifications.blade.php index 752920917..e06bd5fd1 100644 --- a/resources/views/common/notifications.blade.php +++ b/resources/views/common/notifications.blade.php @@ -1,11 +1,29 @@ -