Création

Quand nous avons écrit Nuggets, nous avons choisi de créer un fichier JavaScript par fonctionnalité par souci de simplicité avant tout. Pour créer votre fonctionnalité, continuons dans cette logique et créons le fichier JavaScript.

Ouvrez votre éditeur de code, créez un nouveau fichier et sauvegardez-le. Nous allons tout de suite le mettre au bon endroit dans l'arborescence de la librairie.

Fichier JavaScript

La librairie est constituée de plusieurs fichiers .js chacun contenant le code d'une fonctionnalité spécifique, chacun situé dans des sous-dossiers au sein du dossier /assets/js/nuggets/.

Afin d'éviter tout mélange entre votre travail et les fonctionnalités de la librairie, nous vous recommandons de créer un dossier à vous, par exemple custom, dans le répertoire /assets/js/nuggets/ et d'y placer votre fichier JavaScript.

Arborescence

+ /assets/
    + /js/
        + /nuggets/
            + /{...}/           // dossiers réservées aux fonctionnalités Nuggets
            + /custom/          // création du dossier 'custom'
                - maFonction.js // création du fichier 'maFonction.js'
            - data.js
- index.html

Une fois le fichier enregistré, référençons-le dans la librairie.

Référencement

Dans le fichier data.js qui se trouve dans l'arborescence de la librairie, les fonctionnalités sont répertoriées au sein d'un objet appelé N, triées par catégorie. Ces catégories et fonctionnalités reflètent la structure de contenu du dossier /nuggets/.

Nous allons rajouter la catégorie custom et votre fonctionnalité en inscrivant son nom dans un tableau Array.

Fichier: //assets/js/nuggets/data.js

const N = {
    [categories]: [...liste],   // références Nuggets
    custom: ['maFonction']      // ajout de la catégorie et de la fonctionnalité
}

Revenons maintenant à votre fichier maFonction.js et écrivons le code.

Fonction JavaScript

Pour que le code reste le plus simple, utilisons un Objet pour encapsuler votre fonctionnalité.

• il utilisera un nom représentatif de votre fonctionnalité ;
• il contiendra une fonction d'initialisation pour être appelé depuis un déclencheur Storyline, que ce soit dans le déclencheur principal d'initialisation ou à un autre endroit de votre projet.

maFonction.js

const maFonction = {
    initialise: () => {
        console.log("ma fonction est prête !";
    }
}

Votre première fonctionnalité est écrite !

Intégrons-là !

1. Intégrez cette version de Nuggets dans le fichier .story de votre projet. Référez-vous à la partie « Mise à jour ».
2. Ajoutez le code maFonction.initialise(); dans le Déclencheur principal d'initialisation.

Avant de publier, préparons notre travail pour pouvoir poursuivre le développement qui se fera dans le dossier de publication de votre projet Storyline.

Préparation

Puisque la fonctionnalité aura besoin d'être utilisée à un certain point du projet, anticipons la façon dont elle sera utilisée.

• A-t-elle besoin d'une variable ? plusieurs ?
• A-t-elle besoin d'un déclencheur pour être utilisée ? A défaut, du code JavaScript ?

Peu importe si ce n'est pas dans sa forme définitive, nous allons mettre en place ces éléments afin de limiter le besoin de mettre à jour la version de la librairie sur laquelle nous travaillons à chaque test.

Créons une ou deux variables, plaçons un déclencheur exécutant un peu de code JavaScript et si nous avons déjà une idée de comment la fonctionnalité sera utilisée, créons les premiers déclencheurs.

Publions maintenant !

Environnement

A partir de là, nous allons travailler avec :

• notre éditeur de code dans lequel nous importerons le dossier tout juste publié dans la barre latérale et
• notre navigateur internet pour recharger le projet à chaque test.

Dans la barre latérale de l'éditeur de code, déployons l'arborescence du projet.

Arborescence projet

+ {...}
+ /story_content/
    + {...}
    + /WebObjects/
        + /{dossier Nuggets}
            + /assets/
                + /js/
                    + /nuggets/
                        + /custom/
                            - maFonction.js

    - user.js
- story.html

Ouvrons les fichiers qui nous intéressent : maFonction.js et user.js.

Dans le fichier user.js, repérons le code temporaire que l'on a précédemment saisi. Avec le fichier maFonction.js, il ne reste plus qu'à écrire la fonctionnalité !

N'hésitez pas à tester sans modération dans le navigateur vos avancées dans le code. Réservez la mise à jour de votre version de la librairie dans le fichier .STORY pour les changements majeurs dans votre code.