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

MOBILE-3814 collapsible: Deactivate collapsible if something went wrong

main
Pau Ferrer Ocaña 2022-03-15 11:34:03 +01:00
parent b364f6382b
commit b475bd840a
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -228,7 +228,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
throw new Error('[collapsible-header] Couldn\'t create floating title'); throw new Error('[collapsible-header] Couldn\'t create floating title');
} }
this.page.classList.remove('is-active'); this.page.classList.remove('collapsible-header-page-is-active');
CoreUtils.nextTick(); CoreUtils.nextTick();
// Add floating title and measure initial position. // Add floating title and measure initial position.
@ -293,7 +293,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
.forEach(([property, value]) => floatingTitle.style.setProperty(property, value as string)); .forEach(([property, value]) => floatingTitle.style.setProperty(property, value as string));
// Activate styles. // Activate styles.
this.page.classList.add('is-active'); this.page.classList.add('collapsible-header-page-is-active');
this.floatingTitle = floatingTitle; this.floatingTitle = floatingTitle;
this.scrollingHeight = originalTitleBoundingBox.top - collapsedHeaderTitleBoundingBox.top; this.scrollingHeight = originalTitleBoundingBox.top - collapsedHeaderTitleBoundingBox.top;
@ -376,7 +376,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
} }
this.page.style.setProperty('--collapsible-header-progress', enable ? '0' : '1'); this.page.style.setProperty('--collapsible-header-progress', enable ? '0' : '1');
this.page.classList.toggle('is-collapsed', !enable); this.page.classList.toggle('collapsible-header-page-is-collapsed', !enable);
} }
/** /**
@ -409,11 +409,12 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
!collapsedFontStyles || !collapsedFontStyles ||
!floatingTitle !floatingTitle
) { ) {
page?.classList.remove('collapsible-header-page-is-active');
throw new Error('[collapsible-header] Couldn\'t set up scrolling'); throw new Error('[collapsible-header] Couldn\'t set up scrolling');
} }
this.isWithinContent = content.contains(expandedHeader); this.isWithinContent = content.contains(expandedHeader);
page.classList.toggle('is-within-content', this.isWithinContent); page.classList.toggle('collapsible-header-page-is-within-content', this.isWithinContent);
this.setEnabled(this.enabled); this.setEnabled(this.enabled);
Object Object
@ -440,8 +441,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
: CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1); : CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
page.style.setProperty('--collapsible-header-progress', `${progress}`); page.style.setProperty('--collapsible-header-progress', `${progress}`);
page.classList.toggle('is-frozen', frozen); page.classList.toggle('collapsible-header-page-is-frozen', frozen);
page.classList.toggle('is-collapsed', progress === 1); page.classList.toggle('collapsible-header-page-is-collapsed', progress === 1);
Object Object
.entries(progress > .5 ? collapsedFontStyles : expandedFontStyles) .entries(progress > .5 ? collapsedFontStyles : expandedFontStyles)
@ -455,7 +456,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
return; return;
} }
if (page.classList.contains('is-frozen')) { if (page.classList.contains('collapsible-header-page-is-frozen')) {
return; return;
} }
@ -464,7 +465,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
const collapse = progress > 0.5; const collapse = progress > 0.5;
page.style.setProperty('--collapsible-header-progress', collapse ? '1' : '0'); page.style.setProperty('--collapsible-header-progress', collapse ? '1' : '0');
page.classList.toggle('is-collapsed', collapse); page.classList.toggle('collapsible-header-page-is-collapsed', collapse);
if (collapse && this.scrollingHeight && this.scrollingHeight > 0 && scrollTop < this.scrollingHeight) { if (collapse && this.scrollingHeight && this.scrollingHeight > 0 && scrollTop < this.scrollingHeight) {
this.content?.scrollToPoint(null, this.scrollingHeight); this.content?.scrollToPoint(null, this.scrollingHeight);

10
src/theme/components/collapsible-header.scss
View File

@ -25,7 +25,7 @@
opacity: 0; opacity: 0;
} }
&:not(.is-collapsed) .collapsible-header-collapsed { &:not(.collapsible-header-page-is-collapsed) .collapsible-header-collapsed {
--core-header-toolbar-border-width: 0; --core-header-toolbar-border-width: 0;
ion-toolbar { ion-toolbar {
--background: transparent; --background: transparent;
@ -37,11 +37,11 @@
} }
&.is-active.is-collapsed.is-within-content ion-header.core-header-shadow { &.collapsible-header-page-is-active.collapsible-header-page-is-collapsed.collapsible-header-page-is-within-content ion-header.core-header-shadow {
--core-header-shadow: var(--drop-shadow-bottom, none); --core-header-shadow: var(--drop-shadow-bottom, none);
} }
&.is-active { &.collapsible-header-page-is-active {
.collapsible-header-expanded { .collapsible-header-expanded {
height: calc(var(--collapsible-header-expanded-height) * (1 - var(--collapsible-header-progress))); height: calc(var(--collapsible-header-expanded-height) * (1 - var(--collapsible-header-progress)));
@ -75,7 +75,7 @@
} }
&.is-active.is-within-content { &.collapsible-header-page-is-active.collapsible-header-page-is-within-content {
ion-content { ion-content {
--offset-top: var(--collapsible-header-collapsed-height) !important; --offset-top: var(--collapsible-header-collapsed-height) !important;
@ -88,7 +88,7 @@
} }
&.is-active.is-frozen { &.collapsible-header-page-is-active.collapsible-header-page-is-frozen {
.collapsible-header-floating-title { .collapsible-header-floating-title {
display: none; display: none;