New file |
0,0 → 1,317 |
if(!dojo._hasResource["dijit.form.InlineEditBox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dijit.form.InlineEditBox"] = true; |
dojo.provide("dijit.form.InlineEditBox"); |
|
dojo.require("dojo.i18n"); |
|
dojo.require("dijit.form._FormWidget"); |
dojo.require("dijit._Container"); |
dojo.require("dijit.form.Button"); |
|
dojo.requireLocalization("dijit", "common", null, "ko,zh,ja,zh-tw,ru,it,hu,fr,pt,ROOT,pl,es,de,cs"); |
|
dojo.deprecated("dijit.form.InlineEditBox is deprecated, use dijit.InlineEditBox instead", "", "1.1"); |
|
dojo.declare( |
"dijit.form.InlineEditBox", |
[dijit.form._FormWidget, dijit._Container], |
// summary |
// Wrapper widget to a text edit widget. |
// The text is displayed on the page using normal user-styling. |
// When clicked, the text is hidden, and the edit widget is |
// visible, allowing the text to be updated. 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. |
// Currently all textboxes that inherit from dijit.form.TextBox |
// are supported edit widgets. |
// 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() |
// It must also be able to initialize with style="display:none;" set. |
{ |
templateString:"<span\n\t><fieldset dojoAttachPoint=\"editNode\" style=\"display:none;\" waiRole=\"presentation\"\n\t\t><div dojoAttachPoint=\"containerNode\" dojoAttachEvent=\"onkeypress:_onEditWidgetKeyPress\"></div\n\t\t><div dojoAttachPoint=\"buttonContainer\"\n\t\t\t><button class='saveButton' dojoAttachPoint=\"saveButton\" dojoType=\"dijit.form.Button\" dojoAttachEvent=\"onClick:save\">${buttonSave}</button\n\t\t\t><button class='cancelButton' dojoAttachPoint=\"cancelButton\" dojoType=\"dijit.form.Button\" dojoAttachEvent=\"onClick:cancel\">${buttonCancel}</button\n\t\t></div\n\t></fieldset\n\t><span tabIndex=\"0\" dojoAttachPoint=\"textNode,focusNode\" waiRole=\"button\" style=\"display:none;\"\n\t\tdojoAttachEvent=\"onkeypress:_onKeyPress,onclick:_onClick,onmouseout:_onMouseOut,onmouseover:_onMouseOver,onfocus:_onMouseOver,onblur:_onMouseOut\"\n\t></span\n></span>\n", |
|
// 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 |
autoSave: true, |
|
// buttonSave: String |
// Save button label |
buttonSave: "", |
|
// buttonCancel: String |
// Cancel button label |
buttonCancel: "", |
|
// renderAsHtml: Boolean |
// should text render as HTML(true) or plain text(false) |
renderAsHtml: false, |
|
widgetsInTemplate: true, |
|
// _display: String |
// srcNodeRef display style |
_display:"", |
|
startup: function(){ |
// look for the input widget as a child of the containerNode |
if(!this._started){ |
|
if(this.editWidget){ |
this.containerNode.appendChild(this.editWidget.domNode); |
}else{ |
this.editWidget = this.getChildren()[0]; |
} |
// #3209: copy the style from the source |
// don't copy ALL properties though, just the necessary/applicable ones |
var srcStyle=dojo.getComputedStyle(this.domNode); |
dojo.forEach(["fontWeight","fontFamily","fontSize","fontStyle"], function(prop){ |
this.editWidget.focusNode.style[prop]=srcStyle[prop]; |
}, this); |
this._setEditValue = dojo.hitch(this.editWidget,this.editWidget.setDisplayedValue||this.editWidget.setValue); |
this._getEditValue = dojo.hitch(this.editWidget,this.editWidget.getDisplayedValue||this.editWidget.getValue); |
this._setEditFocus = dojo.hitch(this.editWidget,this.editWidget.focus); |
this._isEditValid = dojo.hitch(this.editWidget,this.editWidget.isValid || function(){return true;}); |
this.editWidget.onChange = dojo.hitch(this, "_onChange"); |
|
if(!this.autoSave){ // take over the setValue method so we can know when the value changes |
this._oldSetValue = this.editWidget.setValue; |
var _this = this; |
this.editWidget.setValue = dojo.hitch(this, function(value){ |
_this._oldSetValue.apply(_this.editWidget, arguments); |
_this._onEditWidgetKeyPress(null); // check the Save button |
}); |
} |
this._showText(); |
|
this._started = true; |
} |
}, |
|
postMixInProperties: function(){ |
this._srcTag = this.srcNodeRef.tagName; |
this._srcStyle=dojo.getComputedStyle(this.srcNodeRef); |
// getComputedStyle is not good until after onLoad is called |
var srcNodeStyle = this.srcNodeRef.style; |
this._display=""; |
if(srcNodeStyle && srcNodeStyle.display){ this._display=srcNodeStyle.display; } |
else{ |
switch(this.srcNodeRef.tagName.toLowerCase()){ |
case 'span': |
case 'input': |
case 'img': |
case 'button': |
this._display='inline'; |
break; |
default: |
this._display='block'; |
break; |
} |
} |
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(){ |
// don't call setValue yet since the editing widget is not setup |
if(this.autoSave){ |
dojo.style(this.buttonContainer, "display", "none"); |
} |
}, |
|
_onKeyPress: function(e){ |
// summary: handle keypress when edit box is not open |
if(this.disabled || e.altKey || e.ctrlKey){ return; } |
if(e.charCode == dojo.keys.SPACE || e.keyCode == dojo.keys.ENTER){ |
dojo.stopEvent(e); |
this._onClick(e); |
} |
}, |
|
_onMouseOver: function(){ |
if(!this.editing){ |
var classname = this.disabled ? "dijitDisabledClickableRegion" : "dijitClickableRegion"; |
dojo.addClass(this.textNode, classname); |
} |
}, |
|
_onMouseOut: function(){ |
if(!this.editing){ |
var classStr = this.disabled ? "dijitDisabledClickableRegion" : "dijitClickableRegion"; |
dojo.removeClass(this.textNode, classStr); |
} |
}, |
|
_onClick: function(e){ |
// summary |
// When user clicks the text, then start editing. |
// Hide the text and display the form instead. |
|
if(this.editing || this.disabled){ return; } |
this._onMouseOut(); |
this.editing = true; |
|
// show the edit form and hide the read only version of the text |
this._setEditValue(this._isEmpty ? '' : (this.renderAsHtml ? this.textNode.innerHTML : this.textNode.innerHTML.replace(/\s*\r?\n\s*/g,"").replace(/<br\/?>/gi, "\n").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&"))); |
this._initialText = this._getEditValue(); |
this._visualize(); |
// Before changing the focus, give the browser time to render. |
setTimeout(dojo.hitch(this, function(){ |
this._setEditFocus(); |
this.saveButton.setDisabled(true); |
}), 1); |
}, |
|
_visualize: function(){ |
dojo.style(this.editNode, "display", this.editing ? this._display : "none"); |
// #3749: try to set focus now to fix missing caret |
// #3997: call right after this.containerNode appears |
if(this.editing){this._setEditFocus();} |
dojo.style(this.textNode, "display", this.editing ? "none" : this._display); |
}, |
|
_showText: function(){ |
var value = "" + this._getEditValue(); // "" is to make sure its a string |
dijit.form.InlineEditBox.superclass.setValue.call(this, value); |
// whitespace is really hard to click so show a ? |
// TODO: show user defined message in gray |
if(/^\s*$/.test(value)){ value = "?"; this._isEmpty = true; } |
else { this._isEmpty = false; } |
if(this.renderAsHtml){ |
this.textNode.innerHTML = value; |
}else{ |
this.textNode.innerHTML = ""; |
if(value.split){ |
var _this=this; |
var isFirst = true; |
dojo.forEach(value.split("\n"), function(line){ |
if(isFirst){ |
isFirst = false; |
}else{ |
_this.textNode.appendChild(document.createElement("BR")); // preserve line breaks |
} |
_this.textNode.appendChild(document.createTextNode(line)); // use text nodes so that imbedded tags can be edited |
}); |
}else{ |
this.textNode.appendChild(document.createTextNode(value)); |
} |
} |
this._visualize(); |
}, |
|
save: function(e){ |
// summary: Callback when user presses "Save" button or it's simulated. |
// e is passed in if click on save button or user presses Enter. It's not |
// passed in when called by _onBlur. |
if(typeof e == "object"){ dojo.stopEvent(e); } |
if(!this.enableSave()){ return; } |
this.editing = false; |
this._showText(); |
// If save button pressed on non-autoSave widget or Enter pressed on autoSave |
// widget, restore focus to the inline text. |
if(e){ dijit.focus(this.focusNode); } |
|
if(this._lastValue != this._lastValueReported){ |
this.onChange(this._lastValue); // tell the world that we have changed |
} |
}, |
|
cancel: function(e){ |
// summary: Callback when user presses "Cancel" button or it's simulated. |
// e is passed in if click on cancel button or user presses Esc. It's not |
// passed in when called by _onBlur. |
if(e){ dojo.stopEvent(e); } |
this.editing = false; |
this._visualize(); |
// If cancel button pressed on non-autoSave widget or Esc pressed on autoSave |
// widget, restore focus to the inline text. |
if(e){ dijit.focus(this.focusNode); } |
}, |
|
setValue: function(/*String*/ value){ |
// sets the text without informing the server |
this._setEditValue(value); |
this.editing = false; |
this._showText(); |
}, |
|
_onEditWidgetKeyPress: function(e){ |
// summary: |
// Callback when keypress in the edit box (see template). |
// 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.editing){ return; } |
if(this.autoSave){ |
// If Enter/Esc pressed, treat as save/cancel. |
if(e.keyCode == dojo.keys.ESCAPE){ |
this.cancel(e); |
}else if(e.keyCode == dojo.keys.ENTER){ |
this.save(e); |
} |
}else{ |
var _this = this; |
// Delay before calling _getEditValue. |
// The delay gives the browser a chance to update the textarea. |
setTimeout( |
function(){ |
_this.saveButton.setDisabled(_this._getEditValue() == _this._initialText); |
}, 100); |
} |
}, |
|
_onBlur: function(){ |
// summary: |
// Called by the focus manager in focus.js when focus moves outside of the |
// InlineEditBox widget (or it's descendants). |
if(this.autoSave && this.editing){ |
if(this._getEditValue() == this._initialText){ |
this.cancel(); |
}else{ |
this.save(); |
} |
} |
}, |
|
|
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._isEditValid(); |
}, |
|
_onChange: function(){ |
// summary: |
// This is called when the underlying widget fires an onChange event, |
// which means that the user has finished entering the value |
if(!this.editing){ |
this._showText(); // asynchronous update made famous by ComboBox/FilteringSelect |
}else if(this.autoSave){ |
this.save(1); |
}else{ |
// #3752 |
// if the keypress does not bubble up to the div, (iframe in TextArea blocks it for example) |
// make sure the save button gets enabled |
this.saveButton.setDisabled((this._getEditValue() == this._initialText) || !this.enableSave()); |
} |
}, |
|
setDisabled: function(/*Boolean*/ disabled){ |
this.saveButton.setDisabled(disabled); |
this.cancelButton.setDisabled(disabled); |
this.textNode.disabled = disabled; |
this.editWidget.setDisabled(disabled); |
this.inherited('setDisabled', arguments); |
} |
}); |
|
} |