Revision of Twine macro: << cyclinglink >> from Tue, 02/26/2013 - 07:25

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:

  1. 26-2-12 - Added new variable-setting ability.
  2. 16-2-12 - Fixed typo preventing it from working.
  3. 29-1-12 - Initial.

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