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