Revision of Twine macro: << cyclinglink >> from Thu, 01/31/2013 - 21:01

This simply produces a link whose text cycles between a number of values whenever you click on it. It otherwise leads nowhere. Feel free to use it to instill feelings of transience, impermanence and variability on the reader - or just use it as a cute silly clickable trinket.

version.extensions['cyclinglinkMacro'] = {major:1, minor:0, revision:0};
macros['cyclinglink'] = {
handler: function (a, b, c) {
var l = Wikifier.createInternalLink(a,null);
l.className="internalLink cyclingLink";
l.setAttribute("data-cycle",0);
for(var i=0; i < c.length; i++) {
var d = insertElement(null, 'span');
if (i>0) d.style.display="none";
insertText(d,c[i]);
l.appendChild(d);
}
l.onclick = function() {
var n = this.childNodes.length;
if (n > 0) {
var u = Number(this.getAttribute("data-cycle"));
this.childNodes[u].style.display="none";
u = (u+1) % n;
this.childNodes[u].style.display="inline";
this.setAttribute("cycle",u);
}
}
}
}


Usage example: You feel <<cyclinglink "bad" "neutral" "good" "neutral">> about your current situation.

Example program.

Implementation details:
* For CSS users: the <a> tag has the class names "cyclingLink" and "internalLink".
* Each option is an invisible <span> inside the <a> tag. Clicking it causes the next one down to become visible, and the others to become invisible.
* When you click, the "data-cycle" attribute of the <a> tag increases by 1 (wrapping around to 0 at the end). You could select this with CSS, I guess, using [data-cycle=1] or somesuch. You also write JavaScript that reads this attribute and uses it for something elsewhere in the passage.

AttachmentSize
TwineMacro-CyclinglinkTest.html36.68 KB