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');
}
this.page.classList.remove('is-active');
this.page.classList.remove('collapsible-header-page-is-active');
CoreUtils.nextTick();
// 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));
// Activate styles.
this.page.classList.add('is-active');
this.page.classList.add('collapsible-header-page-is-active');
this.floatingTitle = floatingTitle;
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.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 ||
!floatingTitle
) {
page?.classList.remove('collapsible-header-page-is-active');
throw new Error('[collapsible-header] Couldn\'t set up scrolling');
}
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);
Object
@ -440,8 +441,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
: CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
page.style.setProperty('--collapsible-header-progress', `${progress}`);
page.classList.toggle('is-frozen', frozen);
page.classList.toggle('is-collapsed', progress === 1);
page.classList.toggle('collapsible-header-page-is-frozen', frozen);
page.classList.toggle('collapsible-header-page-is-collapsed', progress === 1);
Object
.entries(progress > .5 ? collapsedFontStyles : expandedFontStyles)
@ -455,7 +456,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
return;
}
if (page.classList.contains('is-frozen')) {
if (page.classList.contains('collapsible-header-page-is-frozen')) {
return;
}
@ -464,7 +465,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
const collapse = progress > 0.5;
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) {
this.content?.scrollToPoint(null, this.scrollingHeight);

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

@ -25,7 +25,7 @@
opacity: 0;
}
&:not(.is-collapsed) .collapsible-header-collapsed {
&:not(.collapsible-header-page-is-collapsed) .collapsible-header-collapsed {
--core-header-toolbar-border-width: 0;
ion-toolbar {
--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);
}
&.is-active {
&.collapsible-header-page-is-active {
.collapsible-header-expanded {
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 {
--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 {
display: none;