mirror of
https://git.tt-rss.org/git/tt-rss.git
synced 2025-12-23 08:31:29 +00:00
upgrade Dojo to 1.6.1
This commit is contained in:
Andrew Dolgov
@@ -1,231 +1,589 @@
|
||||
/*
|
||||
Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
||||
Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
|
||||
Available via Academic Free License >= 2.1 OR the modified BSD license.
|
||||
see: http://dojotoolkit.org/license for details
|
||||
*/
|
||||
|
||||
|
||||
if(!dojo._hasResource["dijit.InlineEditBox"]){
|
||||
dojo._hasResource["dijit.InlineEditBox"]=true;
|
||||
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,"ROOT,ar,ca,cs,da,de,el,es,fi,fr,he,hu,it,ja,ko,nb,nl,pl,pt,pt-pt,ro,ru,sk,sl,sv,th,tr,zh,zh-tw");
|
||||
dojo.declare("dijit.InlineEditBox",dijit._Widget,{editing:false,autoSave:true,buttonSave:"",buttonCancel:"",renderAsHtml:false,editor:"dijit.form.TextBox",editorWrapper:"dijit._InlineEditor",editorParams:{},onChange:function(_1){
|
||||
},onCancel:function(){
|
||||
},width:"100%",value:"",noValueIndicator:dojo.isIE<=6?"<span style='font-family: wingdings; text-decoration: underline;'> ✍ </span>":"<span style='text-decoration: underline;'> ✍ </span>",constructor:function(){
|
||||
this.editorParams={};
|
||||
},postMixInProperties:function(){
|
||||
this.inherited(arguments);
|
||||
this.displayNode=this.srcNodeRef;
|
||||
var _2={ondijitclick:"_onClick",onmouseover:"_onMouseOver",onmouseout:"_onMouseOut",onfocus:"_onMouseOver",onblur:"_onMouseOut"};
|
||||
for(var _3 in _2){
|
||||
this.connect(this.displayNode,_3,_2[_3]);
|
||||
}
|
||||
dijit.setWaiRole(this.displayNode,"button");
|
||||
if(!this.displayNode.getAttribute("tabIndex")){
|
||||
this.displayNode.setAttribute("tabIndex",0);
|
||||
}
|
||||
if(!this.value&&!("value" in this.params)){
|
||||
this.value=dojo.trim(this.renderAsHtml?this.displayNode.innerHTML:(this.displayNode.innerText||this.displayNode.textContent||""));
|
||||
}
|
||||
if(!this.value){
|
||||
this.displayNode.innerHTML=this.noValueIndicator;
|
||||
}
|
||||
dojo.addClass(this.displayNode,"dijitInlineEditBoxDisplayMode");
|
||||
},setDisabled:function(_4){
|
||||
dojo.deprecated("dijit.InlineEditBox.setDisabled() is deprecated. Use set('disabled', bool) instead.","","2.0");
|
||||
this.set("disabled",_4);
|
||||
},_setDisabledAttr:function(_5){
|
||||
this.disabled=_5;
|
||||
dijit.setWaiState(this.domNode,"disabled",_5);
|
||||
if(_5){
|
||||
this.displayNode.removeAttribute("tabIndex");
|
||||
}else{
|
||||
this.displayNode.setAttribute("tabIndex",0);
|
||||
}
|
||||
dojo.toggleClass(this.displayNode,"dijitInlineEditBoxDisplayModeDisabled",_5);
|
||||
},_onMouseOver:function(){
|
||||
if(!this.disabled){
|
||||
dojo.addClass(this.displayNode,"dijitInlineEditBoxDisplayModeHover");
|
||||
}
|
||||
},_onMouseOut:function(){
|
||||
dojo.removeClass(this.displayNode,"dijitInlineEditBoxDisplayModeHover");
|
||||
},_onClick:function(e){
|
||||
if(this.disabled){
|
||||
return;
|
||||
}
|
||||
if(e){
|
||||
dojo.stopEvent(e);
|
||||
}
|
||||
this._onMouseOut();
|
||||
setTimeout(dojo.hitch(this,"edit"),0);
|
||||
},edit:function(){
|
||||
if(this.disabled||this.editing){
|
||||
return;
|
||||
}
|
||||
this.editing=true;
|
||||
this._savedPosition=dojo.style(this.displayNode,"position")||"static";
|
||||
this._savedOpacity=dojo.style(this.displayNode,"opacity")||"1";
|
||||
this._savedTabIndex=dojo.attr(this.displayNode,"tabIndex")||"0";
|
||||
if(this.wrapperWidget){
|
||||
var ew=this.wrapperWidget.editWidget;
|
||||
ew.set("displayedValue" in ew?"displayedValue":"value",this.value);
|
||||
}else{
|
||||
var _6=dojo.create("span",null,this.domNode,"before");
|
||||
var _7=dojo.getObject(this.editorWrapper);
|
||||
this.wrapperWidget=new _7({value:this.value,buttonSave:this.buttonSave,buttonCancel:this.buttonCancel,dir:this.dir,lang:this.lang,tabIndex:this._savedTabIndex,editor:this.editor,inlineEditBox:this,sourceStyle:dojo.getComputedStyle(this.displayNode),save:dojo.hitch(this,"save"),cancel:dojo.hitch(this,"cancel")},_6);
|
||||
}
|
||||
var ww=this.wrapperWidget;
|
||||
if(dojo.isIE){
|
||||
dijit.focus(dijit.getFocus());
|
||||
}
|
||||
dojo.style(this.displayNode,{position:"absolute",opacity:"0",display:"none"});
|
||||
dojo.style(ww.domNode,{position:this._savedPosition,visibility:"visible",opacity:"1"});
|
||||
dojo.attr(this.displayNode,"tabIndex","-1");
|
||||
setTimeout(dojo.hitch(this,function(){
|
||||
ww.focus();
|
||||
ww._resetValue=ww.getValue();
|
||||
}),0);
|
||||
},_onBlur:function(){
|
||||
this.inherited(arguments);
|
||||
if(!this.editing){
|
||||
}
|
||||
},destroy:function(){
|
||||
if(this.wrapperWidget){
|
||||
this.wrapperWidget.destroy();
|
||||
delete this.wrapperWidget;
|
||||
}
|
||||
this.inherited(arguments);
|
||||
},_showText:function(_8){
|
||||
var ww=this.wrapperWidget;
|
||||
dojo.style(ww.domNode,{position:"absolute",visibility:"hidden",opacity:"0"});
|
||||
dojo.style(this.displayNode,{position:this._savedPosition,opacity:this._savedOpacity,display:""});
|
||||
dojo.attr(this.displayNode,"tabIndex",this._savedTabIndex);
|
||||
if(_8){
|
||||
dijit.focus(this.displayNode);
|
||||
}
|
||||
},save:function(_9){
|
||||
if(this.disabled||!this.editing){
|
||||
return;
|
||||
}
|
||||
this.editing=false;
|
||||
var ww=this.wrapperWidget;
|
||||
var _a=ww.getValue();
|
||||
this.set("value",_a);
|
||||
setTimeout(dojo.hitch(this,"onChange",_a),0);
|
||||
this._showText(_9);
|
||||
},setValue:function(_b){
|
||||
dojo.deprecated("dijit.InlineEditBox.setValue() is deprecated. Use set('value', ...) instead.","","2.0");
|
||||
return this.set("value",_b);
|
||||
},_setValueAttr:function(_c){
|
||||
this.value=_c=dojo.trim(_c);
|
||||
if(!this.renderAsHtml){
|
||||
_c=_c.replace(/&/gm,"&").replace(/</gm,"<").replace(/>/gm,">").replace(/"/gm,""").replace(/\n/g,"<br>");
|
||||
}
|
||||
this.displayNode.innerHTML=_c||this.noValueIndicator;
|
||||
},getValue:function(){
|
||||
dojo.deprecated("dijit.InlineEditBox.getValue() is deprecated. Use get('value') instead.","","2.0");
|
||||
return this.get("value");
|
||||
},cancel:function(_d){
|
||||
if(this.disabled||!this.editing){
|
||||
return;
|
||||
}
|
||||
this.editing=false;
|
||||
setTimeout(dojo.hitch(this,"onCancel"),0);
|
||||
this._showText(_d);
|
||||
}});
|
||||
dojo.declare("dijit._InlineEditor",[dijit._Widget,dijit._Templated],{templateString:dojo.cache("dijit","templates/InlineEditBox.html","<span dojoAttachPoint=\"editNode\" waiRole=\"presentation\" style=\"position: absolute; visibility:hidden\" class=\"dijitReset dijitInline\"\n\tdojoAttachEvent=\"onkeypress: _onKeyPress\"\n\t><span dojoAttachPoint=\"editorPlaceholder\"></span\n\t><span dojoAttachPoint=\"buttonContainer\"\n\t\t><button class='saveButton' dojoAttachPoint=\"saveButton\" dojoType=\"dijit.form.Button\" dojoAttachEvent=\"onClick:save\" label=\"${buttonSave}\"></button\n\t\t><button class='cancelButton' dojoAttachPoint=\"cancelButton\" dojoType=\"dijit.form.Button\" dojoAttachEvent=\"onClick:cancel\" label=\"${buttonCancel}\"></button\n\t></span\n></span>\n"),widgetsInTemplate:true,postMixInProperties:function(){
|
||||
this.inherited(arguments);
|
||||
this.messages=dojo.i18n.getLocalization("dijit","common",this.lang);
|
||||
dojo.forEach(["buttonSave","buttonCancel"],function(_e){
|
||||
if(!this[_e]){
|
||||
this[_e]=this.messages[_e];
|
||||
}
|
||||
},this);
|
||||
},postCreate:function(){
|
||||
var _f=dojo.getObject(this.editor);
|
||||
var _10=this.sourceStyle,_11="line-height:"+_10.lineHeight+";",_12=dojo.getComputedStyle(this.domNode);
|
||||
dojo.forEach(["Weight","Family","Size","Style"],function(_13){
|
||||
var _14=_10["font"+_13],_15=_12["font"+_13];
|
||||
if(_15!=_14){
|
||||
_11+="font-"+_13+":"+_10["font"+_13]+";";
|
||||
}
|
||||
},this);
|
||||
dojo.forEach(["marginTop","marginBottom","marginLeft","marginRight"],function(_16){
|
||||
this.domNode.style[_16]=_10[_16];
|
||||
},this);
|
||||
var _17=this.inlineEditBox.width;
|
||||
if(_17=="100%"){
|
||||
_11+="width:100%;";
|
||||
this.domNode.style.display="block";
|
||||
}else{
|
||||
_11+="width:"+(_17+(Number(_17)==_17?"px":""))+";";
|
||||
}
|
||||
var _18=dojo.delegate(this.inlineEditBox.editorParams,{style:_11,dir:this.dir,lang:this.lang});
|
||||
_18["displayedValue" in _f.prototype?"displayedValue":"value"]=this.value;
|
||||
var ew=(this.editWidget=new _f(_18,this.editorPlaceholder));
|
||||
if(this.inlineEditBox.autoSave){
|
||||
dojo.destroy(this.buttonContainer);
|
||||
this.connect(ew,"onChange","_onChange");
|
||||
this.connect(ew,"onKeyPress","_onKeyPress");
|
||||
}else{
|
||||
if("intermediateChanges" in _f.prototype){
|
||||
ew.set("intermediateChanges",true);
|
||||
this.connect(ew,"onChange","_onIntermediateChange");
|
||||
this.saveButton.set("disabled",true);
|
||||
}
|
||||
}
|
||||
},_onIntermediateChange:function(val){
|
||||
this.saveButton.set("disabled",(this.getValue()==this._resetValue)||!this.enableSave());
|
||||
},destroy:function(){
|
||||
this.editWidget.destroy(true);
|
||||
this.inherited(arguments);
|
||||
},getValue:function(){
|
||||
var ew=this.editWidget;
|
||||
return String(ew.get("displayedValue" in ew?"displayedValue":"value"));
|
||||
},_onKeyPress:function(e){
|
||||
if(this.inlineEditBox.autoSave&&this.inlineEditBox.editing){
|
||||
if(e.altKey||e.ctrlKey){
|
||||
return;
|
||||
}
|
||||
if(e.charOrCode==dojo.keys.ESCAPE){
|
||||
dojo.stopEvent(e);
|
||||
this.cancel(true);
|
||||
}else{
|
||||
if(e.charOrCode==dojo.keys.ENTER&&e.target.tagName=="INPUT"){
|
||||
dojo.stopEvent(e);
|
||||
this._onChange();
|
||||
}
|
||||
}
|
||||
}
|
||||
},_onBlur:function(){
|
||||
this.inherited(arguments);
|
||||
if(this.inlineEditBox.autoSave&&this.inlineEditBox.editing){
|
||||
if(this.getValue()==this._resetValue){
|
||||
this.cancel(false);
|
||||
}else{
|
||||
if(this.enableSave()){
|
||||
this.save(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
},_onChange:function(){
|
||||
if(this.inlineEditBox.autoSave&&this.inlineEditBox.editing&&this.enableSave()){
|
||||
dojo.style(this.inlineEditBox.displayNode,{display:""});
|
||||
dijit.focus(this.inlineEditBox.displayNode);
|
||||
}
|
||||
},enableSave:function(){
|
||||
return (this.editWidget.isValid?this.editWidget.isValid():true);
|
||||
},focus:function(){
|
||||
this.editWidget.focus();
|
||||
setTimeout(dojo.hitch(this,function(){
|
||||
if(this.editWidget.focusNode&&this.editWidget.focusNode.tagName=="INPUT"){
|
||||
dijit.selectInputText(this.editWidget.focusNode);
|
||||
}
|
||||
}),0);
|
||||
}});
|
||||
dojo.requireLocalization("dijit", "common", null, "ROOT,ar,ca,cs,da,de,el,es,fi,fr,he,hu,it,ja,kk,ko,nb,nl,pl,pt,pt-pt,ro,ru,sk,sl,sv,th,tr,zh,zh-tw");
|
||||
|
||||
|
||||
dojo.declare("dijit.InlineEditBox",
|
||||
dijit._Widget,
|
||||
{
|
||||
// summary:
|
||||
// An element with in-line edit capabilites
|
||||
//
|
||||
// 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:
|
||||
// - displayedValue or value as initialization parameter,
|
||||
// and available through set('displayedValue') / set('value')
|
||||
// - void focus()
|
||||
// - DOM-node focusNode = node containing editable text
|
||||
|
||||
// editing: [readonly] 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 (ex: `dijit.Editor`)
|
||||
renderAsHtml: false,
|
||||
|
||||
// editor: String|Function
|
||||
// Class name (or reference to the Class) for Editor widget
|
||||
editor: "dijit.form.TextBox",
|
||||
|
||||
// editorWrapper: String|Function
|
||||
// Class name (or reference to the Class) for widget that wraps the editor widget, displaying save/cancel
|
||||
// buttons.
|
||||
editorWrapper: "dijit._InlineEditor",
|
||||
|
||||
// editorParams: Object
|
||||
// Set of parameters for editor, like {required: true}
|
||||
editorParams: {},
|
||||
|
||||
// disabled: Boolean
|
||||
// If true, clicking the InlineEditBox to edit it will have no effect.
|
||||
disabled: false,
|
||||
|
||||
onChange: function(value){
|
||||
// summary:
|
||||
// Set this handler to be notified of changes to value.
|
||||
// tags:
|
||||
// callback
|
||||
},
|
||||
|
||||
onCancel: function(){
|
||||
// summary:
|
||||
// Set this handler to be notified when editing is cancelled.
|
||||
// tags:
|
||||
// callback
|
||||
},
|
||||
|
||||
// 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: [const] String
|
||||
// The text that gets displayed when there is no value (so that the user has a place to click to edit)
|
||||
noValueIndicator: dojo.isIE <= 6 ? // font-family needed on IE6 but it messes up IE8
|
||||
"<span style='font-family: wingdings; text-decoration: underline;'> ✍ </span>" :
|
||||
"<span style='text-decoration: underline;'> ✍ </span>",
|
||||
|
||||
constructor: function(){
|
||||
// summary:
|
||||
// Sets up private arrays etc.
|
||||
// tags:
|
||||
// private
|
||||
this.editorParams = {};
|
||||
},
|
||||
|
||||
postMixInProperties: function(){
|
||||
this.inherited(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 && !("value" in this.params)){ // "" is a good value if specified directly so check params){
|
||||
this.value = dojo.trim(this.renderAsHtml ? this.displayNode.innerHTML :
|
||||
(this.displayNode.innerText||this.displayNode.textContent||""));
|
||||
}
|
||||
if(!this.value){
|
||||
this.displayNode.innerHTML = this.noValueIndicator;
|
||||
}
|
||||
|
||||
dojo.addClass(this.displayNode, 'dijitInlineEditBoxDisplayMode');
|
||||
},
|
||||
|
||||
setDisabled: function(/*Boolean*/ disabled){
|
||||
// summary:
|
||||
// Deprecated. Use set('disabled', ...) instead.
|
||||
// tags:
|
||||
// deprecated
|
||||
dojo.deprecated("dijit.InlineEditBox.setDisabled() is deprecated. Use set('disabled', bool) instead.", "", "2.0");
|
||||
this.set('disabled', disabled);
|
||||
},
|
||||
|
||||
_setDisabledAttr: function(/*Boolean*/ disabled){
|
||||
// summary:
|
||||
// Hook to make set("disabled", ...) work.
|
||||
// Set disabled state of widget.
|
||||
dijit.setWaiState(this.domNode, "disabled", disabled);
|
||||
if(disabled){
|
||||
this.displayNode.removeAttribute("tabIndex");
|
||||
}else{
|
||||
this.displayNode.setAttribute("tabIndex", 0);
|
||||
}
|
||||
dojo.toggleClass(this.displayNode, "dijitInlineEditBoxDisplayModeDisabled", disabled);
|
||||
this._set("disabled", disabled);
|
||||
},
|
||||
|
||||
_onMouseOver: function(){
|
||||
// summary:
|
||||
// Handler for onmouseover and onfocus event.
|
||||
// tags:
|
||||
// private
|
||||
if(!this.disabled){
|
||||
dojo.addClass(this.displayNode, "dijitInlineEditBoxDisplayModeHover");
|
||||
}
|
||||
},
|
||||
|
||||
_onMouseOut: function(){
|
||||
// summary:
|
||||
// Handler for onmouseout and onblur event.
|
||||
// tags:
|
||||
// private
|
||||
dojo.removeClass(this.displayNode, "dijitInlineEditBoxDisplayModeHover");
|
||||
},
|
||||
|
||||
_onClick: function(/*Event*/ e){
|
||||
// summary:
|
||||
// Handler for onclick event.
|
||||
// tags:
|
||||
// private
|
||||
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.
|
||||
// tags:
|
||||
// private
|
||||
|
||||
if(this.disabled || this.editing){ return; }
|
||||
this.editing = true;
|
||||
|
||||
// save some display node values that can be restored later
|
||||
this._savedPosition = dojo.style(this.displayNode, "position") || "static";
|
||||
this._savedOpacity = dojo.style(this.displayNode, "opacity") || "1";
|
||||
this._savedTabIndex = dojo.attr(this.displayNode, "tabIndex") || "0";
|
||||
|
||||
if(this.wrapperWidget){
|
||||
var ew = this.wrapperWidget.editWidget;
|
||||
ew.set("displayedValue" in ew ? "displayedValue" : "value", this.value);
|
||||
}else{
|
||||
// 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 = dojo.create("span", null, this.domNode, "before");
|
||||
|
||||
// Create the editor wrapper (the thing that holds the editor widget and the save/cancel buttons)
|
||||
var ewc = typeof this.editorWrapper == "string" ? dojo.getObject(this.editorWrapper) : this.editorWrapper;
|
||||
this.wrapperWidget = new ewc({
|
||||
value: this.value,
|
||||
buttonSave: this.buttonSave,
|
||||
buttonCancel: this.buttonCancel,
|
||||
dir: this.dir,
|
||||
lang: this.lang,
|
||||
tabIndex: this._savedTabIndex,
|
||||
editor: this.editor,
|
||||
inlineEditBox: this,
|
||||
sourceStyle: dojo.getComputedStyle(this.displayNode),
|
||||
save: dojo.hitch(this, "save"),
|
||||
cancel: dojo.hitch(this, "cancel")
|
||||
}, placeholder);
|
||||
if(!this._started){
|
||||
this.startup();
|
||||
}
|
||||
}
|
||||
var ww = this.wrapperWidget;
|
||||
|
||||
if(dojo.isIE){
|
||||
dijit.focus(dijit.getFocus()); // IE (at least 8) needs help with tab order changes
|
||||
}
|
||||
// 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
|
||||
// position:absolute releases screen space allocated to the display node
|
||||
// opacity:0 is the same as visibility:hidden but is still focusable
|
||||
// visiblity:hidden removes focus outline
|
||||
|
||||
dojo.style(this.displayNode, { position: "absolute", opacity: "0", display: "none" }); // makes display node invisible, display style used for focus-ability
|
||||
dojo.style(ww.domNode, { position: this._savedPosition, visibility: "visible", opacity: "1" });
|
||||
dojo.attr(this.displayNode, "tabIndex", "-1"); // needed by WebKit for TAB from editor to skip displayNode
|
||||
|
||||
// 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.)
|
||||
setTimeout(dojo.hitch(this, function(){
|
||||
ww.focus(); // both nodes are showing, so we can switch focus safely
|
||||
ww._resetValue = ww.getValue();
|
||||
}), 0);
|
||||
},
|
||||
|
||||
_onBlur: function(){
|
||||
// summary:
|
||||
// Called when focus moves outside the InlineEditBox.
|
||||
// Performs garbage collection.
|
||||
// tags:
|
||||
// private
|
||||
|
||||
this.inherited(arguments);
|
||||
if(!this.editing){
|
||||
/* causes IE focus problems, see TooltipDialog_a11y.html...
|
||||
setTimeout(dojo.hitch(this, function(){
|
||||
if(this.wrapperWidget){
|
||||
this.wrapperWidget.destroy();
|
||||
delete this.wrapperWidget;
|
||||
}
|
||||
}), 0);
|
||||
*/
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function(){
|
||||
if(this.wrapperWidget && !this.wrapperWidget._destroyed){
|
||||
this.wrapperWidget.destroy();
|
||||
delete this.wrapperWidget;
|
||||
}
|
||||
this.inherited(arguments);
|
||||
},
|
||||
|
||||
_showText: function(/*Boolean*/ focus){
|
||||
// summary:
|
||||
// Revert to display mode, and optionally focus on display node
|
||||
// tags:
|
||||
// private
|
||||
|
||||
var ww = this.wrapperWidget;
|
||||
dojo.style(ww.domNode, { position: "absolute", visibility: "hidden", opacity: "0" }); // hide the editor from mouse/keyboard events
|
||||
dojo.style(this.displayNode, { position: this._savedPosition, opacity: this._savedOpacity, display: "" }); // make the original text visible
|
||||
dojo.attr(this.displayNode, "tabIndex", this._savedTabIndex);
|
||||
if(focus){
|
||||
dijit.focus(this.displayNode);
|
||||
}
|
||||
},
|
||||
|
||||
save: function(/*Boolean*/ focus){
|
||||
// summary:
|
||||
// Save the contents of the editor and revert to display mode.
|
||||
// focus: Boolean
|
||||
// Focus on the display mode text
|
||||
// tags:
|
||||
// private
|
||||
|
||||
if(this.disabled || !this.editing){ return; }
|
||||
this.editing = false;
|
||||
|
||||
var ww = this.wrapperWidget;
|
||||
var value = ww.getValue();
|
||||
this.set('value', value); // display changed, formatted value
|
||||
|
||||
this._showText(focus); // set focus as needed
|
||||
},
|
||||
|
||||
setValue: function(/*String*/ val){
|
||||
// summary:
|
||||
// Deprecated. Use set('value', ...) instead.
|
||||
// tags:
|
||||
// deprecated
|
||||
dojo.deprecated("dijit.InlineEditBox.setValue() is deprecated. Use set('value', ...) instead.", "", "2.0");
|
||||
return this.set("value", val);
|
||||
},
|
||||
|
||||
_setValueAttr: function(/*String*/ val){
|
||||
// summary:
|
||||
// Hook to make set("value", ...) work.
|
||||
// Inserts specified HTML value into this node, or an "input needed" character if node is blank.
|
||||
|
||||
val = dojo.trim(val);
|
||||
var renderVal = this.renderAsHtml ? val : val.replace(/&/gm, "&").replace(/</gm, "<").replace(/>/gm, ">").replace(/"/gm, """).replace(/\n/g, "<br>");
|
||||
this.displayNode.innerHTML = renderVal || this.noValueIndicator;
|
||||
this._set("value", val);
|
||||
|
||||
if(this._started){
|
||||
// tell the world that we have changed
|
||||
setTimeout(dojo.hitch(this, "onChange", val), 0); // setTimeout prevents browser freeze for long-running event handlers
|
||||
}
|
||||
},
|
||||
|
||||
getValue: function(){
|
||||
// summary:
|
||||
// Deprecated. Use get('value') instead.
|
||||
// tags:
|
||||
// deprecated
|
||||
dojo.deprecated("dijit.InlineEditBox.getValue() is deprecated. Use get('value') instead.", "", "2.0");
|
||||
return this.get("value");
|
||||
},
|
||||
|
||||
cancel: function(/*Boolean*/ focus){
|
||||
// summary:
|
||||
// Revert to display mode, discarding any changes made in the editor
|
||||
// tags:
|
||||
// private
|
||||
|
||||
if(this.disabled || !this.editing){ return; }
|
||||
this.editing = false;
|
||||
|
||||
// tell the world that we have no changes
|
||||
setTimeout(dojo.hitch(this, "onCancel"), 0); // setTimeout prevents browser freeze for long-running event handlers
|
||||
|
||||
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: dojo.cache("dijit", "templates/InlineEditBox.html", "<span data-dojo-attach-point=\"editNode\" role=\"presentation\" style=\"position: absolute; visibility:hidden\" class=\"dijitReset dijitInline\"\n\tdata-dojo-attach-event=\"onkeypress: _onKeyPress\"\n\t><span data-dojo-attach-point=\"editorPlaceholder\"></span\n\t><span data-dojo-attach-point=\"buttonContainer\"\n\t\t><button data-dojo-type=\"dijit.form.Button\" data-dojo-props=\"label: '${buttonSave}', 'class': 'saveButton'\"\n\t\t\tdata-dojo-attach-point=\"saveButton\" data-dojo-attach-event=\"onClick:save\"></button\n\t\t><button data-dojo-type=\"dijit.form.Button\" data-dojo-props=\"label: '${buttonCancel}', 'class': 'cancelButton'\"\n\t\t\tdata-dojo-attach-point=\"cancelButton\" data-dojo-attach-event=\"onClick:cancel\"></button\n\t></span\n></span>\n"),
|
||||
widgetsInTemplate: true,
|
||||
|
||||
postMixInProperties: function(){
|
||||
this.inherited(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);
|
||||
},
|
||||
|
||||
buildRendering: function(){
|
||||
this.inherited(arguments);
|
||||
|
||||
// Create edit widget in place in the template
|
||||
var cls = typeof this.editor == "string" ? dojo.getObject(this.editor) : this.editor;
|
||||
|
||||
// Copy the style from the source
|
||||
// Don't copy ALL properties though, just the necessary/applicable ones.
|
||||
// wrapperStyle/destStyle code is to workaround IE bug where getComputedStyle().fontSize
|
||||
// is a relative value like 200%, rather than an absolute value like 24px, and
|
||||
// the 200% can refer *either* to a setting on the node or it's ancestor (see #11175)
|
||||
var srcStyle = this.sourceStyle,
|
||||
editStyle = "line-height:" + srcStyle.lineHeight + ";",
|
||||
destStyle = dojo.getComputedStyle(this.domNode);
|
||||
dojo.forEach(["Weight","Family","Size","Style"], function(prop){
|
||||
var textStyle = srcStyle["font"+prop],
|
||||
wrapperStyle = destStyle["font"+prop];
|
||||
if(wrapperStyle != textStyle){
|
||||
editStyle += "font-"+prop+":"+srcStyle["font"+prop]+";";
|
||||
}
|
||||
}, this);
|
||||
dojo.forEach(["marginTop","marginBottom","marginLeft", "marginRight"], function(prop){
|
||||
this.domNode.style[prop] = srcStyle[prop];
|
||||
}, this);
|
||||
var width = this.inlineEditBox.width;
|
||||
if(width == "100%"){
|
||||
// block mode
|
||||
editStyle += "width:100%;";
|
||||
this.domNode.style.display = "block";
|
||||
}else{
|
||||
// inline-block mode
|
||||
editStyle += "width:" + (width + (Number(width) == width ? "px" : "")) + ";";
|
||||
}
|
||||
var editorParams = dojo.delegate(this.inlineEditBox.editorParams, {
|
||||
style: editStyle,
|
||||
dir: this.dir,
|
||||
lang: this.lang
|
||||
});
|
||||
editorParams[ "displayedValue" in cls.prototype ? "displayedValue" : "value"] = this.value;
|
||||
this.editWidget = new cls(editorParams, this.editorPlaceholder);
|
||||
|
||||
if(this.inlineEditBox.autoSave){
|
||||
// Remove the save/cancel buttons since saving is done by simply tabbing away or
|
||||
// selecting a value from the drop down list
|
||||
dojo.destroy(this.buttonContainer);
|
||||
}
|
||||
},
|
||||
|
||||
postCreate: function(){
|
||||
this.inherited(arguments);
|
||||
|
||||
var ew = this.editWidget;
|
||||
|
||||
if(this.inlineEditBox.autoSave){
|
||||
// Selecting a value from a drop down list causes an onChange event and then we save
|
||||
this.connect(ew, "onChange", "_onChange");
|
||||
|
||||
// ESC and TAB should cancel and save. Note that edit widgets do a stopEvent() on ESC key (to
|
||||
// prevent Dialog from closing when the user just wants to revert the value in the edit widget),
|
||||
// so this is the only way we can see the key press event.
|
||||
this.connect(ew, "onKeyPress", "_onKeyPress");
|
||||
}else{
|
||||
// If possible, enable/disable save button based on whether the user has changed the value
|
||||
if("intermediateChanges" in ew){
|
||||
ew.set("intermediateChanges", true);
|
||||
this.connect(ew, "onChange", "_onIntermediateChange");
|
||||
this.saveButton.set("disabled", true);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_onIntermediateChange: function(val){
|
||||
// summary:
|
||||
// Called for editor widgets that support the intermediateChanges=true flag as a way
|
||||
// to detect when to enable/disabled the save button
|
||||
this.saveButton.set("disabled", (this.getValue() == this._resetValue) || !this.enableSave());
|
||||
},
|
||||
|
||||
destroy: function(){
|
||||
this.editWidget.destroy(true); // let the parent wrapper widget clean up the DOM
|
||||
this.inherited(arguments);
|
||||
},
|
||||
|
||||
getValue: function(){
|
||||
// summary:
|
||||
// Return the [display] value of the edit widget
|
||||
var ew = this.editWidget;
|
||||
return String(ew.get("displayedValue" in ew ? "displayedValue" : "value"));
|
||||
},
|
||||
|
||||
_onKeyPress: function(e){
|
||||
// summary:
|
||||
// Handler for keypress in the edit box in autoSave mode.
|
||||
// description:
|
||||
// For autoSave widgets, if Esc/Enter, call cancel/save.
|
||||
// tags:
|
||||
// private
|
||||
|
||||
if(this.inlineEditBox.autoSave && this.inlineEditBox.editing){
|
||||
if(e.altKey || e.ctrlKey){ return; }
|
||||
// If Enter/Esc pressed, treat as save/cancel.
|
||||
if(e.charOrCode == dojo.keys.ESCAPE){
|
||||
dojo.stopEvent(e);
|
||||
this.cancel(true); // sets editing=false which short-circuits _onBlur processing
|
||||
}else if(e.charOrCode == dojo.keys.ENTER && e.target.tagName == "INPUT"){
|
||||
dojo.stopEvent(e);
|
||||
this._onChange(); // fire _onBlur and then save
|
||||
}
|
||||
|
||||
// _onBlur will handle TAB automatically by allowing
|
||||
// the TAB to change focus before we mess with the DOM: #6227
|
||||
// Expounding by request:
|
||||
// The current focus is on the edit widget input field.
|
||||
// save() will hide and destroy this widget.
|
||||
// We want the focus to jump from the currently hidden
|
||||
// displayNode, but since it's hidden, it's impossible to
|
||||
// unhide it, focus it, and then have the browser focus
|
||||
// away from it to the next focusable element since each
|
||||
// of these events is asynchronous and the focus-to-next-element
|
||||
// is already queued.
|
||||
// So we allow the browser time to unqueue the move-focus event
|
||||
// before we do all the hide/show stuff.
|
||||
}
|
||||
},
|
||||
|
||||
_onBlur: function(){
|
||||
// summary:
|
||||
// Called when focus moves outside the editor
|
||||
// tags:
|
||||
// private
|
||||
|
||||
this.inherited(arguments);
|
||||
if(this.inlineEditBox.autoSave && this.inlineEditBox.editing){
|
||||
if(this.getValue() == this._resetValue){
|
||||
this.cancel(false);
|
||||
}else if(this.enableSave()){
|
||||
this.save(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_onChange: function(){
|
||||
// summary:
|
||||
// Called when the underlying widget fires an onChange event,
|
||||
// such as when the user selects a value from the drop down list of a ComboBox,
|
||||
// which means that the user has finished entering the value and we should save.
|
||||
// tags:
|
||||
// private
|
||||
|
||||
if(this.inlineEditBox.autoSave && this.inlineEditBox.editing && this.enableSave()){
|
||||
dojo.style(this.inlineEditBox.displayNode, { display: "" });
|
||||
dijit.focus(this.inlineEditBox.displayNode); // fires _onBlur which will save the formatted value
|
||||
}
|
||||
},
|
||||
|
||||
enableSave: function(){
|
||||
// summary:
|
||||
// User overridable function returning a Boolean to indicate
|
||||
// if the Save button should be enabled or not - usually due to invalid conditions
|
||||
// tags:
|
||||
// extension
|
||||
return (
|
||||
this.editWidget.isValid
|
||||
? this.editWidget.isValid()
|
||||
: true
|
||||
);
|
||||
},
|
||||
|
||||
focus: function(){
|
||||
// summary:
|
||||
// Focus the edit widget.
|
||||
// tags:
|
||||
// protected
|
||||
|
||||
this.editWidget.focus();
|
||||
setTimeout(dojo.hitch(this, function(){
|
||||
if(this.editWidget.focusNode && this.editWidget.focusNode.tagName == "INPUT"){
|
||||
dijit.selectInputText(this.editWidget.focusNode);
|
||||
}
|
||||
}), 0);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user