Finished updating remainder of JS components to new system

resources/js/components/attachments-list.js

@@ -43,6 +43,4 @@ export class AttachmentsList extends Component {
             link.removeAttribute('target');
         }
     }
-}
+}
-
-export default AttachmentsList;

resources/js/components/attachments.js

@@ -71,6 +71,4 @@ export class Attachments extends Component {
         this.listContainer.classList.remove('hidden');
     }
 
-}
+}
-
-export default Attachments;

resources/js/components/back-to-top.js

@@ -55,6 +55,4 @@ export class BackToTop extends Component {
         requestAnimationFrame(setPos.bind(this));
     }
 
-}
+}
-
-export default BackToTop;

resources/js/components/code-editor.js

@@ -1,10 +1,8 @@
 import {onChildEvent, onEnterPress, onSelect} from "../services/dom";
+import {Component} from "./component";
 
-/**
+
- * Code Editor
+export class CodeEditor extends Component {
- * @extends {Component}
- */
-class CodeEditor {
 
     setup() {
         this.container = this.$refs.container;
@@ -184,6 +182,4 @@ class CodeEditor {
         window.sessionStorage.setItem(this.historyKey, historyString);
     }
 
-}
+}
-
-export default CodeEditor;

resources/js/components/code-textarea.js

@@ -12,6 +12,4 @@ export class CodeTextarea extends Component {
         Code.inlineEditor(this.$el, mode);
     }
 
-}
+}
-
-export default CodeTextarea;

resources/js/components/confirm-dialog.js

@@ -1,12 +1,12 @@
 import {onSelect} from "../services/dom";
+import {Component} from "./component";
 
 /**
  * Custom equivalent of window.confirm() using our popup component.
  * Is promise based so can be used like so:
  * `const result = await dialog.show()`
- * @extends {Component}
  */
-class ConfirmDialog {
+export class ConfirmDialog extends Component {
 
     setup() {
         this.container = this.$el;
@@ -47,6 +47,4 @@ class ConfirmDialog {
         }
     }
 
-}
+}
-
-export default ConfirmDialog;

resources/js/components/dropzone.js

@@ -1,11 +1,8 @@
 import DropZoneLib from "dropzone";
 import {fadeOut} from "../services/animations";
+import {Component} from "./component";
 
