feat(modal): added footer animation.

Author: kumibrr

core/src/components/modal/animations/ios.enter.ts

@@ -17,7 +17,7 @@ const createEnterAnimation = () => {
 
   const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
 
-  return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+  return { backdropAnimation, wrapperAnimation, contentAnimation: undefined, footerAnimation: undefined };
 };
 
 /**
@@ -26,25 +26,31 @@ const createEnterAnimation = () => {
 export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
   const { presentingEl, currentBreakpoint, animateContentHeight } = opts;
   const root = getElementRoot(baseEl);
-  const { wrapperAnimation, backdropAnimation, contentAnimation } =
-    currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+  const { wrapperAnimation, backdropAnimation, contentAnimation, footerAnimation } =
+    currentBreakpoint !== undefined ? createSheetEnterAnimation(baseEl, opts) : createEnterAnimation();
 
   backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
 
   wrapperAnimation.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')!).beforeStyles({ opacity: 1 });
 
   contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
 
+  footerAnimation?.addElement(root.querySelector('ion-footer')!);
+
   const baseAnimation = createAnimation('entering-base')
     .addElement(baseEl)
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(500)
     .addAnimation([wrapperAnimation]);
 
-  if (contentAnimation && animateContentHeight) {
+  if (animateContentHeight && contentAnimation) {
     baseAnimation.addAnimation(contentAnimation);
   }
 
+  if (animateContentHeight && footerAnimation) {
+    baseAnimation.addAnimation(footerAnimation);
+  }
+
   if (presentingEl) {
     const isMobile = window.innerWidth < 768;
     const hasCardModal =

core/src/components/modal/animations/md.enter.ts

@@ -19,7 +19,7 @@ const createEnterAnimation = () => {
     { offset: 1, opacity: 1, transform: `translateY(0px)` },
   ]);
 
-  return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+  return { backdropAnimation, wrapperAnimation, contentAnimation: undefined, footerAnimation: undefined };
 };
 
 /**
@@ -28,24 +28,30 @@ const createEnterAnimation = () => {
 export const mdEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
   const { currentBreakpoint, animateContentHeight } = opts;
   const root = getElementRoot(baseEl);
-  const { wrapperAnimation, backdropAnimation, contentAnimation } =
-    currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+  const { wrapperAnimation, backdropAnimation, contentAnimation, footerAnimation } =
+    currentBreakpoint !== undefined ? createSheetEnterAnimation(baseEl, opts) : createEnterAnimation();
 
   backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
 
   wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);
 
   contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
 
+  footerAnimation?.addElement(root.querySelector('ion-footer')!);
+
   const baseAnimation = createAnimation()
   .addElement(baseEl)
   .easing('cubic-bezier(0.36,0.66,0.04,1)')
   .duration(280)
   .addAnimation([backdropAnimation, wrapperAnimation]);
 
-  if (contentAnimation && animateContentHeight) {
+  if (animateContentHeight && contentAnimation) {
     baseAnimation.addAnimation(contentAnimation);
   }
 
+  if (animateContentHeight && footerAnimation) {
+    baseAnimation.addAnimation(footerAnimation);
+  }
+
   return baseAnimation;
 };

core/src/components/modal/animations/sheet.ts

@@ -3,7 +3,7 @@ import { createAnimation } from '@utils/animation/animation';
 import type { ModalAnimationOptions } from '../modal-interface';
 import { getBackdropValueForSheet } from '../utils';
 
-export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
+export const createSheetEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions) => {
   const { currentBreakpoint, backdropBreakpoint } = opts;
 
   /**
@@ -34,7 +34,13 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
     { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint! * 100}%` },
   ]);
 
-  return { wrapperAnimation, backdropAnimation, contentAnimation };
+  const wrapperHeight = baseEl.shadowRoot?.querySelector('.modal-wrapper, .modal-shadow')?.clientHeight;
+  const footerAnimation = createAnimation('footerAnimation').keyframes([
+    { offset: 0, opacity: 1, transform: `translateY(-${wrapperHeight}px)` },
+    { offset: 1, opacity: 1, transform: `translateY(-${wrapperHeight! * (1 - currentBreakpoint!)}px)` },
+  ]);
+
+  return { wrapperAnimation, backdropAnimation, contentAnimation, footerAnimation };
 };
 
 export const createSheetLeaveAnimation = (opts: ModalAnimationOptions) => {

core/src/components/modal/gestures/sheet.ts

@@ -76,6 +76,10 @@ export const createSheetGesture = (
       { offset: 0, maxHeight: '100%' },
       { offset: 1, maxHeight: '0%' },
     ],
+    FOOTER_KEYFRAMES: [
+      { offset: 0, transform: `translateY(0)` },
+      { offset: 1, transform: `translateY(-${wrapperEl.clientHeight}px)` },
+    ],
   };
 
   const contentEl = baseEl.querySelector('ion-content');
@@ -89,6 +93,7 @@ export const createSheetGesture = (
   const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
   const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
   const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
+  const footerAnimation = animation.childAnimations.find((ani) => ani.id === 'footerAnimation');
 
   const enableBackdrop = () => {
     baseEl.style.setProperty('pointer-events', 'auto');
@@ -128,6 +133,8 @@ export const createSheetGesture = (
     wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
     backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
     contentAnimation?.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
+    footerAnimation?.keyframes([...SheetDefaults.FOOTER_KEYFRAMES]);
+
     animation.progressStart(true, 1 - currentBreakpoint);
 
     /**
@@ -338,7 +345,7 @@ export const createSheetGesture = (
         },
       ]);
 
-      if (contentAnimation) {
+      if (contentAnimation && footerAnimation) {
         /**
          * The modal content should scroll at any breakpoint when scrollAtEdge
          * is disabled. In order to do this, the content needs to be completely
@@ -350,6 +357,11 @@ export const createSheetGesture = (
           { offset: 0, maxHeight: `${(1 - breakpointOffset) * 100}%` },
           { offset: 1, maxHeight: `${snapToBreakpoint * 100}%` },
         ]);
+
+        footerAnimation.keyframes([
+          { offset: 0, transform: `translateY(-${height * (breakpointOffset)}px)` },
+          { offset: 1, transform: `translateY(-${height * (1 - snapToBreakpoint)}px)` },
+        ])
       }
 
       animation.progressStep(0);
@@ -396,6 +408,7 @@ export const createSheetGesture = (
                   wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                   backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
                   contentAnimation?.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
+                  footerAnimation?.keyframes([...SheetDefaults.FOOTER_KEYFRAMES]);
                   animation.progressStart(true, 1 - snapToBreakpoint);
                   currentBreakpoint = snapToBreakpoint;
                   onBreakpointChange(currentBreakpoint);

core/src/components/modal/modal.tsx

@@ -532,6 +532,22 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
 
+    /**
+     * If scrollAtEdge is false, footer must be fixed to
+     * the bottom of the modal and be always visible.
+     */
+    if (this.scrollAtEdge === false){
+      const footer = this.usersElement.querySelector('ion-footer');
+      if (!footer) return;
+      footer.style.position = 'fixed';
+      footer.style.bottom = '0';
+      const fixedFooter = footer.cloneNode(true) as HTMLIonFooterElement;
+      footer.remove();
+      this.usersElement.style.setProperty('padding-bottom', `${fixedFooter.clientHeight}px`);
+      el.shadowRoot!.querySelector('.modal-wrapper')!.appendChild(footer);
+    }
+
+
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting

