X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/4cf43f67d675c63eb18e5db4fa68db2204ae4714..refs/pull/1630/head:/resources/assets/js/components/expand-toggle.js

diff --git a/resources/assets/js/components/expand-toggle.js b/resources/assets/js/components/expand-toggle.js
index 6f317db62..cce1b215c 100644
--- a/resources/assets/js/components/expand-toggle.js
+++ b/resources/assets/js/components/expand-toggle.js
@@ -1,63 +1,43 @@
+import {slideUp, slideDown} from "../services/animations";
 
 class ExpandToggle {
 
     constructor(elem) {
         this.elem = elem;
-        this.isOpen = false;
+
+        // 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');
+
+        // Listener setup
         elem.addEventListener('click', this.click.bind(this));
     }
 
     open(elemToToggle) {
-        elemToToggle.style.display = 'block';
-        elemToToggle.style.height = '';
-        let height = elemToToggle.getBoundingClientRect().height;
-        elemToToggle.style.height = '0px';
-        elemToToggle.style.overflow = 'hidden';
-        elemToToggle.style.transition = 'height ease-in-out 240ms';
-
-        let transitionEndBound = onTransitionEnd.bind(this);
-        function onTransitionEnd() {
-            elemToToggle.style.overflow = '';
-            elemToToggle.style.height = '';
-            elemToToggle.style.transition = '';
-            elemToToggle.removeEventListener('transitionend', transitionEndBound);
-        }
-
-        setTimeout(() => {
-            elemToToggle.style.height = `${height}px`;
-            elemToToggle.addEventListener('transitionend', transitionEndBound)
-        }, 1);
+        slideDown(elemToToggle, 200);
     }
 
     close(elemToToggle) {
-        elemToToggle.style.display =  'block';
-        elemToToggle.style.height = elemToToggle.getBoundingClientRect().height + 'px';
-        elemToToggle.style.overflow = 'hidden';
-        elemToToggle.style.transition = 'all ease-in-out 240ms';
-
-        let transitionEndBound = onTransitionEnd.bind(this);
-        function onTransitionEnd() {
-            elemToToggle.style.overflow = '';
-            elemToToggle.style.height = '';
-            elemToToggle.style.transition = '';
-            elemToToggle.style.display =  'none';
-            elemToToggle.removeEventListener('transitionend', transitionEndBound);
-        }
-
-        setTimeout(() => {
-            elemToToggle.style.height = `0px`;
-            elemToToggle.addEventListener('transitionend', transitionEndBound)
-        }, 1);
+        slideUp(elemToToggle, 200);
     }
 
     click(event) {
         event.preventDefault();
-        let matchingElems = document.querySelectorAll(this.selector);
-        for (let i = 0, len = matchingElems.length; i < len; i++) {
-            this.isOpen ?  this.close(matchingElems[i]) : this.open(matchingElems[i]);
+
+        const matchingElems = document.querySelectorAll(this.selector);
+        for (let match of matchingElems) {
+            this.isOpen ?  this.close(match) : this.open(match);
         }
+
         this.isOpen = !this.isOpen;
+        this.updateSystemAjax(this.isOpen);
+    }
+
+    updateSystemAjax(isOpen) {
+        window.$http.patch(this.updateEndpoint, {
+            expand: isOpen ? 'true' : 'false'
+        });
     }
 
 }