-/**
+export class Dropzone extends Component {
- * Dropzone
- * @extends {Component}
- */
-class Dropzone {
     setup() {
         this.container = this.$el;
         this.url = this.$opts.url;
@@ -73,6 +70,4 @@ class Dropzone {
     removeAll() {
         this.dz.removeAllFiles(true);
     }
-}
+}
-
-export default Dropzone;

resources/js/components/editor-toolbox.js

@@ -1,51 +1,58 @@
-class EditorToolbox {
+import {Component} from "./component";
 
-    constructor(elem) {
+export class EditorToolbox extends Component {
+
+    setup() {
         // Elements
-        this.elem = elem;
+        this.container = this.$el;
-        this.buttons = elem.querySelectorAll('[toolbox-tab-button]');
+        this.buttons = this.$manyRefs.tabButton;
-        this.contentElements = elem.querySelectorAll('[toolbox-tab-content]');
+        this.contentElements = this.$manyRefs.tabContent;
-        this.toggleButton = elem.querySelector('[toolbox-toggle]');
+        this.toggleButton = this.$refs.toggle;
 
-        // Toolbox toggle button click
+        this.setupListeners();
-        this.toggleButton.addEventListener('click', this.toggle.bind(this));
-        // Tab button click
-        this.elem.addEventListener('click', event => {
-            let button = event.target.closest('[toolbox-tab-button]');
-            if (button === null) return;
-            let name = button.getAttribute('toolbox-tab-button');
-            this.setActiveTab(name, true);
-        });
 
         // Set the first tab as active on load
-        this.setActiveTab(this.contentElements[0].getAttribute('toolbox-tab-content'));
+        this.setActiveTab(this.contentElements[0].dataset.tabContent);
+    }
+
+    setupListeners() {
+        // Toolbox toggle button click
+        this.toggleButton.addEventListener('click', () => this.toggle());
+        // Tab button click
+        this.container.addEventListener('click', event => {
+            const button = event.target.closest('button');
+            if (this.buttons.includes(button)) {
+                const name = button.dataset.tab;
+                this.setActiveTab(name, true);
+            }
+        });
     }
 
     toggle() {
-        this.elem.classList.toggle('open');
+        this.container.classList.toggle('open');
-        const expanded = this.elem.classList.contains('open') ? 'true' : 'false';
+        const expanded = this.container.classList.contains('open') ? 'true' : 'false';
         this.toggleButton.setAttribute('aria-expanded', expanded);
     }
 
     setActiveTab(tabName, openToolbox = false) {
+
         // Set button visibility
-        for (let i = 0, len = this.buttons.length; i < len; i++) {
+        for (const button of this.buttons) {
-            this.buttons[i].classList.remove('active');
+            button.classList.remove('active');
-            let bName =  this.buttons[i].getAttribute('toolbox-tab-button');
+            const bName =  button.dataset.tab;
-            if (bName === tabName) this.buttons[i].classList.add('active');
+            if (bName === tabName) button.classList.add('active');
-        }
-        // Set content visibility
-        for (let i = 0, len = this.contentElements.length; i < len; i++) {
-            this.contentElements[i].style.display = 'none';
-            let cName = this.contentElements[i].getAttribute('toolbox-tab-content');
-            if (cName === tabName) this.contentElements[i].style.display = 'block';
         }
 
-        if (openToolbox && !this.elem.classList.contains('open')) {
+        // Set content visibility
+        for (const contentEl of this.contentElements) {
+            contentEl.style.display = 'none';
+            const cName = contentEl.dataset.tabContent;
+            if (cName === tabName) contentEl.style.display = 'block';
+        }
+
+        if (openToolbox && !this.container.classList.contains('open')) {
             this.toggle();
         }
     }
 
-}
+}
-
-export default EditorToolbox;

resources/js/components/entity-search.js

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

resources/js/components/event-emit-select.js

@@ -1,4 +1,5 @@
 import {onSelect} from "../services/dom";
+import {Component} from "./component";
 
 /**
  * EventEmitSelect
@@ -10,10 +11,8 @@ import {onSelect} from "../services/dom";
  *
  * All options will be set as the "detail" of the event with
  * their values included.
- *
- * @extends {Component}
  */
-class EventEmitSelect {
+export class EventEmitSelect extends Component{
     setup() {
         this.container = this.$el;
         this.name = this.$opts.name;
@@ -24,6 +23,4 @@ class EventEmitSelect {
         });
     }
 
-}
+}
-
-export default EventEmitSelect;

resources/js/components/image-manager.js

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

resources/js/components/index.js

@@ -8,34 +8,34 @@ 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 {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 {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 {Dropzone} from "./dropzone.js"
-// export {EditorToolbox} from "./editor-toolbox.js"
+export {EditorToolbox} from "./editor-toolbox.js"
 export {EntityPermissions} from "./entity-permissions"
-// export {EntitySearch} from "./entity-search.js"
+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 {EventEmitSelect} from "./event-emit-select.js"
 export {ExpandToggle} from "./expand-toggle.js"
 export {HeaderMobileToggle} from "./header-mobile-toggle.js"
-// export {ImageManager} from "./image-manager.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 {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 {PageEditor} from "./page-editor.js"
 export {PagePicker} from "./page-picker.js"
 export {PermissionsTable} from "./permissions-table.js"
 export {Pointer} from "./pointer.js";
@@ -46,13 +46,13 @@ 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 {SortableList} from "./sortable-list.js"
 export {SubmitOnChange} from "./submit-on-change.js"
-// export {Tabs} from "./tabs.js"
+export {Tabs} from "./tabs.js"
-// export {TagManager} from "./tag-manager.js"
+export {TagManager} from "./tag-manager.js"
-// export {TemplateManager} from "./template-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 {WysiwygEditor} from "./wysiwyg-editor.js"

resources/js/components/markdown-editor.js

@@ -4,8 +4,9 @@ import Clipboard from "../services/clipboard";
 import {debounce} from "../services/util";
 import {patchDomFromHtmlString} from "../services/vdom";
 import DrawIO from "../services/drawio";
+import {Component} from "./component";
 
-class MarkdownEditor {
+export class MarkdownEditor extends Component {
 
     setup() {
         this.elem = this.$el;
@@ -619,5 +620,3 @@ class MarkdownEditor {
         });
     }
 }
-
-export default MarkdownEditor ;

resources/js/components/page-editor.js

@@ -1,11 +1,8 @@
 import * as Dates from "../services/dates";
 import {onSelect} from "../services/dom";
+import {Component} from "./component";
 
-/**
+export class PageEditor extends Component {
- * Page Editor
- * @extends {Component}
- */
-class PageEditor {
     setup() {
         // Options
         this.draftsEnabled = this.$opts.draftsEnabled === 'true';
@@ -207,6 +204,4 @@ class PageEditor {
         }
     }
 
-}
+}
-
-export default PageEditor;

resources/js/components/shelf-sort.js

@@ -79,6 +79,4 @@ export class ShelfSort extends Component {
         this.input.value = shelfBookElems.map(elem => elem.getAttribute('data-id')).join(',');
     }
 
-}
+}
-
-export default ShelfSort;

resources/js/components/sortable-list.js

@@ -1,4 +1,5 @@
 import Sortable from "sortablejs";
+import {Component} from "./component";
 
 /**
  * SortableList
@@ -6,10 +7,8 @@ import Sortable from "sortablejs";
  * Can have data set on the dragged items by setting a 'data-drag-content' attribute.
  * This attribute must contain JSON where the keys are content types and the values are
  * the data to set on the data-transfer.
- *
- * @extends {Component}
  */
-class SortableList {
+export class SortableList extends Component {
     setup() {
         this.container = this.$el;
         this.handleSelector = this.$opts.handleSelector;
@@ -34,6 +33,4 @@ class SortableList {
             dragoverBubble: false,
         });
     }
-}
+}
-
-export default SortableList;

resources/js/components/tabs.js

@@ -1,11 +1,11 @@
+import {onSelect} from "../services/dom";
+import {Component} from "./component";
+
 /**
  * Tabs
  * Works by matching 'tabToggle<Key>' with 'tabContent<Key>' sections.
- * @extends {Component}
  */
-import {onSelect} from "../services/dom";
+export class Tabs extends Component {
-
-class Tabs {
 
     setup() {
         this.tabContentsByName = {};
@@ -46,6 +46,4 @@ class Tabs {
         }
     }
 
-}
+}
-
-export default Tabs;

resources/js/components/tag-manager.js

@@ -1,8 +1,6 @@
-/**
+import {Component} from "./component";
- * TagManager
+
- * @extends {Component}
+export class TagManager extends Component {
- */
-class TagManager {
     setup() {
         this.addRemoveComponentEl = this.$refs.addRemove;
         this.container = this.$el;
@@ -27,6 +25,4 @@ class TagManager {
         });
         return firstEmpty !== undefined;
     }
-}
+}
-
-export default TagManager;

