From 0931ff38e997fdb7eb7a592b18fedc20e8ef42f6 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 22 Sep 2018 16:36:35 +0100
Subject: [PATCH] Tried to make chapter toggles a little smoother in FF

---
 .../assets/js/components/chapter-toggle.js    | 36 ++++++++++---------
 resources/assets/sass/_lists.scss             |  2 +-
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/resources/assets/js/components/chapter-toggle.js b/resources/assets/js/components/chapter-toggle.js
index e3a542ea4..420b8d721 100644
--- a/resources/assets/js/components/chapter-toggle.js
+++ b/resources/assets/js/components/chapter-toggle.js
@@ -8,52 +8,56 @@ class ChapterToggle {
     }
 
     open() {
-        let list = this.elem.parentNode.querySelector('.inset-list');
+        const list = this.elem.parentNode.querySelector('.inset-list');
 
         this.elem.classList.add('open');
         list.style.display = 'block';
-        list.style.height = '';
-        let height = list.getBoundingClientRect().height;
-        list.style.height = '0px';
+        list.style.maxHeight = '';
+        const maxHeight = list.getBoundingClientRect().height + 10;
+        list.style.maxHeight = '0px';
         list.style.overflow = 'hidden';
-        list.style.transition = 'height ease-in-out 240ms';
+        list.style.transition = 'max-height ease-in-out 240ms';
 
         let transitionEndBound = onTransitionEnd.bind(this);
         function onTransitionEnd() {
             list.style.overflow = '';
-            list.style.height = '';
+            list.style.maxHeight = '';
             list.style.transition = '';
             list.style.display = `block`;
             list.removeEventListener('transitionend', transitionEndBound);
         }
 
         setTimeout(() => {
-            list.style.height = `${height}px`;
-            list.addEventListener('transitionend', transitionEndBound)
+            requestAnimationFrame(() => {
+                list.style.maxHeight = `${maxHeight}px`;
+                list.addEventListener('transitionend', transitionEndBound)
+            });
         }, 1);
     }
 
     close() {
-        let list = this.elem.parentNode.querySelector('.inset-list');
+        const list = this.elem.parentNode.querySelector('.inset-list');
 
-        this.elem.classList.remove('open');
         list.style.display =  'block';
-        list.style.height = list.getBoundingClientRect().height + 'px';
+        this.elem.classList.remove('open');
+        list.style.maxHeight = list.getBoundingClientRect().height + 'px';
         list.style.overflow = 'hidden';
-        list.style.transition = 'height ease-in-out 240ms';
+        list.style.transition = 'max-height ease-in-out 240ms';
 
-        let transitionEndBound = onTransitionEnd.bind(this);
+        const transitionEndBound = onTransitionEnd.bind(this);
         function onTransitionEnd() {
             list.style.overflow = '';
-            list.style.height = '';
+            list.style.maxHeight = '';
             list.style.transition = '';
             list.style.display =  'none';
             list.removeEventListener('transitionend', transitionEndBound);
         }
 
         setTimeout(() => {
-            list.style.height = `0px`;
-            list.addEventListener('transitionend', transitionEndBound)
+            requestAnimationFrame(() => {
+                list.style.maxHeight = `0px`;
+                list.addEventListener('transitionend', transitionEndBound)
+            });
         }, 1);
     }
 
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 0bf6be4c3..a1cf1f3d5 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -178,7 +178,7 @@
     display: none;
     padding-left: 0;
   }
-  .sub-menu.open {
+  [chapter-toggle].open + .sub-menu {
     display: block;
   }
 }