Sugarcube 2: Modals don't work if starting from story's beginning

Zebradontcare

Hi all,

I'm using modals to give short descriptions of highlighted words in the story. They work perfectly well IF I start the story from a passage that has modals in it. However, if I start the story from the very beginning and play through to a passage that contains modals, nothing happens when I click the modal triggers. It doesn't throw any errors or react in any way. I'm almost positive it's a scope issue or something related to JS execution in relation to loading the DOM, but I'm not great with JavaScript.

This is the code that is in my story JavaScript:

window.openModal = function(modal, btn, span) {
	btn.onclick = function() {
    $(modal).fadeIn( "slow" );
}
$(span).click(function() {
  $(modal).fadeOut( "slow" );
});

window.onclick = function(event) {
    if (event.target == modal) {
        $(modal).fadeOut( "slow" );
    }
}
}

And this is the code in the passage where the modals are located:

<<script>>
window.onload = function () {
window.openModal(document.getElementById("teuthModal"), document.getElementById("teuthTrigger"), document.getElementsByClassName("close")[0]);

window.openModal(document.getElementById("oxyModal"), document.getElementById("oxyTrigger"), document.getElementsByClassName("close")[1]);

window.openModal(document.getElementById("coldModal"), document.getElementById("coldTrigger"), document.getElementsByClassName("close")[2]);
}
<</script>>

Any help would be much appreciated.

greyelf

The window.onload event only happens when the story HTML is first loaded, so you can't use it to run code when a specific Passage is rendered later.

You need to use either the PassageDone special passage or the postdisplay Task Object, it would look something like either of the following:

postdisplay["open model"] = function (taskName) {
	if (passage() == "Name of Target Passage") {
		// Code goes here....
	}
};

or

postdisplay["open model"] = function (taskName) {
	if (tags().contains("some-special-tag")) {
		// Code goes here....
	}
};

Zebradontcare

Thanks very much, exactly what I needed.

Zebradontcare

As a follow up question, will having this if check occur in every postdisplay task have any effect on performance?

Edit: Actually, never mind. I figured out I can just put the postdisplay task in a script tag on the passages that need modals.

greyelf

Zebradontcare wrote: »

... I can just put the postdisplay task in a script tag on the passages that need modals.

You may of already worked this out but don't forget to remove/delete that postdisplay task after it has done its job.

<<script>>
// Add temporary postdisplay task
postdisplay["open model"] = function (taskName) {

	// Code goes here....
	
	// Remove temporary postdisplay task.
	delete postdisplay[taskName];
};
<</script>>