Skip to content

Commit b8c9d87

Browse files
ShaneKShaneK
committed
chore(sheet): removing code around duplicating the footer
1 parent 54bc6cc commit b8c9d87

File tree

6 files changed

+263
-152
lines changed

6 files changed

+263
-152
lines changed

‎core/src/components/modal/animations/ios.enter.ts‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -41,50 +41,50 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
4141
.addElement(baseEl)
4242
.easing('cubic-bezier(0.32,0.72,0,1)')
4343
.duration(500)
44-
.addAnimation([wrapperAnimation])
45-
.beforeAddWrite(() => {
46-
if (expandToScroll) {
47-
// Scroll can only be done when the modal is fully expanded.
48-
return;
49-
}
50-
51-
/**
52-
* There are some browsers that causes flickering when
53-
* dragging the content when scroll is enabled at every
54-
* breakpoint. This is due to the wrapper element being
55-
* transformed off the screen and having a snap animation.
56-
*
57-
* A workaround is to clone the footer element and append
58-
* it outside of the wrapper element. This way, the footer
59-
* is still visible and the drag can be done without
60-
* flickering. The original footer is hidden until the modal
61-
* is dismissed. This maintains the animation of the footer
62-
* when the modal is dismissed.
63-
*
64-
* The workaround needs to be done before the animation starts
65-
* so there are no flickering issues.
66-
*/
67-
const ionFooter = baseEl.querySelector('ion-footer');
68-
/**
69-
* This check is needed to prevent more than one footer
70-
* from being appended to the shadow root.
71-
* Otherwise, iOS and MD enter animations would append
72-
* the footer twice.
73-
*/
74-
const ionFooterAlreadyAppended = baseEl.shadowRoot!.querySelector('ion-footer');
75-
if (ionFooter && !ionFooterAlreadyAppended) {
76-
const footerHeight = ionFooter.clientHeight;
77-
const clonedFooter = ionFooter.cloneNode(true) as HTMLIonFooterElement;
78-
79-
baseEl.shadowRoot!.appendChild(clonedFooter);
80-
ionFooter.style.setProperty('display', 'none');
81-
ionFooter.setAttribute('aria-hidden', 'true');
82-
83-
// Padding is added to prevent some content from being hidden.
84-
const page = baseEl.querySelector('.ion-page') as HTMLElement;
85-
page.style.setProperty('padding-bottom', `${footerHeight}px`);
86-
}
87-
});
44+
.addAnimation([wrapperAnimation]);
45+
// .beforeAddWrite(() => {
46+
// if (expandToScroll) {
47+
// // Scroll can only be done when the modal is fully expanded.
48+
// return;
49+
// }
50+
51+
// /**
52+
// * There are some browsers that causes flickering when
53+
// * dragging the content when scroll is enabled at every
54+
// * breakpoint. This is due to the wrapper element being
55+
// * transformed off the screen and having a snap animation.
56+
// *
57+
// * A workaround is to clone the footer element and append
58+
// * it outside of the wrapper element. This way, the footer
59+
// * is still visible and the drag can be done without
60+
// * flickering. The original footer is hidden until the modal
61+
// * is dismissed. This maintains the animation of the footer
62+
// * when the modal is dismissed.
63+
// *
64+
// * The workaround needs to be done before the animation starts
65+
// * so there are no flickering issues.
66+
// */
67+
// const ionFooter = baseEl.querySelector('ion-footer');
68+
// /**
69+
// * This check is needed to prevent more than one footer
70+
// * from being appended to the shadow root.
71+
// * Otherwise, iOS and MD enter animations would append
72+
// * the footer twice.
73+
// */
74+
// const ionFooterAlreadyAppended = baseEl.shadowRoot!.querySelector('ion-footer');
75+
// if (ionFooter && !ionFooterAlreadyAppended) {
76+
// const footerHeight = ionFooter.clientHeight;
77+
// const clonedFooter = ionFooter.cloneNode(true) as HTMLIonFooterElement;
78+
79+
// baseEl.shadowRoot!.appendChild(clonedFooter);
80+
// ionFooter.style.setProperty('display', 'none');
81+
// ionFooter.setAttribute('aria-hidden', 'true');
82+
83+
// // Padding is added to prevent some content from being hidden.
84+
// const page = baseEl.querySelector('.ion-page') as HTMLElement;
85+
// page.style.setProperty('padding-bottom', `${footerHeight}px`);
86+
// }
87+
// });
8888

