1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-13 17:16:48 +00:00

First pass at a grid widget

Need to add support for cell templates and in place editing.
This commit is contained in:
Jeremy Ruston 2013-07-22 13:03:46 +01:00
parent 9a497a93b0
commit a79e876806
12 changed files with 171 additions and 0 deletions

View File

@ -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;
})();

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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/>

View File

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