From 279055eb09edba4b40ba59084c74cb5a595c94da Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 6 Jul 2023 10:08:57 -0400 Subject: [PATCH 1/7] docs: add iframe demo, JS, and Angular --- docs/utilities/animations.md | 231 +----------------- static/code/stackblitz/v7/html/index.ts | 3 +- .../angular/example_component_html.md | 29 +++ .../angular/example_component_ts.md | 49 ++++ .../v7/animations/modal-override/demo.html | 82 +++++++ .../v7/animations/modal-override/index.md | 26 ++ .../animations/modal-override/javascript.md | 63 +++++ .../v7/animations/modal-override/react.md | 35 +++ .../usage/v7/animations/modal-override/vue.md | 38 +++ 9 files changed, 326 insertions(+), 230 deletions(-) create mode 100644 static/usage/v7/animations/modal-override/angular/example_component_html.md create mode 100644 static/usage/v7/animations/modal-override/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/modal-override/demo.html create mode 100644 static/usage/v7/animations/modal-override/index.md create mode 100644 static/usage/v7/animations/modal-override/javascript.md create mode 100644 static/usage/v7/animations/modal-override/react.md create mode 100644 static/usage/v7/animations/modal-override/vue.md diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md index 92c6eebc67a..d53bfbca0e5 100644 --- a/docs/utilities/animations.md +++ b/docs/utilities/animations.md @@ -1279,236 +1279,9 @@ Certain Ionic components allow developers to provide custom animations. All anim ### Modals -````mdx-code-block - - - -```javascript -customElements.define('modal-page', class extends HTMLElement { - connectedCallback() { - this.innerHTML = ` - - - Modal Header - - - - Modal Content - - `; - } -}); - -function presentModal() { - const enterAnimation = (baseEl: any) => { - const root = baseEl.shadowRoot; - - const backdropAnimation = createAnimation() - .addElement(root.querySelector('ion-backdrop')!) - .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - - const wrapperAnimation = createAnimation() - .addElement(root.querySelector('.modal-wrapper')!) - .keyframes([ - { offset: 0, opacity: '0', transform: 'scale(0)' }, - { offset: 1, opacity: '0.99', transform: 'scale(1)' } - ]); - - return createAnimation() - .addElement(baseEl) - .easing('ease-out') - .duration(500) - .addAnimation([backdropAnimation, wrapperAnimation]); - } - - const leaveAnimation = (baseEl: any) => { - return enterAnimation(baseEl).direction('reverse'); - } - - // create the modal with the `modal-page` component - const modalElement = document.createElement('ion-modal'); - modalElement.component = 'modal-page'; - modalElement.enterAnimation = enterAnimation; - modalElement.leaveAnimation = leaveAnimation; - - // present the modal - document.body.appendChild(modalElement); - return modalElement.present(); -} -``` - - - -```tsx -import { Component } from '@angular/core'; -import { ModalController, AnimationController } from '@ionic/angular'; -import { ModalPage } from '../modal/modal.page'; - -@Component({ - selector: 'modal-example', - templateUrl: 'modal-example.html', - styleUrls: ['./modal-example.css'] -}) -export class ModalExample { - constructor(public modalController: ModalController, - public animationCtrl: AnimationController) { } - - async presentModal() { - const enterAnimation = (baseEl: any) => { - const root = baseEl.shadowRoot; - - const backdropAnimation = this.animationCtrl.create() - .addElement(root.querySelector('ion-backdrop')!) - .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - - const wrapperAnimation = this.animationCtrl.create() - .addElement(root.querySelector('.modal-wrapper')!) - .keyframes([ - { offset: 0, opacity: '0', transform: 'scale(0)' }, - { offset: 1, opacity: '0.99', transform: 'scale(1)' } - ]); - - return this.animationCtrl.create() - .addElement(baseEl) - .easing('ease-out') - .duration(500) - .addAnimation([backdropAnimation, wrapperAnimation]); - } - - const leaveAnimation = (baseEl: any) => { - return enterAnimation(baseEl).direction('reverse'); - } - - const modal = await this.modalController.create({ - component: ModalPage, - enterAnimation, - leaveAnimation - }); - return await modal.present(); - } -} -``` - - - -```jsx -import React, { useState } from 'react'; -import { createAnimation, IonModal, IonButton, IonContent } from '@ionic/react'; - -export const ModalExample: React.FC = () => { - const [showModal, setShowModal] = useState(false); - - const enterAnimation = (baseEl: any) => { - const root = baseEl.shadowRoot; - - const backdropAnimation = createAnimation() - .addElement(root.querySelector('ion-backdrop')!) - .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - - const wrapperAnimation = createAnimation() - .addElement(root.querySelector('.modal-wrapper')!) - .keyframes([ - { offset: 0, opacity: '0', transform: 'scale(0)' }, - { offset: 1, opacity: '0.99', transform: 'scale(1)' } - ]); - - return createAnimation() - .addElement(baseEl) - .easing('ease-out') - .duration(500) - .addAnimation([backdropAnimation, wrapperAnimation]); - } - - const leaveAnimation = (baseEl: any) => { - return enterAnimation(baseEl).direction('reverse'); - } - - return ( - - -

