EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3833 core: Fix collapsible header when animating

main
Pau Ferrer Ocaña 2021-12-09 12:28:44 +01:00
parent 0ebff55ae3
commit bb2361458a
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/core/directives/collapsible-header.ts
View File

@ -106,6 +106,12 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
return; return;
} }
// Wait animations to finish.
const animations = this.content.getAnimations();
await Promise.all(animations.map(async (animation) => {
await animation.finished;
}));
const title = this.content.querySelector<HTMLElement>('.collapsible-title, h1'); const title = this.content.querySelector<HTMLElement>('.collapsible-title, h1');
const contentH1 = this.content.querySelector<HTMLElement>('h1'); const contentH1 = this.content.querySelector<HTMLElement>('h1');
const headerH1 = this.header.querySelector<HTMLElement>('h1'); const headerH1 = this.header.querySelector<HTMLElement>('h1');
@ -133,11 +139,17 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
const contentH1Styles = getComputedStyle(contentH1); const contentH1Styles = getComputedStyle(contentH1);
if (Platform.isRTL) { if (Platform.isRTL) {
this.h1StartDifference = contentH1.getBoundingClientRect().right - // Checking position over parent because transition may not be finished.
(headerH1.getBoundingClientRect().right - parseFloat(headerH1Styles.paddingRight)); const contentH1Position = contentH1.getBoundingClientRect().right - this.content.getBoundingClientRect().right;
const headerH1Position = headerH1.getBoundingClientRect().right - this.header.getBoundingClientRect().right;
this.h1StartDifference = Math.round(contentH1Position - (headerH1Position - parseFloat(headerH1Styles.paddingRight)));
} else { } else {
this.h1StartDifference = contentH1.getBoundingClientRect().left - // Checking position over parent because transition may not be finished.
(headerH1.getBoundingClientRect().left + parseFloat(headerH1Styles.paddingLeft)); const contentH1Position = contentH1.getBoundingClientRect().left - this.content.getBoundingClientRect().left;
const headerH1Position = headerH1.getBoundingClientRect().left - this.header.getBoundingClientRect().left;
this.h1StartDifference = Math.round(contentH1Position - (headerH1Position + parseFloat(headerH1Styles.paddingLeft)));
} }
this.headerH1FontSize = parseFloat(headerH1Styles.fontSize); this.headerH1FontSize = parseFloat(headerH1Styles.fontSize);
@ -145,7 +157,9 @@ export class CoreCollapsibleHeaderDirective implements OnDestroy {
// Transfer font styles. // Transfer font styles.
Array.from(headerH1Styles).forEach((styleName) => { Array.from(headerH1Styles).forEach((styleName) => {
if (styleName != 'font-size' && (styleName.startsWith('font-') || styleName.startsWith('letter-'))) { if (styleName != 'font-size' &&
styleName != 'font-family' &&
(styleName.startsWith('font-') || styleName.startsWith('letter-'))) {
contentH1.style.setProperty(styleName, headerH1Styles.getPropertyValue(styleName)); contentH1.style.setProperty(styleName, headerH1Styles.getPropertyValue(styleName));
} }
}); });