respective book and chapter structure added.

[bookstack] / resources / js / components / expand-toggle.js

diff --git a/resources/js/components/expand-toggle.js b/resources/js/components/expand-toggle.js
index cce1b215c9378f30659befc189424f76145f4c6c..0d2018b9da23531b27d98b18db682335ab47615b 100644 (file)
--- a/resources/js/components/expand-toggle.js
+++ b/resources/js/components/expand-toggle.js
@@ -1,17 +1,15 @@
-import {slideUp, slideDown} from "../services/animations";
+import {slideUp, slideDown} from '../services/animations';
+import {Component} from './component';

 
 

-class ExpandToggle {
+export class ExpandToggle extends Component {

 
 

-    constructor(elem) {
-        this.elem = elem;
-
-        // Component state
-        this.isOpen = elem.getAttribute('expand-toggle-is-open') === 'yes';
-        this.updateEndpoint = elem.getAttribute('expand-toggle-update-endpoint');
-        this.selector = elem.getAttribute('expand-toggle');
+    setup() {
+        this.targetSelector = this.$opts.targetSelector;
+        this.isOpen = this.$opts.isOpen === 'true';
+        this.updateEndpoint = this.$opts.updateEndpoint;

 
         // Listener setup
 
         // Listener setup

-        elem.addEventListener('click', this.click.bind(this));
+        this.$el.addEventListener('click', this.click.bind(this));

     }
 
     open(elemToToggle) {
     }
 
     open(elemToToggle) {


@@ -25,9 +23,10 @@ class ExpandToggle {
     click(event) {
         event.preventDefault();
 
     click(event) {
         event.preventDefault();
 

-        const matchingElems = document.querySelectorAll(this.selector);
-        for (let match of matchingElems) {
-            this.isOpen ?  this.close(match) : this.open(match);
+        const matchingElems = document.querySelectorAll(this.targetSelector);
+        for (const match of matchingElems) {
+            const action = this.isOpen ? this.close : this.open;
+            action(match);

         }
 
         this.isOpen = !this.isOpen;
         }
 
         this.isOpen = !this.isOpen;


@@ -36,10 +35,8 @@ class ExpandToggle {
 
     updateSystemAjax(isOpen) {
         window.$http.patch(this.updateEndpoint, {
 
     updateSystemAjax(isOpen) {
         window.$http.patch(this.updateEndpoint, {

-            expand: isOpen ? 'true' : 'false'
+            expand: isOpen ? 'true' : 'false',

         });
     }
 
 }
         });
     }
 
 }

-
-export default ExpandToggle;
\ No newline at end of file