Updated another set of components

diff --git a/resources/js/components/code-textarea.js b/resources/js/components/code-textarea.js
index 988e51f199f040f57846869a029e9d6dfabc712d..fe16279e71aa6f1c397a1143431ccc257796e5c6 100644 (file)
--- a/resources/js/components/code-textarea.js
+++ b/resources/js/components/code-textarea.js
@@ -1,9 +1,10 @@
 /**
  * A simple component to render a code editor within the textarea
  * this exists upon.
 /**
  * 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;
 
     async setup() {
         const mode = this.$opts.mode;

diff --git a/resources/js/components/custom-checkbox.js b/resources/js/components/custom-checkbox.js
index 65ce8c194d641db09d37ae437742611e909a1ebe..99804c4bcea010165ad4298f405860e904b9689d 100644 (file)
--- a/resources/js/components/custom-checkbox.js
+++ b/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.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) {
     }
 
     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();
         }
             event.preventDefault();
             this.toggle();
         }


@@ -29,6 +30,4 @@ class CustomCheckbox {
         this.display.setAttribute('aria-checked', checked);
     }
 
         this.display.setAttribute('aria-checked', checked);
     }
 

-}
-
-export default CustomCheckbox;
\ No newline at end of file
+}
\ No newline at end of file

diff --git a/resources/js/components/entity-permissions.js b/resources/js/components/entity-permissions.js
index 0dec5ca0937dda6620122628e5aef22b5ccd8013..d4a616ff1d5765e2f278028016e8fa95bf1d8cbc 100644 (file)
--- a/resources/js/components/entity-permissions.js
+++ b/resources/js/components/entity-permissions.js
@@ -1,9 +1,7 @@
-/**
- * @extends {Component}
- */

 import {htmlToDom} from "../services/dom";
 import {htmlToDom} from "../services/dom";

+import {Component} from "./component";

 
 

