@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
62 lines (61 loc) • 2.99 kB
JavaScript
// SPDX-License-Identifier: Apache-2.0
import { driver } from 'driver.js';
import GirafeSingleton from '../../base/GirafeSingleton.js';
import 'driver.js/dist/driver.css';
export default class OnBoardingManager extends GirafeSingleton {
get config() {
return this.context.configManager.Config;
}
STORAGE_PATH = 'onboardingTourAlreadyDone';
async restart() {
this.context.userDataManager.saveUserData(this.STORAGE_PATH, 'false');
return this.start();
}
async start() {
if (!this.config.onboarding) {
// No tour configured
return;
}
await this.context.i18nManager.ensureTranslationLoaded();
const tourAlreadyDone = this.context.userDataManager.getUserData(this.STORAGE_PATH) || 'false';
if (tourAlreadyDone !== 'true') {
const onboardingDriver = driver({
popoverClass: 'girafe-onboarding-theme',
showProgress: true,
onDestroyed: (_element, _step, _options) => {
this.context.userDataManager.saveUserData(this.STORAGE_PATH, 'true');
},
nextBtnText: this.context.i18nManager.getTranslation('onboarding-next-button-text'),
prevBtnText: this.context.i18nManager.getTranslation('onboarding-previous-button-text'),
doneBtnText: this.context.i18nManager.getTranslation('onboarding-done-button-text'),
progressText: this.context.i18nManager.getTranslation('onboarding-progress-text')
});
const steps = [];
for (const stepConfig of this.config.onboarding.steps ?? []) {
let element;
if (stepConfig.component) {
// @ts-expect-error getChildElement is protected, but we do not want to make it public,
// because we should not give access to the shadow from from outside.
// The onboarding is a very special case, because we want to be able
// to focus an HTML element inside the shadow dom, to show help text.
// So this should be the only exception to this protected access.
// prettier-ignore
element = this.context.componentManager.getComponentsByName(stepConfig.component)[0].getChildElement(stepConfig.element) ?? undefined;
}
else {
element = stepConfig.element;
}
const step = {
element: element,
popover: {
title: this.context.i18nManager.getTranslation(stepConfig.title),
description: this.context.i18nManager.getTranslation(stepConfig.description)
}
};
steps.push(step);
}
onboardingDriver.setSteps(steps);
onboardingDriver.drive();
}
}
}