Added content-perms API examples and docs tweaks

[bookstack] / resources / js / components / collapsible.js

diff --git a/resources/js/components/collapsible.js b/resources/js/components/collapsible.js
index 464f394c1e7e42a8d1dc568c94568d53f1498819..bb8ed477ffe9f600769dace8ba6d7f2af32d5fb7 100644 (file)
--- a/resources/js/components/collapsible.js
+++ b/resources/js/components/collapsible.js
@@ -1,41 +1,48 @@
 import {slideDown, slideUp} from "../services/animations";
 import {slideDown, slideUp} from "../services/animations";

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

 
 /**
  * Collapsible
  * Provides some simple logic to allow collapsible sections.
  */
 
 /**
  * Collapsible
  * Provides some simple logic to allow collapsible sections.
  */

-class Collapsible {
+export class Collapsible extends Component {

 
 

-    constructor(elem) {
-        this.elem = elem;
-        this.trigger = elem.querySelector('[collapsible-trigger]');
-        this.content = elem.querySelector('[collapsible-content]');
+    setup() {
+        this.container = this.$el;
+        this.trigger = this.$refs.trigger;
+        this.content = this.$refs.content;

 
 

-        if (!this.trigger) return;
-
-        this.trigger.addEventListener('click', this.toggle.bind(this));
+        if (this.trigger) {
+            this.trigger.addEventListener('click', this.toggle.bind(this));
+            this.openIfContainsError();
+        }

     }
 
     open() {
     }
 
     open() {

-        this.elem.classList.add('open');
+        this.container.classList.add('open');

         this.trigger.setAttribute('aria-expanded', 'true');
         slideDown(this.content, 300);
     }
 
     close() {
         this.trigger.setAttribute('aria-expanded', 'true');
         slideDown(this.content, 300);
     }
 
     close() {

-        this.elem.classList.remove('open');
+        this.container.classList.remove('open');

         this.trigger.setAttribute('aria-expanded', 'false');
         slideUp(this.content, 300);
     }
 
     toggle() {
         this.trigger.setAttribute('aria-expanded', 'false');
         slideUp(this.content, 300);
     }
 
     toggle() {

-        if (this.elem.classList.contains('open')) {
+        if (this.container.classList.contains('open')) {

             this.close();
         } else {
             this.open();
         }
     }
 
             this.close();
         } else {
             this.open();
         }
     }
 

-}
+    openIfContainsError() {
+        const error = this.content.querySelector('.text-neg.text-small');
+        if (error) {
+            this.open();
+        }
+    }

 
 

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