8989
if (contentAnimation) {
9090
baseAnimation.addAnimation(contentAnimation);

‎core/src/components/modal/animations/ios.leave.ts‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -32,33 +32,33 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio
3232
.addElement(baseEl)
3333
.easing('cubic-bezier(0.32,0.72,0,1)')
3434
.duration(duration)
35-
.addAnimation(wrapperAnimation)
36-
.beforeAddWrite(() => {
37-
if (expandToScroll) {
38-
// Scroll can only be done when the modal is fully expanded.
39-
return;
40-
}
41-
42-
/**
43-
* If expandToScroll is disabled, we need to swap
44-
* the visibility to the original, so the footer
45-
* dismisses with the modal and doesn't stay
46-
* until the modal is removed from the DOM.
47-
*/
48-
const ionFooter = baseEl.querySelector('ion-footer');
49-
if (ionFooter) {
50-
const clonedFooter = baseEl.shadowRoot!.querySelector('ion-footer')!;
51-
52-
ionFooter.style.removeProperty('display');
53-
ionFooter.removeAttribute('aria-hidden');
54-
55-
clonedFooter.style.setProperty('display', 'none');
56-
clonedFooter.setAttribute('aria-hidden', 'true');
57-
58-
const page = baseEl.querySelector('.ion-page') as HTMLElement;
59-
page.style.removeProperty('padding-bottom');
60-
}
61-
});
35+
.addAnimation(wrapperAnimation);
36+
// .beforeAddWrite(() => {
37+
// if (expandToScroll) {
38+
// // Scroll can only be done when the modal is fully expanded.
39+
// return;
40+
// }
41+
42+
// /**
43+
// * If expandToScroll is disabled, we need to swap
44+
// * the visibility to the original, so the footer
45+
// * dismisses with the modal and doesn't stay
46+
// * until the modal is removed from the DOM.
47+
// */
48+
// const ionFooter = baseEl.querySelector('ion-footer');
49+
// if (ionFooter) {
50+
// const clonedFooter = baseEl.shadowRoot!.querySelector('ion-footer')!;
51+
52+
// ionFooter.style.removeProperty('display');
53+
// ionFooter.removeAttribute('aria-hidden');
54+
55+
// clonedFooter.style.setProperty('display', 'none');
56+
// clonedFooter.setAttribute('aria-hidden', 'true');
57+
58+
// const page = baseEl.querySelector('.ion-page') as HTMLElement;
59+
// page.style.removeProperty('padding-bottom');
60+
// }
61+
// });
6262

6363
if (presentingEl) {
6464
const isMobile = window.innerWidth < 768;

‎core/src/components/modal/animations/md.enter.ts‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -43,50 +43,50 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOption
4343
.addElement(baseEl)
4444
.easing('cubic-bezier(0.36,0.66,0.04,1)')
4545
.duration(280)
46-
.addAnimation([backdropAnimation, wrapperAnimation])
47-
.beforeAddWrite(() => {
48-
if (expandToScroll) {
49-
// Scroll can only be done when the modal is fully expanded.
50-
return;
51-
}
46+
.addAnimation([backdropAnimation, wrapperAnimation]);
47+
// .beforeAddWrite(() => {
48+
// if (expandToScroll) {
49+
// // Scroll can only be done when the modal is fully expanded.
50+
// return;
51+
// }
5252

53-
/**
54-
* There are some browsers that causes flickering when
55-
* dragging the content when scroll is enabled at every
56-
* breakpoint. This is due to the wrapper element being
57-
* transformed off the screen and having a snap animation.
58-
*
59-
* A workaround is to clone the footer element and append
60-
* it outside of the wrapper element. This way, the footer
61-
* is still visible and the drag can be done without
62-
* flickering. The original footer is hidden until the modal
63-
* is dismissed. This maintains the animation of the footer
64-
* when the modal is dismissed.
65-
*
66-
* The workaround needs to be done before the animation starts
67-
* so there are no flickering issues.
68-
*/
69-
const ionFooter = baseEl.querySelector('ion-footer');
70-
/**
71-
* This check is needed to prevent more than one footer
72-
* from being appended to the shadow root.
73-
* Otherwise, iOS and MD enter animations would append
74-
* the footer twice.
75-
*/
76-
const ionFooterAlreadyAppended = baseEl.shadowRoot!.querySelector('ion-footer');
77-
if (ionFooter && !ionFooterAlreadyAppended) {
78-
const footerHeight = ionFooter.clientHeight;
79-
const clonedFooter = ionFooter.cloneNode(true) as HTMLIonFooterElement;
53+
// /**
54+
// * There are some browsers that causes flickering when
55+
// * dragging the content when scroll is enabled at every
56+
// * breakpoint. This is due to the wrapper element being
57+
// * transformed off the screen and having a snap animation.
58+
// *
59+
// * A workaround is to clone the footer element and append
60+
// * it outside of the wrapper element. This way, the footer
61+
// * is still visible and the drag can be done without
62+
// * flickering. The original footer is hidden until the modal
63+
// * is dismissed. This maintains the animation of the footer
64+
// * when the modal is dismissed.
65+
// *
66+
// * The workaround needs to be done before the animation starts
67+
// * so there are no flickering issues.
68+
// */
69+
// const ionFooter = baseEl.querySelector('ion-footer');
70+
// /**
71+
// * This check is needed to prevent more than one footer
72+
// * from being appended to the shadow root.
73+
// * Otherwise, iOS and MD enter animations would append
74+
// * the footer twice.
75+
// */
76+
// const ionFooterAlreadyAppended = baseEl.shadowRoot!.querySelector('ion-footer');
77+
// if (ionFooter && !ionFooterAlreadyAppended) {
78+
// const footerHeight = ionFooter.clientHeight;
79+
// const clonedFooter = ionFooter.cloneNode(true) as HTMLIonFooterElement;
8080

81-
baseEl.shadowRoot!.appendChild(clonedFooter);
82-
ionFooter.style.setProperty('display', 'none');
83-
ionFooter.setAttribute('aria-hidden', 'true');
81+
// baseEl.shadowRoot!.appendChild(clonedFooter);
82+
// ionFooter.style.setProperty('display', 'none');
83+
// ionFooter.setAttribute('aria-hidden', 'true');
8484

85-
// Padding is added to prevent some content from being hidden.
86-
const page = baseEl.querySelector('.ion-page') as HTMLElement;
87-
page.style.setProperty('padding-bottom', `${footerHeight}px`);
88-
}
89-
});
85+
// // Padding is added to prevent some content from being hidden.
86+
// const page = baseEl.querySelector('.ion-page') as HTMLElement;
87+
// page.style.setProperty('padding-bottom', `${footerHeight}px`);
88+
// }
89+
// });
9090

9191
if (contentAnimation) {
9292
baseAnimation.addAnimation(contentAnimation);

‎core/src/components/modal/animations/md.leave.ts‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,33 +32,33 @@ export const mdLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOption
3232
const baseAnimation = createAnimation()
3333
.easing('cubic-bezier(0.47,0,0.745,0.715)')
3434
.duration(200)
35-
.addAnimation([backdropAnimation, wrapperAnimation])
36-
.beforeAddWrite(() => {
37-
if (expandToScroll) {
38-
// Scroll can only be done when the modal is fully expanded.
39-
return;
40-
}
35+
.addAnimation([backdropAnimation, wrapperAnimation]);
36+
// .beforeAddWrite(() => {
37+
// if (expandToScroll) {
38+
// // Scroll can only be done when the modal is fully expanded.
39+
// return;
40+
// }
4141

42-
/**
43-
* If expandToScroll is disabled, we need to swap
44-
* the visibility to the original, so the footer
45-
* dismisses with the modal and doesn't stay
46-
* until the modal is removed from the DOM.
47-
*/
48-
const ionFooter = baseEl.querySelector('ion-footer');
49-
if (ionFooter) {
50-
const clonedFooter = baseEl.shadowRoot!.querySelector('ion-footer')!;
42+
// /**
43+
// * If expandToScroll is disabled, we need to swap
44+
// * the visibility to the original, so the footer
45+
// * dismisses with the modal and doesn't stay
46+
// * until the modal is removed from the DOM.
47+
// */
48+
// const ionFooter = baseEl.querySelector('ion-footer');
49+
// if (ionFooter) {
50+
// const clonedFooter = baseEl.shadowRoot!.querySelector('ion-footer')!;
5151

52-
ionFooter.style.removeProperty('display');
53-
ionFooter.removeAttribute('aria-hidden');
52+
// ionFooter.style.removeProperty('display');
53+
// ionFooter.removeAttribute('aria-hidden');
5454

55-
clonedFooter.style.setProperty('display', 'none');
56-
clonedFooter.setAttribute('aria-hidden', 'true');
55+
// clonedFooter.style.setProperty('display', 'none');
56+
// clonedFooter.setAttribute('aria-hidden', 'true');
5757

58-
const page = baseEl.querySelector('.ion-page') as HTMLElement;
59-
page.style.removeProperty('padding-bottom');
60-
}
61-
});
58+
// const page = baseEl.querySelector('.ion-page') as HTMLElement;
59+
// page.style.removeProperty('padding-bottom');
60+
// }
61+
// });
6262

6363
return baseAnimation;
6464
};

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -128,23 +128,23 @@ export const createSheetGesture = (
128128
return;
129129
}
130130

131-
const clonedFooter = wrapperEl.nextElementSibling as HTMLIonFooterElement;
132-
const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
133-
const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
134-
135-
footerToShow.style.removeProperty('display');
136-
footerToShow.removeAttribute('aria-hidden');
137-
138-
const page = baseEl.querySelector('.ion-page') as HTMLElement;
139-
if (footer === 'original') {
140-
page.style.removeProperty('padding-bottom');
141-
} else {
142-
const pagePadding = footerToShow.clientHeight;
143-
page.style.setProperty('padding-bottom', `${pagePadding}px`);
144-
}
145-
146-
footerToHide.style.setProperty('display', 'none');
147-
footerToHide.setAttribute('aria-hidden', 'true');
131+
// const clonedFooter = wrapperEl.nextElementSibling as HTMLIonFooterElement;
132+
// const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
133+
// const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
134+
135+
// footerToShow.style.removeProperty('display');
136+
// footerToShow.removeAttribute('aria-hidden');
137+
138+
// const page = baseEl.querySelector('.ion-page') as HTMLElement;
139+
// if (footer === 'original') {
140+
// page.style.removeProperty('padding-bottom');
141+
// } else {
142+
// const pagePadding = footerToShow.clientHeight;
143+
// page.style.setProperty('padding-bottom', `${pagePadding}px`);
144+
// }
145+
146+
// footerToHide.style.setProperty('display', 'none');
147+
// footerToHide.setAttribute('aria-hidden', 'true');
148148
};
149149

150150
/**

0 commit comments

Comments
 (0)