This is modal content

- setShowModal(false)}>Close Modal - - setShowModal(true)}>Show Modal - - ); -}; -``` - - - -```jsx - - - -``` - - -```` +import ModalOverride from '@site/static/usage/v7/animations/modal-override/index.md'; - + ## Performance Considerations diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts index 952785602e6..c820961c828 100644 --- a/static/code/stackblitz/v7/html/index.ts +++ b/static/code/stackblitz/v7/html/index.ts @@ -1,6 +1,6 @@ import { defineCustomElements } from '@ionic/core/loader'; -import { loadingController, modalController, pickerController, toastController } from '@ionic/core'; +import { createAnimation, loadingController, modalController, pickerController, toastController } from '@ionic/core'; /* Core CSS required for Ionic components to work properly */ import '@ionic/core/css/core.css'; @@ -27,3 +27,4 @@ defineCustomElements(); (window as any).modalController = modalController; (window as any).pickerController = pickerController; (window as any).toastController = toastController; +(window as any).createAnimation = createAnimation; diff --git a/static/usage/v7/animations/modal-override/angular/example_component_html.md b/static/usage/v7/animations/modal-override/angular/example_component_html.md new file mode 100644 index 00000000000..75bac35cd7b --- /dev/null +++ b/static/usage/v7/animations/modal-override/angular/example_component_html.md @@ -0,0 +1,29 @@ +```html + + + Page + + + +
+ Present Modal + + + + + Modal + + + + + + + + + Modal Content + + + +
+ +``` diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md new file mode 100644 index 00000000000..62ffa59b70c --- /dev/null +++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md @@ -0,0 +1,49 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import type { IonModal } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild('modal', { static: true }) modal: IonModal; + + constructor(private animationCtrl: AnimationController) {} + + ngOnInit() { + const enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot; + + const backdropAnimation = this.animationCtrl.create() + .addElement(root.querySelector('ion-backdrop')) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = this.animationCtrl.create() + .addElement(root.querySelector('.modal-wrapper')) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' } + ]); + + return this.animationCtrl.create() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + } + + const leaveAnimation = (baseEl: HTMLElement) => { + return enterAnimation(baseEl).direction('reverse'); + } + + this.modal.enterAnimation = enterAnimation; + this.modal.leaveAnimation = leaveAnimation; + } + + closeModal() { + this.modal.dismiss(); + } +} +``` diff --git a/static/usage/v7/animations/modal-override/demo.html b/static/usage/v7/animations/modal-override/demo.html new file mode 100644 index 00000000000..fde911e2f64 --- /dev/null +++ b/static/usage/v7/animations/modal-override/demo.html @@ -0,0 +1,82 @@ + + + + + + Accordion + + + + + + + + + + + + Page + + + +
+ Present Modal + + + + Modal + + + + + + + + + Modal Content + + +
+ + + + + + diff --git a/static/usage/v7/animations/modal-override/index.md b/static/usage/v7/animations/modal-override/index.md new file mode 100644 index 00000000000..ba289f42c62 --- /dev/null +++ b/static/usage/v7/animations/modal-override/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/animations/modal-override/javascript.md b/static/usage/v7/animations/modal-override/javascript.md new file mode 100644 index 00000000000..b319e4699c4 --- /dev/null +++ b/static/usage/v7/animations/modal-override/javascript.md @@ -0,0 +1,63 @@ +```html + + + Page + + + +
+ Present Modal + + + + Modal + + + + + + + + + Modal Content + + +
+ + + +``` diff --git a/static/usage/v7/animations/modal-override/react.md b/static/usage/v7/animations/modal-override/react.md new file mode 100644 index 00000000000..122fc747919 --- /dev/null +++ b/static/usage/v7/animations/modal-override/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v7/animations/modal-override/vue.md b/static/usage/v7/animations/modal-override/vue.md new file mode 100644 index 00000000000..8ac8c6bbeec --- /dev/null +++ b/static/usage/v7/animations/modal-override/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` From ceedfcd206491c5cabeb2dd073b22ed3936deaa9 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 6 Jul 2023 10:16:47 -0400 Subject: [PATCH 2/7] docs: add react example --- .../v7/animations/modal-override/react.md | 93 +++++++++++++------ 1 file changed, 65 insertions(+), 28 deletions(-) diff --git a/static/usage/v7/animations/modal-override/react.md b/static/usage/v7/animations/modal-override/react.md index 122fc747919..45c0edd9462 100644 --- a/static/usage/v7/animations/modal-override/react.md +++ b/static/usage/v7/animations/modal-override/react.md @@ -1,34 +1,71 @@ ```tsx -import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import React, { useRef } from 'react'; +import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonModal, IonToolbar, IonTitle, createAnimation } from '@ionic/react'; +import { close } from 'ionicons/icons'; + function Example() { + const modalEl = useRef(null); + + const enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot!; + + const backdropAnimation = createAnimation() + .addElement(root.querySelector('ion-backdrop')!) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = createAnimation() + .addElement(root.querySelector('.modal-wrapper')!) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' } + ]); + + return createAnimation() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + } + + const leaveAnimation = (baseEl: HTMLElement) => { + return enterAnimation(baseEl).direction('reverse'); + } + + const closeModal = () => { + modalEl.current?.dismiss(); + } + return ( - - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - + <> + + + Page + + + + Present Modal + + + + Modal + + + + + + + + + Modal Content + + + + ); } export default Example; From 3e640a56000820be108b02776dce4779fcb93326 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 6 Jul 2023 10:18:36 -0400 Subject: [PATCH 3/7] clean up --- .../angular/example_component_html.md | 38 +++++++++---------- .../animations/modal-override/javascript.md | 34 ++++++++--------- 2 files changed, 34 insertions(+), 38 deletions(-) diff --git a/static/usage/v7/animations/modal-override/angular/example_component_html.md b/static/usage/v7/animations/modal-override/angular/example_component_html.md index 75bac35cd7b..fe4a5b97892 100644 --- a/static/usage/v7/animations/modal-override/angular/example_component_html.md +++ b/static/usage/v7/animations/modal-override/angular/example_component_html.md @@ -5,25 +5,23 @@ -
- Present Modal - - - - - Modal - - - - - - - - - Modal Content - - - -
+ Present Modal + + + + + Modal + + + + + + + + + Modal Content + + + ``` diff --git a/static/usage/v7/animations/modal-override/javascript.md b/static/usage/v7/animations/modal-override/javascript.md index b319e4699c4..c95af5abb9d 100644 --- a/static/usage/v7/animations/modal-override/javascript.md +++ b/static/usage/v7/animations/modal-override/javascript.md @@ -5,24 +5,22 @@ -
- Present Modal - - - - Modal - - - - - - - - - Modal Content - - -
+ Present Modal + + + + Modal + + + + + + + + + Modal Content + + ``` From 6d58af75b2ab86d6d6cdc0a36c58a2f1c162919d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 6 Jul 2023 12:14:24 -0400 Subject: [PATCH 6/7] use text instead of icon --- .../modal-override/angular/example_component_html.md | 4 +--- static/usage/v7/animations/modal-override/demo.html | 4 +--- static/usage/v7/animations/modal-override/javascript.md | 4 +--- static/usage/v7/animations/modal-override/react.md | 7 ++----- static/usage/v7/animations/modal-override/vue.md | 8 ++------ 5 files changed, 7 insertions(+), 20 deletions(-) diff --git a/static/usage/v7/animations/modal-override/angular/example_component_html.md b/static/usage/v7/animations/modal-override/angular/example_component_html.md index fe4a5b97892..11ed6139faf 100644 --- a/static/usage/v7/animations/modal-override/angular/example_component_html.md +++ b/static/usage/v7/animations/modal-override/angular/example_component_html.md @@ -12,9 +12,7 @@ Modal - - - + Close diff --git a/static/usage/v7/animations/modal-override/demo.html b/static/usage/v7/animations/modal-override/demo.html index fde911e2f64..8be743f1b11 100644 --- a/static/usage/v7/animations/modal-override/demo.html +++ b/static/usage/v7/animations/modal-override/demo.html @@ -29,9 +29,7 @@ Modal - - - + Close diff --git a/static/usage/v7/animations/modal-override/javascript.md b/static/usage/v7/animations/modal-override/javascript.md index 7ebf8b3b325..fdd529ed3a7 100644 --- a/static/usage/v7/animations/modal-override/javascript.md +++ b/static/usage/v7/animations/modal-override/javascript.md @@ -11,9 +11,7 @@ Modal - - - + Close diff --git a/static/usage/v7/animations/modal-override/react.md b/static/usage/v7/animations/modal-override/react.md index 45c0edd9462..93b14a00919 100644 --- a/static/usage/v7/animations/modal-override/react.md +++ b/static/usage/v7/animations/modal-override/react.md @@ -1,7 +1,6 @@ ```tsx import React, { useRef } from 'react'; -import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonModal, IonToolbar, IonTitle, createAnimation } from '@ionic/react'; -import { close } from 'ionicons/icons'; +import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonToolbar, IonTitle, createAnimation } from '@ionic/react'; function Example() { const modalEl = useRef(null); @@ -54,9 +53,7 @@ function Example() { Modal - - - + Close diff --git a/static/usage/v7/animations/modal-override/vue.md b/static/usage/v7/animations/modal-override/vue.md index 60fb90a0617..5950c38682a 100644 --- a/static/usage/v7/animations/modal-override/vue.md +++ b/static/usage/v7/animations/modal-override/vue.md @@ -17,9 +17,7 @@ Modal - - - + Close @@ -31,8 +29,7 @@ ```