resources/js/components/template-manager.js

@@ -1,25 +1,48 @@
 import * as DOM from "../services/dom";
+import {Component} from "./component";
 
-class TemplateManager {
+export class TemplateManager extends Component {
 
-    constructor(elem) {
+    setup() {
-        this.elem = elem;
+        this.container = this.$el;
-        this.list = elem.querySelector('[template-manager-list]');
+        this.list = this.$refs.list;
-        this.searching = false;
 
+        this.searchInput = this.$refs.searchInput;
+        this.searchButton = this.$refs.searchButton;
+        this.searchCancel = this.$refs.searchCancel;
+
+        this.setupListeners();
+    }
+
+    setupListeners() {
         // Template insert action buttons
-        DOM.onChildEvent(this.elem, '[template-action]', 'click', this.handleTemplateActionClick.bind(this));
+        DOM.onChildEvent(this.container, '[template-action]', 'click', this.handleTemplateActionClick.bind(this));
 
         // Template list pagination click
-        DOM.onChildEvent(this.elem, '.pagination a', 'click', this.handlePaginationClick.bind(this));
+        DOM.onChildEvent(this.container, '.pagination a', 'click', this.handlePaginationClick.bind(this));
 
         // Template list item content click
-        DOM.onChildEvent(this.elem, '.template-item-content', 'click', this.handleTemplateItemClick.bind(this));
+        DOM.onChildEvent(this.container, '.template-item-content', 'click', this.handleTemplateItemClick.bind(this));
 
         // Template list item drag start
-        DOM.onChildEvent(this.elem, '.template-item', 'dragstart', this.handleTemplateItemDragStart.bind(this));
+        DOM.onChildEvent(this.container, '.template-item', 'dragstart', this.handleTemplateItemDragStart.bind(this));
 
-        this.setupSearchBox();
+        // Search box enter press
+        this.searchInput.addEventListener('keypress', event => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.performSearch();
+            }
+        });
+
+        // Search submit button press
+        this.searchButton.addEventListener('click', event => this.performSearch());
+
+        // Search cancel button press
+        this.searchCancel.addEventListener('click', event => {
+            this.searchInput.value = '';
+            this.performSearch();
+        });
     }
 
     handleTemplateItemClick(event, templateItem) {
@@ -54,45 +77,12 @@ class TemplateManager {
         this.list.innerHTML = resp.data;
     }
 
-    setupSearchBox() {
+    async performSearch() {
-        const searchBox = this.elem.querySelector('.search-box');
+        const searchTerm = this.searchInput.value;
-
+        const resp = await window.$http.get(`/templates`, {
-        // Search box may not exist if there are no existing templates in the system.
+            search: searchTerm
-        if (!searchBox) return;
-
-        const input = searchBox.querySelector('input');
-        const submitButton = searchBox.querySelector('button');
-        const cancelButton = searchBox.querySelector('button.search-box-cancel');
-
-        async function performSearch() {
-            const searchTerm = input.value;
-            const resp = await window.$http.get(`/templates`, {
-                search: searchTerm
-            });
-            cancelButton.style.display = searchTerm ? 'block' : 'none';
-            this.list.innerHTML = resp.data;
-        }
-        performSearch = performSearch.bind(this);
-
-        // Search box enter press
-        searchBox.addEventListener('keypress', event => {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                performSearch();
-            }
-        });
-
-        // Submit button press
-        submitButton.addEventListener('click', event => {
-            performSearch();
-        });
-
-        // Cancel button press
-        cancelButton.addEventListener('click', event => {
-            input.value = '';
-            performSearch();
         });
+        this.searchCancel.style.display = searchTerm ? 'block' : 'none';
+        this.list.innerHTML = resp.data;
     }
-}
+}
-
-export default TemplateManager;

resources/js/components/wysiwyg-editor.js

@@ -1,6 +1,7 @@
 import {build as buildEditorConfig} from "../wysiwyg/config";
+import {Component} from "./component";
 
-class WysiwygEditor {
+export class WysiwygEditor extends Component {
 
     setup() {
         this.elem = this.$el;
@@ -35,6 +36,4 @@ class WysiwygEditor {
         return '';
     }
 
-}
+}
-
-export default WysiwygEditor;

resources/js/wysiwyg/shortcuts.js

@@ -44,7 +44,9 @@ export function register(editor) {
 
     // Link selector shortcut
     editor.shortcuts.add('meta+shift+K', '', function() {
-        window.EntitySelectorPopup.show(function(entity) {
+        /** @var {EntitySelectorPopup} **/
+        const selectorPopup = window.$components.first('entity-selector-popup');
+        selectorPopup.show(function(entity) {
 
             if (editor.selection.isCollapsed()) {
                 editor.insertContent(editor.dom.createHTML('a', {href: entity.link}, editor.dom.encode(entity.name)));

resources/sass/_pages.scss

@@ -278,16 +278,16 @@ body.tox-fullscreen, body.markdown-fullscreen {
   &.open {
     width: 480px;
   }
-  [toolbox-toggle] svg {
+  .toolbox-toggle svg {
     transition: transform ease-in-out 180ms;
   }
-  [toolbox-toggle] {
+  .toolbox-toggle {
     transition: background-color ease-in-out 180ms;
   }
-  &.open [toolbox-toggle] {
+  &.open .toolbox-toggle {
     background-color: rgba(255, 0, 0, 0.29);
   }
-  &.open [toolbox-toggle] svg {
+  &.open .toolbox-toggle svg {
     transform: rotate(180deg);
   }
   > div {
@@ -357,7 +357,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
 }
 
-[toolbox-tab-content] {
+.toolbox-tab-content {
   display: none;
 }
 

resources/views/attachments/manager.blade.php

@@ -1,6 +1,9 @@
-<div style="display: block;" toolbox-tab-content="files"
+<div style="display: block;"
+     refs="editor-toolbox@tab-content"
+     data-tab-content="files"
      component="attachments"
-     option:attachments:page-id="{{ $page->id ?? 0 }}">
+     option:attachments:page-id="{{ $page->id ?? 0 }}"
+     class="toolbox-tab-content">
 
     <h4>{{ trans('entities.attachments') }}</h4>
     <div class="px-l files">

resources/views/pages/parts/editor-toolbox.blade.php

@@ -1,15 +1,15 @@
-<div editor-toolbox class="floating-toolbox">
+<div component="editor-toolbox" class="floating-toolbox">
 
     <div class="tabs primary-background-light">
-        <button type="button" toolbox-toggle aria-expanded="false">@icon('caret-left-circle')</button>
+        <button type="button" refs="editor-toolbox@toggle" aria-expanded="false" class="toolbox-toggle">@icon('caret-left-circle')</button>
-        <button type="button" toolbox-tab-button="tags" title="{{ trans('entities.page_tags') }}" class="active">@icon('tag')</button>
+        <button type="button" refs="editor-toolbox@tab-button" data-tab="tags" title="{{ trans('entities.page_tags') }}" class="active">@icon('tag')</button>
         @if(userCan('attachment-create-all'))
-            <button type="button" toolbox-tab-button="files" title="{{ trans('entities.attachments') }}">@icon('attach')</button>
+            <button type="button" refs="editor-toolbox@tab-button" data-tab="files" title="{{ trans('entities.attachments') }}">@icon('attach')</button>
         @endif
-        <button type="button" toolbox-tab-button="templates" title="{{ trans('entities.templates') }}">@icon('template')</button>
+        <button type="button" refs="editor-toolbox@tab-button" data-tab="templates" title="{{ trans('entities.templates') }}">@icon('template')</button>
     </div>
 
-    <div toolbox-tab-content="tags">
+    <div refs="editor-toolbox@tab-content" data-tab-content="tags" class="toolbox-tab-content">
         <h4>{{ trans('entities.page_tags') }}</h4>
         <div class="px-l">
             @include('entities.tag-manager', ['entity' => $page])
@@ -20,7 +20,7 @@
         @include('attachments.manager', ['page' => $page])
     @endif
 
-    <div toolbox-tab-content="templates">
+    <div refs="editor-toolbox@tab-content" data-tab-content="templates" class="toolbox-tab-content">
         <h4>{{ trans('entities.templates') }}</h4>
 
         <div class="px-l">

resources/views/pages/parts/template-manager.blade.php

@@ -1,4 +1,4 @@
-<div template-manager>
+<div component="template-manager">
     @if(userCan('templates-manage'))
         <p class="text-muted small mb-none">
             {{ trans('entities.templates_explain_set_as_template') }}
@@ -11,15 +11,13 @@
         <hr>
     @endif
 
-    @if(count($templates) > 0)
+    <div class="search-box flexible mb-m" style="display: {{ count($templates) > 0 ? 'block' : 'none' }}">
-        <div class="search-box flexible mb-m">
+        <input refs="template-manager@searchInput" type="text" name="template-search" placeholder="{{ trans('common.search') }}">
-            <input type="text" name="template-search" placeholder="{{ trans('common.search') }}">
+        <button refs="template-manager@searchButton" type="button">@icon('search')</button>
-            <button type="button">@icon('search')</button>
+        <button refs="template-manager@searchCancel" class="search-box-cancel text-neg" type="button" style="display: none">@icon('close')</button>
-            <button class="search-box-cancel text-neg hidden" type="button">@icon('close')</button>
+    </div>
-        </div>
-    @endif
 
-    <div template-manager-list>
+    <div refs="template-manager@list">
         @include('pages.parts.template-manager-list', ['templates' => $templates])
     </div>
 </div>