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

MOBILE-3833 usertours: Watch collapsible header

main
Noel De Martin 2022-04-22 09:14:09 +02:00
parent c644eeb1e1
commit 740b5332ce
2 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,11 +23,26 @@ import { ScrollDetail } from '@ionic/core';
import { CoreUtils } from '@services/utils/utils';
import { CoreComponentsRegistry } from '@singletons/components-registry';
import { CoreDom } from '@singletons/dom';
import { CoreEventObserver } from '@singletons/events';
import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { CoreMath } from '@singletons/math';
import { Subscription } from 'rxjs';
import { CoreFormatTextDirective } from './format-text';
declare module '@singletons/events' {
/**
* Augment CoreEventsData interface with events specific to this service.
*
* @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
*/
export interface CoreEventsData {
[COLLAPSIBLE_HEADER_UPDATED]: { collapsed: boolean };
}
}
export const COLLAPSIBLE_HEADER_UPDATED = 'collapsible_header_updated';
/**
* Directive to make <ion-header> collapsible.
*
@ -151,6 +166,27 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
this.visiblePromise?.cancel();
}
/**
* Update collapsed status of the header.
*
* @param collapsed Whether header is collapsed or not.
*/
protected setCollapsed(collapsed: boolean): void {
if (!this.page) {
return;
}
const isCollapsed = this.page.classList.contains('collapsible-header-page-is-collapsed');
if (isCollapsed === collapsed) {
return;
}
this.page.classList.toggle('collapsible-header-page-is-collapsed', collapsed);
CoreEvents.trigger(COLLAPSIBLE_HEADER_UPDATED, { collapsed });
}
/**
* Listen to changing events.
*/
@ -458,8 +494,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
}
}
this.setCollapsed(!enable);
this.page.style.setProperty('--collapsible-header-progress', enable ? '0' : '1');
this.page.classList.toggle('collapsible-header-page-is-collapsed', !enable);
}
/**
@ -523,9 +559,9 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
? 0
: CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
this.setCollapsed(progress === 1);
page.style.setProperty('--collapsible-header-progress', `${progress}`);
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)
@ -547,8 +583,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
const scrollTop = contentScroll.scrollTop;
const collapse = progress > 0.5;
this.setCollapsed(collapse);
page.style.setProperty('--collapsible-header-progress', collapse ? '1' : '0');
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);

6
src/core/features/usertours/components/user-tour/user-tour.ts
View File

@ -34,6 +34,7 @@ import { CoreComponentsRegistry } from '@singletons/components-registry';
import { CoreDom } from '@singletons/dom';
import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { CoreMainMenuProvider } from '@features/mainmenu/services/mainmenu';
import { COLLAPSIBLE_HEADER_UPDATED } from '@directives/collapsible-header';
const ANIMATION_DURATION = 200;
const USER_TOURS_BACK_BUTTON_PRIORITY = 100;
@ -71,6 +72,7 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
private wrapperTransform = '';
private wrapperElement = new CorePromisedValue<HTMLElement>();
private backButtonListener?: (event: BackButtonEvent) => void;
protected collapsibleHeaderListener?: CoreEventObserver;
protected mainMenuListener?: CoreEventObserver;
protected resizeListener?: CoreEventObserver;
protected scrollListener?: EventListener;
@ -252,6 +254,8 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
return;
}
this.collapsibleHeaderListener = this.collapsibleHeaderListener ??
CoreEvents.on(COLLAPSIBLE_HEADER_UPDATED, () => this.calculateStyles());
this.mainMenuListener = this.mainMenuListener ??
CoreEvents.on(CoreMainMenuProvider.MAIN_MENU_VISIBILITY_UPDATED, () => this.calculateStyles());
this.resizeListener = this.resizeListener ?? CoreDom.onWindowResize(() => this.calculateStyles());
@ -276,10 +280,12 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
this.active = false;
this.collapsibleHeaderListener?.off();
this.mainMenuListener?.off();
this.resizeListener?.off();
this.backButtonListener && document.removeEventListener('ionBackButton', this.backButtonListener);
this.backButtonListener = undefined;
this.collapsibleHeaderListener = undefined;
this.mainMenuListener = undefined;
this.resizeListener = undefined;