diff options
Diffstat (limited to 'includes/js/dijit/InlineEditBox.js')
| -rw-r--r-- | includes/js/dijit/InlineEditBox.js | 422 |
1 files changed, 422 insertions, 0 deletions
diff --git a/includes/js/dijit/InlineEditBox.js b/includes/js/dijit/InlineEditBox.js new file mode 100644 index 0000000..d4568d0 --- /dev/null +++ b/includes/js/dijit/InlineEditBox.js @@ -0,0 +1,422 @@ +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, "zh,pt,da,tr,ru,de,sv,ja,he,fi,nb,el,ar,ROOT,pt-pt,cs,fr,es,ko,nl,zh-tw,pl,it,hu"); + +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;'> ✍ </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); + } + + this.setValue(this.value || this.displayNode.innerHTML); + }, + + setDisabled: function(/*Boolean*/ disabled){ + // summary: + // Set disabled state of widget. + + this.disabled = disabled; + dijit.setWaiState(this.focusNode || this.domNode, "disabled", disabled); + }, + + _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(/>/g,">").replace(/</g,"<").replace(/&/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 = dojo.doc.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 ew = this.editWidget; + var ews = ew.domNode.style; + ews.position="absolute"; + ews.visibility="hidden"; + + this.domNode = this.displayNode; + + if(focus){ + dijit.focus(this.displayNode); + } + ews.display = "none"; + // give the browser some time to render the display node and then shift focus to it + // and hide the edit widget before garbage collecting the edit widget + setTimeout(function(){ + ew.destroy(); + delete ew; + if(dojo.isIE){ + // messing with the DOM tab order can cause IE to focus the body - so restore + dijit.focus(dijit.getFocus()); + } + }, 1000); // no hurry - wait for things to quiesce + }, + + 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; + + var value = this.editWidget.getValue() + ""; + if(!this.renderAsHtml){ + value = value.replace(/&/gm, "&").replace(/</gm, "<").replace(/>/gm, ">").replace(/"/gm, """) + .replace(/\n/g, "<br>"); + } + this.setValue(value); + + // tell the world that we have changed + this.onChange(value); + + this._showText(focus); + }, + + setValue: function(/*String*/ val){ + // summary: inserts specified HTML value into this node, or an "input needed" character if node is blank + this.value = val; + this.displayNode.innerHTML = dojo.trim(val) || this.noValueIndicator; + }, + + getValue: function(){ + return this.value; + }, + + 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\" disabled=\"true\">${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(ew, "onChange", "_onChange"); + + // Monitor keypress on the edit widget. 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.focusNode || ew.domNode, "onkeypress", "_onKeyPress"); + + // priorityChange=false will prevent bogus onChange event + (this.editWidget.setDisplayedValue||this.editWidget.setValue).call(this.editWidget, this.value, false); + + 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(e.altKey || e.ctrlKey){ return; } + // 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 if(e.keyCode == dojo.keys.TAB){ + this._exitInProgress = true; + // allow 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. + setTimeout(dojo.hitch(this, "save", false), 0); + } + }else{ + var _this = this; + // Delay before calling getValue(). + // The delay gives the browser a chance to update the Textarea. + setTimeout( + function(){ + _this.saveButton.setAttribute("disabled", _this.getValue() == _this._initialText); + }, 100); + } + }, + + _onBlur: function(){ + // summary: + // Called when focus moves outside the editor + this.inherited(arguments); + 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._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.setAttribute("disabled", (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); + } +}); + +} |