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

Instead, we'll use the "list" widget with the new support for macros.

core/modules/widgets/fieldgrid.js

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

core/modules/widgets/fieldlist.js

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

core/modules/widgets/fieldmangler.js

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

core/modules/widgets/transclude.js

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

core/modules/wiki.js

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

core/ui/FieldEditor.tid

@@ -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>
+\define renderfield(title)
-</$fieldlist>
+<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>

core/ui/TagsEditor.tid

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

core/ui/TiddlerFields.tid

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

core/ui/TiddlerInfo.tid

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

core/wiki/allfields.tid

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

themes/tiddlywiki/snowwhite/base.tid

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