Il Demo Tour (o tutorial di HORA) si possono attivare semplicemente definendo 2 variabili:
- BCD.config.demoTour.status
- BCD.config.demoTour.id
attraverso la funzione: BCD__demoTour()
Portando lo status a true e defiinendo l’identificativo del demoTour si attiva un component a fine applicativo (che possa fare l’oscuramento della pagina).
Il componement è ovviamente <app-demo-tour che si inizializza se lo status, per l’appunto, è true.
Il demoTour (componente) si attiva imponendo al body la classe “bcd-demo-tour-in-action” e al termine si preoccupa di eliminare tale classe.
A livello di “display” o render del componente si parla solo di un if che si chiede quale demoTour sia stato attivato (sulla base di un identificativo) e una volta identificato il demotour si attiva la parte di hytml che a sua volta carica il componente specifico (demoTour nella cartella demo-tour).
A livello di composizione del tutorial:
- Il titolo viene dato manualmente nell’html del component
- I titoli delle tab sono a loro volta assegnati manualmente per non dover caricare in anticipo i contenuti del tutorial ma solo onDemand al momento dell’attivazione della TAB
- I contenuti delle tab sono i contenuti delle pagine WP e sono caricati in modo asincrono
- Ogni tab può avere un’icona che deve essere inserita in configurazione del DemoTour
Ancoraggi di pagina: rintracciabili attraverso la stringa, (ad es.) [id]=”399″ oppure la funzione “this.appComponent.BCD__demoTourModeIsActive()” portano a visualizzazioni di spiegazioni estemporanee.