CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

Merge pull request #3440 from dpalou/MOBILE-4183

Browse Source 
MOBILE-4183 user-tours: Allow dismissing with backdrop click
This commit is contained in:
Noel De Martin 2022-11-14 12:38:33 +01:00 committed by GitHub
commit a3c404f805
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,7 @@ import { COLLAPSIBLE_HEADER_UPDATED } from '@directives/collapsible-header';
const ANIMATION_DURATION = 200; const ANIMATION_DURATION = 200;
const USER_TOURS_BACK_BUTTON_PRIORITY = 100; const USER_TOURS_BACK_BUTTON_PRIORITY = 100;
const BACKDROP_DISMISS_SAFETY_TRESHOLD = 1000;
/** /**
* User Tour wrapper component. * User Tour wrapper component.
@ -78,11 +79,15 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
protected resizeListener?: CoreEventObserver; protected resizeListener?: CoreEventObserver;
protected scrollListener?: EventListener; protected scrollListener?: EventListener;
protected content?: HTMLIonContentElement | null; protected content?: HTMLIonContentElement | null;
protected lastActivatedTime = 0;
constructor({ nativeElement: element }: ElementRef<HTMLElement>) { constructor({ nativeElement: element }: ElementRef<HTMLElement>) {
this.element = element; this.element = element;
CoreComponentsRegistry.register(element, this); CoreComponentsRegistry.register(element, this);
this.element.addEventListener('click', (event) =>
this.dismissOnBackOrBackdrop(event.target as HTMLElement));
} }
/** /**
@ -238,6 +243,7 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
} }
this.active = true; this.active = true;
this.lastActivatedTime = Date.now();
if (!this.backButtonListener) { if (!this.backButtonListener) {
document.addEventListener( document.addEventListener(
@ -245,7 +251,7 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
this.backButtonListener = ({ detail }) => detail.register( this.backButtonListener = ({ detail }) => detail.register(
USER_TOURS_BACK_BUTTON_PRIORITY, USER_TOURS_BACK_BUTTON_PRIORITY,
() => { () => {
// Silence back button. this.dismissOnBackOrBackdrop();
}, },
), ),
); );
@ -295,4 +301,23 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
} }
} }
/**
* Dismiss the tour because backdrop or back button was clicked.
*
* @param target Element clicked (if any).
*/
protected dismissOnBackOrBackdrop(target?: HTMLElement): void {
if (!this.active || Date.now() - this.lastActivatedTime < BACKDROP_DISMISS_SAFETY_TRESHOLD) {
// Not active or was recently activated, ignore.
return;
}
if (target && target.closest('.user-tour-wrapper')) {
// Click on tour wrapper, don't dismiss.
return;
}
this.dismiss(true);
}
} }