Subversion Repositories Applications.papyrus

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

};

}