Twine macro: << replace >>, << insert >> and << continue >>

Similar to my <<timedreplace>> macro, this macro creates an internal link that, when clicked, vanishes and is replaced with whatever is between the << replace >> and << endreplace >> tags. This could be useful if (just for starters) you want to have a passage that can be modified by clicking specific details inside it.

Variations:
* You can also use <<insert>>, which is identical but does not remove the link text, instead merely changing it to a bare <span> (as with Jonah's <<choice>> macro.)
* You can use <<continue>> to make all subsequent text appear when it's clicked. It does not need an <<endcontinue>> at the end! Quite useful when you just need the reader to click to continue the passage.

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

By default, the text instantly appears with no transition. You can give the replaced text a fade-in transition using this CSS:

.replacement.replacement-in {
	opacity: 0;
}
.replacement {
	transition: 1s;
	-webkit-transition: 1s;
}
(Feel free to customise this CSS to make your own transition style.)

Usage examples:
You see <<replace "a half-eaten cake">>a plate of crumbs<<endreplace>>
I find it <<insert "repugnant">>that he's made such comments<<endinsert>>.
You go outside. <<continue "Next.">>The sun blinds you momentarily.<<continue "Next.">>Has it been so long?

A short example program.
Hot hint: if you've got a lot of text, it's good to just put a single << display >> inside a << replace >>, and put the text in a separate passage.

Some notes:
* Code inside << replace >> tags is only executed when you click the link. You may notice that the "mailbox" link in the example program produces different text if you click the "front door" link first.
* 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 <<set >> or <<print>> macros inside a <<replace>> 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.
* For those writing CSS: the <a> tag of the link has the class names "internalLink" and "replaceLink". It is immediately followed with a <div> tag with a class name of "replacement" and the style "display:none". Clicking the link removes the link, changes the span's display style to "inline", and toggles the "replacement-in" class, causing the CSS transition.

For a more powerful version of this macro, see <<revision>>.

Version history:
* 26-4-2013: Added << continue >> variant.
* 5-4-2013: Added << insert >> variant, scrolling.
* 7-3-2013: Added CSS hooks.
* 28-1-2013: Initial.
Feel free to report any bugs to @webbedspace.

AttachmentSize
TwineMacro-ReplaceTest.html186.33 KB
TwineMacros-Replace-1.3.0.txt3.41 KB

Comments

Replace Macro

Hey there! Love the work you've done with Twine, it's come in as a lifesaver more than once already in my projects. ^_^

I have a question about the 'replace' macro -- is there a way to make a link of only part of the text to be replaced? As an example I've got the sentence "Off to the side is a stable for the wagon-pulling animals."; I'd like to replace 'stable for wagon-pulling animals' with different text, but having that whole phrase in blue gives it a sort of visual importance outweighing the progress-making links further down. I'd like to make only the word 'stable' the link to replace the whole phrase.

Of course the easiest fix is just to rewrite the passage to flow appropriately, but I have a feeling that I'll be wanting to do the same thing fairly often in my story, so if there's a reasonably simple way to do this I'd be mightily chuffed. Thanks!

Try

A bit late to reply, but try using <<revision>>:

<<revision side>>Off to the side is a <<revise side "stable">> for the wagon-pulling animals.<<becomes>>Some other text.<<endrevision>>