editorExtension.js

define([
	"dojo/_base/kernel",
	"dojo/_base/lang",
	"dojo/_base/array",
	"dojo/_base/Deferred",
	"dojo/on",
	"dojo/aspect",
	"dojo/has",
	"dojo/query",
	"dgrid/Grid",
	"put-selector/put",
	"dojo/_base/sniff"
], function(kernel, lang, arrayUtil, Deferred, on, aspect, has, query, Grid, put) {

	// Variables to track info for cell currently being edited
	// (active* variables are for editOn editors only)
	var activeCell, activeValue, activeOptions, focusedCell;

	function updateInputValue(input, value) {
		// common code for updating value of a standard input
		input.value = value;
		if (input.type == "radio" || input.type == "checkbox") {
			input.checked = input.defaultChecked = !!value;
		}
	}

	function dataFromValue(value, oldValue) {
		// Default logic for translating values from editors;
		// tries to preserve type if possible.
		if (typeof oldValue == "number") {
			value = isNaN(value) ? value : parseFloat(value);
		} else if (typeof oldValue == "boolean") {
			value = value == "true" ? true : value == "false" ? false : value;
		} else if (oldValue instanceof Date) {
			var asDate = new Date(value);
			value = isNaN(asDate.getTime()) ? value : asDate;
		}
		return value;
	}

	// intermediary frontend to dataFromValue for HTML and widget editors
	function dataFromEditor(column, cmp) {
		if (typeof cmp.get == "function") { // widget
			// Hack By Harpreet
			// get displayed value instead of value
			// data to be shown on grid's cell when editor is off
			if (cmp.widget == 'FilteringSelect') {
				return dataFromValue(cmp.get("displayedValue"));
			}
			if (cmp.widget == 'NumberTextBox') {
				if (isNaN(cmp.get('value'))) {
					return 0
				}
			}
			return dataFromValue(cmp.get("value"));
		} else { // HTML input
			return dataFromValue(
				cmp[cmp.type == "checkbox" || cmp.type == "radio" ? "checked" : "value"]);
		}
	}

	function setProperty(grid, cellElement, oldValue, value, triggerEvent) {
		// Updates dirty hash and fires dgrid-datachange event for a changed value.
		var cell, row, column, eventObject;
		// test whether old and new values are inequal, with coercion (e.g. for Dates)
		if ((oldValue && oldValue.valueOf()) != (value && value.valueOf())) {
			cell = grid.cell(cellElement);
			row = cell.row;
			column = cell.column;
			if (column.field && row) {
				// TODO: remove rowId in lieu of cell (or grid.row/grid.cell)
				// (keeping for the moment for back-compat, but will note in changes)
				eventObject = {
					grid: grid,
					cell: cell,
					rowId: row.id,
					oldValue: oldValue,
					value: value,
					bubbles: true,
					cancelable: true
				};
				// Hack By Harpreet
				// editOn is not undefined
				var _editorWidget = cell.column.editorInstance || cellElement.widget
					// need extra information of FilteringSelect 
					// Add extra info to eventObject and use as you need
				if (_editorWidget) {
					lang.mixin(eventObject, {
						origValue: _editorWidget.get('value')
					})
					if (_editorWidget && _editorWidget.store && _editorWidget.store.idProperty) {
						lang.setObject('idProperty', _editorWidget.store.idProperty, eventObject);
					}
				}

				if (triggerEvent && triggerEvent.type) {
					eventObject.parentType = triggerEvent.type;
				}

				// Hack By Harpreet
				// Update Dirty first then emit - datachange event 

				// if(on.emit(cellElement, "dgrid-datachange", eventObject)){
				if (eventObject) {
					grid.set('eventObject', eventObject)
					if (grid.updateDirty) {
						// Hack By Harpreet
						// updateDirty for FilteringSelect as needed by backEnd 
						if (eventObject.idProperty) {
							grid.updateDirty(row.id, eventObject.idProperty, eventObject.origValue);
						}

						// Hack By Harpreet
						// For widgets whose editorWidget is visible by-default
						// eg: CheckBox
						var forceStopDataChangeEvent = false;
						if (column.editOn == undefined) {
							if (column.editorArgs.widget == "CheckBox") {
								// for OnDemandGrid: update dirty data, and save if autoSave is true
								if (value == "on") {
									grid.updateDirty(row.id, column.field, 1);
								} else if (value == false) {
									grid.updateDirty(row.id, column.field, 0);
								}
							} else if(column.editorArgs.widget == "FilteringSelect") {
								// Hack By Harpreet
								// If value is not undefined, it means FilteringSelect
								// is changing for the first time then update dirty without
								// checking whether old value is _pk or not
								if(oldValue) {
									// if oldvalue is and new valu has diff type then
									// ignore dirty and change event
									if((oldValue != value) && (typeof oldValue != typeof value)) {
										forceStopDataChangeEvent = true;
									} else {
										// for OnDemandGrid: update dirty data, and save if autoSave is true
										grid.updateDirty(row.id, column.field, value);
									}
								} else {
									// for OnDemandGrid: update dirty data, and save if autoSave is true
									grid.updateDirty(row.id, column.field, value);
								}
							} else {
								// for OnDemandGrid: update dirty data, and save if autoSave is true
								grid.updateDirty(row.id, column.field, value);
							}
						} else {
							// for OnDemandGrid: update dirty data, and save if autoSave is true
							grid.updateDirty(row.id, column.field, value);
						}

						// perform auto-save (if applicable) in next tick to avoid
						// unintentional mishaps due to order of handler execution
						column.autoSave && setTimeout(function() {
							grid._trackError("save");
						}, 0);
					} else {
						// update store-less grid
						row.data[column.field] = value;
					}

					// Hack By Harpreet
					// Update Dirty first then emit - datachange event 
					if(!forceStopDataChangeEvent) {
						on.emit(cellElement, "dgrid-datachange", eventObject)
					}
				} else {
					// Otherwise keep the value the same
					// For the sake of always-on editors, need to manually reset the value
					var cmp;
					if (cmp = cellElement.widget) {
						// set _dgridIgnoreChange to prevent an infinite loop in the
						// onChange handler and prevent dgrid-datachange from firing
						// a second time
						cmp._dgridIgnoreChange = true;
						cmp.set("value", oldValue);
						setTimeout(function() {
							cmp._dgridIgnoreChange = false;
						}, 0);
					} else if (cmp = cellElement.input) {
						updateInputValue(cmp, oldValue);
					}

					return oldValue;
				}
			}
		}
		return value;
	}

	// intermediary frontend to setProperty for HTML and widget editors
	function setPropertyFromEditor(grid, column, cmp, triggerEvent) {
		var value, id, editedRow;
		if (!cmp.isValid || cmp.isValid()) {
			value = setProperty(grid, (cmp.domNode || cmp).parentNode,
				activeCell ? activeValue : cmp._dgridLastValue,
				dataFromEditor(column, cmp), triggerEvent);

			if (activeCell) { // for editors with editOn defined
				activeValue = value;
			} else { // for always-on editors, update _dgridLastValue immediately
				cmp._dgridLastValue = value;
			}

			if (cmp.type === "radio" && cmp.name && !column.editOn && column.field) {
				editedRow = grid.row(cmp);

				// Update all other rendered radio buttons in the group
				query("input[type=radio][name=" + cmp.name + "]", grid.contentNode).forEach(function(radioBtn) {
					var row = grid.row(radioBtn);
					// Only update _dgridLastValue and the dirty data if it exists
					// and is not already false
					if (radioBtn !== cmp && radioBtn._dgridLastValue) {
						radioBtn._dgridLastValue = false;
						if (grid.updateDirty) {
							grid.updateDirty(row.id, column.field, false);
						} else {
							// update store-less grid
							row.data[column.field] = false;
						}
					}
				});

				// Also update dirty data for rows that are not currently rendered
				for (id in grid.dirty) {
					if (editedRow.id !== id && grid.dirty[id][column.field]) {
						grid.updateDirty(id, column.field, false);
					}
				}
			}
		}
	}

	// editor creation/hookup/placement logic

	function createEditor(column) {
		// Creates an editor instance based on column definition properties,
		// and hooks up events.
		var editor = column.editor,
			editOn = column.editOn,
			grid = column.grid,
			isWidget = typeof editor != "string", // string == standard HTML input
			args, cmp, node, putstr, handleChange;

		args = column.editorArgs || {};
		if (typeof args == "function") {
			args = args.call(grid, column);
		}

		if (isWidget) {
			cmp = new editor(args);
			node = cmp.focusNode || cmp.domNode;

			// Add dgrid-input to className to make consistent with HTML inputs.
			node.className += " dgrid-input";

			// For editOn editors, connect to onBlur rather than onChange, since
			// the latter is delayed by setTimeouts in Dijit and will fire too late.
			cmp.connect(cmp, editOn ? "onBlur" : "onChange", function() {
				if (!cmp._dgridIgnoreChange) {
					setPropertyFromEditor(grid, column, this, {
						type: "widget"
					});
				}
			});
		} else {
			handleChange = function(evt) {
				var target = evt.target;
				if ("_dgridLastValue" in target && target.className.indexOf("dgrid-input") > -1) {
					setPropertyFromEditor(grid, column, target, evt);
				}
			};

			// considerations for standard HTML form elements
			if (!column.grid._hasInputListener) {
				// register one listener at the top level that receives events delegated
				grid._hasInputListener = true;
				grid.on("change", function(evt) {
					handleChange(evt);
				});
				// also register a focus listener
			}

			putstr = editor == "textarea" ? "textarea" :
				"input[type=" + editor + "]";
			cmp = node = put(putstr + ".dgrid-input", lang.mixin({
				name: column.field,
				tabIndex: isNaN(column.tabIndex) ? -1 : column.tabIndex
			}, args));

			if (has("ie") < 9 || (has("ie") && has("quirks"))) {
				// IE<9 / quirks doesn't fire change events for all the right things,
				// and it doesn't bubble.
				if (editor == "radio" || editor == "checkbox") {
					// listen for clicks since IE doesn't fire change events properly for checks/radios
					on(cmp, "click", function(evt) {
						handleChange(evt);
					});
				} else {
					on(cmp, "change", function(evt) {
						handleChange(evt);
					});
				}
			}
		}

		return cmp;
	}

	function createSharedEditor(column, originalRenderCell) {
		// Creates an editor instance with additional considerations for
		// shared usage across an entire column (for columns with editOn specified).

		var cmp = createEditor(column),
			grid = column.grid,
			isWidget = cmp.domNode,
			node = cmp.domNode || cmp,
			focusNode = cmp.focusNode || node,
			reset = isWidget ?
			function() {
				cmp.set("value", cmp._dgridLastValue);
			} :
			function() {
				updateInputValue(cmp, cmp._dgridLastValue);
				// call setProperty again in case we need to revert a previous change
				setPropertyFromEditor(column.grid, column, cmp);
			},
			keyHandle;

		function blur() {
			var element = activeCell;
			focusNode.blur();

			if (typeof grid.focus === "function") {
				// Dijit form widgets don't end up dismissed until the next turn,
				// so wait before calling focus (otherwise Keyboard will focus the
				// input again).  IE<9 needs to wait longer, otherwise the cell loses
				// focus after we've set it.
				setTimeout(function() {
					grid.focus(element);
				}, isWidget && has("ie") < 9 ? 15 : 0);
			}
		}

		function onblur() {
			var parentNode = node.parentNode,
				i = parentNode.children.length - 1,
				options = {
					alreadyHooked: true
				},
				cell = grid.cell(node);

			// emit an event immediately prior to removing an editOn editor
			on.emit(cell.element, "dgrid-editor-hide", {
				grid: grid,
				cell: cell,
				column: column,
				editor: cmp,
				bubbles: true,
				cancelable: false
			});
			column._editorBlurHandle.pause();
			// Remove the editor from the cell, to be reused later.
			parentNode.removeChild(node);

			put(cell.element, "!dgrid-cell-editing");

			// Clear out the rest of the cell's contents, then re-render with new value.
			while (i--) {
				put(parentNode.firstChild, "!");
			}
			Grid.appendIfNode(parentNode, column.renderCell(
				column.grid.row(parentNode).data, activeValue, parentNode,
				activeOptions ? lang.delegate(options, activeOptions) : options));

			// Reset state now that editor is deactivated;
			// reset focusedCell as well since some browsers will not trigger the
			// focusout event handler in this case
			activeCell = activeValue = activeOptions = focusedCell = null;
		}

		function dismissOnKey(evt) {
			// Contains logic for reacting to enter/escape keypresses to save/cancel edits.
			// Calls `focusNode.blur()` in cases where field should be dismissed.
			var key = evt.keyCode || evt.which;

			if (key == 27) { // escape: revert + dismiss
				reset();
				activeValue = cmp._dgridLastValue;
				blur();
			} else if (key == 13 && column.dismissOnEnter !== false) { // enter: dismiss
				// FIXME: Opera is "reverting" even in this case
				blur();
			}
		}

		// hook up enter/esc key handling
		keyHandle = on(focusNode, "keydown", dismissOnKey);

		// hook up blur handler, but don't activate until widget is activated
		(column._editorBlurHandle = on.pausable(cmp, "blur", onblur)).pause();

		return cmp;
	}

	function showEditor(cmp, column, cellElement, value) {
		// Places a shared editor into the newly-active cell in the column.
		// Also called when rendering an editor in an "always-on" editor column.

		var isWidget = cmp.domNode,
			grid = column.grid;

		// for regular inputs, we can update the value before even showing it
		if (!isWidget) {
			updateInputValue(cmp, value);
		}

		cellElement.innerHTML = "";
		put(cellElement, ".dgrid-cell-editing");
		put(cellElement, cmp.domNode || cmp);

		if (isWidget) {
			// For widgets, ensure startup is called before setting value,
			// to maximize compatibility with flaky widgets like dijit/form/Select.
			if (!cmp._started) {
				cmp.startup();
			}

			// Set value, but ensure it isn't processed as a user-generated change.
			// (Clear flag on a timeout to wait for delayed onChange to fire first)
			cmp._dgridIgnoreChange = true;

			// Hack By Harpreet
			// For widgets whose editorWidget is visible by-default
			if (column.editOn == undefined) {
				if (column.editorArgs.widget == "CheckBox") {
					cmp.set("value", parseInt(value));
				} else {
					cmp.set("value", value);
				}
			} else {
				cmp.set("value", value);
			}
			setTimeout(function() {
				cmp._dgridIgnoreChange = false;
			}, 0);
		}
		// track previous value for short-circuiting or in case we need to revert
		cmp._dgridLastValue = value;
		// if this is an editor with editOn, also update activeValue
		// (activeOptions will have been updated previously)
		if (activeCell) {
			activeValue = value;
			// emit an event immediately prior to placing a shared editor
			on.emit(cellElement, "dgrid-editor-show", {
				grid: grid,
				cell: grid.cell(cellElement),
				column: column,
				editor: cmp,
				bubbles: true,
				cancelable: false
			});
		}
	}

	function edit(cell) {
		// summary:
		//		Method to be mixed into grid instances, which will show/focus the
		//		editor for a given grid cell.  Also used by renderCell.
		// cell: Object
		//		Cell (or something resolvable by grid.cell) to activate editor on.
		// returns:
		//		If the cell is editable, returns a promise resolving to the editor
		//		input/widget when the cell editor is focused.
		//		If the cell is not editable, returns null.

		var row, column, cellElement, dirty, field, value, cmp, dfd;

		if (!cell.column) {
			cell = this.cell(cell);
		}
		if (!cell || !cell.element) {
			return null;
		}

		column = cell.column;
		field = column.field;
		cellElement = cell.element.contents || cell.element;

		if ((cmp = column.editorInstance)) { // shared editor (editOn used)
			if (activeCell != cellElement) {
				// get the cell value
				row = cell.row;
				dirty = this.dirty && this.dirty[row.id];
				value = (dirty && field in dirty) ? dirty[field] :
					column.get ? column.get(row.data) : row.data[field];
				// check to see if the cell can be edited
				if (!column.canEdit || column.canEdit(cell.row.data, value)) {
					activeCell = cellElement;

					// Hack By Harpreet
					// get _pk from the grid's row using store.idProperty
					// and reset value acc. to ASPIRE
					if (column.editorInstance.widget == 'FilteringSelect') {
						value = (dirty && field in dirty) ? dirty[column.editorInstance.store.idProperty] : row.data[column.editorInstance.store.idProperty]
					}
					showEditor(column.editorInstance, column, cellElement, value);

					// focus / blur-handler-resume logic is surrounded in a setTimeout
					// to play nice with Keyboard's dgrid-cellfocusin as an editOn event
					dfd = new Deferred();
					setTimeout(function() {
						// focus the newly-placed control (supported by form widgets and HTML inputs)
						if (cmp.focus) {
							cmp.focus();
						}
						// resume blur handler once editor is focused
						if (column._editorBlurHandle) {
							column._editorBlurHandle.resume();
						}
						dfd.resolve(cmp);
					}, 0);

					return dfd.promise;
				}
			}

		} else if (column.editor) { // editor but not shared; always-on
			cmp = cellElement.widget || cellElement.input;
			if (cmp) {
				dfd = new Deferred();
				if (cmp.focus) {
					cmp.focus();
				}
				dfd.resolve(cmp);
				return dfd.promise;
			}
		}
		return null;
	}

	// editor column plugin function

	return function(column, editor, editOn) {
		// summary:
		//		Adds editing capability to a column's cells.

		var originalRenderCell = column.renderCell || Grid.defaultRenderCell,
			listeners = [],
			isWidget;

		function commonInit(column) {
			// Common initialization logic for both editOn and always-on editors
			var grid = column.grid,
				focusoutHandle;
			if (!grid.edit) {
				// Only perform this logic once on a given grid
				grid.edit = edit;

				listeners.push(on(grid.domNode, '.dgrid-input:focusin', function() {
					focusedCell = grid.cell(this);
				}));
				focusoutHandle = grid._editorFocusoutHandle =
					on.pausable(grid.domNode, '.dgrid-input:focusout', function() {
						focusedCell = null;
					});
				listeners.push(focusoutHandle);

				listeners.push(aspect.before(grid, 'removeRow', function(row) {
					row = grid.row(row);
					if (focusedCell && focusedCell.row.id === row.id) {
						// Pause the focusout handler until after this row has had
						// time to re-render, if this removal is part of an update.
						// A setTimeout is used here instead of resuming in the
						// insertRow aspect below, since if a row were actually
						// removed (not updated) while editing, the handler would
						// not be properly hooked up again for future occurrences.
						focusoutHandle.pause();
						setTimeout(function() {
							focusoutHandle.resume();
						}, 0);
					}
				}));
				listeners.push(aspect.after(grid, 'insertRow', function(rowElement) {
					var row = grid.row(rowElement);
					if (focusedCell && focusedCell.row.id === row.id) {
						grid.edit(grid.cell(row, focusedCell.column.id));
					}
					return rowElement;
				}));
			}
		}

		if (!column) {
			column = {};
		}

		// accept arguments as parameters to editor function, or from column def,
		// but normalize to column def.
		column.editor = editor = editor || column.editor || "text";
		column.editOn = editOn = editOn || column.editOn;

		isWidget = typeof editor != "string";

		// warn for widgetArgs -> editorArgs; TODO: remove @ 0.4
		if (column.widgetArgs) {
			kernel.deprecated("column.widgetArgs", "use column.editorArgs instead",
				"dgrid 0.4");
			column.editorArgs = column.widgetArgs;
		}

		aspect.after(column, "init", editOn ? function() {
			commonInit(column);
			// Create one shared widget/input to be swapped into the active cell.
			column.editorInstance = createSharedEditor(column, originalRenderCell);
		} : function() {
			var grid = column.grid;
			commonInit(column);

			if (isWidget) {
				// add advice for cleaning up widgets in this column
				listeners.push(aspect.before(grid, "removeRow", function(rowElement) {
					// destroy our widget during the row removal operation,
					// but don't trip over loading nodes from incomplete requests
					var cellElement = grid.cell(rowElement, column.id).element,
						widget = cellElement && (cellElement.contents || cellElement).widget;
					if (widget) {
						grid._editorFocusoutHandle.pause();
						widget.destroyRecursive();
					}
				}));
			}
		});

		aspect.after(column, "destroy", function() {
			arrayUtil.forEach(listeners, function(l) {
				l.remove();
			});
			if (column._editorBlurHandle) {
				column._editorBlurHandle.remove();
			}

			if (editOn && isWidget) {
				column.editorInstance.destroyRecursive();
			}

			// Remove the edit function, so that it (and other one-time listeners)
			// will be re-added if editor columns are re-initialized
			column.grid.edit = null;
		});

		column.renderCell = editOn ? function(object, value, cell, options) {
			// TODO: Consider using event delegation
			// (Would require using dgrid's focus events for activating on focus,
			// which we already advocate in README for optimal use)

			if (!options || !options.alreadyHooked) {
				// in IE<8, cell is the child of the td due to the extra padding node
				on(cell.tagName == "TD" ? cell : cell.parentNode, editOn, function() {
					activeOptions = options;
					column.grid.edit(this);
				});
			}

			// initially render content in non-edit mode
			return originalRenderCell.call(column, object, value, cell, options);

		} : function(object, value, cell, options) {
			// always-on: create editor immediately upon rendering each cell
			if (!column.canEdit || column.canEdit(object, value)) {
				var cmp = createEditor(column);
				// Hack by Harpret
				// Filtering Select needs _pk not value
				if (column.editorArgs.widget == "FilteringSelect") {
					if (column.editorArgs.widget && column.editorArgs.store && column.editorArgs.store.idProperty) {
						value = object[column.editorArgs.store.idProperty];
					}
				}
				showEditor(cmp, column, cell, value);
				// Maintain reference for later use.
				cell[isWidget ? "widget" : "input"] = cmp;
			} else {
				return originalRenderCell.call(column, object, value, cell, options);
			}
		};

		return column;
	};
});