From 4a99e0cc7d4a6b9e7071c0b2a9a0f63c3c7d2492 Mon Sep 17 00:00:00 2001 From: "jeremy@jermolene.com" Date: Mon, 26 Apr 2021 14:41:26 +0100 Subject: [PATCH] Change "index" attribute of list widget to "counter", and use 1-based counting Extends #5611 --- core/modules/widgets/list.js | 22 +++++++++---------- editions/test/tiddlers/tests/test-widget.js | 12 +++++----- .../tw5.com/tiddlers/widgets/ListWidget.tid | 20 ++++++++--------- 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/core/modules/widgets/list.js b/core/modules/widgets/list.js index 426adb307..17161ca21 100755 --- a/core/modules/widgets/list.js +++ b/core/modules/widgets/list.js @@ -61,7 +61,7 @@ ListWidget.prototype.execute = function() { this.template = this.getAttribute("template"); this.editTemplate = this.getAttribute("editTemplate"); this.variableName = this.getAttribute("variable","currentTiddler"); - this.indexName = this.getAttribute("index"); + this.counterName = this.getAttribute("counter"); this.storyViewName = this.getAttribute("storyview"); this.historyTitle = this.getAttribute("history"); // Compose the list elements @@ -130,9 +130,9 @@ ListWidget.prototype.makeItemTemplate = function(title,index) { } // Return the list item var parseTreeNode = {type: "listitem", itemTitle: title, variableName: this.variableName, children: templateTree}; - if(this.indexName) { - parseTreeNode.index = index.toString(); - parseTreeNode.indexName = this.indexName; + if(this.counterName) { + parseTreeNode.counter = (index + 1).toString(); + parseTreeNode.counterName = this.counterName; parseTreeNode.isFirst = index === 0; parseTreeNode.isLast = index === this.list.length - 1; } @@ -150,7 +150,7 @@ ListWidget.prototype.refresh = function(changedTiddlers) { this.storyview.refreshStart(changedTiddlers,changedAttributes); } // Completely refresh if any of our attributes have changed - if(changedAttributes.filter || changedAttributes.variable || changedAttributes.index || changedAttributes.template || changedAttributes.editTemplate || changedAttributes.emptyMessage || changedAttributes.storyview || changedAttributes.history) { + if(changedAttributes.filter || changedAttributes.variable || changedAttributes.counter || changedAttributes.template || changedAttributes.editTemplate || changedAttributes.emptyMessage || changedAttributes.storyview || changedAttributes.history) { this.refreshSelf(); result = true; } else { @@ -219,9 +219,9 @@ ListWidget.prototype.handleListChanges = function(changedTiddlers) { this.removeChildDomNodes(); this.children = []; } - // If we are providing an index variable then we must refresh the items, otherwise we can rearrange them + // If we are providing an counter variable then we must refresh the items, otherwise we can rearrange them var hasRefreshed = false,t; - if(this.indexName) { + if(this.counterName) { // Cycle through the list and remove and re-insert the first item that has changed, and all the remaining items for(t=0; tLemon Squash0yesnoJolly Old World1nonoGolly Gosh2nonoWorldly Old Jelly3noyes

"); + expect(wrapper.innerHTML).toBe("

Lemon Squash1yesnoJolly Old World2nonoGolly Gosh3nonoWorldly Old Jelly4noyes

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); @@ -391,7 +391,7 @@ describe("Widget module", function() { // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerFive"]); // Test the refreshing - expect(wrapper.innerHTML).toBe("

Jalapeno Peppers0yesnoLemon Squash1nonoJolly Old World2nonoGolly Gosh3nonoWorldly Old Jelly4noyes

"); + expect(wrapper.innerHTML).toBe("

Jalapeno Peppers1yesnoLemon Squash2nonoJolly Old World3nonoGolly Gosh4nonoWorldly Old Jelly5noyes

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); @@ -420,7 +420,7 @@ describe("Widget module", function() { // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerThree"]); // Test the refreshing - expect(wrapper.innerHTML).toBe("

Jalapeno Peppers0yesnoLemon Squash1nonoJolly Old World2nonoWorldly Old Jelly3noyes

"); + expect(wrapper.innerHTML).toBe("

Jalapeno Peppers1yesnoLemon Squash2nonoJolly Old World3nonoWorldly Old Jelly4noyes

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); @@ -445,7 +445,7 @@ describe("Widget module", function() { // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerThree"]); // Test the refreshing - expect(wrapper.innerHTML).toBe("

Jalapeno Peppers0yesnoLemon Squash1nonoJolly Old World2nonoSomething3nonoWorldly Old Jelly4noyes

"); + expect(wrapper.innerHTML).toBe("

Jalapeno Peppers1yesnoLemon Squash2nonoJolly Old World3nonoSomething4nonoWorldly Old Jelly5noyes

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); diff --git a/editions/tw5.com/tiddlers/widgets/ListWidget.tid b/editions/tw5.com/tiddlers/widgets/ListWidget.tid index 363d87e2d..01b28ad9e 100644 --- a/editions/tw5.com/tiddlers/widgets/ListWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/ListWidget.tid @@ -82,27 +82,27 @@ The action of the list widget depends on the results of the filter combined with |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 | |variable |The name for a [[variable|Variables]] in which the title of each listed tiddler is stored. Defaults to ''currentTiddler'' | -|index |<<.from-version "5.1.24">> Optional name for a [[variable|Variables]] in which the numeric index of each listed tiddler is stored (see below) | +|counter |<<.from-version "5.1.24">> 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 | |storyview |Optional name of module responsible for animating/processing the list | |history |The title of the tiddler containing the navigation history | -!! `index` attribute +!! `counter` attribute -The optional `index` attribute specifies the name of a variable to hold the numeric index of the current item in the list. +The optional `counter` attribute specifies the name of a variable to hold the 1-based numeric index of the current item in the list. Two additional variables are also set to indicate the first and last items in the list: -* `-first` is set to `yes` for the first entry in the list, `no` for the others -* `-last` is set to `yes` for the last entry in the list, `no` for the others +* `-first` is set to `yes` for the first entry in the list, `no` for the others +* `-last` is set to `yes` for the last entry in the list, `no` for the others For example: ``` -<$list filter="[tag[About]sort[title]]" index="index"> +<$list filter="[tag[About]sort[title]]" counter="counter">
-<>: ''<$text text=<>/>'' (is first: <>, is last: <>) +<>: ''<$text text=<>/>'' (is first: <>, is last: <>)
``` @@ -110,14 +110,14 @@ For example: Displays as: <<< -<$list filter="[tag[About]sort[title]]" index="index"> +<$list filter="[tag[About]sort[title]]" counter="counter">
-<>: ''<$text text=<>/>'' (is first: <>, is last: <>) +<>: ''<$text text=<>/>'' (is first: <>, is last: <>)
<<< -Note that using the `index` attribute degrades the performance of the list widget because it prevents the optimisation of refreshes by moving list items around instead of rerendering them. +Note that using the `counter` attribute degrades the performance of the list widget because it prevents the optimisation of refreshes by moving list items around instead of rerendering them. !! Edit mode