-
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 10 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
28 changes: 28 additions & 0 deletions
28
static/usage/v8/modal/sheet/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,28 @@ | ||
| ```html | ||
| <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 Sheet Modal</ion-button> | ||
|
|
||
| <ion-modal | ||
| #modal | ||
| trigger="open-modal" | ||
| [initialBreakpoint]="0.25" | ||
| [breakpoints]="[0, 0.25, 0.5, 0.75, 1]" | ||
| (ionDragStart)="onDragStart()" | ||
| (ionDragMove)="onDragMove($event)" | ||
| (ionDragEnd)="onDragEnd($event)" | ||
| > | ||
| <ng-template> | ||
| <ion-content class="ion-padding"> | ||
| <div class="ion-margin-top"> | ||
| <ion-label>Drag the handle to adjust the modal's opacity based on a custom max opacity.</ion-label> | ||
| </div> | ||
| </ion-content> | ||
| </ng-template> | ||
| </ion-modal> | ||
| </ion-content> | ||
| ``` |
108 changes: 108 additions & 0 deletions
108
static/usage/v8/modal/sheet/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,108 @@ | ||
| ```ts | ||
| import { Component, ElementRef, ViewChild } from '@angular/core'; | ||
| import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone'; | ||
| import type { ModalDragEventDetail } from '@ionic/angular/standalone'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-example', | ||
| templateUrl: 'example.component.html', | ||
| standalone: true, | ||
| imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar], | ||
| }) | ||
| export class ExampleComponent { | ||
| @ViewChild('modal', { read: ElementRef }) | ||
| modal!: ElementRef<HTMLIonModalElement>; | ||
|
|
||
| private baseOpacity!: number; | ||
| private readonly MAX_OPACITY = 0.8; | ||
|
|
||
| onDragStart() { | ||
| const modalEl = this.modal.nativeElement; | ||
| const style = getComputedStyle(modalEl); | ||
|
|
||
| // Fetch the current variable value | ||
| this.baseOpacity = parseFloat(style.getPropertyValue('--backdrop-opacity')); | ||
|
|
||
| // Ensure transitions are off during the active drag | ||
| modalEl.style.transition = 'none'; | ||
| } | ||
|
|
||
| onDragMove(event: CustomEvent<ModalDragEventDetail>) { | ||
| // `progress` is a value from 1 (top) to 0 (bottom) | ||
| const { progress } = event.detail; | ||
| const modalEl = this.modal.nativeElement; | ||
| const initialBreakpoint = modalEl.initialBreakpoint!; | ||
| let dynamicOpacity: number; | ||
|
|
||
| /** | ||
| * Dragging Down: Progress is between 0 and the initial breakpoint | ||
| */ | ||
| if (progress <= initialBreakpoint) { | ||
| /** | ||
| * Calculate how far down the user has dragged from the initial | ||
| * breakpoint as a ratio | ||
| */ | ||
| const downwardProgressRatio = progress / initialBreakpoint; | ||
| /** | ||
| * Multiplying this by `baseOpacity` ensures that as progress hits 0, | ||
| * the opacity also hits 0 without a sudden jump | ||
| */ | ||
| dynamicOpacity = downwardProgressRatio * this.baseOpacity; | ||
| } else { | ||
| /** | ||
| * Dragging Up: Progress is between the initial breakpoint and 1.0 | ||
| */ | ||
|
|
||
| /** | ||
| * Calculate how far up the user has dragged from the initial | ||
| * breakpoint as a ratio | ||
| */ | ||
| const distanceFromStart = progress - initialBreakpoint; | ||
| /** | ||
| * Calculate the total available space to drag up from the initial | ||
| * breakpoint to the top (1.0) | ||
| */ | ||
| const range = 1 - initialBreakpoint; | ||
| /** | ||
| * Normalizes that distance into a 0.0 to 1.0 value relative to | ||
| * the available upward space | ||
| */ | ||
| const currentGain = distanceFromStart / range; | ||
|
|
||
| // Scale from `baseOpacity` up to `MAX_OPACITY` | ||
| dynamicOpacity = this.baseOpacity + currentGain * (this.MAX_OPACITY - this.baseOpacity); | ||
| } | ||
|
|
||
| modalEl.style.setProperty('--backdrop-opacity', dynamicOpacity.toString()); | ||
| } | ||
|
|
||
| onDragEnd(event: CustomEvent<ModalDragEventDetail>) { | ||
| // `currentBreakpoint` tells us which snap point the modal will animate to after the drag ends | ||
| const { currentBreakpoint } = event.detail; | ||
| const modalEl = this.modal.nativeElement; | ||
|
|
||
| /** | ||
| * If the modal is snapping to the closed state (0), reset the | ||
| * styles. | ||
| */ | ||
| if (currentBreakpoint === 0) { | ||
| modalEl.style.removeProperty('--backdrop-opacity'); | ||
| return; | ||
| } | ||
|
|
||
| // Determine the target opacity for the snap-back animation | ||
| let targetOpacity = this.baseOpacity; | ||
| /** | ||
| * If snapping to the top (1), set opacity to MAX_OPACITY for a nice | ||
| * visual effect. | ||
| */ | ||
| if (currentBreakpoint === 1) { | ||
| targetOpacity = this.MAX_OPACITY; | ||
| } | ||
|
|
||
| // Re-enable transition for a smooth snap-back | ||
| modalEl.style.transition = '--backdrop-opacity 0.3s ease'; | ||
| modalEl.style.setProperty('--backdrop-opacity', targetOpacity.toString()); | ||
| } | ||
| } | ||
| ``` |
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.