Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Include External Javascript Scripts Sugarcube

Twine 2.0.10 with SugarCube 2.1.2.
I'd like to split up my javascript into several files for ease of development, and to write the code using an IDE outside of Twine (it's honestly pretty awful).
What would be the best way to do this?

Some ways I think could work:
1. externally host files and then in the Story javascript have an AJAX call loading them
2. have a local batch script that cats the files together in the right sequence (and optionally minifies them), which I then copy paste into the Story JS

Comments

  • If you prefer to use an external editor and you don't have a problem with using a command prompt/shell then you may want to have a look at TheMadExile's tweego utility.

    You could use a batch script to merge your JS files into a TWEE file containing a script tagged passage, which in turn could be compile together with your story's other TWEE files by tweego.
  • So there's no easy way to include an external script from a CDN?
    For example if I need
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>;
    
    (I know jQuery's included, this is just an example), I'd have statically include the script to be compiled?

    What about modifying the html itself? If I wanted a character display canvas for every passage with a certain tag, I'm guessing the best way to do that is to have a prerender task that injects a DOM directly to the window. Would something like this work:
    prerender["Inject Canvas"] = function(content) {
    	if (tags().contains("canvas")) {
    		var story = $("#story");
                    $("<canvas id='dispcanvas' width='200' height='200'></canvas>").appendTo(story);
    	}
    }
    
  • Your original post included the two standard ways to import (the contents of) an external JS file into a story, so I did not mention them.

    If you were using the Twine 1.x application then I would of mentioned SugarCube's ability to use a userlib.js file to include external Javascript during the story build process, but that does not exist for the Twine 2.x application.

    re: modifying the html itself
    The #story element is not one of the elements that are destroyed and recreated for each Passage shown, so your prerender example would inject an additional #dispcanvas element for each tagged passage.

    You could instead add the #dispcanvas element once and then use tagged based styling to show/hide it.
    a. The Javascript, placed in Story Javascript:
    var story = $("#story");
    $("<canvas id='dispcanvas' width='200' height='200'></canvas>").appendTo(story);
    
    b. The CSS to hide and conditionally show the #dispcanvas element in canvas tagged passage, placed in Story Stylesheet:
    #dispcanvas {
    	display: none;
    }
    
    body.canvas #dispcanvas {
    	display: inline-block;
    }
    
  • mysticmuse wrote: »
    So there's no easy way to include an external script from a CDN?
    Patience, padawan. Your question is only two days old.

    You can use something like the following to load external resources over the network: (goes in Story JavaScript)
    (function ($) {
    	/*
    		Load external scripts and stylesheets.
    
    		e.g.
    			$(document.head)
    				.append('…element markup here…');
    	*/
    	$(document.head)
    		.append('<link id="font-awesome-stylesheet" rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"; />')
    		.append('<link id="sweetalert-stylesheet" rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/t4t5/sweetalert/master/dist/sweetalert.css"; />')
    		.append('<script id="sweetalert-script" type="text/javascript" src="https://cdn.rawgit.com/t4t5/sweetalert/master/dist/sweetalert.min.js"></script>')
    		.append('<script id="facebook-jssdk" type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>');
    })(jQuery);
    
    Ignore the spurious semi-colon these hateful forums add to the end of the href attributes.

    mysticmuse wrote: »
    What about modifying the html itself? If I wanted a character display canvas for every passage with a certain tag, I'm guessing the best way to do that is to have a prerender task that injects a DOM directly to the window. Would something like this work:
    prerender["Inject Canvas"] = function(content) {
    	if (tags().contains("canvas")) {
    		var story = $("#story");
                    $("<canvas id='dispcanvas' width='200' height='200'></canvas>").appendTo(story);
    	}
    }
    
    That will append a permanent <canvas> element to the overall story container for each such passage, unless you also setup a task to remove them. I'm assuming you don't actually want that, since you've given it an ID.

    If you wanted to append/prepend them to the actual passage, so they'd be disposed of along with the passage when it's outgoing, then you'd want something like one of the following: (goes in Story JavaScript)
    /* Prepend the <canvas> to the incoming passage. */
    prerender["prependCanvas"] = function (content) {
    	if (tags().contains("canvas")) {
    		/* Add the <canvas> to the incoming passage render buffer (pre-render). */
    		$(content)
    			.append('<canvas id="dispcanvas" width="200" height="200"></canvas>');
    	}
    }
    
    /* Append the <canvas> to the incoming passage. */
    postrender["appendCanvas"] = function (content) {
    	if (tags().contains("canvas")) {
    		/* Add the <canvas> to the incoming passage render buffer (post-render). */
    		$(content)
    			.append('<canvas id="dispcanvas" width="200" height="200"></canvas>');
    	}
    }
    

    I don't know how you're going to want to style the <canvas>, so it's possible that you might need to add it to the passages container instead. Still, I'd try one of the above first.
Sign In or Register to comment.