From bc56253479c9f18a7b95c9dd41ce4b2cc8193f78 Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Mon, 19 Aug 2013 11:08:00 +0100 Subject: [PATCH] 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 | 34 +++++++++++++++++-- editions/tw5.com/tiddlers/Docs.tid | 4 +-- .../tw5.com/tiddlers/widgets/ListWidget.tid | 2 ++ 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/core/modules/widgets/list/list.js b/core/modules/widgets/list/list.js index f20927fd9..27cccc251 100644 --- a/core/modules/widgets/list/list.js +++ b/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(" ")} }, diff --git a/editions/tw5.com/tiddlers/Docs.tid b/editions/tw5.com/tiddlers/Docs.tid index 9624f1d49..a540c3df7 100644 --- a/editions/tw5.com/tiddlers/Docs.tid +++ b/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 diff --git a/editions/tw5.com/tiddlers/widgets/ListWidget.tid b/editions/tw5.com/tiddlers/widgets/ListWidget.tid index b9483b84c..9781c1814 100644 --- a/editions/tw5.com/tiddlers/widgets/ListWidget.tid +++ b/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 |