Extend the list widget to allow the generated HTML elements to be controlled

This makes it possible to generate UL or OL lists as well as the
current divs and spans.

This feature is clearly necessary but I'm not very happy with it. It
feels as though the syntax should be modifying a UL tag to specify the
extra information required to generate the list, rather than turning
the list widget to indirectly specify it's elements.

core/modules/widgets/list/list.js

@@ -24,14 +24,44 @@ var ListWidget = function(renderer) {
 	this.generate();
 };
 
+var typeInfoByType = {
+	plain: {
+		frame: {
+			block: "div", inline: "span"
+		},
+		member: {
+			block: "div", inline: "span"
+		}
+	},
+	ul: {
+		frame: {
+			block: "ul", inline: "ul"
+		},
+		member: {
+			block: "li", inline: "li"
+		}
+	},
+	ol: {
+		frame: {
+			block: "ol", inline: "ol"
+		},
+		member: {
+			block: "li", inline: "li"
+		}
+	}
+};
+
 ListWidget.prototype.generate = function() {
 	// Get our attributes
 	this.macro = this.renderer.getAttribute("macro");
+	this.type = this.renderer.getAttribute("type","plain");
 	this.itemClass = this.renderer.getAttribute("itemClass");
 	this.template = this.renderer.getAttribute("template");
 	this.editTemplate = this.renderer.getAttribute("editTemplate");
 	this.emptyMessage = this.renderer.getAttribute("emptyMessage");
 	this["class"] = this.renderer.getAttribute("class");
+	// Get our type information
+	this.typeInfo = typeInfoByType[this.type] || typeInfoByType.plain;
 	// Set up the classes
 	var classes = ["tw-list-frame"];
 	if(this["class"]) {
@@ -51,7 +81,7 @@ ListWidget.prototype.generate = function() {
 		}		
 	}
 	// Create the list frame element
-	this.tag = this.renderer.parseTreeNode.isBlock ? "div" : "span";
+	this.tag = this.renderer.parseTreeNode.isBlock ? this.typeInfo.frame.block : this.typeInfo.frame.inline;
 	this.attributes = {
 		"class": classes.join(" ")
 	};
@@ -97,7 +127,7 @@ ListWidget.prototype.createListElement = function(title) {
 	// Return the list element
 	return {
 		type: "element",
-		tag: this.renderer.parseTreeNode.isBlock ? "div" : "span",
+		tag: this.renderer.parseTreeNode.isBlock ? this.typeInfo.member.block : this.typeInfo.member.inline,
 		attributes: {
 			"class": {type: "string", value: classes.join(" ")}
 		},

editions/tw5.com/tiddlers/Docs.tid

@@ -7,11 +7,11 @@ This is the main documentation hub for TiddlyWiki. See also the DeveloperDocs.
 
 TiddlyWiki5 can be used via these editions:
 
-{{{ [tag[edition]sort[title]] }}}
+<$list filter="[tag[edition]sort[title]]" type="ul"/>
 
 ! How to use ~TiddlyWiki5
 
-{{{ [tag[howto]sort[title]] }}}
+<$list filter="[tag[howto]sort[title]]" type="ul"/>
 
 ! Concepts
 

editions/tw5.com/tiddlers/widgets/ListWidget.tid

@@ -8,6 +8,7 @@ This is the tiddler called [[Blah-$title$]]
 ! Introduction
 
 The list widget displays a sequence of tiddlers that match a TiddlerFilter. It can be used for many purposes:
+
 * Displaying custom lists of links, like in TiddlyWiki5's sidebar
 * Custom lists, such as "all tiddlers tagged 'task' that are not tagged 'done'"
 * Listing each of the tags applied to a tiddler
@@ -20,6 +21,7 @@ The tiddlers can either be displayed by transcluding each in turn through an opt
 The content of the `<$list>` widget is the optional template to use for rendering each tiddler in the list.
 
 |!Attribute |!Description |
+|type |Determines the HTML elements generated for the list: ''plain'', ''ul'' or ''ol'' |
 |filter |The TiddlerFilter to display |
 |template |The title of a template tiddler for rendering each tiddler in the list |
 |editTemplate |An alternative template to use for DraftTiddlers in edit mode |