feat(zStack): custom border radius for pushElement (#195)

tech-systems · Nov 3, 2022 · 1eb1f4c · 1eb1f4c
1 parent bc8d5ca
commit 1eb1f4c
Show file tree

Hide file tree

Showing 17 changed files with 31 additions and 22 deletions.
diff --git a/dist/core/index.js b/dist/core/index.js
diff --git a/dist/cupertino-pane.esm.js b/dist/cupertino-pane.esm.js
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: October 29, 2022
+ * Released on: November 3, 2022
  */
 
 /******************************************************************************
@@ -1107,6 +1107,7 @@ class ZStackModule {
         this.zStackDefaults = {
             pushElements: null,
             minPushHeight: null,
+            cardBorderRadius: null,
             cardYOffset: 0,
             cardZScale: 0.93,
             cardContrast: 0.85,
@@ -1158,6 +1159,7 @@ class ZStackModule {
     pushTransition(pushElement, newPaneY, transition) {
         let zStack = this.settings.zStack.pushElements;
         pushElement.style.transition = transition;
+        pushElement.style.overflow = this.settings.zStack.cardBorderRadius && 'hidden';
         newPaneY = this.instance.screenHeightOffset - newPaneY;
         const topHeight = this.settings.zStack.minPushHeight
             ? this.settings.zStack.minPushHeight : this.instance.screenHeightOffset - this.breakpoints.bottomer;
@@ -1204,7 +1206,7 @@ class ZStackModule {
                 val = min;
             return val;
         };
-        setStyles(getXbyY(scaleNew, scaleNormal), getXbyY(yNew, yNormal), getXbyY(contrastNew, contrastNormal), getXbyY(-10, 0) * -1);
+        setStyles(getXbyY(scaleNew, scaleNormal), getXbyY(yNew, yNormal), getXbyY(contrastNew, contrastNormal), getXbyY(this.settings.zStack.cardBorderRadius * -1, 0) * -1);
     }
     // Z-Stack: Pushed elements multiplicators
     setPushMultiplicators() {
@@ -1408,7 +1410,7 @@ class BackdropModule {
         this.backdropEl.style.transition = `all ${this.settings.animationDuration}ms ${this.settings.animationType} 0s`;
         this.backdropEl.style.backgroundColor = `rgba(0,0,0, ${this.settings.backdropOpacity})`;
         this.instance.wrapperEl.appendChild(this.backdropEl);
-        this.backdropEl.addEventListener('click', () => this.instance.emit('onBackdropTap'));
+        this.backdropEl.addEventListener('click', (event) => this.instance.emit('onBackdropTap', event));
     }
     isBackdropPresented() {
         return document.querySelector(`.cupertino-pane-wrapper .backdrop`)

diff --git a/dist/cupertino-pane.esm.min.js b/dist/cupertino-pane.esm.min.js
diff --git a/dist/cupertino-pane.esm.min.js.map b/dist/cupertino-pane.esm.min.js.map
diff --git a/dist/cupertino-pane.js b/dist/cupertino-pane.js
diff --git a/dist/cupertino-pane.js.map b/dist/cupertino-pane.js.map
diff --git a/dist/cupertino-pane.min.js b/dist/cupertino-pane.min.js
diff --git a/dist/modules/backdrop.js b/dist/modules/backdrop.js