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;
}<<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>>
<<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
Incredibly useful
Incredibly useful macros! I had specific needs for a clickable keyboard project, so I added two small changes:
- the second parameter of
revisecan take a variable instead of a string.-
revisecan take more parameters in order tosetsome 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
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.