Importing External JavaScript

[videlais]

Based in part on the ideas of #16, this would review how to use jQuery's getScript() function in Harlowe and Snowman and the importScripts() function in SugarCube to retrieve, load, and use an external JavaScript library across Twine 2.

[greyelf]

@videlais Do you want the twee file to only include the Javascript file loading code, or do you want it to also include an example of using the functionality of the loaded javasscript library.

A. SugarCude loading jQuery UI library in a script tagged passage. importScripts("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js");

B. Start passage showing the usage of one of the jQuery UI library effects, uses point A.

<p>Click on the following grey box to see it bounce.</p>
<div id="box" style="width: 100px; height: 100px; background: #ccc;"></div>

<<script>>
$(document).one(':passagerender', function (ev) {
    $(ev.content)
        .find("#box")
        .click(function () {
            $("#box").toggle( "bounce", { times: 3 }, "slow" );
        });
});
<</script>>

I ask because doing only point A results in a story HTML file that visually does nothing, which makes makes including one in the recipe meaningless.

[videlais]

@greyelf: Ideally, something that has a visual effect like in example B.

I'd be very cautious of using too much jQuery within the examples, if we can, too. I'd be fine with the example code you outlined, but I'd also suggest adding comments wherever possible to explain which functions are being used and why.

[greyelf]

@videlais If you know of a Javascript library that has a visual effect and that can be activated using a simpler sequence of Javascript calls then I would be happy to use that as an example instead. I only chose jQuery UI because I was recently asked a question about it.

[videlais]

@greyelf: I was only musing that if we could get the effect down to only a few lines of JavaScript, it would be easier to explain and for those less familiar with JS to use. I liked the example and am in agreement with you.

[greyelf]

See pull request #29