mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00
Code Issues Releases Wiki Activity

Get rid of the old "fieldgrid" and "fieldlist" widgets

Browse Source 
Instead, we'll use the "list" widget with the new support for macros.
This commit is contained in:
Jeremy Ruston 2013-08-15 18:17:11 +01:00
parent 8c48d45479
commit 6fc4e5db7c
11 changed files with 32 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
core/modules/widgets/fieldgrid.js
View File

@ -1,85 +0,0 @@
/*\
title: $:/core/modules/widgets/fieldgrid.js
type: application/javascript
module-type: widget
Implements the fieldgrid widget.
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var FieldGridWidget = function(renderer) {
// Save state
this.renderer = renderer;
// Generate child nodes
this.generate();
};
FieldGridWidget.prototype.generate = function() {
// Get attributes
this.tiddlerTitle = this.renderer.getAttribute("tiddler",this.renderer.tiddlerTitle);
this.exclude = this.renderer.getAttribute("exclude");
this["class"] = this.renderer.getAttribute("class");
// Set up the exclusion array
var exclude = [];
if(this.exclude) {
exclude = this.exclude.split(" ");
}
// Get the tiddler
var tiddler = this.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle);
// Set up the classes
var classes = ["tw-fieldgrid-table"];
if(this["class"]) {
$tw.utils.pushTop(classes,this["class"]);
}
// Set up the header row
var rows = [
{type: "element", tag: "tr", children: [
{type: "element", tag: "th", children: [
{type: "text", text: "Field"}]},
{type: "element", tag: "th", children: [
{type: "text", text: "Value"}]}]}
];
// Add the rows for each field
if(tiddler) {
var fields = [];
for(var f in tiddler.fields) {
if(exclude.indexOf(f) === -1) {
fields.push(f);
}
}
fields.sort();
for(f=0; f<fields.length; f++) {
var value;
if(fields[f] === "text") {
value = {type: "element", tag: "em", children: [
{type: "text", text: "(length: " + tiddler.fields.text.length + ")"}
]};
} else {
value = {type: "text", text: tiddler.getFieldString(fields[f])};
}
rows.push({type: "element", tag: "tr", children: [
{type: "element", tag: "td", children: [
{type: "text", text: fields[f]}
]},
{type: "element", tag: "td", children: [value]}
]});
}
}
// Return the table element
this.tag = "table";
this.attributes ={"class": classes.join(" ")};
this.children = this.renderer.renderTree.createRenderers(this.renderer,[{
type: "element",
tag: "tbody",
children: rows
}]);
};
exports.fieldgrid = FieldGridWidget;
})();

155
core/modules/widgets/fieldlist.js
View File

@ -1,155 +0,0 @@
/*\
title: $:/core/modules/widgets/fieldlist.js
type: application/javascript
module-type: widget
The fieldlist widget renders the fields of a tiddler through a template.
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var FieldListWidget = function(renderer) {
// Save state
this.renderer = renderer;
// Generate child nodes
this.generate();
};
FieldListWidget.prototype.generate = function() {
var self = this;
// Get parameters from our attributes
this.allTiddlers = this.renderer.hasAttribute("all");
this.tiddlerTitle = this.renderer.getAttribute("tiddler",this.renderer.tiddlerTitle);
this.exclude = this.renderer.getAttribute("exclude");
// Get the exclusion list
this.excludeList;
if(this.exclude) {
this.excludeList = this.exclude.split(" ");
} else {
this.excludeList = ["text"];
}
// Get the list of fields
var fieldList = this.getFieldList();
// Set the element
this.tag = "div";
this.attributes = {
"class": "tw-fieldlist"
};
// Set up the attributes for the wrapper element
var classes = [];
if(this.renderer.hasAttribute("class")) {
$tw.utils.pushTop(classes,this.renderer.getAttribute("class").split(" "));
}
if(classes.length > 0) {
this.attributes["class"] = classes.join(" ");
}
if(this.renderer.hasAttribute("style")) {
this.attributes.style = this.renderer.getAttribute("style");
}
if(this.renderer.hasAttribute("tooltip")) {
this.attributes.title = this.renderer.getAttribute("tooltip");
}
// Create the renderers for each list item
var items = [];
$tw.utils.each(fieldList,function(fieldName) {
items.push(self.createListElement(fieldName));
});
this.children = this.renderer.renderTree.createRenderers(this.renderer,items);
};
FieldListWidget.prototype.createListElement = function(fieldName) {
return {
type: "element",
tag: "$transclude",
isBlock: true,
attributes: {
currentField: {type: "string", value: fieldName},
target: {type: "string", value: this.tiddlerTitle}
},
children: this.renderer.parseTreeNode.children
};
};
FieldListWidget.prototype.removeListElement = function(index) {
// Get the list element
var listElement = this.children[index];
// Delete the DOM node
listElement.domNode.parentNode.removeChild(listElement.domNode);
// Then delete the actual renderer node
this.children.splice(index,1);
};
FieldListWidget.prototype.getFieldList = function() {
var tiddler = this.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle),
fieldList = [];
// If requested, return all fields used on all tiddlers
if(this.allTiddlers) {
fieldList = this.renderer.renderTree.wiki.getAllTiddlerFields();
} else if(tiddler) {
// Return the fields on the specified tiddler
for(var fieldName in tiddler.fields) {
if(this.excludeList.indexOf(fieldName) === -1) {
fieldList.push(fieldName);
}
}
}
fieldList.sort();
return fieldList;
};
FieldListWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) {
// Check if any of our attributes have changed, or if a tiddler we're interested in has changed
if(changedAttributes.tiddler || changedAttributes.exclude || changedAttributes.style || changedAttributes.tooltip || changedAttributes["class"]) {
// 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 {
// Get the potentially updated list of fields
var fieldList = this.getFieldList();
// Walk through the fields
for(var fieldIndex = 0; fieldIndex<fieldList.length; fieldIndex++) {
// Look for the field in the rendered child nodes
var targetIndex = this.findChildNode(fieldIndex,fieldList[fieldIndex]);
if(targetIndex === -1) {
// Insert the field if it wasn't present
this.children.splice(fieldIndex,0,this.renderer.renderTree.createRenderer(this.renderer,this.createListElement(fieldList[fieldIndex])));
this.renderer.domNode.insertBefore(this.children[fieldIndex].renderInDom(),this.renderer.domNode.childNodes[fieldIndex]);
} else {
// Delete any list elements preceding the one we want
for(var n=targetIndex-1; n>=fieldIndex; n--) {
this.removeListElement(n);
}
// Refresh the node we're reusing
this.children[fieldIndex].refreshInDom(changedTiddlers);
}
}
// Remove any left over elements
for(fieldIndex = this.children.length-1; fieldIndex>=fieldList.length; fieldIndex--) {
this.removeListElement(fieldIndex);
}
}
};
/*
Find the index of the child node representing the named field (or -1 if not present)
*/
FieldListWidget.prototype.findChildNode = function(startIndex,fieldName) {
var index = startIndex;
while(index < this.children.length) {
if(this.children[index].attributes.currentField === fieldName) {
return index;
}
index++;
}
return -1;
};
exports.fieldlist = FieldListWidget;
})();

