How to add verbose help to Setting dialog?

Authoring Twine
1

TweeGo version: 2.1.1+81d1d71
SugarCube version: 2.37.0-alpha.19+10193

Is there an existing way to add some extensive help to SugarCube’s Settings dialog popup? I mean help that’s more verbose than would be appropriate in the current desc: parameter.

I’d rather not write my own version of the Setting dialog popup if I can avoid it.

The hack that I’m in the middle of implementing is to provide an optional “Settings Help” button in the GUI column (using the StoryMenu code passage). That button would take the reader to a “Settings Help” passage which itself would include links to the Setting dislog popup in appropriate places.

Ideally, I’d like to add a “Help” button as a prefix to each of the Setting dialog entries, but that probably would require nested dialog popups, which I don’t think are currently available.

Thanks for whatever help you can provixe.

2 Likes
2

You can put anything you like in a title, including a passage if you want. I’ve done help that way before.

One of my games has this at the top of the settings, for example:

Setting.addHeader("Help","<<include 'help'>>");
1 Like
3

Thanks! I’ll give that a try.

4

Also there are JavaScript related Dialog Events you can listen for (like :dialogopening) that then allow you to alter the HTML structure of the dialog before it is shown.

eg. the following JavaScript example add a listener for the opening of the Setting dialog…

$(document).on(':dialogopening', '.settings', (ev) => {
    /* JavaScript that alters the contents of the dialog */
}

…and you can use jQuery like the following inside that listener to access the body area of the dialog…

$(ev.target)

…and you can use jQuery methods like <element>.append() and <element>.prepend()…

$(ev.target).append(`<p>addition content</p>`);

…or SugarCube’s own <jQuery>.wiki() method…

$(ev.target).wiki('<<button "Help">><</button>>');

…to alter the contents.

note: if you intend to use multiple such methods to alter the same section of the dialog, then you can either chain the method calls likes so…

$(ev.target)
	.append(`<p>addition content</p>`)
	.wiki('<<button "Help">><</button>>');

…or save the initial jQuery call to a variable and then use it when calling the methods…

let el = $(ev.target);

/* via seperate calls... */
el.append(`<p>addition content</p>`);
el.wiki('<<button "Help">><</button>>');

/* via chaining... */
el
	.append(`<p>addition content</p>`)
	.wiki('<<button "Help">><</button>>');
1 Like
5

Thanks! I’ll give those options a try.