Les événements

Nuggets dispose de ses propres écouteurs et peut recevoir des événements.

La propagation des notifications est ainsi isolée et ne se mélange pas avec les évènements émis par le lecteur Storyline ou par le document HTML.

Évènements lecteur Storyline

Pour certaines fonctionnalités, Nuggets implémente une interface d'évènements pour reporter le comportement de certains éléments HTML du lecteur Storyline.

À la demande, Nuggets peut déclencher un évènement pour propager une notification lorsqu'un élément change. Une notification peut être émise :

  • lorsqu'une transition entre deux diapositives est effectuée ;
  • lorsque les sous-titres s'affichent, se rafraichissent ou s'effacent ;
  • lorsque la Lightbox est ouverte ou fermée.

Initialisation

Pour pouvoir recevoir des notifications concernant l'un de ces éléments, il est nécessaire d'initialiser pour chacun un observateur. Sans cela, même si vous attachez une fonction de rappel à un des écouteurs, il ne se passera rien.

JavaScript
// Initialisation pour écouter l'élément 'Diapositive'
storyline.watchSlide();

// Initialisation pour écouter l'élément 'Sous-titre'
storyline.watchCaption();

// Initialisation pour écouter l'élément 'Lightbox'
storyline.watchLightbox();

Dès lors, nous pouvons lier une fonction de rappel pour qu'elle soit invoquée lorsque la notification est émise :

JavaScript
const onSlideChanged = (event) => { /* instructions */ }
nuggets.addEventListener(STORYLINE_EVENTS.SLIDE_CHANGE,onSlideChanged);

const parseCaption = (event) => { /* instructions */ }
nuggets.addEventListener(STORYLINE_EVENTS.DISPLAY_CAPTION,parseCaption);


Passons maintenant en revue les événements pour chacun des observateurs. Tous les types d'événements sont contenus dans un seul objet STORYLINE_EVENTS.

Évènements Diapositive

Types Arguments Propagation
SLIDE_CHANGE 'onSlideChange' slideId Émis lorsque deux diapositives s'enchaînent.
SCENE_CHANGE 'onSceneChange' sceneId Lorsque deux diapositives s'enchaînent, émis lorsque elles ne sont pas sur la même scène.

Évènements Sous-titres

Types Arguments Propagation
DISPLAY_CAPTION 'displayCaption' - Émis lorsque un sous-titre apparait.
CHANGE_CAPTION 'changeCaption' - Émis lorsque deux sous-titres se suivent.
Si un temps blanc est présent entre deux sous-titres, ce sont les évéments REMOVE_CAPTION et DISPLAY_CAPTION, dans cet ordre, qui sont notifiés à la place.
REMOVE_CAPTION 'removeCaption' - Émis lorsque le sous-titre affiché disparaît.

Évènements Lightbox

Types Arguments Propagation
OPEN_LIGHTBOX
'openLightBox'		 - Émis lorsque la Lightbox est ouverte.
CLOSE_LIGHTBOX
'closeLightBox'		 - Émis lorsque la Lightbox est fermée.


Transfert de données

En permettant la création d'événements sur mesure avec des données spécifiques, la librairie offre une manière flexible et élégante de connecter les différentes partie d'une ou plusieurs fonctionnalités, tout en favorisant la modularité et la réutilisabilité du code. Cela contribue à réduire le couplage entre les différentes fonctionnalités qui constituent Nuggets, ainsi qu'avec le lecteur Storyline.

Les fonctionnalités peuvent communiquer de manière asynchrone sans avoir à connaître les détails internes des autres. Cela favorise une architecture modulaire et facilite la maintenance du code.

Lorsque Nuggets doit transmettre des données, la librairie passe automatiquement par un événement personnalisé CustomEvent. Les données sont alors encapsulées dans l'objet detail de l'événement.

JavaScript
// Pour envoyer des données
const data = { maVar: 'valeur' };
nuggets.dispatchEvent( 'typeEvent', data );

// Pour recevoir les données
const fonctionRappel = (event) => console.log(event.detail.maVar );
nuggets.addEventListener( 'typeEvent', fonctionRappel );