diff --git a/core/modules/widgets/grid.js b/core/modules/widgets/grid.js new file mode 100644 index 000000000..5065ca482 --- /dev/null +++ b/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; row0) { + 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; + +})(); diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_A_1.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_A_1.tid new file mode 100644 index 000000000..ddd89da3d --- /dev/null +++ b/editions/tw5.com/tiddlers/samples/grid/GridDemo_A_1.tid @@ -0,0 +1,4 @@ +title: GridDemo_A_1 +tags: demo + +The A1 of cells \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_A_2.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_A_2.tid new file mode 100644 index 000000000..5d228fc5b --- /dev/null +++ b/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 \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_A_3.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_A_3.tid new file mode 100644 index 000000000..350da0b22 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_B_1.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_B_1.tid new file mode 100644 index 000000000..be0f320e7 --- /dev/null +++ b/editions/tw5.com/tiddlers/samples/grid/GridDemo_B_1.tid @@ -0,0 +1,4 @@ +title: GridDemo_B_1 +tags: demo + +Vitamin B1 \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_B_2.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_B_2.tid new file mode 100644 index 000000000..adcb166ae --- /dev/null +++ b/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}}. \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_B_3.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_B_3.tid new file mode 100644 index 000000000..6e1b27936 --- /dev/null +++ b/editions/tw5.com/tiddlers/samples/grid/GridDemo_B_3.tid @@ -0,0 +1,4 @@ +title: GridDemo_B_3 +tags: demo + +B3 or 4 \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_C_1.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_C_1.tid new file mode 100644 index 000000000..4cfc80dca --- /dev/null +++ b/editions/tw5.com/tiddlers/samples/grid/GridDemo_C_1.tid @@ -0,0 +1,4 @@ +title: GridDemo_C_1 +tags: demo + +C1 eat one \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_C_2.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_C_2.tid new file mode 100644 index 000000000..3740170c2 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/samples/grid/GridDemo_C_3.tid b/editions/tw5.com/tiddlers/samples/grid/GridDemo_C_3.tid new file mode 100644 index 000000000..8ac5743fe --- /dev/null +++ b/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}} \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/widgets/GridWidget.tid b/editions/tw5.com/tiddlers/widgets/GridWidget.tid new file mode 100644 index 000000000..3c80d3762 --- /dev/null +++ b/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/> diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid index fa6e3dc8e..53cf50b98 100644 --- a/themes/tiddlywiki/snowwhite/base.tid +++ b/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; +}