Fixed issue causing text overlap in sort select box

[bookstack] / resources / assets / js / components / chapter-toggle.js

diff --git a/resources/assets/js/components/chapter-toggle.js b/resources/assets/js/components/chapter-toggle.js
index 420b8d721c4e279ac51dffba4816c4e71e6e24fc..bfd0ac7296576f6151aa61e686a3591fd6b72e6a 100644 (file)
--- a/resources/assets/js/components/chapter-toggle.js
+++ b/resources/assets/js/components/chapter-toggle.js
@@ -1,3 +1,4 @@
+import {slideUp, slideDown} from "../services/animations";

 
 class ChapterToggle {
 
 
 class ChapterToggle {
 


@@ -9,56 +10,16 @@ class ChapterToggle {
 
     open() {
         const list = this.elem.parentNode.querySelector('.inset-list');
 
     open() {
         const list = this.elem.parentNode.querySelector('.inset-list');

-

         this.elem.classList.add('open');
         this.elem.classList.add('open');

-        list.style.display = 'block';
-        list.style.maxHeight = '';
-        const maxHeight = list.getBoundingClientRect().height + 10;
-        list.style.maxHeight = '0px';
-        list.style.overflow = 'hidden';
-        list.style.transition = 'max-height ease-in-out 240ms';
-
-        let transitionEndBound = onTransitionEnd.bind(this);
-        function onTransitionEnd() {
-            list.style.overflow = '';
-            list.style.maxHeight = '';
-            list.style.transition = '';
-            list.style.display = `block`;
-            list.removeEventListener('transitionend', transitionEndBound);
-        }
-
-        setTimeout(() => {
-            requestAnimationFrame(() => {
-                list.style.maxHeight = `${maxHeight}px`;
-                list.addEventListener('transitionend', transitionEndBound)
-            });
-        }, 1);
+        this.elem.setAttribute('aria-expanded', 'true');
+        slideDown(list, 240);

     }
 
     close() {
         const list = this.elem.parentNode.querySelector('.inset-list');
     }
 
     close() {
         const list = this.elem.parentNode.querySelector('.inset-list');

-
-        list.style.display =  'block';

         this.elem.classList.remove('open');
         this.elem.classList.remove('open');

-        list.style.maxHeight = list.getBoundingClientRect().height + 'px';
-        list.style.overflow = 'hidden';
-        list.style.transition = 'max-height ease-in-out 240ms';
-
-        const transitionEndBound = onTransitionEnd.bind(this);
-        function onTransitionEnd() {
-            list.style.overflow = '';
-            list.style.maxHeight = '';
-            list.style.transition = '';
-            list.style.display =  'none';
-            list.removeEventListener('transitionend', transitionEndBound);
-        }
-
-        setTimeout(() => {
-            requestAnimationFrame(() => {
-                list.style.maxHeight = `0px`;
-                list.addEventListener('transitionend', transitionEndBound)
-            });
-        }, 1);
+        this.elem.setAttribute('aria-expanded', 'false');
+        slideUp(list, 240);

     }
 
     click(event) {
     }
 
     click(event) {


@@ -69,4 +30,4 @@ class ChapterToggle {
 
 }
 
 
 }
 

-module.exports = ChapterToggle;
+export default ChapterToggle;