Sugarcube v2.28.2 - Best way to block closing Dialog by clicking away?

Question

Hi.  I've been using the Sugarcube dialog-api for simple look-at links (rather than switching passage completely).  Now I'm interested in using it for simple interactions (a short conversation, for instance).  I'm wondering if there's a best way to force the user to make a choice in the dialog, ie. to prevent them from closing it by clicking away.

I've searched the Sugarcube2 docs, forums and QA, but no luck.

Thanks for any help you can provide.

Answer 1

I've worked out an answer.  For anyone else wishing to prevent a dialog from being dismissable through clicking outside of it, here's what I did.

The main thing to focus on is the 'if/else' block in the first (JavaScript) code section.  It toggles the user's ability to dismiss the popup by clicking outside of it.

 

JavaScript code:

Macro.add("popLink", { tags : null, handler: function()
{
	var a = $("<a/>");
	a.html(this.args[0]);
	a.data("title", this.args[1]);
	a.data("content", this.payload[0].contents);
	a.data("undismissable", this.args[2]);
	Dialog.addClickHandler(a, null, onPopLinkClicked);
	$(this.output).append(a);
}});
function onPopLinkClicked(evt)
{
	var $target = $(evt.target);
	Dialog.setup($target.data("title"));
	Dialog.wiki($target.data("content"));
	if ($target.data("undismissable"))
	{
		$("#ui-overlay").removeClass("ui-close");
		$("#ui-dialog").addClass("closeBlocked");
	}
	else
	{
		$("#ui-overlay").addClass("ui-close");
		$("#ui-dialog").removeClass("closeBlocked");
	}
}

 

Passage code:

<<popLink "Click me for normal dialog" "My title" false>><a onclick='SugarCube.Dialog.close();'>Close</a><</popLink>>
<<popLink "Click me for undismissable dialog" "My title" true>><a onclick='SugarCube.Dialog.close();'>Close</a><</popLink>>

 

Comments

Looks solid, but you really shouldn't add macros in passage scripts, that's a job for the story JavaScript.

---

Thanks.  The example is not actually representative of my story code (which defines all macros in the story's javascript).  I wrote it specifically for the readability of this answer... but in the interest of promoting best practice, I'll adjust the answer.