Skip to content

Commit 662f216

Browse files
ShaneKShaneK
committed
WIP
1 parent a0de1e7 commit 662f216

File tree

2 files changed

+78
-13
lines changed

2 files changed

+78
-13
lines changed

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

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export const createSheetGesture = (
8484
let offset = 0;
8585
let canDismissBlocksGesture = false;
8686
let cachedScrollEl: HTMLElement | null = null;
87+
let cachedFooterEl: HTMLIonFooterElement | null = null;
8788
let cachedFooterYPosition: number | null = null;
8889
let currentFooterState: 'moving' | 'stationary' | null = null;
8990
const canDismissMaxStep = 0.95;
@@ -125,33 +126,44 @@ export const createSheetGesture = (
125126
* @param footer Whether the footer is in a moving or stationary position.
126127
*/
127128
const swapFooterPosition = (newPosition: 'moving' | 'stationary') => {
128-
const originalFooter = baseEl.querySelector('ion-footer') as HTMLIonFooterElement | null;
129-
if (!originalFooter) {
130-
return;
129+
if (!cachedFooterEl) {
130+
cachedFooterEl = baseEl.querySelector('ion-footer') as HTMLIonFooterElement | null;
131+
if (!cachedFooterEl) {
132+
return;
133+
}
131134
}
132135

136+
const page = baseEl.querySelector('.ion-page') as HTMLElement | null;
137+
133138
currentFooterState = newPosition;
134139
if (newPosition === 'stationary') {
135140
// Reset positioning styles to allow normal document flow
136-
originalFooter.style.removeProperty('position');
137-
originalFooter.style.removeProperty('bottom');
138-
originalFooter.parentElement?.style.removeProperty('padding-bottom');
141+
cachedFooterEl.style.removeProperty('position');
142+
cachedFooterEl.style.removeProperty('bottom');
143+
page?.style.removeProperty('padding-bottom');
144+
145+
// Move to page
146+
console.log('Moving footer to page');
147+
page?.appendChild(cachedFooterEl);
139148
} else {
140149
// Add padding to the parent element to prevent content from being hidden
141150
// when the footer is positioned absolutely. This has to be done before we
142151
// make the footer absolutely positioned or we may accidentally cause the
143152
// sheet to scroll.
144-
const footerHeight = originalFooter.clientHeight;
145-
originalFooter.parentElement?.style.setProperty('padding-bottom', `${footerHeight}px`);
153+
const footerHeight = cachedFooterEl.clientHeight;
154+
page?.style.setProperty('padding-bottom', `${footerHeight}px`);
146155

147156
// Apply positioning styles to keep footer at bottom
148-
originalFooter.style.setProperty('position', 'absolute');
149-
originalFooter.style.setProperty('bottom', '0');
157+
cachedFooterEl.style.setProperty('position', 'absolute');
158+
cachedFooterEl.style.setProperty('bottom', '0');
150159

151160
// Also cache the footer Y position, which we use to determine if the
152161
// sheet has been moved below the footer. When that happens, we need to swap
153162
// the position back so it will collapse correctly.
154-
cachedFooterYPosition = originalFooter.getBoundingClientRect().top + window.scrollY;
163+
cachedFooterYPosition = cachedFooterEl.getBoundingClientRect().top + window.scrollY;
164+
165+
console.log('Moving footer to body');
166+
document.body.appendChild(cachedFooterEl);
155167
}
156168
};
157169

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

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,61 @@
145145
>
146146
Backdrop is inactive
147147
</button>
148-
<div class="grid">
149-
<div class="grid-item red"></div>
148+
<ion-button id="open-footer-test-modal" expand="block">Present Sheet Modal (footer test)</ion-button>
149+
<ion-modal class="footer-test-modal" mode="ios" trigger="open-footer-test-modal" initial-breakpoint="0.25" expand-to-scroll="false"
150+
>
151+
<ion-content>
152+
<ion-text>
153+
<p>This is a modal!!</p>
154+
</ion-text>
155+
<ion-list>
156+
<ion-item>Item</ion-item>
157+
<ion-item>Item</ion-item>
158+
<ion-item>Item</ion-item>
159+
<ion-item>Item</ion-item>
160+
<ion-item>Item</ion-item>
161+
<ion-item>Item</ion-item>
162+
<ion-item>Item</ion-item>
163+
<ion-item>Item</ion-item>
164+
<ion-item>Item</ion-item>
165+
<ion-item>Item</ion-item>
166+
<ion-item>Item</ion-item>
167+
<ion-item>Item</ion-item>
168+
<ion-item>Item</ion-item>
169+
<ion-item>Item</ion-item>
170+
<ion-item>Item</ion-item>
171+
<ion-item>Item</ion-item>
172+
<ion-item>Item</ion-item>
173+
<ion-item>Item</ion-item>
174+
<ion-item>Item</ion-item>
175+
<ion-item>Item</ion-item>
176+
<ion-item>Item</ion-item>
177+
<ion-item>Item</ion-item>
178+
<ion-item>Item</ion-item>
179+
<ion-item>Item</ion-item>
180+
<ion-item>Item</ion-item>
181+
<ion-item>Item</ion-item>
182+
<ion-item>Item</ion-item>
183+
<ion-item>Item</ion-item>
184+
<ion-item>Item</ion-item>
185+
<ion-item>Item</ion-item>
186+
<ion-item>Item</ion-item>
187+
</ion-list>
188+
The end!
189+
</ion-content>
190+
<ion-footer slot="footer">
191+
<ion-toolbar>
192+
Hello world!
193+
<ion-textarea placeholder="This is a textarea" />
194+
</ion-toolbar>
195+
</ion-footer>
196+
</ion-modal>
197+
<script>
198+
var footerTestModal = document.getElementsByClassName('footer-test-modal')[0];
199+
footerTestModal.breakpoints = [0, 0.25, 0.5, 0.75, 1];
200+
</script>
201+
202+
< <div class="grid-item red"></div>
150203
<div class="grid-item green"></div>
151204
<div class="grid-item blue"></div>
152205
<div class="grid-item yellow"></div>

0 commit comments

Comments
 (0)