Creating

When we wrote Nuggets, we chose to create one JavaScript file per feature, primarily for the sake of simplicity. To create your functionality, let's continue with this logic and create the JavaScript file.

Open your code editor, create a new file and save it. We'll immediately put it in the right place in the library tree.

JavaScript file

The library is made up of several .js files, each containing the code relating to a specific function, and each located in sub-folders within the /assets/js/nuggets/ directory.

tree structure

+ /assets/
    + /js/
        + /nuggets/
            + /{...}/           // folders reserved for Nuggets features
            + /custom/          // creating the 'custom' folder
                - myFunction.js // creating the 'myFunction.js' file
            - data.js
- index.html

Once the file has been saved, let's reference it in the library.

Referencing

In the data.js file located in the library tree, the features are listed in an object called N, sorted by category. These categories and features reflect the content structure of the /nuggets/ folder.

We're going to add the custom category and your feature by writing its name in an Array.

File: //assets/js/nuggets/data.js

const N = {
    [categories]: [...liste],   // Nuggets references
    custom: ['myFunction']      // adding the category and the feature
}

Now let's go back to your myFunction.js file and write the code.

JavaScript function

To keep the code as simple as possible, let's use an Object to encapsulate your functionality.

• it will use a name representative of your functionality;
• it will contain an initialisation function to be called from a Storyline trigger, either in the main initialisation trigger or elsewhere in your project.

myFunction.js

const myFunction = {
    initialize: () => {
        console.log("my function is ready!";
    }
}

Your first feature is written!

Let's integrate it!

1. Include this version of Nuggets in your project's `.story' file. Refer to the section "Update".
2. Add the code myFunction.initialize(); to the Main Initialization Trigger.

Before we publish, let's prepare our work so that we can continue the development that will take place in the publication file for your Storyline project.

Preparation

Since the feature will need to be used at some point in the project, let's anticipate how it will be used.

• Does it need a variable? Several?
• Does it need a trigger to be used? Some JavaScript code?

It doesn't matter if it's not in its final form, we're going to put these elements in place to limit the need to update the version of the library we're working on for each test.

Let's create one or two variables, place a trigger executing some JavaScript code and if we already have an idea of how the feature will be used, let's create the first triggers.

Publish now!

Environment

From here, we'll work with :

• our code editor, into which we will import the file just published in the sidebar, and
• our web browser to reload the project for each test.

In the code editor sidebar, let's expand the project tree.

Project tree

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

    - user.js
- story.html

Let's open the files we're interested in: myFunction.js and user.js.

In the user.js file, let's locate the temporary code we entered earlier. With the myFunction.js file, all that's left to do is write the functionality!

Don't hesitate to test your progress in the code in the browser. Save updating your version of the library in the .STORY file for major changes to your code.