Revision of Twine macro: << timedreplace >>, << timedinsert >>, << timedremove >>, << timedcontinue >> from Thu, 04/25/2013 - 22:13

Similar to my <<replace>> macro, this code causes the passage text in between the <<timedreplace>> and <<replacewith>> tags to be replaced with what is between those and the <<endtimedreplace>> tag, after a certain amount of time has elapsed.

Variants:
* <<timedinsert>> does not use <<replacewith>>, but causes everything between itself and <<endtimedinsert>> to be inserted into the page.
* <<timedremove>> works in a matching fashion, removing its contained text after the time elapses.
* <<timedcontinue>> is similar to <<timedinsert>> but does not require a final <<endtimedcontinue>> - instead, it causes all subsequent text in the passage to appear.

Copy the code in here: http://www.glorioustrainwrecks.com/files/TwineMacros-TimedReplace-2.3.0.txt

By default the text instantly changes with no transition. You can add a fade-in transition with this CSS (or make your own transition!):

.timedreplacement.replacement-in {
	opacity: 0;
}
.timedreplacement {
	transition: 1s;
	-webkit-transition: 1s;
}
.timedreplacement.replacement-out {
	opacity: 0;
}

New: This now takes CSS time values, which are decimal numbers ending in "s" (for seconds) or "ms" (for milliseconds).

Usage examples:
* <<timedreplace 2s >>You see nothing. <<replacewith>>After 2 seconds, you still see nothing.<<endtimedreplace>>
* You search. <<timedinsert 1s>>You find nothing.<<endtimedinsert>>.
* <<timedremove 2.5s >>Something is disappearing... <<endtimedremove>>
* Look <<timedcontinue 3s>>A bird just few by...

Example program.

Implementation details:

* New: If inserted text appears and descends below the bottom of the screen, the page should automatically scroll down to make it visible.
* Note: due to the way the browser and Twine interact, any changes made by code inside a <<timedreplace>> tag will be forgotten if you use the Back or Forward browser buttons. This means that if you put long-term variable changes that affect future passages inside one, you should disable the Back button.
* The passages are two <span>s, one visible, one hidden, each with the "timedreplacement" class. The one that is removed also has the class "timedreplacement1" and the passage that is added has the class "timedreplacement2".

Version history:
* 26/04/2013 - Added timedcontinue.
* 05/04/2013 - Added timedinsert and timedremove, as well as downward scrolling.
* 07/03/2013 - Made the transition CSS-based.
* 01/02/2013 - Initial. /code/code/code

AttachmentSize
TwineMacro-TimedReplaceTest.html37.82 KB
TwineMacros-TimedReplace-2.3.0.txt3.97 KB