path: root/js/dojo/dojox/data/ItemExplorer.js

//>>built
// wrapped by build app
define("dojox/data/ItemExplorer", ["dijit","dojo","dojox","dojo/require!dijit/Tree,dijit/Dialog,dijit/Menu,dijit/form/ValidationTextBox,dijit/form/Textarea,dijit/form/Button,dijit/form/RadioButton,dijit/form/FilteringSelect"], function(dijit,dojo,dojox){
dojo.provide("dojox.data.ItemExplorer");
dojo.require("dijit.Tree");
dojo.require("dijit.Dialog");
dojo.require("dijit.Menu");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.RadioButton");
dojo.require("dijit.form.FilteringSelect");

(function(){
	var getValue = function(store, item, prop){
		var value = store.getValues(item, prop);
		if(value.length < 2){
			value = store.getValue(item, prop);
		}
		return value;
	}

dojo.declare("dojox.data.ItemExplorer", dijit.Tree, {
	useSelect: false,
	refSelectSearchAttr: null,
	constructor: function(options){
		dojo.mixin(this, options);
		var self = this;
		var initialRootValue = {};
		var root = (this.rootModelNode = {value:initialRootValue,id:"root"});

		this._modelNodeIdMap = {};
		this._modelNodePropMap = {};
		var nextId = 1;
		this.model = {
			getRoot: function(onItem){
				onItem(root);
			},
			mayHaveChildren: function(modelNode){
				return modelNode.value && typeof modelNode.value == 'object' && !(modelNode.value instanceof Date);
			},
			getChildren: function(parentModelNode, onComplete, onError){
				var keys, parent, item = parentModelNode.value;
				var children = [];
				if(item == initialRootValue){
					onComplete([]);
					return;
				}
				var isItem = self.store && self.store.isItem(item, true);
				if(isItem && !self.store.isItemLoaded(item)){
					// if it is not loaded, do so now.
					self.store.loadItem({
						item:item,
						onItem:function(loadedItem){
							item = loadedItem;
							enumerate();
						}
					});
				}else{
					enumerate();
				}
				function enumerate(){
					// once loaded, enumerate the keys
					if(isItem){
						// get the properties through the dojo data API
						keys = self.store.getAttributes(item);
						parent = item;
					}else if(item && typeof item == 'object'){
						parent = parentModelNode.value;
						keys = [];
						// also we want to be able to drill down into plain JS objects/arrays
						for(var i in item){
							if(item.hasOwnProperty(i) && i != '__id' && i != '__clientId'){
								keys.push(i);
							}
						}
					}
					if(keys){
						for(var key, k=0; key = keys[k++];){
							children.push({
								property:key,
								value: isItem ? getValue(self.store, item, key) : item[key],
								parent:	parent});
						}
						children.push({addNew:true, parent: parent, parentNode : parentModelNode});
					}
					onComplete(children);
				}
			},
			getIdentity: function(modelNode){
				if(!modelNode.id){
					if(modelNode.addNew){
						modelNode.property = "--addNew";
					}
					modelNode.id = nextId++;
					if(self.store){
						if(self.store.isItem(modelNode.value)){
							var identity = self.store.getIdentity(modelNode.value);
							(self._modelNodeIdMap[identity] = self._modelNodeIdMap[identity] || []).push(modelNode);
						}
						if(modelNode.parent){
							identity = self.store.getIdentity(modelNode.parent) + '.' + modelNode.property;
							(self._modelNodePropMap[identity] = self._modelNodePropMap[identity] || []).push(modelNode);
						}
					}
				}
				return modelNode.id;
			},
			getLabel: function(modelNode){
				return modelNode === root ?
						"Object Properties" :
							modelNode.addNew ? (modelNode.parent instanceof Array ? "Add new value" : "Add new property") :
								modelNode.property + ": " +
									(modelNode.value instanceof Array ? "(" + modelNode.value.length + " elements)" : modelNode.value);
			},
			onChildrenChange: function(modelNode){
			},
			onChange: function(modelNode){
			}
		};
	},
	postCreate: function(){
		this.inherited(arguments);
		// handle the clicking on the "add new property item"
		dojo.connect(this, "onClick", function(modelNode, treeNode){
			this.lastFocused = treeNode;
			if(modelNode.addNew){
				//this.focusNode(treeNode.getParent());
				this._addProperty();
			}else{
				this._editProperty();
			}
		});
		var contextMenu = new dijit.Menu({
			targetNodeIds: [this.rootNode.domNode],
			id: "contextMenu"
			});
		dojo.connect(contextMenu, "_openMyself", this, function(e){
			var node = dijit.getEnclosingWidget(e.target);
			if(node){
				var item = node.item;
				if(this.store.isItem(item.value, true) && !item.parent){
					dojo.forEach(contextMenu.getChildren(), function(widget){
						widget.attr("disabled", (widget.label != "Add"));
					});
					this.lastFocused = node;
					// TODO: Root Node - allow Edit when mutli-value editing is possible
				}else if(item.value && typeof item.value == 'object' && !(item.value instanceof Date)){
					// an object that's not a Date - could be a store item
					dojo.forEach(contextMenu.getChildren(), function(widget){
						widget.attr("disabled", (widget.label != "Add") && (widget.label != "Delete"));
					});
					this.lastFocused = node;
					// TODO: Object - allow Edit when mutli-value editing is possible
				}else if(item.property && dojo.indexOf(this.store.getIdentityAttributes(), item.property) >= 0){ // id node
					this.focusNode(node);
					alert("Cannot modify an Identifier node.");
				}else if(item.addNew){
					this.focusNode(node);
				}else{
					dojo.forEach(contextMenu.getChildren(), function(widget){
						widget.attr("disabled", (widget.label != "Edit") && (widget.label != "Delete"));
					})
					// this won't focus the node but gives us a way to reference the node
					this.lastFocused = node;
				}
			}
		});
		contextMenu.addChild(new dijit.MenuItem({label: "Add", onClick: dojo.hitch(this, "_addProperty")}));
		contextMenu.addChild(new dijit.MenuItem({label: "Edit", onClick: dojo.hitch(this, "_editProperty")}));
		contextMenu.addChild(new dijit.MenuItem({label: "Delete", onClick: dojo.hitch(this, "_destroyProperty")}));
		contextMenu.startup();
	},
	store: null,
	setStore: function(store){
		this.store = store;
		var self = this;
		if(this._editDialog){
			this._editDialog.destroyRecursive();
			delete this._editDialog;
		}
		// i think we should just destroy this._editDialog and let _createEditDialog take care of everything
		// once it gets called again by either _editProperty or _addProperty - it will create everything again
		// using the new store.	this way we don't need to keep track of what is in the dialog if we change it.
		/*if(this._editDialog && this.useSelect){
			dojo.query(".reference [widgetId]", this._editDialog.containerNode).forEach(function(node){
				dijit.getEnclosingWidget(node).attr("store", store);
			});
		}*/
		dojo.connect(store, "onSet", function(item, attribute, oldValue, newValue){
			var nodes, i, identity = self.store.getIdentity(item);
			nodes = self._modelNodeIdMap[identity];

			if(nodes &&
					(oldValue === undefined || newValue === undefined ||
					oldValue instanceof Array || newValue instanceof Array || typeof oldValue == 'object' || typeof newValue == 'object')){
				for(i = 0; i < nodes.length; i++){
					(function(node){
						self.model.getChildren(node, function(children){
							self.model.onChildrenChange(node, children);
						});
					})(nodes[i]);
				}
			}
			nodes = self._modelNodePropMap[identity + "." + attribute];

			if(nodes){
				for(i = 0; i < nodes.length; i++){
					nodes[i].value = newValue;
					self.model.onChange(nodes[i]);
				}
			}
		});
		this.rootNode.setChildItems([]);
	},
	setItem: function(item){
		// this is called to show a different item

		// reset the maps, for the root getIdentity is not called, so we pre-initialize it here
		(this._modelNodeIdMap = {})[this.store.getIdentity(item)] = [this.rootModelNode];
		this._modelNodePropMap = {};

		this.rootModelNode.value = item;
		var self = this;
		this.model.getChildren(this.rootModelNode, function(children){
			self.rootNode.setChildItems(children);
		});

	},
	refreshItem: function(){
		this.setItem(this.rootModelNode.value);
	},
	_createEditDialog: function(){
		this._editDialog = new dijit.Dialog({
			 title: "Edit Property",
			 execute: dojo.hitch(this, "_updateItem"),
			 preload: true
		});
		this._editDialog.placeAt(dojo.body());
		this._editDialog.startup();

		// handle for dialog content
		var pane = dojo.doc.createElement('div');

		// label for property
		var labelProp = dojo.doc.createElement('label');
		dojo.attr(labelProp, "for", "property");
		dojo.style(labelProp, "fontWeight", "bold");
		dojo.attr(labelProp, "innerHTML", "Property:")
		pane.appendChild(labelProp);

		// property name field
		var propName = new dijit.form.ValidationTextBox({
			name: "property",
			value: "",
			required: true,
			disabled: true
		}).placeAt(pane);

		pane.appendChild(dojo.doc.createElement("br"));
		pane.appendChild(dojo.doc.createElement("br"));

		// radio button for "value"
		var value = new dijit.form.RadioButton({
			name: "itemType",
			value: "value",
			onClick: dojo.hitch(this, function(){this._enableFields("value");})
		}).placeAt(pane);

		// label for value
		var labelVal = dojo.doc.createElement('label');
		dojo.attr(labelVal, "for", "value");
		dojo.attr(labelVal, "innerHTML", "Value (JSON):")
		pane.appendChild(labelVal);

		 // container for value fields
		var valueDiv = dojo.doc.createElement("div");
		dojo.addClass(valueDiv, "value");

		// textarea
		var textarea = new dijit.form.Textarea({
			name: "jsonVal"
		}).placeAt(valueDiv);
		pane.appendChild(valueDiv);

		// radio button for "reference"
		var reference = new dijit.form.RadioButton({
			name: "itemType",
			value: "reference",
			onClick: dojo.hitch(this, function(){this._enableFields("reference");})
		}).placeAt(pane);

		// label for reference
		var labelRef = dojo.doc.createElement('label');
		dojo.attr(labelRef, "for", "_reference");
		dojo.attr(labelRef, "innerHTML", "Reference (ID):")
		pane.appendChild(labelRef);
		pane.appendChild(dojo.doc.createElement("br"));

		// container for reference fields
		var refDiv = dojo.doc.createElement("div");
		dojo.addClass(refDiv, "reference");

		if(this.useSelect){
			// filteringselect
			// TODO: see if there is a way to sort the items in this list
			var refSelect = new dijit.form.FilteringSelect({
				name: "_reference",
				store: this.store,
				searchAttr: this.refSelectSearchAttr || this.store.getIdentityAttributes()[0],
				required: false,
				value: null,		// need to file a ticket about the fetch that happens when declared with value: null
				pageSize: 10
			}).placeAt(refDiv);
		}else{
			var refTextbox = new dijit.form.ValidationTextBox({
				name: "_reference",
				value: "",
				promptMessage: "Enter the ID of the item to reference",
				isValid: dojo.hitch(this, function(isFocused){
					// don't validate while it's focused
					return true;//isFocused || this.store.getItemByIdentity(this._editDialog.attr("value")._reference);
				})
			}).placeAt(refDiv);
		}
		pane.appendChild(refDiv);
		pane.appendChild(dojo.doc.createElement("br"));
		pane.appendChild(dojo.doc.createElement("br"));

		// buttons
		var buttons = document.createElement('div');
		buttons.setAttribute("dir", "rtl");
		var cancelButton = new dijit.form.Button({type: "reset", label: "Cancel"}).placeAt(buttons);
		cancelButton.onClick = dojo.hitch(this._editDialog, "onCancel");
		var okButton = new dijit.form.Button({type: "submit", label: "OK"}).placeAt(buttons);
		pane.appendChild(buttons);

		this._editDialog.attr("content", pane);
	},
	_enableFields: function(selection){
		// enables/disables fields based on whether the value in this._editDialog is a reference or a primitive value
		switch(selection){
			case "reference":
				dojo.query(".value [widgetId]", this._editDialog.containerNode).forEach(function(node){
					dijit.getEnclosingWidget(node).attr("disabled", true);
				});
				dojo.query(".reference [widgetId]", this._editDialog.containerNode).forEach(function(node){
					dijit.getEnclosingWidget(node).attr("disabled", false);
				});
				break;
			case "value":
				dojo.query(".value [widgetId]", this._editDialog.containerNode).forEach(function(node){
					dijit.getEnclosingWidget(node).attr("disabled", false);
				});
				dojo.query(".reference [widgetId]", this._editDialog.containerNode).forEach(function(node){
					dijit.getEnclosingWidget(node).attr("disabled", true);
				});
				break;
		}
	},
	_updateItem: function(vals){
		// a single "execute" function that handles adding and editing of values and references.
		var node, item, val, storeItemVal, editingItem = this._editDialog.attr("title") == "Edit Property";
		var editDialog = this._editDialog;
		var store = this.store;
		function setValue(){
			try{
				var itemVal, propPath = [];
				var prop = vals.property;
				if(editingItem){
					while(!store.isItem(item.parent, true)){
						node = node.getParent();
						propPath.push(item.property);
						item = node.item;
					}
					if(propPath.length == 0){
						// working with an item attribute already
						store.setValue(item.parent, item.property, val);
					}else{
						// need to walk back down the item property to the object
						storeItemVal = getValue(store, item.parent, item.property);
						if(storeItemVal instanceof Array){
							// create a copy for modification
							storeItemVal = storeItemVal.concat();
						}
						itemVal = storeItemVal;
						while(propPath.length > 1){
							itemVal = itemVal[propPath.pop()];
						}
						itemVal[propPath] = val; // this change is reflected in storeItemVal as well
						store.setValue(item.parent, item.property, storeItemVal);
					}
				}else{
					// adding a property
					if(store.isItem(value, true)){
						// adding a top-level property to an item
						if(!store.isItemLoaded(value)){
							// fetch the value and see if it is an array
							store.loadItem({
								item: value,
								onItem: function(loadedItem){
									if(loadedItem instanceof Array){
										prop = loadedItem.length;
									}
									store.setValue(loadedItem, prop, val);
								}
							});
						}else{
							if(value instanceof Array){
								prop = value.length;
							}
							store.setValue(value, prop, val);
						}
					}else{
						// adding a property to a lower level in an item
						if(item.value instanceof Array){
							propPath.push(item.value.length);
						}else{
							propPath.push(vals.property);
						}
						while(!store.isItem(item.parent, true)){
							node = node.getParent();
							propPath.push(item.property);
							item = node.item;
						}
						storeItemVal = getValue(store, item.parent, item.property);
						itemVal = storeItemVal;
						while(propPath.length > 1){
							itemVal = itemVal[propPath.pop()];
						}
						itemVal[propPath] = val;
						store.setValue(item.parent, item.property, storeItemVal);
					}
				}
			}catch(e){
				alert(e);
			}
		}

		if(editDialog.validate()){
			node = this.lastFocused;
			item = node.item;
			var value = item.value;
			// var property = null;
			if(item.addNew){
				// we are adding a property to the parent item
				// the real value of the parent is in the parent property of the lastFocused item
				// this.lastFocused.getParent().item.value may be a reference to an item
				value = node.item.parent;
				node = node.getParent();
				item = node.item;
			}
			val = null;
			switch(vals.itemType){
				case "reference":
					this.store.fetchItemByIdentity({identity:vals._reference,
						onItem:function(item){
							val = item;
							setValue();
						},
						onError:function(){
							alert("The id could not be found");
						}
					});
					break;
				case "value":
					var jsonVal = vals.jsonVal;
					val = dojo.fromJson(jsonVal);
					// ifit is a function we want to preserve the source (comments, et al)
					if(typeof val == 'function'){
						val.toString = function(){
							return jsonVal;
						}
					}
					setValue();
					break;
			}
		}else{
			// the form didn't validate - show it again.
			editDialog.show();
		}
	},
	_editProperty: function(){
		// this mixin stops us polluting the tree item with jsonVal etc.
		// FIXME: if a store identifies items by instanceof checks, this will fail
		var item = dojo.mixin({}, this.lastFocused.item);
		// create the dialog or reset it if it already exists
		if(!this._editDialog){
			this._createEditDialog();
		}else{
			this._editDialog.reset();
		}
		// not allowed to edit an item's id - so check for that and stop it.
		if(dojo.indexOf(this.store.getIdentityAttributes(), item.property) >= 0){
			alert("Cannot Edit an Identifier!");
		}else{
			this._editDialog.attr("title", "Edit Property");
			// make sure the property input is disabled
			dijit.getEnclosingWidget(dojo.query("input", this._editDialog.containerNode)[0]).attr("disabled", true);
			if(this.store.isItem(item.value, true)){
				// root node || Item reference
				if(item.parent){
					// Item reference
					item.itemType = "reference";
					this._enableFields(item.itemType);
					item._reference = this.store.getIdentity(item.value);
					this._editDialog.attr("value", item);
					this._editDialog.show();
				} // else root node
			}else{
				if(item.value && typeof item.value == 'object' && !(item.value instanceof Date)){
					// item.value is an object but it's NOT an item from the store - no-op
					// only allow editing on a property not on the node that represents the object/array
				}else{
					// this is a primitive
					item.itemType = "value";
					this._enableFields(item.itemType);
					item.jsonVal = typeof item.value == 'function' ?
							// use the plain toString for functions, dojo.toJson doesn't support functions
							item.value.toString() :
								item.value instanceof Date ?
									// A json-ish form of a date:
									'new Date("' + item.value + '")' :
									dojo.toJson(item.value);
					this._editDialog.attr("value", item);
					this._editDialog.show();
				}
			}
		}
	},
	_destroyProperty: function(){
		var node = this.lastFocused;
		var item = node.item;
		var propPath = [];
		// we have to walk up the tree to the item before we can know if we're working with the identifier
		while(!this.store.isItem(item.parent, true) || item.parent instanceof Array){
			node = node.getParent();
			propPath.push(item.property);
			item = node.item;
		}
		// this will prevent any part of the identifier from being changed
		if(dojo.indexOf(this.store.getIdentityAttributes(), item.property) >= 0){
			alert("Cannot Delete an Identifier!");
		}else{
			try{
				if(propPath.length > 0){
					// not deleting a top-level property of an item so get the top-level store item to change
					var itemVal, storeItemVal = getValue(this.store, item.parent, item.property);
					itemVal = storeItemVal;
					// walk back down the object if needed
					while(propPath.length > 1){
						itemVal = itemVal[propPath.pop()];
					}
					// delete the property
					if(dojo.isArray(itemVal)){
						// the value being deleted represents an array element
						itemVal.splice(propPath, 1);
					}else{
						// object property
						delete itemVal[propPath];
					}
					// save it back to the store
					this.store.setValue(item.parent, item.property, storeItemVal);
				}else{
					// deleting an item property
					this.store.unsetAttribute(item.parent, item.property);
				}
			}catch(e){
				alert(e);
			}
		}
	},
	_addProperty: function(){
		// item is what we are adding a property to
		var item = this.lastFocused.item;
		// value is the real value of the item - not a reference to a store item
		var value = item.value;
		var showDialog = dojo.hitch(this, function(){
			var property = null;
			if(!this._editDialog){
				this._createEditDialog();
			}else{
				this._editDialog.reset();
			}
			// are we adding another item to an array?
			if(value instanceof Array){
				// preset the property to the next index in the array and disable the property field
				property = value.length;
				dijit.getEnclosingWidget(dojo.query("input", this._editDialog.containerNode)[0]).attr("disabled", true);
			}else{
				// enable the property TextBox
				dijit.getEnclosingWidget(dojo.query("input", this._editDialog.containerNode)[0]).attr("disabled", false);
			}
			this._editDialog.attr("title", "Add Property");
			// default to a value type
			this._enableFields("value");
			this._editDialog.attr("value", {itemType: "value", property: property});
			this._editDialog.show();
		});

		if(item.addNew){
			// we are adding a property to the parent item
			item = this.lastFocused.getParent().item;
			// the real value of the parent is in the parent property of the lastFocused item
			// this.lastFocused.getParent().item.value may be a reference to an item
			value = this.lastFocused.item.parent;
		}
		if(item.property && dojo.indexOf(this.store.getIdentityAttributes(), item.property) >= 0){
			alert("Cannot add properties to an ID node!");
		}else{
			// ifthe value is an item then we need to get the item's value
			if(this.store.isItem(value, true) && !this.store.isItemLoaded(value)){
				// fetch the value and see if it is an array
				this.store.loadItem({
					item: value,
					onItem: function(loadedItem){
						value = loadedItem;
						showDialog();
					}
				});
			}else{
				showDialog();
			}
//
		}
	}
});
})();


});