Anyway to dynamically disable back button?

Authoring Twine
1

I’m looking for a way to temporarily disable the back button but re-enable it at a certain point. I tried

config.history.controls = false;

but this seems to only work if you have it set in Javascript from the very start. Trying to do it with a function during gametime doesn’t put it into effect.

Twine Version: 2.315

2

That’s because it is a configuration setting, and such settings need to be done before the project’s first Passage is shown.

You don’t state how you intend to control when the Undo button is disabled or not, which means we can’t give a specific answer to your question.

SugarCube’s engine sets up the following event handler when the UIBar is first initialised…

// Set up the UI bar's global event handlers.
jQuery(document)
	// Set up a handler for the history-backward/-forward buttons.
	.on(':historyupdate.ui-bar', (($backward, $forward) => () => {
		$backward.ariaDisabled(State.length < 2);
		$forward.ariaDisabled(State.length === State.size);
	})(jQuery('#history-backward'), jQuery('#history-forward')));

…which makes it difficult to actually “disable” the #history-backward IDed button, because that event handler will just re-enable the button again when the next Passage Transition (or :historyupdate.ui-bar event) occurs.

You can however use CSS to make the “enabled” variation of the button visually appear like it is still ‘disabled’, and to stop that “enabled” button from reacting to pointer events (mouse clicks).

#ui-bar-history [id|=history]:enabled {
    pointer-events: none;
    color: #444;
    background-color: transparent;
    border-color: #444;
}

…but there is still the issue of how to control “when” that CSS Rule is applied.

One simple way is to assigned the Passages for which the Undo button is disabled a “known” Passage Tag (like no-undo), and then to change the above rule to only apply when such Passages are being visited.

body[data-tags~="no-undo"] #ui-bar-history [id|=history]:enabled {
    pointer-events: none;
    color: #444;
    background-color: transparent;
    border-color: #444;
}

However, if you don’t want to use a Passage Tag, you could instead use the <<addclass>> macro to conditionally apply a “known” CSS class (like no-undo) to the <html> element when you want the button to appear disabled. And later used the <<removeclass>> macro to remove that known class when the button can appear enabled again. The above CSS Rule would need to be changed to the following…

html.no-undo #ui-bar-history [id|=history]:enabled {
    pointer-events: none;
    color: #444;
    background-color: transparent;
    border-color: #444;
}
2 Likes
3

The tags solution worked for me much appreciated. I didn’t know you could disable pointer events in CSS, very cool.

4

Could I turn this question around slightly and ask if it is possible to just disable the back button on say two passages - and how could this be done?
thx

5

Just add Greyelf’s code below to your CSS and add the tag no-undo to any passages you want it disabled.

#ui-bar-history [id|=history]:enabled {
    pointer-events: none;
    color: #444;
    background-color: transparent;
    border-color: #444;
}

body[data-tags~="no-undo"] #ui-bar-history [id|=history]:enabled {
    pointer-events: none;
    color: #444;
    background-color: transparent;
    border-color: #444;
}