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:2,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);var v="";if(c.length&&c[0][0]=="$"){v=c[0].slice(1); c.shift();}for(var i=0;i<c.length;i++){var d=insertElement(null,"span");if(i>0){d.style.display="none"; }else{state.history[0].variables[v]=c[i];}insertText(d,c[i]);l.appendChild(d);}l.onclick=function(){var u=Number(this.getAttribute("data-cycle")); this.childNodes[u].style.display="none";u=(u+1)%this.childNodes.length;if(v){state.history[0].variables[v]=c[u]; }this.childNodes[u].style.display="inline";this.setAttribute("data-cycle",u);};}};
New: you can now use this link to alter a variable. If the first parameter begins with the "$" sigil, then it will interpret it as a variable. When the player visits the page or clicks the link, the variable will be changed to match the text of the link.
Usage examples:
* You look around, but only see <<cyclinglink "grass" "a flower" "a cloud" "the road">>.
- This is a purely cosmetic link.
* You see a dial: <<cyclinglink $heat "off" "low" "high" "fearsome">>.
- The $heat variable will be changed to "off" when the page loads, and then to "low", "high" and "fearsome" as the player clicks the link.
Example program 1 (cosmetic).
Example program 2 (mechanical).
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.
Version history:
Attachment | Size |
---|---|
TwineMacro-CyclinglinkTest.html | 36.68 KB |
TwineMacro-CyclinglinkTest2.html | 57.51 KB |