Can Claretta's Popup Access Another HTML File?

Question

Greetings! 

Currently, I'm using Twine2.1.3 with Sugarcube 2.18 to build a game that I someday hope to convert into an Android app utilizing PhoneGap or Ionic, or Cordova. Whatever works. In order to balance the workflow and organize the project, as well as keep the HTML page sizes smaller for better handling on phones, I'm planning on using multiple HTML files to handle different sections of the game.

One part for the prologue, chapter 1, one for the dictionary, one for items, maybe even one for combat. Each part of the game's story and primary functionality will be a separate file, I hope, with links connecting them. I would use LocalStorage to transfer the necessary variables between pages (Thanks Chapel, GreyElf, and Akjosch for replying to my last question). 

However, for a nicer flow, I was thinking of using Claretta's Popup, modified, in order to access the player's items or the encyclopedia or such. So, is there a way to make that popup pull up a different HTML page and potentially passage through an argument? Here's the popup I'm using. By the by, I'm using a Repopup macro to reload the popup on new link clicks, allowing players to navigate through numerous passages using the popup.

/* Opens up a popup: arg[0] is the link title and arg[1] is the passage name */
Macro.add("popup", {
	version : {major: 1, minor: 0, revision: 0},
	handler : function() {
		/* ------------------Error Handler */
		if (this.args.length < 1) {
			return "No link text specified.";
		}
		if (this.args.length < 2) {
			return "No link text or passage name specified.";
		}
		/* ----------------- <<End of Error Handler>> */
		
		/* --------------Begin actual handler functionality */
		
		/* Init Vars */
		var linkElement = document.createElement("a");
		var passageName = this.args[1];
		var title;
		
		/* Create the link functionality to click for the popup */
		linkElement.innerHTML = this.args[0];
		linkElement.className = "link-internal macro-popup";
		linkElement.setAttribute("data-passage", passageName);
	
		title = this.args[2];
		
		/* Create click handler */
		UI.addClickHandler(linkElement, null, function (event) {
			var dialog = UI.setup(title, "popup");
			new Wikifier(dialog, tale.get(passageName).processText().trim());
		});
		
		this.output.appendChild(linkElement);
	}
});

So, in summary, is it possible to use the Wikifier object, or something, to open a new Twine Story HTML file and passage within it, pass in variables, and do it all within the popup? 

Answer 1

I mean, each time you open a popup it's going to have to load the entire engine again, which is incredibly wasteful. At any rate, Claretta's popup macro is just built on the dialog API, and you can show an arbitrary html document in that (probably best done through an iframe). Claretta's macro is also a bit outdated anyway, being primarily designed with old SugarCube 1 APIs. But generally, if you want your game in multiple files, don't make multiple stories, use grunt-entwine or one of the other Twine compilers like Tweego or Twine 1 (with StoryIncludes).

Comments

I see. Thank you for the informative reply, Chapel. I guess I was considering Twine in a different context (having just finished a project in Xamarin). If I am going to use separate files, I'll utilize Tweego. Though maybe I'll just try to keep it all in one story instead... hmmm...

You mentioned that Claretta's popup is outdated? What would be the newest update? I was barely able to find that popup. I had no idea there was a different version.

---

Claretta's popup was written for SugarCube v1.x.  It still works in v2.x because of shims and such built in to SugarCube 2.  You don't have to change, but just know that it isn't a really great example of how to write macros or use the APIs it uses.  To my knowledge, Claretta never realease a SugarCube 2 version.  I have a version in my custom macro set, but it's not exactly the same (you need to put it in a link macro yourself, and a few other differences) so it won't work as a drop in replacement.  Here's an updated version that works just like Claretta's using SugarCube v2 APIs (I also added a bit more error-checking and support for CSS classes for styling):

Macro.add('popup', {
	handler : function() {
        
        var content, title, classList;
        
        if (this.args.length < 2) {
            return this.error('You must pass at least link text and a passage name to this macro.');
        }
        if (!Story.has(this.args[1])) {
            return this.error('No passage named "' + this.args[1] + '" could be found.');
        }
        
        content = Story.get(this.args[1]).text;
        title = this.args[2] || '';
        classList = this.args.length >= 4 ? this.args.slice(3).flatten().join(' ') : '';
        
        $(document.createElement('a'))
            .addClass('macro-' + this.name)
            .wiki(this.args[0])
            .ariaClick( function () {
                Dialog.setup(title, classList);
                Dialog.wiki(content);
                Dialog.open();
            })
            .appendTo(this.output);
	}
});

Usage:

<<popup linkText passageName [classList]>>

linkText: the text the link should have.
passageName: the name of the passage whose contents should be rendered into the dialog
classList: (optional) a list of classes to add to the box for styling

Again, you don't really have to switch; I'm not sure if there's any specific drawbacks to using this outdated code.

---

Wow, it looks quite nice. Thanks a ton, Chapel! I appreciate it.