Home › Development Diaries › L's blog

Twine macro: <<hoverrevise>>, a mouseover extension to <<revise>>

Sat, 04/20/2013 - 08:46 — L

The <<hoverrevise>> macro is an extension of the <<revision>> / <<revise>> macros. It lets you make a span of passage text briefly appear or disappear whenever you mouseover another span of text in the same passage.

Code

Just install the latest version of <<revision>> (1.1.0 or later). It's included already.

CSS

You may want a "dissolve" type of transition to be applied to the text that appears or disappears. For that, give the <<insertion>> or <<removal>> macro a name that, say, contains "hover", and then use this CSS to exclusively target it:

.revision-span-in[class*=hover] {
	opacity: 0;
}
.revision-span[class*=hover] {
	transition: 1s;
	-webkit-transition: 1s;
}
.revision-span-out[class*=hover] {
	position:absolute;
	opacity: 0;
}

If you aren't using any normal <<revise>> macros, you could omit "[class*=hover]" to make every <<revision>> span have this transition.

Usage examples

Use this in conjunction with <<revision>>, <<insertion>> or <<removal>> spans, as you would with <<revise>>. The <<hoverrevise>> macro covers a full span of text, ending with <<endhoverrevise>>

To make the text "Aah! A ghost!" appear when you mouseover a span:

<<insertion hoverghost>>Aah! A ghost!<<endinsertion>>
<<hoverrevise hoverghost>>You'd better [[go to the chapel|chapel]]<<endhoverrevise>>

To make the text "Don't leave me" disappear when you mouseover a span:

<<removal words>>"Don't leave me"<<endremoval>>
<<hoverrevise words>>[[Go to the beach|beach]]<<endhoverrevise>>

To make the text "Cold" change to "Warm" when you mouseover a span:
<<revision hovermetal>>Cold<<becomes>>Warm<<endrevision>>
<<hoverrevise hovermetal>>[img[gold.png]]<<endhoverrevise>>

These are just a few of the possibilities allowed by this macro.

Notes:
This wraps the contained text in a <span> with the class "hoverrevise" as well as "hoverrevise_" suffixed with the identifier you use (for instance, "hoverrevise_boo" for <<hoverrevise boo>>").
Feel free to report any bugs to @webbedspace.

Comments

Sun, 04/21/2013 - 16:32 — Bradan

Incredibly useful

Incredibly useful macros! I had specific needs for a clickable keyboard project, so I added two small changes:
- the second parameter of revise can take a variable instead of a string.
- revise can take more parameters in order to set some variables when clicked ( in the form $parameter[N] = parameter[N+1])

...
     rname = c[0].replace(" ", "_");
      if (c.length < 2) {
        throwError(a, b + ' macro needs at least 2 parameters');
        return;
      }
	  
	  var text = c[1];
	  if (text.charAt(0)=="$") {
		text = eval(text.replace("$","state.history[0].variables."));
	  }
	
	  var variables = [];
	  for (var i =2; i < c.length; i+=2)
	  {
		variables.push([c[i],c[i+1]]);
	  }	  
		
      l = Wikifier.createInternalLink(a, null);
      l.className = "internalLink reviseLink reviseLink_" + rname + " " + b;
      insertText(l, text);
      l.onclick = function () {
		for (var i = 0; i < variables.length; i ++) {
			state.history[0].variables[variables[i][0]] = variables[i][1];
		}

        revise(b, rname);

...

Usage:
See attachment

AttachmentSize
keyboard.twee342 bytes
Mon, 04/29/2013 - 12:09 — Trip1986

I don't know if it's

I don't know if it's intentional, but if the (revision hoverfoo) span of text is nested within the (hoverrevise foo) span of text, it doesn't work.