Revision of Twine macro: << cyclinglink >> from Mon, 03/04/2013 - 02:53

This simply produces a link whose text cycles between a number of values whenever you click on it. It otherwise leads nowhere. You can use it as a silly clicky trinket, a cheap alternative to the <<replace>> macro, or (as detailed below) as an input interface element.

version.extensions["cyclinglinkMacro"]={major:3,minor:0,revision:1};macros.cyclinglink={handler:function(a,b,c){var l=Wikifier.createInternalLink(a,null);
l.className="internalLink cyclingLink";l.setAttribute("data-cycle",0);var v="";var end=false;
if(c.length&&c[0][0]=="$"){v=c[0].slice(1);c.shift();}if(c[c.length-1]=="end"){end=true;
c.pop();}for(var i=0;i<c.length;i++){var d=insertElement(null,"span",null,"cyclingLink"+(!i?"En":"Dis")+"abled");
if(!i){state.history[0].variables[v]=c[i];}insertText(d,c[i]);l.appendChild(d);}l.onclick=function(){var t=this.childNodes;
var d="cyclingLink";var u=this.getAttribute("data-cycle")-0;var m=t.length;if(end&&u==m-2){var n=this.removeChild(t[u+1]);
n.className=d+"End";this.parentNode.replaceChild(n,this);return;}t[u].classList.toggle(d+"Enabled");
t[u].classList.toggle(d+"Disabled");u=(u+1)%m;if(v){state.history[0].variables[v]=c[u];
}t[u].classList.toggle(d+"Enabled");t[u].classList.toggle(d+"Disabled");this.setAttribute("data-cycle",u);
};},init:function(){addStyle(".cyclingLinkDisabled { display:none; } ");}};
macros.cyclinglink.init();

If the first parameter begins with the "$" sigil, then it will interpret it as a variable to be altered by clicking the link. When the player visits the page or clicks the link, the variable will be changed to match the text of the link.

If the last parameter is the word "end", then it will terminate the cycling link at the parameter before last. The containing that text will replace the link element altogether.

Usage examples:
* You look around, but only see <<cyclinglink "grass" "a flower" "a cloud" "the road">>. - This is a purely cosmetic, endlessly cycling link.
* You see a bowl containing <<cyclinglink "3 cookies" "2 cookies" "1 cookie" "a few crumbs" end>>. - This link changes to the words "a few crumbs" when you get to the end.
* 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).
Example program 3 (mechanical with CSS). - see below for CSS hooks.

Implementation details:
* For CSS users: the <a> tag has the class names "cyclingLink" and "internalLink".
* Each option is a <span> inside the <a> tag. Clicking it causes the next one down to have the class "cyclingLinkEnabled", and the others to have the class "cyclingLinkDisabled".
* It also adds default CSS for "cyclingLinkDisabled" ("display:none") which can be overridden if you wish (as in the example).
* 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:

  1. 4-3-12 - Bugfix.
  2. 27-2-12 - Added CSS hooks and the "end" parameter.
  3. 26-2-12 - Added new variable-setting ability.
  4. 16-2-12 - Fixed typo preventing it from working.
  5. 29-1-12 - Initial.

AttachmentSize
TwineMacro-CyclinglinkTest.html36.68 KB
TwineMacro-CyclinglinkTest2.html57.51 KB
TwineMacro-CyclinglinkTest3.html58.66 KB
pensive-mosquitoes