-class EntityPermissions {
+export class EntityPermissions extends Component {

 
     setup() {
         this.container = this.$el;
 
     setup() {
         this.container = this.$el;


@@ -74,6 +72,4 @@ class EntityPermissions {
         row.remove();
     }
 
         row.remove();
     }
 

-}
-
-export default EntityPermissions;
\ No newline at end of file
+}
\ No newline at end of file

diff --git a/resources/js/components/entity-selector-popup.js b/resources/js/components/entity-selector-popup.js
index e7cb60b1f6c4c05c751033ebec4424b8de7fea1d..69534dea5ec814c820a6c1853a287e6154c9a795 100644 (file)
--- a/resources/js/components/entity-selector-popup.js
+++ b/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() {
 
     setup() {

-        this.elem = this.$el;
+        this.container = this.$el;

         this.selectButton = this.$refs.select;
         this.selectButton = this.$refs.select;

-
-        window.EntitySelectorPopup = this;

         this.selectorEl = this.$refs.selector;
 
         this.callback = null;
         this.selectorEl = this.$refs.selector;
 
         this.callback = null;


@@ -21,12 +17,12 @@ class EntitySelectorPopup {
 
     show(callback) {
         this.callback = callback;
 
     show(callback) {
         this.callback = callback;

-        this.elem.components.popup.show();
+        this.container.components.popup.show();

         this.getSelector().focusSearch();
     }
 
     hide() {
         this.getSelector().focusSearch();
     }
 
     hide() {

-        this.elem.components.popup.hide();
+        this.container.components.popup.hide();

     }
 
     getSelector() {
     }
 
     getSelector() {


@@ -51,6 +47,4 @@ class EntitySelectorPopup {
         this.getSelector().reset();
         if (this.callback && entity) this.callback(entity);
     }
         this.getSelector().reset();
         if (this.callback && entity) this.callback(entity);
     }

-}
-
-export default EntitySelectorPopup;
\ 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 1f8a051736f48acdebeaa9a1e7009ed9bb83ab3a..6b5967031bb489a83c40673fe8275ad59f2ca2f8 100644 (file)
--- a/resources/js/components/index.js
+++ b/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 {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 {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 {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 {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 {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"
 // 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 {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 {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"
 // 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 {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";
 // export {TriLayout} from "./tri-layout.js"
 // export {UserSelect} from "./user-select.js"
 // export {WebhookEvents} from "./webhook-events";

diff --git a/resources/js/components/page-picker.js b/resources/js/components/page-picker.js
index 577e9f6db7c8a19491c37860a20a6bd6711d3445..fba0a0a43f779a8802c0a7130789fb948f2e0226 100644 (file)
--- a/resources/js/components/page-picker.js
+++ b/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();
 
         this.value = this.input.value;
         this.setupListeners();


@@ -24,7 +24,9 @@ class PagePicker {
     }
 
     showPopup() {
     }
 
     showPopup() {

-        window.EntitySelectorPopup.show(entity => {
+        /** @type {EntitySelectorPopup} **/
+        const selectorPopup = window.$components.first('entity-selector-popup');
+        selectorPopup.show(entity => {

             this.setValue(entity.id, entity.name);
         });
     }
             this.setValue(entity.id, entity.name);
         });
     }


@@ -36,7 +38,7 @@ class PagePicker {
     }
 
     controlView(name) {
     }
 
     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);
         toggleElem(this.resetButton, hasValue);
         toggleElem(this.buttonSep, hasValue);
         toggleElem(this.defaultDisplay, !hasValue);


@@ -55,8 +57,5 @@ class PagePicker {
 }
 
 function toggleElem(elem, show) {
 }
 
 function toggleElem(elem, show) {

-    let display = (elem.tagName === 'BUTTON' || elem.tagName === 'SPAN') ? 'inline-block' : 'block';
-    elem.style.display = show ? display : 'none';
-}
-
-export default PagePicker;
\ No newline at end of file
+    elem.style.display = show ? null : 'none';
+}
\ No newline at end of file

diff --git a/resources/js/components/permissions-table.js b/resources/js/components/permissions-table.js
index d33c9928f9412998be6523f2244fcb0bc32b30c3..58ead1d57620b58a798ccdc0dfc3708121c8a1f9 100644 (file)
--- a/resources/js/components/permissions-table.js
+++ b/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;
 
     setup() {
         this.container = this.$el;


@@ -62,6 +63,4 @@ class PermissionsTable {
         }
     }
 
         }
     }
 

-}
-
-export default PermissionsTable;
\ No newline at end of file
+}
\ No newline at end of file

diff --git a/resources/js/components/popup.js b/resources/js/components/popup.js
index ec111963f51e65358c51d5d3333bd5d47fb8e55d..4c20876f854dbfd8441b7cd4d3d8ffb38bc6c28d 100644 (file)
--- a/resources/js/components/popup.js
+++ b/resources/js/components/popup.js
@@ -1,13 +1,13 @@
 import {fadeIn, fadeOut} from "../services/animations";
 import {onSelect} from "../services/dom";
 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.
 
 /**
  * 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;
 
     setup() {
         this.container = this.$el;


@@ -56,6 +56,4 @@ class Popup {
         this.onHide = onHide;
     }
 
         this.onHide = onHide;
     }
 

-}
-
-export default Popup;
\ No newline at end of file
+}
\ No newline at end of file

diff --git a/resources/js/components/setting-app-color-picker.js b/resources/js/components/setting-app-color-picker.js
index ee894c9325c5c5fc0bef05f684a2e6e8032f3661..68e5abce5a2d8fddb670a9b8a5ee2c482490a3d8 100644 (file)
--- a/resources/js/components/setting-app-color-picker.js
+++ b/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.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
     /**
      * 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);
      */
     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;

diff --git a/resources/js/components/setting-color-picker.js b/resources/js/components/setting-color-picker.js
index 4d8ce0f933ced670923e375902712cc82b7dd0dd..876e14f20c276a2fc7c4401316f0b80e1fa6a0a8 100644 (file)
--- a/resources/js/components/setting-color-picker.js
+++ b/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'));
+    }
+}
\ No newline at end of file

