GZ/nwyj/.svn/pristine/b3/b3699e9793ecde3ce5a954e7efbf5f0b67e39245.svn-base

if (!dojo._hasResource["dijit.InlineEditBox"]) { // _hasResource checks added
													// by build. Do not use
													// _hasResource directly in
													// your code.
	dojo._hasResource["dijit.InlineEditBox"] = true;
	dojo.provide("dijit.InlineEditBox");

	dojo.require("dojo.i18n");

	dojo.require("dijit._Widget");
	dojo.require("dijit._Container");
	dojo.require("dijit.form.Button");
	dojo.require("dijit.form.TextBox");

	dojo.requireLocalization("dijit", "common", null,
			"ko,zh,ja,zh-tw,ru,it,hu,fr,pt,ROOT,pl,es,de,cs");

	dojo.declare("dijit.InlineEditBox", dijit._Widget, {
		// summary: An element with in-line edit capabilitites
		//
		// description:
		// Behavior for an existing node (<p>, <div>, <span>, etc.) so that
		// when you click it, an editor shows up in place of the original
		// text. Optionally, Save and Cancel button are displayed below the edit
		// widget.
		// When Save is clicked, the text is pulled from the edit
		// widget and redisplayed and the edit widget is again hidden.
		// By default a plain Textarea widget is used as the editor (or for
		// inline values a TextBox), but you can specify an editor such as
		// dijit.Editor (for editing HTML) or a Slider (for adjusting a number).
		// An edit widget must support the following API to be used:
		// String getDisplayedValue() OR String getValue()
		// void setDisplayedValue(String) OR void setValue(String)
		// void focus()
		//
		// editing: Boolean
		// Is the node currently in edit mode?
		editing : false,

		// autoSave: Boolean
		// Changing the value automatically saves it; don't have to push save
		// button
		// (and save button isn't even displayed)
		autoSave : true,

		// buttonSave: String
		// Save button label
		buttonSave : "",

		// buttonCancel: String
		// Cancel button label
		buttonCancel : "",

		// renderAsHtml: Boolean
		// Set this to true if the specified Editor's value should be
		// interpreted as HTML
		// rather than plain text (ie, dijit.Editor)
		renderAsHtml : false,

		// editor: String
		// Class name for Editor widget
		editor : "dijit.form.TextBox",

		// editorParams: Object
		// Set of parameters for editor, like {required: true}
		editorParams : {},

		onChange : function(value) {
			// summary: User should set this handler to be notified of changes
			// to value
		},

		// width: String
		// Width of editor. By default it's width=100% (ie, block mode)
		width : "100%",

		// value: String
		// The display value of the widget in read-only mode
		value : "",

		// noValueIndicator: String
		// The text that gets displayed when there is no value (so that the user
		// has a place to click to edit)
		noValueIndicator : "<span style='font-family: wingdings; text-decoration: underline;'>&nbsp;&nbsp;&nbsp;&nbsp;&#x270d;&nbsp;&nbsp;&nbsp;&nbsp;</span>",

		postMixInProperties : function() {
			this.inherited('postMixInProperties', arguments);

			// save pointer to original source node, since Widget nulls-out
			// srcNodeRef
			this.displayNode = this.srcNodeRef;

			// connect handlers to the display node
			var events = {
				ondijitclick : "_onClick",
				onmouseover : "_onMouseOver",
				onmouseout : "_onMouseOut",
				onfocus : "_onMouseOver",
				onblur : "_onMouseOut"
			};
			for (var name in events) {
				this.connect(this.displayNode, name, events[name]);
			}
			dijit.setWaiRole(this.displayNode, "button");
			if (!this.displayNode.getAttribute("tabIndex")) {
				this.displayNode.setAttribute("tabIndex", 0);
			}

			if (!this.value) {
				this.value = this.displayNode.innerHTML;
			}
			this._setDisplayValue(this.value); // if blank, change to icon for
												// "input needed"
		},

		_onMouseOver : function() {
			dojo.addClass(this.displayNode, this.disabled
							? "dijitDisabledClickableRegion"
							: "dijitClickableRegion");
		},

		_onMouseOut : function() {
			dojo.removeClass(this.displayNode, this.disabled
							? "dijitDisabledClickableRegion"
							: "dijitClickableRegion");
		},

		_onClick : function(/* Event */e) {
			if (this.disabled) {
				return;
			}
			if (e) {
				dojo.stopEvent(e);
			}
			this._onMouseOut();

			// Since FF gets upset if you move a node while in an event handler
			// for that node...
			setTimeout(dojo.hitch(this, "_edit"), 0);
		},

		_edit : function() {
			// summary: display the editor widget in place of the original (read
			// only) markup

			this.editing = true;

			var editValue = (this.renderAsHtml ? this.value : this.value
					.replace(/\s*\r?\n\s*/g, "").replace(/<br\/?>/gi, "\n")
					.replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(
							/&amp;/g, "&"));

			// Placeholder for edit widget
			// Put place holder (and eventually editWidget) before the display
			// node so that it's positioned correctly
			// when Calendar dropdown appears, which happens automatically on
			// focus.
			var placeholder = document.createElement("span");
			dojo.place(placeholder, this.domNode, "before");

			var ew = this.editWidget = new dijit._InlineEditor({
						value : dojo.trim(editValue),
						autoSave : this.autoSave,
						buttonSave : this.buttonSave,
						buttonCancel : this.buttonCancel,
						renderAsHtml : this.renderAsHtml,
						editor : this.editor,
						editorParams : this.editorParams,
						style : dojo.getComputedStyle(this.displayNode),
						save : dojo.hitch(this, "save"),
						cancel : dojo.hitch(this, "cancel"),
						width : this.width
					}, placeholder);

			// to avoid screen jitter, we first create the editor with
			// position:absolute, visibility:hidden,
			// and then when it's finished rendering, we switch from display
			// mode to editor
			var ews = ew.domNode.style;
			this.displayNode.style.display = "none";
			ews.position = "static";
			ews.visibility = "visible";

			// Replace the display widget with edit widget, leaving them both
			// displayed for a brief time so that
			// focus can be shifted without incident. (browser may needs some
			// time to render the editor.)
			this.domNode = ew.domNode;
			setTimeout(function() {
						ew.focus();
					}, 100);
		},

		_showText : function(/* Boolean */focus) {
			// summary: revert to display mode, and optionally focus on display
			// node

			// display the read-only text and then quickly hide the editor (to
			// avoid screen jitter)
			this.displayNode.style.display = "";
			var ews = this.editWidget.domNode.style;
			ews.position = "absolute";
			ews.visibility = "hidden";

			this.domNode = this.displayNode;

			// give the browser some time to render the display node and then
			// shift focus to it
			// and hide the edit widget
			var _this = this;
			setTimeout(function() {
						if (focus) {
							dijit.focus(_this.displayNode);
						}
						_this.editWidget.destroy();
						delete _this.editWidget;
					}, 100);
		},

		save : function(/* Boolean */focus) {
			// summary:
			// Save the contents of the editor and revert to display mode.
			// focus: Boolean
			// Focus on the display mode text
			this.editing = false;

			this.value = this.editWidget.getValue() + "";
			if (this.renderAsHtml) {
				this.value = this.value.replace(/&/gm, "&amp;").replace(/</gm,
						"&lt;").replace(/>/gm, "&gt;").replace(/"/gm, "&quot;")
						.replace("\n", "<br>");
			}
			this._setDisplayValue(this.value);

			// tell the world that we have changed
			this.onChange(this.value);

			this._showText(focus);
		},

		_setDisplayValue : function(/* String */val) {
			// summary: inserts specified HTML value into this node, or an
			// "input needed" character if node is blank
			this.displayNode.innerHTML = val || this.noValueIndicator;
		},

		cancel : function(/* Boolean */focus) {
			// summary:
			// Revert to display mode, discarding any changes made in the editor
			this.editing = false;
			this._showText(focus);
		}
	});

	dojo.declare("dijit._InlineEditor", [dijit._Widget, dijit._Templated], {
		// summary:
		// internal widget used by InlineEditBox, displayed when in editing mode
		// to display the editor and maybe save/cancel buttons. Calling code
		// should
		// connect to save/cancel methods to detect when editing is finished
		//
		// Has mainly the same parameters as InlineEditBox, plus these values:
		//
		// style: Object
		// Set of CSS attributes of display node, to replicate in editor
		//
		// value: String
		// Value as an HTML string or plain text string, depending on
		// renderAsHTML flag

		templateString : "<fieldset dojoAttachPoint=\"editNode\" waiRole=\"presentation\" style=\"position: absolute; visibility:hidden\" class=\"dijitReset dijitInline\"\n\tdojoAttachEvent=\"onkeypress: _onKeyPress\" \n\t><input dojoAttachPoint=\"editorPlaceholder\"\n\t/><span dojoAttachPoint=\"buttonContainer\"\n\t\t><button class='saveButton' dojoAttachPoint=\"saveButton\" dojoType=\"dijit.form.Button\" dojoAttachEvent=\"onClick:save\">${buttonSave}</button\n\t\t><button class='cancelButton' dojoAttachPoint=\"cancelButton\" dojoType=\"dijit.form.Button\" dojoAttachEvent=\"onClick:cancel\">${buttonCancel}</button\n\t></span\n></fieldset>\n",
		widgetsInTemplate : true,

		postMixInProperties : function() {
			this.inherited('postMixInProperties', arguments);
			this.messages = dojo.i18n.getLocalization("dijit", "common",
					this.lang);
			dojo.forEach(["buttonSave", "buttonCancel"], function(prop) {
						if (!this[prop]) {
							this[prop] = this.messages[prop];
						}
					}, this);
		},

		postCreate : function() {
			// Create edit widget in place in the template
			var cls = dojo.getObject(this.editor);
			var ew = this.editWidget = new cls(this.editorParams,
					this.editorPlaceholder);

			// Copy the style from the source
			// Don't copy ALL properties though, just the necessary/applicable
			// ones
			var srcStyle = this.style;
			dojo.forEach(["fontWeight", "fontFamily", "fontSize", "fontStyle"],
					function(prop) {
						ew.focusNode.style[prop] = srcStyle[prop];
					}, this);
			dojo.forEach(["marginTop", "marginBottom", "marginLeft",
							"marginRight"], function(prop) {
						this.domNode.style[prop] = srcStyle[prop];
					}, this);
			if (this.width == "100%") {
				// block mode
				ew.domNode.style.width = "100%"; // because display: block
													// doesn't work for table
													// widgets
				this.domNode.style.display = "block";
			} else {
				// inline-block mode
				ew.domNode.style.width = this.width
						+ (Number(this.width) == this.width ? "px" : "");
			}

			this.connect(this.editWidget, "onChange", "_onChange");

			// setting the value of the edit widget will cause a possibly
			// asynchronous onChange() call.
			// we need to ignore it, since we are only interested in when the
			// user changes the value.
			this._ignoreNextOnChange = true;
			(this.editWidget.setDisplayedValue || this.editWidget.setValue)
					.call(this.editWidget, this.value);

			this._initialText = this.getValue();

			if (this.autoSave) {
				this.buttonContainer.style.display = "none";
			}
		},

		destroy : function() {
			this.editWidget.destroy();
			this.inherited(arguments);
		},

		getValue : function() {
			var ew = this.editWidget;
			return ew.getDisplayedValue ? ew.getDisplayedValue() : ew
					.getValue();
		},

		_onKeyPress : function(e) {
			// summary: Callback when keypress in the edit box (see template).
			// description:
			// For autoSave widgets, if Esc/Enter, call cancel/save.
			// For non-autoSave widgets, enable save button if the text value is
			// different than the original value.
			if (this._exitInProgress) {
				return;
			}
			if (this.autoSave) {
				// If Enter/Esc pressed, treat as save/cancel.
				if (e.keyCode == dojo.keys.ESCAPE) {
					dojo.stopEvent(e);
					this._exitInProgress = true;
					this.cancel(true);
				} else if (e.keyCode == dojo.keys.ENTER) {
					dojo.stopEvent(e);
					this._exitInProgress = true;
					this.save(true);
				}
			} else {
				var _this = this;
				// Delay before calling getValue().
				// The delay gives the browser a chance to update the Textarea.
				setTimeout(function() {
					_this.saveButton
							.setDisabled(_this.getValue() == _this._initialText);
				}, 100);
			}
		},

		_onBlur : function() {
			// summary:
			// Called when focus moves outside the editor
			if (this._exitInProgress) {
				// when user clicks the "save" button, focus is shifted back to
				// display text, causing this
				// function to be called, but in that case don't do anything
				return;
			}
			if (this.autoSave) {
				this._exitInProgress = true;
				if (this.getValue() == this._initialText) {
					this.cancel(false);
				} else {
					this.save(false);
				}
			}
		},

		enableSave : function() {
			// summary: User replacable function returning a Boolean to indicate
			// if the Save button should be enabled or not - usually due to
			// invalid conditions
			return this.editWidget.isValid ? this.editWidget.isValid() : true; // Boolean
		},

		_onChange : function() {
			// summary:
			// Called when the underlying widget fires an onChange event,
			// which means that the user has finished entering the value

			if (this._ignoreNextOnChange) {
				delete this._ignoreNextOnChange;
				return;
			}
			if (this._exitInProgress) {
				// TODO: the onChange event might happen after the return key
				// for an async widget
				// like FilteringSelect. Shouldn't be deleting the edit widget
				// on end-of-edit
				return;
			}
			if (this.autoSave) {
				this._exitInProgress = true;
				this.save(true);
			} else {
				// in case the keypress event didn't get through (old problem
				// with Textarea that has been fixed
				// in theory) or if the keypress event comes too quickly and the
				// value inside the Textarea hasn't
				// been updated yet)
				this.saveButton
						.setDisabled((this.getValue() == this._initialText)
								|| !this.enableSave());
			}
		},

		enableSave : function() {
			// summary: User replacable function returning a Boolean to indicate
			// if the Save button should be enabled or not - usually due to
			// invalid conditions
			return this.editWidget.isValid ? this.editWidget.isValid() : true;
		},

		focus : function() {
			this.editWidget.focus();
			dijit.selectInputText(this.editWidget.focusNode);
		}
	});

	dijit.selectInputText = function(/* DomNode */element) {
		// summary: select all the text in an input element

		// TODO: use functions in _editor/selection.js?
		var _window = dojo.global;
		var _document = dojo.doc;
		element = dojo.byId(element);
		if (_document["selection"] && dojo.body()["createTextRange"]) { // IE
			if (element.createTextRange) {
				var range = element.createTextRange();
				range.moveStart("character", 0);
				range.moveEnd("character", element.value.length);
				range.select();
			}
		} else if (_window["getSelection"]) {
			var selection = _window.getSelection();
			// FIXME: does this work on Safari?
			if (element.setSelectionRange) {
				element.setSelectionRange(0, element.value.length);
			}
		}
		element.focus();
	};

}