X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/1ee3e779e4b9b0a92f701a72f21a72c83cb1ce68..refs/pull/3908/head:/resources/js/components/expand-toggle.js

diff --git a/resources/js/components/expand-toggle.js b/resources/js/components/expand-toggle.js
index cce1b215c..ab4d38ab1 100644
--- 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 {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(elem) {
+        this.targetSelector = this.$opts.targetSelector;
+        this.isOpen = this.$opts.isOpen === 'true';
+        this.updateEndpoint = this.$opts.updateEndpoint;
 
         // Listener setup
-        elem.addEventListener('click', this.click.bind(this));
+        this.$el.addEventListener('click', this.click.bind(this));
     }
 
     open(elemToToggle) {
@@ -25,7 +23,7 @@ class ExpandToggle {
     click(event) {
         event.preventDefault();
 
-        const matchingElems = document.querySelectorAll(this.selector);
+        const matchingElems = document.querySelectorAll(this.targetSelector);
         for (let match of matchingElems) {
             this.isOpen ?  this.close(match) : this.open(match);
         }
@@ -40,6 +38,4 @@ class ExpandToggle {
         });
     }
 
-}
-
-export default ExpandToggle;
\ No newline at end of file
+}
\ No newline at end of file