diff --git a/resources/js/components/homepage-control.js b/resources/js/components/setting-homepage-control.js
similarity index 55%
rename from resources/js/components/homepage-control.js
rename to resources/js/components/setting-homepage-control.js
index 9db9e17b88ee58419256b6576a8ff76a7b5a59a1..992be9f826dad07c36b74abcdbc647ff53dc0ce2 100644 (file)
--- a/resources/js/components/homepage-control.js
+++ b/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();
 
         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');
     }
         const showPagePicker = this.typeControl.value === 'page';
         this.pagePickerContainer.style.display = (showPagePicker ? 'block' : 'none');
     }

-
-
-
-}
-
-export default HomepageControl;
\ No newline at end of file
+}
\ No newline at end of file

diff --git a/resources/js/components/toggle-switch.js b/resources/js/components/toggle-switch.js
index b9b96afc5d07728d992e9cd49eab9e29a6df1f2a..b749eb54132492efa06b53a05a151fe35c282c3c 100644 (file)
--- a/resources/js/components/toggle-switch.js
+++ b/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));
     }
 
         this.checkbox.addEventListener('change', this.stateChange.bind(this));
     }


@@ -18,6 +18,4 @@ class ToggleSwitch {
         this.input.dispatchEvent(changeEvent);
     }
 
         this.input.dispatchEvent(changeEvent);
     }
 

-}
-
-export default ToggleSwitch;
\ No newline at end of file
+}
\ No newline at end of file

diff --git a/resources/views/form/custom-checkbox.blade.php b/resources/views/form/custom-checkbox.blade.php
index de3ffe922c13145c04a2e08c87d5ca80d33857b0..7750c6f00078b5a89b59fa0d269e29d6e19fffb5 100644 (file)
--- a/resources/views/form/custom-checkbox.blade.php
+++ b/resources/views/form/custom-checkbox.blade.php
@@ -4,7 +4,7 @@ $value
 $checked
 $label
 --}}
 $checked
 $label
 --}}

-<label custom-checkbox class="toggle-switch @if($errors->has($name)) text-neg @endif">
+<label component="custom-checkbox" class="toggle-switch @if($errors->has($name)) text-neg @endif">

     <input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif @if($disabled ?? false) disabled="disabled" @endif>
     <span tabindex="0" role="checkbox"
           aria-checked="{{ $checked ? 'true' : 'false' }}"
     <input type="checkbox" name="{{$name}}" value="{{ $value }}" @if($checked) checked="checked" @endif @if($disabled ?? false) disabled="disabled" @endif>
     <span tabindex="0" role="checkbox"
           aria-checked="{{ $checked ? 'true' : 'false' }}"

diff --git a/resources/views/form/toggle-switch.blade.php b/resources/views/form/toggle-switch.blade.php
index a5eec30051b32a9bcd9e983c0fd98a40c4356ca9..375eda3d7b5cfaea2ece5fd44ab0f3f1590cfe60 100644 (file)
--- a/resources/views/form/toggle-switch.blade.php
+++ b/resources/views/form/toggle-switch.blade.php
@@ -1,4 +1,4 @@
-<label toggle-switch="{{$name}}" custom-checkbox class="toggle-switch">
+<label components="custom-checkbox toggle-switch" class="toggle-switch">

     <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
     <input type="checkbox" @if($value) checked="checked" @endif>
     <span tabindex="0" role="checkbox"
     <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
     <input type="checkbox" @if($value) checked="checked" @endif>
     <span tabindex="0" role="checkbox"

diff --git a/resources/views/settings/customization.blade.php b/resources/views/settings/customization.blade.php
index a7392196b68be6ad0329a57dffbb9c0191ea4052..3748267df8869c74c658afebe704a3219ed91557 100644 (file)
--- a/resources/views/settings/customization.blade.php
+++ b/resources/views/settings/customization.blade.php
@@ -59,13 +59,16 @@
                     <label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
                     <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
                 </div>
                     <label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
                     <p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
                 </div>

