mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-13 13:29:56 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Jeremy Ruston 2013-08-19 11:08:00 +01:00
parent 3426c89330
commit bc56253479
3 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
core/modules/widgets/list/list.js
View File

@ -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(" ")}
},

4
editions/tw5.com/tiddlers/Docs.tid
View File

@ -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

2
editions/tw5.com/tiddlers/widgets/ListWidget.tid
View File

@ -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 |