diff --git a/src/app/services/util/onboarding.service.ts b/src/app/services/util/onboarding.service.ts index bcfe80bd279377ed96ab30addd1effa82ee76e19..d884ebffe67445438de131a3d7ead6e85c7e03e5 100644 --- a/src/app/services/util/onboarding.service.ts +++ b/src/app/services/util/onboarding.service.ts @@ -63,7 +63,8 @@ export class OnboardingService { //Route gets switched const name = this._activeTour.name; const routeChecker = this._activeTour.checkIfRouteCanBeAccessed; - this.cancelTour(false); + this.cleanup(); + this.joyrideService.closeTour(); this.dataStoreService.set('onboarding_' + name, JSON.stringify({ state: 'running', step: this._currentStep + stepDirection @@ -74,16 +75,6 @@ export class OnboardingService { return false; } - cancelTour(writeCanceled = true) { - if (writeCanceled) { - this.dataStoreService.set('onboarding_' + this._activeTour.name, JSON.stringify({ state: 'canceled' })); - } - this.cleanup(); - document.querySelector('joyride-step').remove(); - document.querySelector('body > div.backdrop-container').remove(); - this.joyrideService.closeTour(); - } - private startOnboardingTour(tour: OnboardingTour, ignoreDone = false): boolean { if (this._activeTour) { this.cleanup(); @@ -108,9 +99,10 @@ export class OnboardingService { this._activeTour.startupAction(); } this.emulateWalkthrough(); + window.addEventListener('keyup', this._keyUpWrapper); this._tourSubscription = this.joyrideService.startTour({ steps: tour.tour, - logsEnabled: true, + logsEnabled: false, stepDefaultPosition: 'center', startWith: this._activeTour.tour[this._currentStep - 1] }).subscribe(step => this.afterStepMade(step)); @@ -191,12 +183,38 @@ export class OnboardingService { if (this._activeTour.doneAction) { this._activeTour.doneAction(action === 'finished'); } - this.cleanup(); + this.cleanup(true); } - private cleanup() { - this._tourSubscription.unsubscribe(); + private cleanup(finished = false) { this._eventServiceSubscription.unsubscribe(); this._activeTour = null; + if (finished) { + this._tourSubscription.unsubscribe(); + window.removeEventListener('keyup', this._keyUpWrapper); + } + } + + private _keyUpWrapper = (e: KeyboardEvent) => this.onKeyUp(e); + + private onKeyUp(e: KeyboardEvent) { + if (!this._activeTour) { + e.stopImmediatePropagation(); + return; + } + if (e.key === 'ArrowLeft') { + if (this._currentStep < 2 || this.doStep(-1)) { + e.stopImmediatePropagation(); + } + } else if (e.key === 'ArrowRight') { + if (this._currentStep < this._activeTour.tour.length && this.doStep(1)) { + e.stopImmediatePropagation(); + } else if (this._currentStep === this._activeTour.tour.length) { + this.eventService.broadcast('onboarding', 'finished'); + } + } else if (e.key === 'Escape') { + e.stopImmediatePropagation(); + this.joyrideService.closeTour(); + } } }