Fix cropped nested expandable content in panels (#137)

After finishing the panel expand animation or before the collapse
animation, the max height of the panel content wrapper is not
reset to their appropriate values.
This causes expandable content inside panels, such as nested panels.

Let’s do so, allowing the outer panel to react to changes in its
content height after expanding it.

src/panels/MinimalPanel.vue

@@ -38,6 +38,8 @@
       </div>
       <transition @before-enter="beforeExpandMinimal"
                   @enter="duringExpand"
+                  @after-enter="afterExpand"
+                  @before-leave="beforeCollapse"
                   @leave="duringCollapse"
                   @after-leave="afterCollapseMinimal"
                   v-if="preloadBool || wasRetrieverLoaded"

src/panels/NestedPanel.vue

@@ -43,6 +43,8 @@
           </div>
           <transition @before-enter="beforeExpand"
                       @enter="duringExpand"
+                      @after-enter="afterExpand"
+                      @before-leave="beforeCollapse"
                       @leave="duringCollapse"
                       v-if="preloadBool || wasRetrieverLoaded"
           >

src/panels/PanelBase.js

@@ -121,6 +121,22 @@ export default {
       window.open(this.popupUrl);
     },
     setMaxHeight() {
+      // Don't play the transition for this case as the loading should feel 'instant'
+      if (this.expandedBool) {
+        this.$refs.panel.style.maxHeight = 'max-content';
+        return;
+      }
+
+      /*
+      Otherwise, since the vue transition is dependent on localExpanded, we have to manually
+      set our own transition end handlers here for the initial loading of the content.
+      */
+      const onExpandDone = () => {
+        this.$refs.panel.style.maxHeight = 'max-content';
+        this.$refs.panel.removeEventListener('transitionend', onExpandDone);
+      };
+
+      this.$refs.panel.addEventListener('transitionend', onExpandDone);
       this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
     },
     beforeExpand(el) {
@@ -130,6 +146,12 @@ export default {
       jQuery("html").stop();
       el.style.maxHeight = `${el.scrollHeight}px`;
     },
+    afterExpand(el) {
+      el.style.maxHeight = 'max-content';
+    },
+    beforeCollapse(el) {
+      el.style.maxHeight = `${el.scrollHeight}px`;
+    },
     duringCollapse(el) {
       if (this.$el.getBoundingClientRect().top < 0) {
         jQuery("html").animate({
@@ -154,9 +176,4 @@ export default {
     this.wasRetrieverLoaded = this.localExpanded; // If it is expanded, load the retriever immediately.
     this.localMinimized = this.minimizedBool;
   },
-  mounted() {
-    // For this case, we want to set and calculate the maximum height only after the
-    // panel has been mounted.
-    if (this.expandedBool && !this.hasSrc) this.setMaxHeight();
-  }
 };