Références

Cette page liste l'ensemble des propriétés et méthodes présentes dans les différentes fonctionnalités de Nuggets. Elle ne décrit que de façon succincte chaque propriété et méthode avec parfois comme exemple un extrait de code.

Pour plus de détails, veuillez vous référer aux différents tutoriels sur la chaîne Youtube et/ou sur la page des fonctionnalités.


core.globals

Tous les noeuds créés avec les fonctions globals sont attribués d'un data-id='nuggets'.

CreateJSNode('source');

Créé et retourne un noeud script avec comme source la valeur 'source'.

JavaScript
const node = CreateJSNode('monJS.js');
// <script src='monJS.js' type='text/JavaScript' data-id='nuggets'></script>

CreateNode('tagName');

Créé et retourne un noeud 'tagName'.

JavaScript
const node = CreateNode('script');
// <script data-id='nuggets'></script>

const node = CreateNode('styles');
// <styles data-id='nuggets'></styles>

CreateTypedNode('tagName', 'type');

Créé et retourne un noeud 'tagName' de type 'type'.

JavaScript
const node = CreateTypedNode('script','text/JavaScript');
// <script data-id='nuggets' type='text/JavaScript'></script>

Query(element, 'selector', [...dataSet]);

Retourne l'élément HTML ciblé par 'selector' avec les attributs [dataSet] si celui-ci existe.