4
core/modules/widgets/fieldmangler.js
View File

@ -42,7 +42,7 @@ FieldManglerWidget.prototype.generate = function() {
FieldManglerWidget.prototype.handleRemoveFieldEvent = function(event) {
var tiddler = this.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle),
deletion = {};
deletion[event.currentField] = undefined;
deletion[event.param] = undefined;
this.renderer.renderTree.wiki.addTiddler(new $tw.Tiddler(tiddler,deletion));
return true;
};
@ -60,7 +60,7 @@ FieldManglerWidget.prototype.handleAddFieldEvent = function(event) {
FieldManglerWidget.prototype.handleRemoveTagEvent = function(event) {
var tiddler = this.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle);
if(tiddler && tiddler.fields.tags) {
var p = tiddler.fields.tags.indexOf(event.currentTag);
var p = tiddler.fields.tags.indexOf(event.param);
if(p !== -1) {
var modification = {};
modification.tags = (tiddler.fields.tags || []).slice(0);

11
core/modules/widgets/transclude.js
View File

@ -60,7 +60,6 @@ TranscludeWidget.prototype.generate = function() {
this.targetTitle = this.renderer.getAttribute("target",this.renderer.tiddlerTitle);
this.targetField = this.renderer.getAttribute("field");
this.targetIndex = this.renderer.getAttribute("index");
this.currentField = this.renderer.getAttribute("currentField");
// Get the render tree for the template
this.templateTitle = undefined;
if(this.renderer.parseTreeNode.children && this.renderer.parseTreeNode.children.length > 0) {
@ -110,16 +109,6 @@ TranscludeWidget.prototype.generate = function() {
};
// Initialise events
this.events = [];
// If a current field is specified
if(this.currentField) {
// Record the current field in the render context
this.renderer.context.field = this.currentField;
// Add an event handler to record the current field
this.events.push({name: "tw-remove-field", handlerFunction: function(event) {
event.currentField = self.currentField;
return true;
}});
}
// Trap and update tag modification events
this.events.push({name: "tw-remove-tag", handlerFunction: function(event) {
event.currentTag = self.targetTitle;

11
core/modules/wiki.js
View File

@ -307,17 +307,6 @@ exports.forEachTiddler = function(/* [sortField,[excludeTag,]]callback */) {
}
};
exports.getAllTiddlerFields = function() {
var results = [];
for(var title in this.tiddlers) {
$tw.utils.each(this.tiddlers[title].fields,function(field,fieldName) {
$tw.utils.pushTop(results,fieldName);
});
}
results.sort();
return results;
};
/*
Return an array of tiddler titles that are directly linked from the specified tiddler
*/

7
core/ui/FieldEditor.tid
View File

@ -1,7 +1,10 @@
title: $:/core/ui/FieldEditor
<$fieldmangler><div class="tw-edit-fields"><$fieldlist exclude="title tags text modified modifier draft.title draft.of"><div class="tw-edit-field"><span class="tw-edit-field-name"><$info type="currentField"/>:</span> <span class="tw-edit-field-value"><$edit placeholder="field value"/></span> <span class="tw-edit-field-remove"><$button message="tw-remove-field" class="btn-invisible">{{$:/core/images/delete-button}}</$button></span></div>
</$fieldlist>
\define renderfield(title)
<div class="tw-edit-field"><span class="tw-edit-field-name">$title$:</span> <span class="tw-edit-field-value"><$edit field="$title$" placeholder="field value"/></span> <span class="tw-edit-field-remove"><$button message="tw-remove-field" param="$title$" class="btn-invisible">{{$:/core/images/delete-button}}</$button></span></div>
\end
<$fieldmangler><div class="tw-edit-fields">
<$list filter="[is[current]fields[]] -title -tags -text -creator -created -modified -modifier -[[draft.title]] -[[draft.of]]" macro="renderfield" itemClass="tw-fieldlist"/>
</div>
<div class="tw-edit-field-add">Add a new field: <span class="tw-edit-field-add-name"><$edit tiddler="$:/NewFieldName" type="input" default="" placeholder="field name"/></span> <span class="tw-edit-field-add-button"><$button message="tw-add-field" param={{$:/NewFieldName}} set="$:/NewFieldName" setTo="" class="">add</$button></span></div>

2
core/ui/TagsEditor.tid
View File

@ -1,6 +1,6 @@
title: $:/core/ui/TagsEditor
<$fieldmangler><div class="tw-edit-tags-list"><$list filter="[is[current]tags[]sort[title]]" listview="pop" itemClass="tw-tag-editor-label"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" class="btn-invisible tw-remove-tag-button">&times;</$button></$setstyle>
<$fieldmangler><div class="tw-edit-tags-list"><$list filter="[is[current]tags[]sort[title]]" listview="pop" itemClass="tw-tag-editor-label"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" param={{!!title}} class="btn-invisible tw-remove-tag-button">&times;</$button></$setstyle>
</$list></div>
<div class="tw-add-tag">Add a new tag: <span class="tw-add-tag-name"><$edit tiddler="$:/NewTagName" type="input" default="" placeholder="tag name" focusSet="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes"/></span> <$button popup="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes" class="btn-invisible">{{$:/core/images/down-arrow}}</$button> <span class="tw-add-tag-button"><$button message="tw-add-tag" param={{$:/NewTagName}} set="$:/NewTagName" setTo="" class="">add</$button></span></div>

6
core/ui/TiddlerFields.tid Normal file
View File

@ -0,0 +1,6 @@
title: $:/core/ui/TiddlerFields
\define renderfield(title)
<div class="tw-view-field"><span class="tw-view-field-name">//$title$//:</span> <span class="tw-view-field-value"><$view field="$title$"/></span></div>
\end
<$list filter="[is[current]fields[]sort[title]] -text" macro="renderfield"/>

2
core/ui/TiddlerInfo.tid
View File

@ -12,7 +12,7 @@ title: $:/core/ui/TiddlerInfo
<$list filter="[is[current]tagging[]]" itemClass="tw-menu-list-item" emptyMessage="No tiddlers are tagged with this one"/>
</$reveal>
<$reveal type="match" state="$:/state/tiddlerDropDownTabSet" text="fieldsTab" qualifyTiddlerTitles="yes">
<$fieldgrid />
<$transclude template="$:/core/ui/TiddlerFields"/>
</$reveal>
</div>
</div>

7
core/wiki/allfields.tid
View File

@ -1,5 +1,6 @@
title: $:/snippets/allfields
<$fieldlist all>
''<$info type="currentField"/>'': //<$info type="currentFieldDescription"/>//
</$fieldlist>
\define renderfield(title)
<div class="tw-view-field"><span class="tw-view-field-name">''$title$'':</span> <span class="tw-view-field-value">//{{$:/docs/fields/$title$}}//</span></div>
\end
<$list filter="[fields[]sort[title]]" macro="renderfield"/>

15
themes/tiddlywiki/snowwhite/base.tid
View File

@ -402,6 +402,17 @@ a.tw-tiddlylink-external {
<<box-shadow "inset 1px 2px 3px rgba(0,0,0,0.1)">>
}
.tw-view-field-name {
display: inline-block;
width: 15%;
text-align: right;
}
.tw-view-field-value {
display: inline-block;
width: 75%;
}
@media screen {
.tw-tiddler-frame {
<<box-shadow "5px 5px 5px rgba(0, 0, 0, 0.1)">>
@ -590,11 +601,11 @@ canvas.tw-edit-bitmapeditor {
width: 48%;
}
.tw-edit-fields .tw-fieldlist > div:nth-child(odd) {
.tw-edit-fields > .tw-list-frame > div:nth-child(odd) {
background-color: #f0f4f0;
}
.tw-edit-fields .tw-fieldlist > div:nth-child(even) {
.tw-edit-fields > .tw-list-frame > div:nth-child(even) {
background-color: #e0e8e0;
}