-
Notifications
You must be signed in to change notification settings - Fork 3.2k
docs(modal): add playgrounds for sheet and card modal drag events #4415
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 9 commits
Commits
Show all changes
29 commits
Select commit
Hold shift + click to select a range
f028c88
docs(modal): add playgrounds for sheet and card model drag events
thetaPC 6950b0e
docs(modal): add drag events playground for card
thetaPC d38e734
docs(modal): add type import and cleanup
thetaPC 867a38b
chore(modal): remove extra tag
thetaPC 1befa48
chore(modal): update format
thetaPC 8f9d11f
docs(modal): update playgrounds and add interface
thetaPC 36e1b78
chore(stackblitz): add dev build
thetaPC 2247d3f
docs(modal): update section titles
thetaPC bd55ca5
chore(stackblitz): update dev build
thetaPC 8a5d2cb
docs(modal): create event handling section
thetaPC 3fc476a
docs(modal): clarify deltaY
thetaPC 351119a
docs(modal): change to predictedBreakpoint
thetaPC 12620da
docs(modal): remove intro
thetaPC b8f8724
docs(modal): update heading levels
thetaPC 9d5d012
docs(modal): update heading level
thetaPC db599b3
docs(modal): remove event list from dragMove
thetaPC ebcd579
docs(modal): separate playgrounds
thetaPC 03828ff
docs(modal): add console logs
thetaPC 656603c
feat(modal): cleanup
thetaPC dc144e0
docs(modal): update import name
thetaPC 91069fd
docs(modal): move link
thetaPC 7bb82f2
docs(modal): move link again
thetaPC f031a2c
docs(modal): use latest variable name
thetaPC db92545
docs(modal): update import path
thetaPC 308d9b1
docs(modal): remove event from console
thetaPC 0e2099e
docs(modal): remove event from the console end
thetaPC 51a2ce8
docs(modal): add console for snap changes
thetaPC bfed59d
docs(modal): move events to top level modal usage directory
brandyscarney 1b904f5
chore: revert dev build
brandyscarney File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
static/usage/v8/modal/card/drag-events/angular/example_component_html.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| ```html | ||
| <div class="ion-page" #appPage> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>App</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content class="ion-padding"> | ||
| <ion-button id="open-modal" expand="block">Open Card Modal</ion-button> | ||
|
|
||
| <ion-modal | ||
| #modal | ||
| trigger="open-modal" | ||
| [presentingElement]="presentingElement" | ||
| (ionModalWillPresent)="onModalWillPresent()" | ||
| (ionDragStart)="onDragStart()" | ||
| (ionDragMove)="onDragMove($event)" | ||
| (ionDragEnd)="onDragEnd($event)" | ||
| (ionModalWillDismiss)="onModalWillDismiss()" | ||
| > | ||
| <ng-template> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>Modal</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content class="ion-padding"> | ||
| <div class="ion-margin-top"> | ||
| <ion-label> Drag the handle to adjust the background brightness based on a custom brightness. </ion-label> | ||
| </div> | ||
| </ion-content> | ||
| </ng-template> | ||
| </ion-modal> | ||
| </ion-content> | ||
| </div> | ||
| ``` |
85 changes: 85 additions & 0 deletions
85
static/usage/v8/modal/card/drag-events/angular/example_component_ts.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| ```ts | ||
| import { Component, ElementRef, ViewChild, OnInit } from '@angular/core'; | ||
| import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonModal, IonLabel } from '@ionic/angular/standalone'; | ||
| import type { ModalDragEventDetail } from '@ionic/angular/standalone'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-example', | ||
| templateUrl: 'example.component.html', | ||
| standalone: true, | ||
| imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonModal, IonLabel], | ||
| }) | ||
| export class ExampleComponent implements OnInit { | ||
| @ViewChild('modal', { static: true }) modal!: IonModal; | ||
| @ViewChild('appPage', { static: true }) appPage!: ElementRef<HTMLDivElement>; | ||
|
|
||
| presentingElement: HTMLElement | undefined; | ||
|
|
||
| private readonly DARKEST_PERCENT = 50; | ||
| private readonly BRIGHTNESS_RANGE = 100 - this.DARKEST_PERCENT; | ||
|
|
||
| ngOnInit() { | ||
| this.presentingElement = this.appPage.nativeElement; | ||
| } | ||
|
|
||
| onModalWillPresent() { | ||
| const appEl = this.appPage.nativeElement; | ||
|
|
||
| appEl.style.transition = 'filter 0.4s ease'; | ||
| // Set to max darkness immediately | ||
| appEl.style.setProperty('filter', `brightness(${this.DARKEST_PERCENT}%)`, 'important'); | ||
| } | ||
|
|
||
| onDragStart() { | ||
| const appEl = this.appPage.nativeElement; | ||
|
|
||
| // Ensure transitions are off during the active drag | ||
| appEl.style.transition = 'none'; | ||
| } | ||
|
|
||
| onDragMove(event: CustomEvent<ModalDragEventDetail>) { | ||
| // `progress` is a value from 1 (top) to 0 (bottom) | ||
| const { progress } = event.detail; | ||
|
|
||
| const appEl = this.appPage.nativeElement; | ||
| /** | ||
| * Calculate the current brightness based on how far the user has | ||
| * dragged. | ||
| * | ||
| * When dragging up, the background should become darker, | ||
| * and when dragging down, it should become lighter. | ||
| */ | ||
| const brightnessValue = 100 - progress * this.BRIGHTNESS_RANGE; | ||
|
|
||
| // Update the brightness in real-time as the user drags | ||
| appEl.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important'); | ||
| } | ||
|
|
||
| onDragEnd(event: CustomEvent<ModalDragEventDetail>) { | ||
| // `progress` is a value from 1 (top) to 0 (bottom) | ||
| const { progress } = event.detail; | ||
|
|
||
| const appEl = this.appPage.nativeElement; | ||
| /** | ||
| * Snap the background brightness based on the user's drag intent. | ||
| * Progress > 0.4 implies an intent to open (snap dark), | ||
| * while < 0.4 implies a dismissal (snap bright). | ||
| */ | ||
| const brightnessValue = progress > 0.4 ? this.DARKEST_PERCENT : 100; | ||
|
|
||
| // Reset to max darkness on snap-back for a nice visual effect | ||
| appEl.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important'); | ||
|
|
||
| // Re-enable transition for a smooth snap-back | ||
| appEl.style.transition = 'filter 0.4s ease'; | ||
| } | ||
|
|
||
| onModalWillDismiss() { | ||
| const appEl = this.appPage.nativeElement; | ||
|
|
||
| // Clean up styles when the modal is dismissed | ||
| appEl.style.removeProperty('filter'); | ||
| appEl.style.removeProperty('transition'); | ||
| } | ||
| } | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Modal</title> | ||
| <link rel="stylesheet" href="../../../common.css" /> | ||
| <script src="../../../common.js"></script> | ||
| <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
| <div class="ion-page"> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>App</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content class="ion-padding"> | ||
| <ion-button id="open-modal" expand="block">Open Card Modal</ion-button> | ||
|
|
||
| <ion-modal trigger="open-modal"> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>Modal</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content class="ion-padding"> | ||
| <div class="ion-margin-top"> | ||
| <ion-label>Drag the handle to adjust the background brightness based on a custom brightness.</ion-label> | ||
| </div> | ||
| </ion-content> | ||
| </ion-modal> | ||
| </ion-content> | ||
| </div> | ||
| </ion-app> | ||
|
|
||
| <script> | ||
| const modal = document.querySelector('ion-modal'); | ||
| const presentingElement = document.querySelector('.ion-page'); | ||
|
|
||
| modal.presentingElement = presentingElement; | ||
|
|
||
| const DARKEST_PERCENT = 50; | ||
| const BRIGHTNESS_RANGE = 100 - DARKEST_PERCENT; | ||
|
|
||
| modal.addEventListener('ionModalWillPresent', () => { | ||
| presentingElement.style.transition = 'filter 0.4s ease'; | ||
| presentingElement.style.setProperty('filter', `brightness(${DARKEST_PERCENT}%)`, 'important'); | ||
| }); | ||
|
|
||
| modal.addEventListener('ionDragStart', () => { | ||
| presentingElement.style.transition = 'none'; | ||
| }); | ||
|
|
||
| modal.addEventListener('ionDragMove', (event) => { | ||
| const { progress } = event.detail; | ||
| const brightnessValue = 100 - progress * BRIGHTNESS_RANGE; | ||
| presentingElement.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important'); | ||
| }); | ||
|
|
||
| modal.addEventListener('ionDragEnd', (event) => { | ||
| const { progress } = event.detail; | ||
| const brightnessValue = progress > 0.4 ? DARKEST_PERCENT : 100; | ||
|
|
||
| presentingElement.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important'); | ||
| presentingElement.style.transition = 'filter 0.4s ease'; | ||
| }); | ||
|
|
||
| modal.addEventListener('ionModalWillDismiss', () => { | ||
| presentingElement.style.removeProperty('filter'); | ||
| presentingElement.style.removeProperty('transition'); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| 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'; | ||
|
|
||
| <Playground | ||
| version="8" | ||
| code={{ | ||
| javascript, | ||
| react, | ||
| vue, | ||
| angular: { | ||
| files: { | ||
| 'src/app/example.component.html': angular_example_component_html, | ||
| 'src/app/example.component.ts': angular_example_component_ts, | ||
| }, | ||
| }, | ||
| }} | ||
| src="usage/v8/modal/card/drag-events/demo.html" | ||
| devicePreview | ||
| mode="ios" | ||
| /> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.