-                <div setting-app-color-picker class="text-m-right pt-xs">
-                    <input type="color" data-default="#206ea7" data-current="{{ setting('app-color') }}" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#206ea7">
-                    <input type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light">
+                <div component="setting-app-color-picker setting-color-picker"
+                     option:setting-color-picker:default="#206ea7"
+                     option:setting-color-picker:current="{{ setting('app-color') }}"
+                     class="text-m-right pt-xs">
+                    <input refs="setting-color-picker@input setting-app-color-picker@input" type="color" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#206ea7">
+                    <input refs="setting-app-color-picker@light-input" type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light">

                     <div class="pr-s">
                     <div class="pr-s">

-                        <button type="button" class="text-button text-muted mt-s" setting-app-color-picker-default>{{ trans('common.default') }}</button>
+                        <button refs="setting-color-picker@default-button" type="button" class="text-button text-muted mt-s">{{ trans('common.default') }}</button>

                         <span class="sep">|</span>
                         <span class="sep">|</span>

-                        <button type="button" class="text-button text-muted mt-s" setting-app-color-picker-reset>{{ trans('common.reset') }}</button>
+                        <button refs="setting-color-picker@reset-button" type="button" class="text-button text-muted mt-s">{{ trans('common.reset') }}</button>

                     </div>
 
                 </div>
                     </div>
 
                 </div>


@@ -90,20 +93,22 @@
                 </div>
             </div>
 
                 </div>
             </div>
 

-            <div homepage-control id="homepage-control" class="grid half gap-xl items-center">
+            <div component="setting-homepage-control" id="homepage-control" class="grid half gap-xl items-center">

                 <div>
                     <label for="setting-app-homepage-type" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
                     <p class="small">{{ trans('settings.app_homepage_desc') }}</p>
                 </div>
                 <div>
                 <div>
                     <label for="setting-app-homepage-type" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
                     <p class="small">{{ trans('settings.app_homepage_desc') }}</p>
                 </div>
                 <div>

-                    <select name="setting-app-homepage-type" id="setting-app-homepage-type">
+                    <select refs="setting-homepage-control@type-control"
+                            name="setting-app-homepage-type"
+                            id="setting-app-homepage-type">

                         <option @if(setting('app-homepage-type') === 'default') selected @endif value="default">{{ trans('common.default') }}</option>
                         <option @if(setting('app-homepage-type') === 'books') selected @endif value="books">{{ trans('entities.books') }}</option>
                         <option @if(setting('app-homepage-type') === 'bookshelves') selected @endif value="bookshelves">{{ trans('entities.shelves') }}</option>
                         <option @if(setting('app-homepage-type') === 'page') selected @endif value="page">{{ trans('entities.pages_specific') }}</option>
                     </select>
 
                         <option @if(setting('app-homepage-type') === 'default') selected @endif value="default">{{ trans('common.default') }}</option>
                         <option @if(setting('app-homepage-type') === 'books') selected @endif value="books">{{ trans('entities.books') }}</option>
                         <option @if(setting('app-homepage-type') === 'bookshelves') selected @endif value="bookshelves">{{ trans('entities.shelves') }}</option>
                         <option @if(setting('app-homepage-type') === 'page') selected @endif value="page">{{ trans('entities.pages_specific') }}</option>
                     </select>
 

-                    <div page-picker-container style="display: none;" class="mt-m">
+                    <div refs="setting-homepage-control@page-picker-container" style="display: none;" class="mt-m">

                         @include('settings.parts.page-picker', ['name' => 'setting-app-homepage', 'placeholder' => trans('settings.app_homepage_select'), 'value' => setting('app-homepage')])
                     </div>
                 </div>
                         @include('settings.parts.page-picker', ['name' => 'setting-app-homepage', 'placeholder' => trans('settings.app_homepage_select'), 'value' => setting('app-homepage')])
                     </div>
                 </div>

