Extend list widget with "index" attribute (#5611)

* Extend list widget with "index" attribute * Fix refreshing bug * Clarify performance note
2026-04-30 12:36:44 +00:00 · 2021-04-20 09:15:11 +01:00
parent a725da2b39
commit 85ba7ac041
3 changed files with 202 additions and 21 deletions
--- a/editions/test/tiddlers/tests/test-widget.js
+++ b/editions/test/tiddlers/tests/test-widget.js
@@ -350,6 +350,123 @@ describe("Widget module", function() {
 		expect(wrapper.children[0].children[4].sequenceNumber).toBe(5);
 	});

+
+	it("should deal with the list widget using an index variable", function() {
+		var wiki = new $tw.Wiki();
+		// Add some tiddlers
+		wiki.addTiddlers([
+			{title: "TiddlerOne", text: "Jolly Old World"},
+			{title: "TiddlerTwo", text: "Worldly Old Jelly"},
+			{title: "TiddlerThree", text: "Golly Gosh"},
+			{title: "TiddlerFour", text: "Lemon Squash"}
+		]);
+		// Construct the widget node
+		var text = "<$list index='index'><$view field='text'/><$text text=<<index>>/><$text text=<<index-first>>/><$text text=<<index-last>>/></$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>Lemon Squash0yesnoJolly Old World1nonoGolly Gosh2nonoWorldly Old Jelly3noyes</p>");
+		// Test the sequence numbers in the DOM
+		expect(wrapper.sequenceNumber).toBe(0);
+		expect(wrapper.children[0].sequenceNumber).toBe(1);
+		expect(wrapper.children[0].children[0].sequenceNumber).toBe(2);
+		expect(wrapper.children[0].children[1].sequenceNumber).toBe(3);
+		expect(wrapper.children[0].children[2].sequenceNumber).toBe(4);
+		expect(wrapper.children[0].children[3].sequenceNumber).toBe(5);
+		expect(wrapper.children[0].children[4].sequenceNumber).toBe(6);
+		expect(wrapper.children[0].children[5].sequenceNumber).toBe(7);
+		expect(wrapper.children[0].children[6].sequenceNumber).toBe(8);
+		expect(wrapper.children[0].children[7].sequenceNumber).toBe(9);
+		expect(wrapper.children[0].children[8].sequenceNumber).toBe(10);
+		expect(wrapper.children[0].children[9].sequenceNumber).toBe(11);
+		expect(wrapper.children[0].children[10].sequenceNumber).toBe(12);
+		expect(wrapper.children[0].children[11].sequenceNumber).toBe(13);
+		expect(wrapper.children[0].children[12].sequenceNumber).toBe(14);
+		expect(wrapper.children[0].children[13].sequenceNumber).toBe(15);
+		expect(wrapper.children[0].children[14].sequenceNumber).toBe(16);
+		expect(wrapper.children[0].children[15].sequenceNumber).toBe(17);
+		// Add another tiddler
+		wiki.addTiddler({title: "TiddlerFive", text: "Jalapeno Peppers"});
+		// Refresh
+		refreshWidgetNode(widgetNode,wrapper,["TiddlerFive"]);
+		// Test the refreshing
+		expect(wrapper.innerHTML).toBe("<p>Jalapeno Peppers0yesnoLemon Squash1nonoJolly Old World2nonoGolly Gosh3nonoWorldly Old Jelly4noyes</p>");
+		// Test the sequence numbers in the DOM
+		expect(wrapper.sequenceNumber).toBe(0);
+		expect(wrapper.children[0].sequenceNumber).toBe(1);
+		expect(wrapper.children[0].children[0].sequenceNumber).toBe(18);
+		expect(wrapper.children[0].children[1].sequenceNumber).toBe(19);
+		expect(wrapper.children[0].children[2].sequenceNumber).toBe(20);
+		expect(wrapper.children[0].children[3].sequenceNumber).toBe(21);
+		expect(wrapper.children[0].children[4].sequenceNumber).toBe(22);
+		expect(wrapper.children[0].children[5].sequenceNumber).toBe(23);
+		expect(wrapper.children[0].children[6].sequenceNumber).toBe(24);
+		expect(wrapper.children[0].children[7].sequenceNumber).toBe(25);
+		expect(wrapper.children[0].children[8].sequenceNumber).toBe(26);
+		expect(wrapper.children[0].children[9].sequenceNumber).toBe(27);
+		expect(wrapper.children[0].children[10].sequenceNumber).toBe(28);
+		expect(wrapper.children[0].children[11].sequenceNumber).toBe(29);
+		expect(wrapper.children[0].children[12].sequenceNumber).toBe(30);
+		expect(wrapper.children[0].children[13].sequenceNumber).toBe(31);
+		expect(wrapper.children[0].children[14].sequenceNumber).toBe(32);
+		expect(wrapper.children[0].children[15].sequenceNumber).toBe(33);
+		expect(wrapper.children[0].children[16].sequenceNumber).toBe(34);
+		expect(wrapper.children[0].children[17].sequenceNumber).toBe(35);
+		expect(wrapper.children[0].children[18].sequenceNumber).toBe(36);
+		expect(wrapper.children[0].children[19].sequenceNumber).toBe(37);
+		// Remove a tiddler
+		wiki.deleteTiddler("TiddlerThree");
+		// Refresh
+		refreshWidgetNode(widgetNode,wrapper,["TiddlerThree"]);
+		// Test the refreshing
+		expect(wrapper.innerHTML).toBe("<p>Jalapeno Peppers0yesnoLemon Squash1nonoJolly Old World2nonoWorldly Old Jelly3noyes</p>");
+		// Test the sequence numbers in the DOM
+		expect(wrapper.sequenceNumber).toBe(0);
+		expect(wrapper.children[0].sequenceNumber).toBe(1);
+		expect(wrapper.children[0].children[0].sequenceNumber).toBe(18);
+		expect(wrapper.children[0].children[1].sequenceNumber).toBe(19);
+		expect(wrapper.children[0].children[2].sequenceNumber).toBe(20);
+		expect(wrapper.children[0].children[3].sequenceNumber).toBe(21);
+		expect(wrapper.children[0].children[4].sequenceNumber).toBe(22);
+		expect(wrapper.children[0].children[5].sequenceNumber).toBe(23);
+		expect(wrapper.children[0].children[6].sequenceNumber).toBe(24);
+		expect(wrapper.children[0].children[7].sequenceNumber).toBe(25);
+		expect(wrapper.children[0].children[8].sequenceNumber).toBe(26);
+		expect(wrapper.children[0].children[9].sequenceNumber).toBe(27);
+		expect(wrapper.children[0].children[10].sequenceNumber).toBe(28);
+		expect(wrapper.children[0].children[11].sequenceNumber).toBe(29);
+		expect(wrapper.children[0].children[12].sequenceNumber).toBe(38);
+		expect(wrapper.children[0].children[13].sequenceNumber).toBe(39);
+		expect(wrapper.children[0].children[14].sequenceNumber).toBe(40);
+		expect(wrapper.children[0].children[15].sequenceNumber).toBe(41);
+		// Add it back a tiddler
+		wiki.addTiddler({title: "TiddlerThree", text: "Something"});
+		// Refresh
+		refreshWidgetNode(widgetNode,wrapper,["TiddlerThree"]);
+		// Test the refreshing
+		expect(wrapper.innerHTML).toBe("<p>Jalapeno Peppers0yesnoLemon Squash1nonoJolly Old World2nonoSomething3nonoWorldly Old Jelly4noyes</p>");
+		// Test the sequence numbers in the DOM
+		expect(wrapper.sequenceNumber).toBe(0);
+		expect(wrapper.children[0].sequenceNumber).toBe(1);
+		expect(wrapper.children[0].children[0].sequenceNumber).toBe(18);
+		expect(wrapper.children[0].children[1].sequenceNumber).toBe(19);
+		expect(wrapper.children[0].children[2].sequenceNumber).toBe(20);
+		expect(wrapper.children[0].children[3].sequenceNumber).toBe(21);
+		expect(wrapper.children[0].children[4].sequenceNumber).toBe(22);
+		expect(wrapper.children[0].children[5].sequenceNumber).toBe(23);
+		expect(wrapper.children[0].children[6].sequenceNumber).toBe(24);
+		expect(wrapper.children[0].children[7].sequenceNumber).toBe(25);
+		expect(wrapper.children[0].children[8].sequenceNumber).toBe(26);
+		expect(wrapper.children[0].children[9].sequenceNumber).toBe(27);
+		expect(wrapper.children[0].children[10].sequenceNumber).toBe(28);
+		expect(wrapper.children[0].children[11].sequenceNumber).toBe(29);
+		expect(wrapper.children[0].children[12].sequenceNumber).toBe(42);
+		expect(wrapper.children[0].children[13].sequenceNumber).toBe(43);
+		expect(wrapper.children[0].children[14].sequenceNumber).toBe(44);
+		expect(wrapper.children[0].children[15].sequenceNumber).toBe(45);
+	});
+
 	it("should deal with the list widget followed by other widgets", function() {
 		var wiki = new $tw.Wiki();
 		// Add some tiddlers