core/src/components/modal/test/sheet/index.html

@@ -102,7 +102,7 @@
           </button>
           <button
             id="custom-breakpoint-modal"
-            onclick="presentModal({ initialBreakpoint: 0.5, breakpoints: [0,0.25, 0.5, 0.75], scrollAtEdge: false })"
+            onclick="presentModal({ initialBreakpoint: 0.5, breakpoints: [0.25, 0.5, 0.75, 1], scrollAtEdge: false })"
           >
             Present Sheet Modal (scrollAtEdge)
           </button>
@@ -193,7 +193,9 @@
       <ion-footer>
         <ion-toolbar>
           <ion-title>Footer</ion-title>
+          <ion-button id="add-content">Add More Content</ion-button>
         </ion-toolbar>
+        <div id="dynamic-content"></div>
       </ion-footer>
       `;
 
@@ -220,6 +222,20 @@
         button.addEventListener('click', () => {
           modalElement.dismiss();
         });
+
+        const buttonAdd = element.querySelector('#add-content');
+        buttonAdd.addEventListener('click', () => {
+          const dynamicContent = modalElement.shadowRoot.querySelector('#dynamic-content');
+          console.log(modalElement.shadowRoot)
+          const newToolbar = document.createElement('ion-toolbar');
+          newToolbar.innerHTML = `
+            <ion-title>Additional Content</ion-title>
+          `;
+          dynamicContent.appendChild(newToolbar);
+          dynamicContent
+        });
+
+
         document.body.appendChild(modalElement);
         return modalElement;
       }