First pass at a grid widget

Need to add support for cell templates and in place editing.

core/modules/widgets/grid.js

@@ -0,0 +1,109 @@
+/*\
+title: $:/core/modules/widgets/grid.js
+type: application/javascript
+module-type: widget
+
+The grid widget.
+
+This example renders a table made up of tiddlers titled `MySheet_A_1`, `MySheet_A_2`, `MySheet_A_3`, ... , `MySheet_B_1`, `MySheet_B_2`, `MySheet_B_3` etc.
+
+```
+<$grid prefix="MySheet" rows=20 cols=20/>
+```
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var GridWidget = function(renderer) {
+	// Save state
+	this.renderer = renderer;
+	// Generate widget elements
+	this.generate();
+};
+
+GridWidget.prototype.generate = function() {
+	// Get our attributes
+	this.prefix = this.renderer.getAttribute("prefix","Grid");
+	this.rows = parseInt(this.renderer.getAttribute("rows","10"),10);
+	this.cols = parseInt(this.renderer.getAttribute("cols","10"),10);
+	this["class"] = this.renderer.getAttribute("class");
+	// Set up the classes
+	var classes = ["tw-grid-frame"];
+	if(this["class"]) {
+		$tw.utils.pushTop(classes,this["class"]);
+	}
+	// Create the grid table element
+	this.tag = "div";
+	this.attributes = {
+		"class": classes.join(" ")
+	};
+	this.children = this.renderer.renderTree.createRenderers(this.renderer,this.generateTable());
+};
+
+GridWidget.prototype.generateTable = function() {
+	var rows = [];
+	for(var row=0; row<this.rows; row++) {
+		var tr = {
+			type: "element",
+			tag: "tr",
+			children: []
+		};
+		rows.push(tr);
+		for(var col=0; col<this.cols; col++) {
+			var td = {
+					type: "element",
+					tag: "td",
+					children: [{
+						type: "element",
+						tag: "$transclude",
+						attributes: {
+							target: {type: "string", value: this.getTableCellTitle(col,row)}
+						}
+					}]
+				};
+			tr.children.push(td);
+		}
+	}
+	return [{
+		type: "element",
+		tag: "table",
+		children: [{
+			type: "element",
+			tag: "tbody",
+			children: rows
+		}]
+	}];
+};
+
+GridWidget.prototype.getTableCellTitle = function(col,row) {
+	var c = String.fromCharCode(col % 26 + "A".charCodeAt(0));
+	col = Math.floor(col/26);
+	while(col>0) {
+		c = String.fromCharCode(col % 26 + "A".charCodeAt(0) - 1) + c;
+		col = Math.floor(col/26);
+	}
+	return this.prefix + "_" + c + "_" + (row + 1);
+};
+
+GridWidget.prototype.postRenderInDom = function() {
+};
+
+GridWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) {
+	// Reexecute the widget if any of our attributes have changed
+	if(true) {
+		// Regenerate and rerender the widget and replace the existing DOM node
+		this.generate();
+		var oldDomNode = this.renderer.domNode,
+			newDomNode = this.renderer.renderInDom();
+		oldDomNode.parentNode.replaceChild(newDomNode,oldDomNode);
+	} else {
+	}
+};
+
+exports.grid = GridWidget;
+
+})();

editions/tw5.com/tiddlers/samples/grid/GridDemo_A_1.tid

@@ -0,0 +1,4 @@
+title: GridDemo_A_1
+tags: demo
+
+The A1 of cells

editions/tw5.com/tiddlers/samples/grid/GridDemo_A_2.tid

@@ -0,0 +1,4 @@
+title: GridDemo_A_2
+tags: demo
+
+The A2 is a road from London through Kent

editions/tw5.com/tiddlers/samples/grid/GridDemo_A_3.tid

@@ -0,0 +1,4 @@
+title: GridDemo_A_3
+tags: demo
+
+Take the A3 if you want to go to Basingstoke

editions/tw5.com/tiddlers/samples/grid/GridDemo_B_1.tid

@@ -0,0 +1,4 @@
+title: GridDemo_B_1
+tags: demo
+
+Vitamin B1

editions/tw5.com/tiddlers/samples/grid/GridDemo_B_2.tid

@@ -0,0 +1,4 @@
+title: GridDemo_B_2
+tags: demo
+
+This is cell B2, which is also transcluding A2: {{GridDemo_A_2}}.

editions/tw5.com/tiddlers/samples/grid/GridDemo_B_3.tid

@@ -0,0 +1,4 @@
+title: GridDemo_B_3
+tags: demo
+
+B3 or 4

editions/tw5.com/tiddlers/samples/grid/GridDemo_C_1.tid

@@ -0,0 +1,4 @@
+title: GridDemo_C_1
+tags: demo
+
+C1 eat one

editions/tw5.com/tiddlers/samples/grid/GridDemo_C_2.tid

@@ -0,0 +1,4 @@
+title: GridDemo_C_2
+tags: demo
+
+Or C2 save one for later

editions/tw5.com/tiddlers/samples/grid/GridDemo_C_3.tid

@@ -0,0 +1,4 @@
+title: GridDemo_C_3
+tags: demo
+
+This is cell C3, with an image {{$:/core/images/done-button}}

editions/tw5.com/tiddlers/widgets/GridWidget.tid

@@ -0,0 +1,18 @@
+title: GridWidget
+tags: docs widget
+
+The grid widget assembles tiddlers into a tabular grid based on their titles. For example:
+
+```
+<$grid prefix="GridDemo" rows=3 cols=3/>
+```
+
+In this case, the following tiddlers will be rendered:
+
+|GridDemo_A_1 |GridDemo_A_2 |GridDemo_A_3 |
+|GridDemo_B_1 |GridDemo_B_2 |GridDemo_B_3 |
+|GridDemo_C_1 |GridDemo_C_2 |GridDemo_C_3 |
+
+The result is:
+
+<$grid prefix="GridDemo" rows=3 cols=3/>

themes/tiddlywiki/snowwhite/base.tid

@@ -837,3 +837,11 @@ canvas.tw-edit-bitmapeditor  {
 	background-color: rgb(250, 210, 50);
 }
 
+/*
+** Grids
+*/
+
+.tw-grid-frame td {
+	width: 1em;
+	height: 1em;
+}