Classes

Functions

Typedefs

language(lang) ⇒ TooEasyRial

Imposta la lingua del tutorial.

Questo metodo consente di cambiare la lingua del tutorial in base al parametro fornito. La lingua sarà utilizzata per localizzare il contenuto, i messaggi e le interazioni del tutorial. Di default viene impostata la lingua 'IT'

Kind: global function
Returns: TooEasyRial - L'istanza corrente per il chaining dei metodi.

| Param | Type | Description | | --- | --- | --- | | lang | string | Il codice della lingua da impostare, ad esempio "it" per l'italiano o "en" per l'inglese. |

Example

const tutorial = new TooEasyRial("#container", "https://api.example.com/tutorial.json").language("en");

genNotification([text], [autoDestroyMs]) ⇒ void

Crea e visualizza una notifica per il tutorial.

Questo metodo crea una notifica dinamica che viene mostrata nella sezione delle notifiche del tutorial. La notifica viene automaticamente rimossa dopo il tempo specificato in millisecondi. Se non viene specificato un tempo di distruzione, la notifica verrà rimossa dopo 2500 millisecondi (2.5 secondi).

Kind: global function
Returns: void - Non restituisce un valore, ma modifica direttamente il DOM per mostrare la notifica.

| Param | Type | Default | Description | | --- | --- | --- | --- | | [text] | string | "`Step N. ${this.counter + 1} non visualizzabile`" | Il testo da visualizzare nella notifica. Se non viene fornito, il testo predefinito indicherà che il passo corrente non è visualizzabile. | | [autoDestroyMs] | number | null | 2500 | Il tempo (in millisecondi) dopo il quale la notifica verrà automaticamente rimossa. Se il valore è maggiore di zero, la notifica verrà rimossa dopo il tempo specificato. |

Example

const tutorial = new TooEasyRial("#container", "https://api.example.com/tutorial");
tutorial.genNotification("Questo è un messaggio di notifica.", 3000); // La notifica scomparirà dopo 3 secondi.

goToNextStep() ⇒ boolean

Naviga al passo successivo del tutorial.

Questo metodo incrementa il contatore del passo e naviga al passo successivo. Se il passo corrente è l'ultimo, il contatore non verrà incrementato. La navigazione è gestita dal metodo goToStep(), che aggiorna lo stato del tutorial e la visualizzazione del passo.

