Refactored slider macro

js/Renderer.js

@@ -472,39 +472,6 @@ var SplitLabelNode = function(type,left,right,classes) {
 	]);
 };
 
-/*
-Static method to construct a slider
-*/
-var SliderNode = function(type,label,tooltip,isOpen,children) {
-	var attributes = {
-		"class": "tw-slider",
-		"data-tw-slider-type": type
-	};
-	if(tooltip) {
-		attributes.alt = tooltip;
-		attributes.title = tooltip;
-	}
-	return new ElementNode("span",
-		attributes,
-		[
-			new ElementNode("a",
-				{
-					"class": ["tw-slider-label"]
-				},[
-					new TextNode(label)
-				]
-			),
-			new ElementNode("div",
-				{
-					"class": ["tw-slider-body"],
-					"style": {"display": isOpen ? "block" : "none"}
-				},
-				children
-			)
-		]
-	);
-};
-
 Renderer.MacroNode = MacroNode;
 Renderer.ElementNode = ElementNode;
 Renderer.TextNode = TextNode;
@@ -512,7 +479,6 @@ Renderer.EntityNode = EntityNode;
 Renderer.ErrorNode = ErrorNode;
 Renderer.LabelNode = LabelNode;
 Renderer.SplitLabelNode = SplitLabelNode;
-Renderer.SliderNode = SliderNode;
 
 exports.Renderer = Renderer;
 

js/macros/slider.js

@@ -10,10 +10,19 @@ The current state of the slider can be stored as the string "open" or "closed" i
 !!Parameters
 |`state` //(defaults to 1st parameter)// |The title of the tiddler to contain the current state of the slider |
 |`default` |The initial state of the slider, either `open` or `closed` |
+|`class` |A CSS class to be applied to the slider root element |
 |`content` |The WikiText to be enclosed in the slider. Overrides the `target` parameter, if present |
 |`target` //(defaults to 2nd parameter)// |The title of the tiddler that contains the enclosed text. Ignored if the `content` parameter is specified |
 |`label` //(defaults to 3rd parameter)// |The plain text to be displayed as the label for the slider button |
 |`tooltip` //(defaults to 4th parameter)// |The plain text tooltip to be displayed when the mouse hovers over the slider button |
+!!Markup
+The markup generated by the slider macro is:
+{{{
+	<span class="tw-slider {user defined class}">
+		<a class="tw-slider-label">{slider label}</a>
+		<div class="tw-slider-body" style="display:{state}">{slider content}</div>
+	</span>
+}}}
 !!Examples
 A minimal slider:
 {{{
@@ -74,6 +83,7 @@ exports.macro = {
 	params: {
 		state: {byPos: 0, type: "tiddler"},
 		"default": {byName: true, type: "text"},
+		"class": {byName: true, type: "text"},
 		target: {byPos: 1, type: "tiddler"},
 		label: {byPos: 2, type: "text"},
 		tooltip: {byPos: 3, type: "text"},
@@ -83,7 +93,7 @@ exports.macro = {
 		click: function(event) {
 			if(event.target === this.domNode.firstChild.firstChild) {
 				this.isOpen = !this.isOpen;
-				if(!saveOpenState.call(this)) {
+				if(!saveOpenState(this)) {
 					exports.macro.refreshInDom.call(this,{});
 				}
 				event.preventDefault();
@@ -94,16 +104,43 @@ exports.macro = {
 		}
 	},
 	execute: function() {
-			this.isOpen = getOpenState.call(this);
+			this.isOpen = getOpenState(this);
 			var sliderContent = [];
 			if(this.isOpen) {
-				sliderContent = getSliderContent.call(this);
+				sliderContent = getSliderContent(this);
 			}
-			var content = Renderer.SliderNode(this.params.state,
+			var attributes = {
-										this.params.label ? this.params.label : this.params.target,
+				"class": ["tw-slider"]
-										this.params.tooltip,
+			};
-										this.isOpen,
+			if(this.params.hasOwnProperty("class")) {
-										sliderContent);
+				attributes["class"].push(this.params["class"]);
+			}
+			if(this.params.hasOwnProperty("state")) {
+				attributes["data-tw-slider-type"] = this.params.state;
+			}
+			if(this.params.hasOwnProperty("tooltip")) {
+				attributes.alt = this.params.tooltip;
+				attributes.title = this.params.tooltip;
+			}
+			var content = Renderer.ElementNode("span",
+				attributes,
+				[
+					Renderer.ElementNode("a",
+						{
+							"class": ["tw-slider-label"]
+						},[
+							Renderer.TextNode(this.params.label ? this.params.label : this.params.target)
+						]
+					),
+					Renderer.ElementNode("div",
+						{
+							"class": ["tw-slider-body"],
+							"style": {"display": this.isOpen ? "block" : "none"}
+						},
+						sliderContent
+					)
+				]
+			);
 			content.execute(this.parents,this.store.getTiddler(this.tiddlerTitle));
 			return [content];
 	},
@@ -111,12 +148,12 @@ exports.macro = {
 		var needContentRefresh = true; // Avoid refreshing the content nodes if we don't need to
 		// If the state tiddler has changed then reset the open state
 		if(this.params.hasOwnProperty("state") && changes.hasOwnProperty(this.params.state)) {
-			this.isOpen = getOpenState.call(this);
+			this.isOpen = getOpenState(this);
 		}
 		// Render the content if the slider is open and we don't have any content yet
 		if(this.isOpen && this.content[0].children[1].children.length === 0) {
 			// Get the slider content and execute it
-			this.content[0].children[1].children = getSliderContent.call(this);
+			this.content[0].children[1].children = getSliderContent(this);
 			this.content[0].children[1].execute(this.parents,this.store.getTiddler(this.tiddlerTitle));
 			// Replace the existing slider body DOM node
 			this.domNode.firstChild.removeChild(this.domNode.firstChild.firstChild.nextSibling);