diff --git a/resources/views/settings/parts/page-picker.blade.php b/resources/views/settings/parts/page-picker.blade.php
index 0df42e3cef9993f12c7552881a44a76ebbfbcb03..d599a19ab6a1cf87d76fecd1ad0c3221f7f3691c 100644 (file)
--- a/resources/views/settings/parts/page-picker.blade.php
+++ b/resources/views/settings/parts/page-picker.blade.php
@@ -1,13 +1,13 @@
 
 {{--Depends on entity selector popup--}}
 
 {{--Depends on entity selector popup--}}

-<div page-picker>
+<div component="page-picker">

     <div class="input-base">
     <div class="input-base">

-        <span @if($value) style="display: none" @endif page-picker-default class="text-muted italic">{{ $placeholder }}</span>
-        <a @if(!$value) style="display: none" @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" page-picker-display>#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::find($value)->name : '' }}</a>
+        <span @if($value) style="display: none" @endif refs="page-picker@default-display" class="text-muted italic">{{ $placeholder }}</span>
+        <a @if(!$value) style="display: none" @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" refs="page-picker@display">#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::find($value)->name : '' }}</a>

     </div>
     <br>
     </div>
     <br>

-    <input type="hidden" value="{{$value}}" name="{{$name}}" id="{{$name}}">
-    <button @if(!$value) style="display: none" @endif type="button" page-picker-reset class="text-button">{{ trans('common.reset') }}</button>
-    <span @if(!$value) style="display: none" @endif class="sep">|</span>
-    <button type="button" page-picker-select class="text-button">{{ trans('common.select') }}</button>
+    <input refs="page-picker@input" type="hidden" value="{{$value}}" name="{{$name}}" id="{{$name}}">
+    <button @if(!$value) style="display: none" @endif type="button" refs="page-picker@reset-button" class="text-button">{{ trans('common.reset') }}</button>
+    <span refs="page-picker@button-seperator" @if(!$value) style="display: none" @endif class="sep">|</span>
+    <button type="button" refs="page-picker@select-button" class="text-button">{{ trans('common.select') }}</button>

 </div>
\ No newline at end of file
 </div>
\ No newline at end of file

diff --git a/resources/views/settings/parts/setting-entity-color-picker.blade.php b/resources/views/settings/parts/setting-entity-color-picker.blade.php
index 3b99d0b7cd681a130f83a9dea5c65da7515136f0..e7bfc3fe9f360432d5db717542ece7fc9ae7ee08 100644 (file)
--- a/resources/views/settings/parts/setting-entity-color-picker.blade.php
+++ b/resources/views/settings/parts/setting-entity-color-picker.blade.php
@@ -1,17 +1,19 @@
 {{--
     @type - Name of entity type
 --}}
 {{--
     @type - Name of entity type
 --}}

-<div setting-color-picker class="grid no-break half mb-l">
+<div component="setting-color-picker"
+     option:setting-color-picker:default="{{ config('setting-defaults.'. $type .'-color') }}"
+     option:setting-color-picker:current="{{ setting($type .'-color') }}"
+     class="grid no-break half mb-l">

     <div>
         <label for="setting-{{ $type }}-color" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label>
     <div>
         <label for="setting-{{ $type }}-color" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label>

-        <button type="button" class="text-button text-muted" setting-color-picker-default>{{ trans('common.default') }}</button>
+        <button refs="setting-color-picker@default-button" type="button" class="text-button text-muted">{{ trans('common.default') }}</button>

         <span class="sep">|</span>
         <span class="sep">|</span>

-        <button type="button" class="text-button text-muted" setting-color-picker-reset>{{ trans('common.reset') }}</button>
+        <button refs="setting-color-picker@reset-button" type="button" class="text-button text-muted">{{ trans('common.reset') }}</button>

     </div>
     <div>
         <input type="color"
     </div>
     <div>
         <input type="color"

-               data-default="{{ config('setting-defaults.'. $type .'-color') }}"
-               data-current="{{ setting($type .'-color') }}"
+               refs="setting-color-picker@input"

                value="{{ setting($type .'-color') }}"
                name="setting-{{ $type }}-color"
                id="setting-{{ $type }}-color"
                value="{{ setting($type .'-color') }}"
                name="setting-{{ $type }}-color"
                id="setting-{{ $type }}-color"