Kind: global function
Returns: boolean - Restituisce true se la navigazione al passo successivo è avvenuta correttamente, altrimenti false (ad esempio, se non è possibile navigare oltre l'ultimo passo).
Example

const tutorial = new TooEasyRial("#container", "https://api.example.com/tutorial");
tutorial.goToNextStep(); // Naviga al passo successivo.

goToPrevStep() ⇒ boolean

Naviga al passo precedente del tutorial.

Questo metodo riduce il contatore del passo e naviga indietro al passo precedente. Se il passo corrente è il primo, il contatore viene resettato a 0. La navigazione è gestita dal metodo goToStep(), che aggiorna lo stato del tutorial e la visualizzazione del passo.

Kind: global function
Returns: boolean - Restituisce true se la navigazione al passo precedente è avvenuta correttamente, altrimenti false (ad esempio, se non è possibile navigare oltre il primo passo).
Example

const tutorial = new TooEasyRial("#container", "https://api.example.com/tutorial");
tutorial.goToPrevStep(); // Naviga al passo precedente.

goToStep(counter, [skipToNext]) ⇒ void

Naviga verso un passo specifico del tutorial e aggiorna il progresso.

Questo metodo si occupa di verificare se l'elemento relativo al passo è visibile. Se non lo è, viene mostrata una notifica e, a seconda del parametro skipToNext, il tutorial prosegue al passo successivo o precedente. Se l'elemento è visibile, aggiorna lo stato del tutorial e crea una "maschera" per il passo corrente.

Kind: global function
Returns: void - Non restituisce un valore, ma modifica direttamente lo stato e il DOM per aggiornare il tutorial.

| Param | Type | Default | Description | | --- | --- | --- | --- | | counter | number | | L'indice del passo a cui navigare nella lista dei passi. | | [skipToNext] | boolean | true | Se true, salta al passo successivo se il passo corrente non è visibile. Se false, salta al passo precedente. |

Example

const tutorial = new TooEasyRial("#container", "https://api.example.com/tutorial");
tutorial.goToStep(2); // Naviga al terzo passo.

autoplay() ⇒ void

Avvia la modalità autoplay per il tutorial, proseguendo automaticamente tra i passi.

Questo metodo nasconde il pulsante di autoplay e mostra il pulsante per fermarlo. Inoltre, gestisce la barra di progresso che si aggiorna durante l'autoplay. Se il passo corrente non è visibile o se si arriva all'ultimo passo, l'autoplay si ferma automaticamente. La durata di ogni passo può essere configurata tramite autoPlayTimerMs nel file json di configurazione.

Kind: global function
Returns: void - Non restituisce un valore, ma avvia la modalità autoplay e aggiorna il DOM per riflettere il cambiamento.
Example

const tutorial = new TooEasyRial("#container", "https://api.example.com/tutorial");
tutorial.autoplay(); // Avvia l'autoplay del tutorial.

stopAutoplay() ⇒ void

Ferma la modalità autoplay del tutorial e ripristina lo stato del tutorial.

Questo metodo nasconde il pulsante per fermare l'autoplay e mostra nuovamente il pulsante per avviarlo. Inoltre, ferma l'intervallo di autoplay e ripristina la barra di progresso al suo stato iniziale.

Kind: global function
Returns: void - Non restituisce un valore, ma ferma l'autoplay e ripristina il DOM per riflettere il cambiamento.
Example

const tutorial = new TooEasyRial("#container", "https://api.example.com/tutorial");
tutorial.stopAutoplay(); // Ferma l'autoplay del tutorial.

destroy() ⇒ void

Distrugge e rimuove il tutorial dal DOM, e ripristina gli event listener.

Questo metodo avvia un'animazione di uscita sul contenitore del tutorial, rimuove l'event listener associato alla pressione dei tasti e distrugge il contenitore del tutorial dal DOM. Una volta completata l'animazione, il tutorial viene rimosso definitivamente.

Kind: global function
Returns: void - Non restituisce un valore, ma rimuove il tutorial e le risorse associate dal DOM.
Example

const tutorial = new TooEasyRial("#container", "https://api.example.com/tutorial");
tutorial.destroy(); // Distrugge il tutorial e lo rimuove dal DOM.

keydown(e) ⇒ void

Gestisce gli eventi di pressione dei tasti durante il tutorial.

Questo metodo è legato all'evento keydown e gestisce le seguenti azioni in base al tasto premuto:

• Freccia sinistra (←): Naviga al passo precedente.
• Freccia destra (→): Naviga al passo successivo.
• Esc: Distrugge il tutorial e rimuove il tutorial dal DOM.
• Barra spaziatrice: Avvia o ferma l'autoplay del tutorial.

Kind: global function
Returns: void - Non restituisce un valore, ma esegue l'azione appropriata in base al tasto premuto.

| Param | Type | Description | | --- | --- | --- | | e | KeyboardEvent | L'evento di pressione del tasto. |

Example

// Aggiunge l'event listener per la gestione dei tasti
document.addEventListener("keydown", tutorial.keydown);

// Gestisce i tasti per:
// Freccia sinistra: passo precedente
// Freccia destra: passo successivo
// Esc: distruggere il tutorial
// Barra spaziatrice: avviare o fermare l'autoplay

tooEasyRialJSONexample : Object

Struttura del file JSON di configurazione del tutorial.

Kind: global typedef
Properties

| Name | Type | Description | | --- | --- | --- | | fontFamily | string | La famiglia del font per il testo. | | bgColor | string | Il colore del tutorial in formato rgba. | | autoPlayTimerMs | number | Il tempo di attesa (in millisecondi) prima che il balloon successivo venga mostrata automaticamente. | | showNotification | boolean | Indica se le notifiche devono essere visualizzate. | | list | Array.<stepList> | La lista degli step da visualizzare. |

stepList : Object

Struttura di ciascun elemento step.

Kind: global typedef
Properties

| Name | Type | Description | | --- | --- | --- | | selector | string | Il selettore CSS dell'elemento a cui applicare il balloon. | | position | string | La posizione del balloon (es. "right", "bottom", "left", "top"). | | [positionMobile] | string | La posizione del balloon sui dispositivi mobili (opzionale). | | message | string | Object | Il messaggio del balloon. Può essere una stringa o un oggetto di tipo {"it": "foo", "en": "foo_en"}. Il messaggio può contenere blocchi di html con un padre comune | | [notificationMessage] | string | Object | Il messaggio della notifica. Può essere una stringa o un oggetto di tipo {"it": "foo", "en": "foo_en"}. Il messaggio può contenere blocchi di html con un padre comune |