mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2026-09-19 16:20:43 +00:00
Add join attribute to list widget (#7694)
* Add join attribute to list widget * Use new join attribute in HTML saving templates This simplifies the logic involved in saving tiddlers in JSON format into TW html files, and should also slightly speed up the saving process depending on how often that list widget gets refreshed. * Unit tests for list widget's new join attribute * Add `<$list-join>` widget Allows specifying complicated join text more easily than an attribute
This commit is contained in:
Robin Munn
@@ -41,6 +41,33 @@ description: Under development
|
||||
|
||||
Note that the <<.attr "emptyMessage">> and <<.attr "template">> attributes take precedence if they are present.
|
||||
|
||||
!! Joiners for the ListWidget
|
||||
|
||||
<<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7694">> a <<.attr "join">> attribute to the <<.wid "ListWidget">> widget to insert a short piece of text between list items. This is both easier to use and faster than using the <<.attr "counter">> attribute for the same purpose. So if your list looked like this:
|
||||
|
||||
```
|
||||
<$list filter=<<filter>> counter="counter" variable="item">
|
||||
<$text text=<<item>>/><$list filter="[<counter-last>match[no]]" variable="ignore"><$text text=", "/></$list>
|
||||
</$list>
|
||||
```
|
||||
|
||||
You can replace it with:
|
||||
|
||||
```
|
||||
<$list filter=<<filter>> variable="item" join=", ">
|
||||
<$text text=<<item>>/>
|
||||
</$list>
|
||||
```
|
||||
|
||||
If the joiner text that you need is long and awkward to write in an attribute, you can use the new `<$list-join>` widget. Like `<$list-template>` and `<$list-empty>`, it must be an immediate child of the <<.wid "ListWidget">>:
|
||||
|
||||
```
|
||||
<$list filter=<<filter>> variable="item">
|
||||
<$text text=<<item>>/>
|
||||
<$list-join>, and <em>also</em> let's not forget </$list-join>
|
||||
</$list>
|
||||
```
|
||||
|
||||
!! jsonset operator
|
||||
|
||||
<<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7742">> [[jsonset Operator]] for setting values within JSON objects
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
title: ListWidget/WithJoinTemplate
|
||||
description: List widget with join template and $list-empty
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
+
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
|
||||
\procedure test(filter)
|
||||
<$list filter=<<filter>>>
|
||||
Item:<<currentTiddler>>
|
||||
|
||||
<$list-empty>
|
||||
None!
|
||||
</$list-empty>
|
||||
|
||||
<$list-join>,</$list-join>
|
||||
</$list>
|
||||
\end
|
||||
|
||||
<<test "1 2 3">>
|
||||
|
||||
<<test "">>
|
||||
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p>Item:1,Item:2,Item:3</p><p>None!</p>
|
||||
@@ -0,0 +1,32 @@
|
||||
title: ListWidget/WithJoinTemplateInBlockMode
|
||||
description: List widget with join template and $list-empty in block mode
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
+
|
||||
title: Output
|
||||
|
||||
\whitespace trim
|
||||
|
||||
\procedure test(filter)
|
||||
<$list filter=<<filter>>>
|
||||
|
||||
Item:<<currentTiddler>>
|
||||
|
||||
<$list-empty>
|
||||
None!
|
||||
</$list-empty>
|
||||
|
||||
<$list-join><br></$list-join>
|
||||
</$list>
|
||||
\end
|
||||
|
||||
<<test "1 2 3">>
|
||||
|
||||
<<test "">>
|
||||
|
||||
+
|
||||
title: ExpectedResult
|
||||
comment: I wish there was a good way to get rid of these extraneous paragraph elements
|
||||
|
||||
<p>Item:1</p><p></p><p></p><br><p>Item:2</p><p></p><p></p><br><p>Item:3</p><p></p><p></p>None!
|
||||
@@ -527,6 +527,45 @@ describe("Widget module", function() {
|
||||
expect(wrapper.children[0].children[15].sequenceNumber).toBe(53);
|
||||
});
|
||||
|
||||
var testListJoin = function(oldList, newList) {
|
||||
return function() {
|
||||
var wiki = new $tw.Wiki();
|
||||
// Add some tiddlers
|
||||
wiki.addTiddler({title: "Numbers", text: "", list: oldList});
|
||||
var text = "<$list filter='[list[Numbers]]' variable='item' join=', '><<item>></$list>";
|
||||
var widgetNode = createWidgetNode(parseText(text,wiki),wiki);
|
||||
// Render the widget node to the DOM
|
||||
var wrapper = renderWidgetNode(widgetNode);
|
||||
// Test the rendering
|
||||
expect(wrapper.innerHTML).toBe("<p>" + oldList.split(' ').join(', ') + "</p>");
|
||||
// Change the list and ensure new rendering is still right
|
||||
wiki.addTiddler({title: "Numbers", text: "", list: newList});
|
||||
refreshWidgetNode(widgetNode,wrapper,["Numbers"]);
|
||||
expect(wrapper.innerHTML).toBe("<p>" + newList.split(' ').join(', ') + "</p>");
|
||||
}
|
||||
}
|
||||
|
||||
it("the list widget with join should update correctly when empty list gets one item", testListJoin("", "1"));
|
||||
it("the list widget with join should update correctly when empty list gets two items", testListJoin("", "1 2"));
|
||||
it("the list widget with join should update correctly when single-item list is appended to", testListJoin("1", "1 2"));
|
||||
it("the list widget with join should update correctly when single-item list is prepended to", testListJoin("1", "2 1"));
|
||||
it("the list widget with join should update correctly when list is appended", testListJoin("1 2 3 4", "1 2 3 4 5"));
|
||||
it("the list widget with join should update correctly when last item is removed", testListJoin("1 2 3 4", "1 2 3"));
|
||||
it("the list widget with join should update correctly when first item is inserted", testListJoin("1 2 3 4", "0 1 2 3 4"));
|
||||
it("the list widget with join should update correctly when first item is removed", testListJoin("1 2 3 4", "2 3 4"));
|
||||
it("the list widget with join should update correctly when first two items are swapped", testListJoin("1 2 3 4", "2 1 3 4"));
|
||||
it("the list widget with join should update correctly when last two items are swapped", testListJoin("1 2 3 4", "1 2 4 3"));
|
||||
it("the list widget with join should update correctly when last item is moved to the front", testListJoin("1 2 3 4", "4 1 2 3"));
|
||||
it("the list widget with join should update correctly when last item is moved to the middle", testListJoin("1 2 3 4", "1 4 2 3"));
|
||||
it("the list widget with join should update correctly when first item is moved to the back", testListJoin("1 2 3 4", "2 3 4 1"));
|
||||
it("the list widget with join should update correctly when middle item is moved to the back", testListJoin("1 2 3 4", "1 3 4 2"));
|
||||
it("the list widget with join should update correctly when the last item disappears at the same time as other edits 1", testListJoin("1 3 4", "1 2 3"));
|
||||
it("the list widget with join should update correctly when the last item disappears at the same time as other edits 2", testListJoin("1 3 4", "1 3 2"));
|
||||
it("the list widget with join should update correctly when the last item disappears at the same time as other edits 3", testListJoin("1 3 4", "2 1 3"));
|
||||
it("the list widget with join should update correctly when the last item disappears at the same time as other edits 4", testListJoin("1 3 4", "2 3 1"));
|
||||
it("the list widget with join should update correctly when the last item disappears at the same time as other edits 5", testListJoin("1 3 4", "3 1 2"));
|
||||
it("the list widget with join should update correctly when the last item disappears at the same time as other edits 6", testListJoin("1 3 4", "3 2 1"));
|
||||
|
||||
var testCounterLast = function(oldList, newList) {
|
||||
return function() {
|
||||
var wiki = new $tw.Wiki();
|
||||
|
||||
@@ -84,6 +84,7 @@ The action of the list widget depends on the results of the filter combined with
|
||||
|limit |<<.from-version "5.3.2">> Optional numeric limit for the number of results that are returned. Negative values will return the results from the end of the list |
|
||||
|template |The title of a template tiddler for transcluding each tiddler in the list. When no template is specified, the body of the ListWidget serves as the item template. With no body, a simple link to the tiddler is returned. |
|
||||
|editTemplate |An alternative template to use for [[DraftTiddlers|DraftMechanism]] in edit mode |
|
||||
|join |<<.from-version "5.3.2">> Text to include between each list item |
|
||||
|variable |The name for a [[variable|Variables]] in which the title of each listed tiddler is stored. Defaults to ''currentTiddler'' |
|
||||
|counter |<<.from-version "5.2.0">> Optional name for a [[variable|Variables]] in which the 1-based numeric index of each listed tiddler is stored (see below) |
|
||||
|emptyMessage |Message to be displayed when the list is empty |
|
||||
@@ -120,10 +121,29 @@ Displays as:
|
||||
</$list>
|
||||
<<<
|
||||
|
||||
Note that using the `counter` attribute can reduce performance when working with list items that dynamically reorder or update themselves. The best advice is only to use it when it is really necessary: to obtain a numeric index, or to detect the first or last entries in the list.
|
||||
Note that using the `counter` attribute can reduce performance when working with list items that dynamically reorder or update themselves. The best advice is only to use it when it is really necessary: to obtain a numeric index, or to detect the first or last entries in the list. Note that if you are only using it to insert something (like a comma) between list items, the `join` attribute performs much better and you should use it instead of `counter`.
|
||||
|
||||
Setting `counter="transclusion"` is a handy way to make child elements for each list element be identified as unique. A common use case are multiple [[tag macros|tag Macro]] for the same tag generated by a list widget. Refer to [[tag macro examples|tag Macro (Examples)]] for more details.
|
||||
|
||||
!! `join` attribute
|
||||
|
||||
<<.from-version "5.3.2">> The optional `join` attribute allow you to insert some [[WikiText]] between each list item without needing to use the `counter` attribute, which can become quite slow if the list is updated frequently.
|
||||
|
||||
<<.from-version "5.3.2">> If the widget `<$list-join>` is found as an immediate child of the <<.wid "ListWidget">> widget then the content of that widget is used as the "join" template, included between two list items. Note that the <<.attr "join">> attribute takes precedence if it is present.
|
||||
|
||||
For example:
|
||||
|
||||
|
||||
```
|
||||
<$list filter="[tag[About]sort[title]]" join=", " variable="item"><<item>></$list>
|
||||
```
|
||||
|
||||
Displays as:
|
||||
|
||||
<<<
|
||||
<$list filter="[tag[About]sort[title]]" join=", " variable="item"><<item>></$list>
|
||||
<<<
|
||||
|
||||
!! Edit mode
|
||||
|
||||
The `<$list>` widget can optionally render draft tiddlers through a different template to handle editing, see DraftMechanism.
|
||||
|
||||
Reference in New Issue
Block a user