This extends my code for applying Twine tags to passage divs, and extends on it as a mechanism for CSS selection. What these macros do, in order, is add a tag to the current passage's tag attribute, remove a tag, and toggle its presence (remove it if it's there, add it if it isn't). This means that conditional application of CSS, controlled by << if >> statements, is possible.
Usage examples: <<addtag "dream">>
<<toggletag "lightworld">> <<removetag "darkworld">>
These are guaranteed to work both inside passages, inside << replace >> macros, and, tantalisingly enough, inside << display >> macros. Interesting, very interesting.
If you're using the latest Twine 1.3.6 Alpha (28-1-13) , use this code:
version.extensions["toggletagMacros"]={major:1,minor:0,revision:0};macros["toggletag"]={handler:function(a,b,c){var p=e(a);if(p){var t=p.getAttribute("data-tags");var i=t.indexOf(c[0]);if(b!="addtag"&&i>=0){p.setAttribute("data-tags",t.replace(c[0],""));}else{if(b!="removetag"&&i<0){p.setAttribute("data-tags",t+" "+c[0]);}}}function e(f){while(f.parentNode&&f.className!="passage"){f=f.parentNode;}if(f.getAttribute("data-tags")){return f;}return null;}}};macros["addtag"]=macros["toggletag"];macros["removetag"]=macros["toggletag"];
If you're using a standard version of Twine, use this code instead:
version.extensions["toggletagMacros"]={major:1,minor:0,revision:0};macros["toggletag"]={handler:function(a,b,c){var p=e(a);if(p){var t=p.getAttribute("data-tags");var i=t.indexOf(c[0]);if(b!="addtag"&&i>=0){p.setAttribute("data-tags",t.replace(c[0],""));}else{if(b!="removetag"&&i<0){p.setAttribute("data-tags",t+" "+c[0]);}}}else{var t=state.history[0].passage.tags;var i=t.indexOf(c[0]);if(b!="addtag"&&i>=0){t.splice(i,1);}else{if(b!="removetag"&&i<0){t.push(c[0]);}}}function e(f){while(f.parentNode&&f.className!="passage"){f=f.parentNode;}if(f.getAttribute("data-tags")){return f;}return null;}}};macros["addtag"]=macros["toggletag"];macros["removetag"]=macros["toggletag"];