Updated another set of components

resources/js/components/code-textarea.js

@@ -1,9 +1,10 @@
 /**
  * A simple component to render a code editor within the textarea
  * this exists upon.
- * @extends {Component}
  */
-class CodeTextarea {
+import {Component} from "./component";
+
+export class CodeTextarea extends Component {
 
     async setup() {
         const mode = this.$opts.mode;

resources/js/components/custom-checkbox.js

@@ -1,18 +1,19 @@
+import {Component} from "./component";
 
-class CustomCheckbox {
+export class CustomCheckbox extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.checkbox = elem.querySelector('input[type=checkbox]');
-        this.display = elem.querySelector('[role="checkbox"]');
+    setup() {
+        this.container = this.$el;
+        this.checkbox = this.container.querySelector('input[type=checkbox]');
+        this.display = this.container.querySelector('[role="checkbox"]');
 
         this.checkbox.addEventListener('change', this.stateChange.bind(this));
-        this.elem.addEventListener('keydown', this.onKeyDown.bind(this));
+        this.container.addEventListener('keydown', this.onKeyDown.bind(this));
     }
 
     onKeyDown(event) {
-        const isEnterOrPress = event.keyCode === 32 || event.keyCode === 13;
-        if (isEnterOrPress) {
+        const isEnterOrSpace = event.key === ' ' || event.key === 'Enter';
+        if (isEnterOrSpace) {
             event.preventDefault();
             this.toggle();
         }
@@ -29,6 +30,4 @@ class CustomCheckbox {
         this.display.setAttribute('aria-checked', checked);
     }
 
-}
-
-export default CustomCheckbox;
+}

resources/js/components/entity-permissions.js

@@ -1,9 +1,7 @@
-/**
- * @extends {Component}
- */
 import {htmlToDom} from "../services/dom";
+import {Component} from "./component";
 
-class EntityPermissions {
+export class EntityPermissions extends Component {
 
     setup() {
         this.container = this.$el;
@@ -74,6 +72,4 @@ class EntityPermissions {
         row.remove();
     }
 
-}
-
-export default EntityPermissions;
+}

resources/js/components/entity-selector-popup.js

@@ -1,14 +1,10 @@
-/**
- * Entity Selector Popup
- * @extends {Component}
- */
-class EntitySelectorPopup {
+import {Component} from "./component";
+
+export class EntitySelectorPopup extends Component {
 
     setup() {
-        this.elem = this.$el;
+        this.container = this.$el;
         this.selectButton = this.$refs.select;
-
-        window.EntitySelectorPopup = this;
         this.selectorEl = this.$refs.selector;
 
         this.callback = null;
@@ -21,12 +17,12 @@ class EntitySelectorPopup {
 
     show(callback) {
         this.callback = callback;
-        this.elem.components.popup.show();
+        this.container.components.popup.show();
         this.getSelector().focusSearch();
     }
 
     hide() {
-        this.elem.components.popup.hide();
+        this.container.components.popup.hide();
     }
 
     getSelector() {
@@ -51,6 +47,4 @@ class EntitySelectorPopup {
         this.getSelector().reset();
         if (this.callback && entity) this.callback(entity);
     }
-}
-
-export default EntitySelectorPopup;
+}

resources/js/components/index.js

@@ -10,23 +10,22 @@ 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 {CodeTextarea} from "./code-textarea.js"
 // export {Collapsible} from "./collapsible.js"
 // export {ConfirmDialog} from "./confirm-dialog"
-// export {CustomCheckbox} from "./custom-checkbox.js"
+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 {EntityPermissions} from "./entity-permissions"
 // export {EntitySearch} from "./entity-search.js"
 export {EntitySelector} from "./entity-selector.js"
-// export {EntitySelectorPopup} from "./entity-selector-popup.js"
+export {EntitySelectorPopup} from "./entity-selector-popup.js"
 // export {EventEmitSelect} from "./event-emit-select.js"
 // export {ExpandToggle} from "./expand-toggle.js"
 // export {HeaderMobileToggle} from "./header-mobile-toggle.js"
-// export {HomepageControl} from "./homepage-control.js"
 // export {ImageManager} from "./image-manager.js"
 // export {ImagePicker} from "./image-picker.js"
 // export {ListSortControl} from "./list-sort-control.js"
@@ -37,12 +36,13 @@ export {Notification} from "./notification.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 {PagePicker} from "./page-picker.js"
+export {PermissionsTable} from "./permissions-table.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 {Popup} from "./popup.js"
+export {SettingAppColorPicker} from "./setting-app-color-picker.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"
@@ -52,7 +52,7 @@ export {ShortcutInput} from "./shortcut-input"
 // export {Tabs} from "./tabs.js"
 // export {TagManager} from "./tag-manager.js"
 // export {TemplateManager} from "./template-manager.js"
-// export {ToggleSwitch} from "./toggle-switch.js"
+export {ToggleSwitch} from "./toggle-switch.js"
 // export {TriLayout} from "./tri-layout.js"
 // export {UserSelect} from "./user-select.js"
 // export {WebhookEvents} from "./webhook-events";

resources/js/components/page-picker.js

@@ -1,14 +1,14 @@
+import {Component} from "./component";
 
-class PagePicker {
+export class PagePicker extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.input = elem.querySelector('input');
-        this.resetButton = elem.querySelector('[page-picker-reset]');
-        this.selectButton = elem.querySelector('[page-picker-select]');
-        this.display = elem.querySelector('[page-picker-display]');
-        this.defaultDisplay = elem.querySelector('[page-picker-default]');
-        this.buttonSep = elem.querySelector('span.sep');
+    setup() {
+        this.input = this.$refs.input;
+        this.resetButton = this.$refs.resetButton;
+        this.selectButton = this.$refs.selectButton;
+        this.display = this.$refs.display;
+        this.defaultDisplay = this.$refs.defaultDisplay;
+        this.buttonSep = this.$refs.buttonSeperator;
 
         this.value = this.input.value;
         this.setupListeners();
@@ -24,7 +24,9 @@ class PagePicker {
     }
 
     showPopup() {
-        window.EntitySelectorPopup.show(entity => {
+        /** @type {EntitySelectorPopup} **/
+        const selectorPopup = window.$components.first('entity-selector-popup');
+        selectorPopup.show(entity => {
             this.setValue(entity.id, entity.name);
         });
     }
@@ -36,7 +38,7 @@ class PagePicker {
     }
 
     controlView(name) {
-        let hasValue = this.value && this.value !== 0;
+        const hasValue = this.value && this.value !== 0;
         toggleElem(this.resetButton, hasValue);
         toggleElem(this.buttonSep, hasValue);
         toggleElem(this.defaultDisplay, !hasValue);
@@ -55,8 +57,5 @@ class PagePicker {
 }
 
 function toggleElem(elem, show) {
-    let display = (elem.tagName === 'BUTTON' || elem.tagName === 'SPAN') ? 'inline-block' : 'block';
-    elem.style.display = show ? display : 'none';
-}
-
-export default PagePicker;
+    elem.style.display = show ? null : 'none';
+}

resources/js/components/permissions-table.js

@@ -1,5 +1,6 @@
+import {Component} from "./component";
 
-class PermissionsTable {
+export class PermissionsTable extends Component {
 
     setup() {
         this.container = this.$el;
@@ -62,6 +63,4 @@ class PermissionsTable {
         }
     }
 
-}
-
-export default PermissionsTable;
+}

resources/js/components/popup.js

@@ -1,13 +1,13 @@
 import {fadeIn, fadeOut} from "../services/animations";
 import {onSelect} from "../services/dom";
+import {Component} from "./component";
 
 /**
  * Popup window that will contain other content.
  * This component provides the show/hide functionality
  * with the ability for popup@hide child references to close this.
- * @extends {Component}
  */
-class Popup {
+export class Popup extends Component {
 
     setup() {
         this.container = this.$el;
@@ -56,6 +56,4 @@ class Popup {
         this.onHide = onHide;
     }
 
-}
-
-export default Popup;
+}

resources/js/components/setting-app-color-picker.js

@@ -1,23 +1,13 @@
+import {Component} from "./component";
 
-class SettingAppColorPicker {
+export class SettingAppColorPicker extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.colorInput = elem.querySelector('input[type=color]');
-        this.lightColorInput = elem.querySelector('input[name="setting-app-color-light"]');
-        this.resetButton = elem.querySelector('[setting-app-color-picker-reset]');
-        this.defaultButton = elem.querySelector('[setting-app-color-picker-default]');
+    setup() {
+        this.colorInput = this.$refs.input;
+        this.lightColorInput = this.$refs.lightInput;
 
         this.colorInput.addEventListener('change', this.updateColor.bind(this));
         this.colorInput.addEventListener('input', this.updateColor.bind(this));
-        this.resetButton.addEventListener('click', event => {
-            this.colorInput.value = this.colorInput.dataset.current;
-            this.updateColor();
-        });
-        this.defaultButton.addEventListener('click', event => {
-            this.colorInput.value = this.colorInput.dataset.default;
-            this.updateColor();
-        });
     }
 
     /**
@@ -44,8 +34,8 @@ class SettingAppColorPicker {
     /**
      * Covert a hex color code to rgb components.
      * @attribution https://stackoverflow.com/a/5624139
-     * @param hex
-     * @returns {*}
+     * @param {String} hex
+     * @returns {{r: Number, g: Number, b: Number}}
      */
     hexToRgb(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -57,5 +47,3 @@ class SettingAppColorPicker {
     }
 
 }
-
-export default SettingAppColorPicker;

resources/js/components/setting-color-picker.js

@@ -1,18 +1,20 @@
+import {Component} from "./component";
 
-class SettingColorPicker {
+export class SettingColorPicker extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.colorInput = elem.querySelector('input[type=color]');
-        this.resetButton = elem.querySelector('[setting-color-picker-reset]');
-        this.defaultButton = elem.querySelector('[setting-color-picker-default]');
-        this.resetButton.addEventListener('click', event => {
-            this.colorInput.value = this.colorInput.dataset.current;
-        });
-        this.defaultButton.addEventListener('click', event => {
-          this.colorInput.value = this.colorInput.dataset.default;
-        });
+    setup() {
+        this.colorInput = this.$refs.input;
+        this.resetButton = this.$refs.resetButton;
+        this.defaultButton = this.$refs.defaultButton;
+        this.currentColor = this.$opts.current;
+        this.defaultColor = this.$opts.default;
+
+        this.resetButton.addEventListener('click', () => this.setValue(this.currentColor));
+        this.defaultButton.addEventListener('click', () => this.setValue(this.defaultColor));
     }
-}
 
-export default SettingColorPicker;
+    setValue(value) {
+        this.colorInput.value = value;
+        this.colorInput.dispatchEvent(new Event('change'));
+    }
+}

resources/js/components/setting-homepage-control.js

@@ -1,10 +1,10 @@
+import {Component} from "./component";
 
-class HomepageControl {
+export class SettingHomepageControl extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.typeControl = elem.querySelector('[name="setting-app-homepage-type"]');
-        this.pagePickerContainer = elem.querySelector('[page-picker-container]');
+    setup() {
+        this.typeControl = this.$refs.typeControl;
+        this.pagePickerContainer = this.$refs.pagePickerContainer;
 
         this.typeControl.addEventListener('change', this.controlPagePickerVisibility.bind(this));
         this.controlPagePickerVisibility();
@@ -14,9 +14,4 @@ class HomepageControl {
         const showPagePicker = this.typeControl.value === 'page';
         this.pagePickerContainer.style.display = (showPagePicker ? 'block' : 'none');
     }
-
-
-
-}
-
-export default HomepageControl;
+}

resources/js/components/toggle-switch.js

@@ -1,10 +1,10 @@
+import {Component} from "./component";
 
-class ToggleSwitch {
+export class ToggleSwitch extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
-        this.input = elem.querySelector('input[type=hidden]');
-        this.checkbox = elem.querySelector('input[type=checkbox]');
+    setup() {
+        this.input = this.$el.querySelector('input[type=hidden]');
+        this.checkbox = this.$el.querySelector('input[type=checkbox]');
 
         this.checkbox.addEventListener('change', this.stateChange.bind(this));
     }
@@ -18,6 +18,4 @@ class ToggleSwitch {
         this.input.dispatchEvent(changeEvent);
     }
 
-}
-
-export default ToggleSwitch;
+}