fix(fitHeight): improved algorithm simplified (#192) - tag v.1.3.34

dist/cupertino-pane.esm.js

@@ -1,13 +1,13 @@
 /**
- * Cupertino Pane 1.3.33
+ * Cupertino Pane 1.3.34
  * New generation interfaces for web3 progressive applications
  * https://github.com/roman-rr/cupertino-pane/
  *
  * Copyright 2019-2023 Roman Antonov (roman-rr)
  *
  * Released under the MIT License
  *
- * Released on: July 10, 2023
+ * Released on: July 11, 2023
  */
 
 /******************************************************************************
@@ -1495,6 +1495,8 @@ class FitHeightModule {
         // TODO: change binding strategy according to TypeScript
         // E.G. Using public module methods from modules
         this.instance['calcFitHeight'] = (animated) => __awaiter(this, void 0, void 0, function* () { return this.calcFitHeight(animated); });
+        this.instance['setOverflowHeight'] = () => this.setOverflowHeight();
+        // re-bind functions
         // Class to wrapper
         this.instance.on('DOMElementsReady', () => {
             this.instance.wrapperEl.classList.add('fit-height');
@@ -1534,6 +1536,14 @@ class FitHeightModule {
             }
         }, true);
     }
+    /**
+     * fitHeight overflow-content el is with height:unset;
+     * fitHeight we base on pane height as static for smooth transition on calcFitHeight()
+     * and we should set height for overflow element, or it give a wrong calculations
+     */
+    setOverflowHeight() {
+        this.instance.paneEl.style.height = `${this.instance.getPaneHeight()}px`;
+    }
     beforeBuildBreakpoints() {
         var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
@@ -1598,7 +1608,7 @@ class FitHeightModule {
             yield Promise.all(promises);
             yield new Promise(resolve => requestAnimationFrame(resolve));
             // Base calc
-            let paneElHeight = Math.round(this.instance.paneEl.getBoundingClientRect().height);
+            let contentElHeight = Math.round(this.instance.el.getBoundingClientRect().height);
             // Hide elements back
             if (!this.instance.rendered) {
                 this.instance.el.style.visibility = 'unset';
@@ -1609,7 +1619,7 @@ class FitHeightModule {
                 this.instance.wrapperEl.style.display = 'none';
             }
             this.calcHeightInProcess = false;
-            return paneElHeight;
+            return contentElHeight;
         });
     }
 }
@@ -2155,9 +2165,6 @@ class CupertinoPane {
         this.screenHeightOffset = window.innerHeight;
     }
     scrollElementInit() {
-        if (!this.settings.fitHeight) {
-            this.paneEl.style.height = `${this.getPaneHeight()}px`; // todo: review ability to remove this line at all
-        }
         let attrElements = this.el.querySelectorAll('[overflow-y]');
         if (!attrElements.length || attrElements.length > 1) {
             this.overflowEl = this.contentEl;
@@ -2174,6 +2181,7 @@ class CupertinoPane {
         this.setOverflowHeight();
     }
     setOverflowHeight(offset = 0) {
+        this.paneEl.style.height = `${this.getPaneHeight()}px`;
         this.overflowEl.style.height = `${this.getPaneHeight()
             - this.settings.topperOverflowOffset
             - this.overflowEl.offsetTop