Skip to content

Commit 1befa48

Browse files
thetaPCthetaPC
committed
chore(modal): update format
1 parent 867a38b commit 1befa48

1 file changed

Lines changed: 49 additions & 72 deletions

File tree

  • static/usage/v8/modal/card/drag-events

‎static/usage/v8/modal/card/drag-events/demo.html‎

Lines changed: 49 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -13,89 +13,66 @@
1313
<body>
1414
<ion-app>
1515
<div class="ion-page">
16-
<ion-header>
17-
<ion-toolbar>
18-
<ion-title>App</ion-title>
19-
</ion-toolbar>
20-
</ion-header>
21-
<ion-content class="ion-padding">
22-
<ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
16+
<ion-header>
17+
<ion-toolbar>
18+
<ion-title>App</ion-title>
19+
</ion-toolbar>
20+
</ion-header>
21+
<ion-content class="ion-padding">
22+
<ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
2323

24-
<ion-modal trigger="open-modal">
25-
<ion-header>
26-
<ion-toolbar>
27-
<ion-title>Modal</ion-title>
28-
</ion-toolbar>
29-
</ion-header>
30-
<ion-content class="ion-padding">
31-
<div class="ion-margin-top">
32-
<ion-label>Drag the handle to adjust the background brightness based on a custom brightness.</ion-label>
33-
</div>
34-
</ion-content>
35-
</ion-modal>
36-
</ion-content>
37-
</div>
24+
<ion-modal trigger="open-modal">
25+
<ion-header>
26+
<ion-toolbar>
27+
<ion-title>Modal</ion-title>
28+
</ion-toolbar>
29+
</ion-header>
30+
<ion-content class="ion-padding">
31+
<div class="ion-margin-top">
32+
<ion-label>Drag the handle to adjust the background brightness based on a custom brightness.</ion-label>
33+
</div>
34+
</ion-content>
35+
</ion-modal>
36+
</ion-content>
37+
</div>
3838
</ion-app>
3939

4040
<script>
41-
const modal = document.querySelector('ion-modal');
42-
const presentingElement = document.querySelector('.ion-page');
41+
const modal = document.querySelector('ion-modal');
42+
const presentingElement = document.querySelector('.ion-page');
4343

44-
modal.presentingElement = presentingElement;
44+
modal.presentingElement = presentingElement;
4545

46-
const DARKEST_PERCENT = 50;
47-
const BRIGHTNESS_RANGE = 100 - DARKEST_PERCENT;
46+
const DARKEST_PERCENT = 50;
47+
const BRIGHTNESS_RANGE = 100 - DARKEST_PERCENT;
4848

49-
modal.addEventListener('ionModalWillPresent', () => {
50-
presentingElement.style.transition = 'filter 0.4s ease';
51-
// Set to max darkness immediately
52-
presentingElement.style.setProperty('filter', `brightness(${DARKEST_PERCENT}%)`, 'important');
53-
});
49+
modal.addEventListener('ionModalWillPresent', () => {
50+
presentingElement.style.transition = 'filter 0.4s ease';
51+
presentingElement.style.setProperty('filter', `brightness(${DARKEST_PERCENT}%)`, 'important');
52+
});
5453

55-
modal.addEventListener('ionDragStart', () => {
56-
// Ensure transitions are off during the active drag
57-
presentingElement.style.transition = 'none';
58-
});
54+
modal.addEventListener('ionDragStart', () => {
55+
presentingElement.style.transition = 'none';
56+
});
5957

60-
modal.addEventListener('ionDragMove', (event) => {
61-
// `progress` is a value from 1 (top) to 0 (bottom)
62-
const { progress } = event.detail;
58+
modal.addEventListener('ionDragMove', (event) => {
59+
const { progress } = event.detail;
60+
const brightnessValue = 100 - progress * BRIGHTNESS_RANGE;
61+
presentingElement.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important');
62+
});
6363

64-
/**
65-
* Calculate the current brightness based on how far the user has
66-
* dragged.
67-
*
68-
* When dragging up, the background should become darker,
69-
* and when dragging down, it should become lighter.
70-
*/
71-
const brightnessValue = 100 - progress * BRIGHTNESS_RANGE;
64+
modal.addEventListener('ionDragEnd', (event) => {
65+
const { progress } = event.detail;
66+
const brightnessValue = progress > 0.4 ? DARKEST_PERCENT : 100;
7267

73-
// Update the brightness in real-time as the user drags
74-
presentingElement.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important');
75-
});
68+
presentingElement.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important');
69+
presentingElement.style.transition = 'filter 0.4s ease';
70+
});
7671

77-
modal.addEventListener('ionDragEnd', (event) => {
78-
// `progress` is a value from 1 (top) to 0 (bottom)
79-
const { progress } = event.detail;
80-
/**
81-
* Snap the background brightness based on the user's drag intent.
82-
* Progress > 0.4 implies an intent to open (snap dark),
83-
* while < 0.4 implies a dismissal (snap bright).
84-
*/
85-
const brightnessValue = progress > 0.4 ? DARKEST_PERCENT : 100;
86-
87-
// Reset to max darkness on snap-back for a nice visual effect
88-
presentingElement.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important');
89-
90-
// Re-enable transition for a smooth snap-back
91-
presentingElement.style.transition = 'filter 0.4s ease';
92-
});
93-
94-
modal.addEventListener('ionModalWillDismiss', () => {
95-
// Clean up styles when the modal is dismissed
96-
presentingElement.style.removeProperty('filter');
97-
presentingElement.style.removeProperty('transition');
98-
});
99-
</script>
72+
modal.addEventListener('ionModalWillDismiss', () => {
73+
presentingElement.style.removeProperty('filter');
74+
presentingElement.style.removeProperty('transition');
75+
});
76+
</script>
10077
</body>
10178
</html>

0 commit comments

Comments
 (0)