JavaScript
const node = Query(document,'div',['id','myId');
// <div id='myId'>[...]</div>


core.nuggets

nuggets.getFolder();

Retourne sous forme de chaîne de caractères le chemin d'accès de la librairie.

JavaScript
const string = nuggets.getFolder();
console.log(string);
// sortie : story_content/WebObjects/5kTE9jP49mq/assets/js/nuggets

nuggets.initialize();

Initialise les méthodes d'écoute réservées à Nuggets.
La méthode est appelée automatiquement une fois la librairie chargée.

nuggets.addEventListener('eventType', handler);

Attache une fonction à appeler à chaque fois que l'évènement spécifié est envoyé à la cible nuggets.

nuggets.removeEventListener('eventType', handler);

Supprime de la cible nuggets un écouteur d'événements précédement enregistré avec nuggets.addEventListener.

nuggets.dispatchEvent(event, detail);

Envoi un Event à la cible nuggets en appelant les EventListener dans l'ordre approprié.


core.storyline

Échanger avec le lecteur Storyline

GetVarFromSTL('name');

Retourne la valeur de la variable 'name' existante dans Storyline.

JavaScript
let maVar = GetVarFromSTL('maVar');

UpdateVarInSTL('name', value);

Envoi la valeur value à la variable 'name' existante dans Storyline.

JavaScript
let maVar = 'une valeur';
UpdateVarInSTL('maVar', maVar);

Les 2 méthodes équivalent à GetPlayer().GetVar et GetPlayer().SetVar.

Nuggets recommande d'utiliser ces deux fonctions plutôt que celles créées par les développeurs d'Articulate ; si l'Éditeur décide de les modifier (nom, etc.), il suffira de mettre à jour uniquement le code des fonctions de Nuggets ciblant celles d'Articulate.

Cibler les éléments du lecteur Storyline

Les fonctions listées ici ciblent et retournent les noeuds HTML principaux du lecteur Storyline.

Éléments généraux Éléments sous-titre Éléments Lightbox
GetPreso()
GetCanvas()
GetSlide() 1		 GetCaptionContainer()
GetCaption() 1
GetCaptiontext()		 GetOverlay()
GetLightboxWrapper() 1
GetLightboxCloseButton()

  1. éléments HTML du lecteur Storyline suivi par l'interface d'événements de Nuggets.

Événements lecteur Storyline

storyline.watchCaption();

Initialise un observateur sur l'élément Sous-titre ciblé par GetCaption().

Initialisation

JavaScript
storyline.watchCaption();

Types d'événements

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.
REMOVE_CAPTION 'removeCaption' - Émis lorsque le sous-titre affiché disparaît.


storyline.watchLightbox();

Initialise un observateur sur l'élément Lightbox ciblé par GetLightboxWrapper().

Initialisation

JavaScript
storyline.watchLightbox();

Types d'événements

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


storyline.watchSlide();

Initialise un observateur sur l'élément Diapositive ciblé par GetSlide().

Initialisation

JavaScript
storyline.watchSlide();

Types d'événements

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.


customization.Caption

Caption.watch();

Initialise un observateur sur l'élément Sous-titre ciblé par GetCaption().
Est appelé automatique par la méthode Caption.clearBox().

Caption.clearBox();

Réinitialise les attributs margin et padding à 0 et efface tous les styles dans le noeud GetCaptionText().

Caption.setBackground(color='#000000', alpha=0.6, blur=2, offset=1);

Applique un fond et une ombre au noeud GetCaptionText().

Caption.setFont('font', color='white', size='2em');

Applique une police de caractères au noeud GetCaptionText().

La police de caractères doit être au préalable importée avec l'une des méthodes suivantes :

  • CustomCSS.newFontFace()
  • GoogleFont.link()
  • GoogleFont.import()


customization.CaptionBBCode

CaptionBBCode.initialize();

Permet d'utiliser un pseudo-code incrusté dans les sous-titres Storyline.

Pour plus d'informations sur les BB Codes, se référer à la partie « Utilisation > CaptionBBCode ».


customization.CustomCSS

CustomCSS.newRule('definition');

Implémente une nouvelle déclaration de feuille de style.

CustomCSS.newFontFace('folder', 'name', 'style', weight);

Implémente une police de caractères préalablement importée dans un Objet Web.


customization.GoogleFonts

GoogleFonts.link('family');

Implémente une police de caractères en utilisant les noeuds link fournis par l'API Google.

GoogleFonts.import('family');

Implémente une police de caractères en utilisant la déclaration de feuille de style @import fournis par l'API Google.


customization.Lightbox

Lightbox.reset();

Réinitialise l'aspect visuel d'éléments de la Lightbox dans le lecteur Storyline.

  • Efface le carré blanc de la Lightbox ;
  • Efface le bouton Fermer permettant de fermer la Lightbox du player Storyline.

Lightbox.resetOverlay();

Méthode actuellement désactivée

Lightbox.resetPosition();

Méthode actuellement désactivée

Lightbox.resetSize();

Méthode actuellement désactivée

Lightbox.watch();

Initialise un observateur sur l'élément Lightbox ciblé par GetLightboxWrapper().

Est appelé automatiquement par Lightbox.reset().


features.Keys

Keys.type:String;

Chaîne de caractère spécifiant le type de valeur utilisé dans l'interface d'événement KeyboardEvent quand une touche est pressée.
Peut être égale à key (par défaut) ou code.

Keys.registerShortcut(...args);

Attribue une combinaison de touches à une variable Storyline de type Booléenne.


features.LocalTrack

LocalTrack.parse('variable','result','str');

Permet de mettre à jour une variable de type Nombre avec une ou plusieurs valeurs binaires, positives ou négatives, à un ou plusieurs index précis.

JavaScript
LocalTrack.parse('myVar','myResult','_str');

Doit être appelé lorsque variable change.

Déclencheur Storyline
Quand 'myVar' change
- Exécuter 'JavaScript'
    Si 'nuggetsLoaded' = valeur 'Vrai'


features.SoundTrack

Fonctionnalité en cours d'implémentation


features.Timer

Timer.reset({initialTime, {increment, {'format'}}});

Initialise un chronomètre.

JavaScript
Timer.reset();
// Réinitialise le chrono à zéro pour incrémentation.

Arguments :

  • initialTime : Nombre indiquant la valeur de départ. Par défaut, égale à zéro.

  • increment : Booléen indiquant si le chronomètre incrémente ou décrémente. Par défaut, il incrémente.

  • 'format' : Chaîne de caractères indiquant le formatage du chronomètre s'il doit être affiché dans un champs texte. Par défaut, égale à mm:ss.

JavaScript
Timer.reset(10,false);
// Réinitialise le chrono à 10 secondes pour décrémentation.

Timer.play();

Lance le chronomètre à partir de l'instant T auquel il était arrêté.

Timer.pause();

Arrête le chronomètre à un instant T sans le réinitialiser.

Timer.stop();

Arrête le chronomètre et réinitialise celui-ci aux valeurs définies lors de l'appel de la fonction Timer.reset.


webobjects.WebObject

WebObject.connect(source='postMessage');

Permet d'initier une connexion entre le lecteur Storyline et un Objet Web présent sur une diapositive.

JavaScript
WebObject.connect();

WebObject.message();

Permet d'envoyer des valeurs à des variables dans Storyline.
Est déclenché à chaque fois qu'un Objet Web émet un évènement message via la méthode postMessage.

WebObject.disconnect();

Déconnecte l'Objet Web du lecteur Storyline.
Est appelé automatiquement à chaque sortie de diapositive.

postMessage

SendToSTL(object);

Permet d'envoyer une valeur à une variable dans Storyline.
A appeler depuis le contenu de la page incluse dans l'Objet Web.

JavaScript
SendToSTL('myVar',value);