1318 |
alexandre_ |
1 |
/*
|
|
|
2 |
Copyright (c) 2004-2006, The Dojo Foundation
|
|
|
3 |
All Rights Reserved.
|
|
|
4 |
|
|
|
5 |
Licensed under the Academic Free License version 2.1 or above OR the
|
|
|
6 |
modified BSD license. For more information on Dojo licensing, see:
|
|
|
7 |
|
|
|
8 |
http://dojotoolkit.org/community/licensing.shtml
|
|
|
9 |
*/
|
|
|
10 |
|
1422 |
alexandre_ |
11 |
|
|
|
12 |
|
1318 |
alexandre_ |
13 |
dojo.provide("dojo.widget.InlineEditBox");
|
|
|
14 |
dojo.require("dojo.widget.*");
|
|
|
15 |
dojo.require("dojo.event.*");
|
|
|
16 |
dojo.require("dojo.lfx.*");
|
|
|
17 |
dojo.require("dojo.gfx.color");
|
|
|
18 |
dojo.require("dojo.string");
|
|
|
19 |
dojo.require("dojo.html.*");
|
|
|
20 |
dojo.require("dojo.html.layout");
|
|
|
21 |
dojo.widget.defineWidget("dojo.widget.InlineEditBox", dojo.widget.HtmlWidget, function () {
|
|
|
22 |
this.history = [];
|
|
|
23 |
}, {templateString:"<form class=\"inlineEditBox\" style=\"display: none\" dojoAttachPoint=\"form\" dojoAttachEvent=\"onSubmit:saveEdit; onReset:cancelEdit; onKeyUp: checkForValueChange;\">\n\t<input type=\"text\" dojoAttachPoint=\"text\" style=\"display: none;\" />\n\t<textarea dojoAttachPoint=\"textarea\" style=\"display: none;\"></textarea>\n\t<input type=\"submit\" value=\"Save\" dojoAttachPoint=\"submitButton\" />\n\t<input type=\"reset\" value=\"Cancel\" dojoAttachPoint=\"cancelButton\" />\n</form>\n", templateCssString:".editLabel {\n\tfont-size : small;\n\tpadding : 0 5px;\n\tdisplay : none;\n}\n\n.editableRegionDisabled {\n\tcursor : pointer;\n\t_cursor : hand;\n}\n\n.editableRegion {\n\tbackground-color : #ffc !important;\n\tcursor : pointer;\n\t_cursor : hand;\n}\n\n.editableRegion .editLabel {\n\tdisplay : inline;\n}\n\n.editableTextareaRegion .editLabel {\n\tdisplay : block;\n}\n\n.inlineEditBox {\n\t/*background-color : #ffc;*/\n\tdisplay : inline;\n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/InlineEditBox.css"), mode:"text", name:"", minWidth:100, minHeight:200, editing:false, value:"", textValue:"", defaultText:"", postMixInProperties:function () {
|
|
|
24 |
if (this.textValue) {
|
|
|
25 |
dojo.deprecated("InlineEditBox: Use value parameter instead of textValue; will be removed in 0.5");
|
|
|
26 |
this.value = this.textValue;
|
|
|
27 |
}
|
|
|
28 |
if (this.defaultText) {
|
|
|
29 |
dojo.deprecated("InlineEditBox: Use value parameter instead of defaultText; will be removed in 0.5");
|
|
|
30 |
this.value = this.defaultText;
|
|
|
31 |
}
|
|
|
32 |
}, postCreate:function (args, frag) {
|
|
|
33 |
this.editable = this.getFragNodeRef(frag);
|
|
|
34 |
dojo.html.insertAfter(this.editable, this.form);
|
|
|
35 |
dojo.event.connect(this.editable, "onmouseover", this, "onMouseOver");
|
|
|
36 |
dojo.event.connect(this.editable, "onmouseout", this, "onMouseOut");
|
|
|
37 |
dojo.event.connect(this.editable, "onclick", this, "_beginEdit");
|
|
|
38 |
if (this.value) {
|
|
|
39 |
this.editable.innerHTML = this.value;
|
|
|
40 |
return;
|
|
|
41 |
} else {
|
|
|
42 |
this.value = dojo.string.trim(this.editable.innerHTML);
|
|
|
43 |
this.editable.innerHTML = this.value;
|
|
|
44 |
}
|
|
|
45 |
}, onMouseOver:function () {
|
|
|
46 |
if (!this.editing) {
|
|
|
47 |
if (this.disabled) {
|
|
|
48 |
dojo.html.addClass(this.editable, "editableRegionDisabled");
|
|
|
49 |
} else {
|
|
|
50 |
dojo.html.addClass(this.editable, "editableRegion");
|
|
|
51 |
if (this.mode == "textarea") {
|
|
|
52 |
dojo.html.addClass(this.editable, "editableTextareaRegion");
|
|
|
53 |
}
|
|
|
54 |
}
|
|
|
55 |
}
|
|
|
56 |
}, onMouseOut:function () {
|
|
|
57 |
if (!this.editing) {
|
|
|
58 |
dojo.html.removeClass(this.editable, "editableRegion");
|
|
|
59 |
dojo.html.removeClass(this.editable, "editableTextareaRegion");
|
|
|
60 |
dojo.html.removeClass(this.editable, "editableRegionDisabled");
|
|
|
61 |
}
|
|
|
62 |
}, _beginEdit:function (e) {
|
|
|
63 |
if (this.editing || this.disabled) {
|
|
|
64 |
return;
|
|
|
65 |
}
|
|
|
66 |
this.onMouseOut();
|
|
|
67 |
this.editing = true;
|
|
|
68 |
var ee = this[this.mode.toLowerCase()];
|
|
|
69 |
ee.value = dojo.string.trim(this.value);
|
|
|
70 |
ee.style.fontSize = dojo.html.getStyle(this.editable, "font-size");
|
|
|
71 |
ee.style.fontWeight = dojo.html.getStyle(this.editable, "font-weight");
|
|
|
72 |
ee.style.fontStyle = dojo.html.getStyle(this.editable, "font-style");
|
|
|
73 |
var bb = dojo.html.getBorderBox(this.editable);
|
|
|
74 |
ee.style.width = Math.max(bb.width, this.minWidth) + "px";
|
|
|
75 |
if (this.mode.toLowerCase() == "textarea") {
|
|
|
76 |
ee.style.display = "block";
|
|
|
77 |
ee.style.height = Math.max(bb.height, this.minHeight) + "px";
|
|
|
78 |
} else {
|
|
|
79 |
ee.style.display = "";
|
|
|
80 |
}
|
|
|
81 |
this.form.style.display = "";
|
|
|
82 |
this.editable.style.display = "none";
|
|
|
83 |
ee.focus();
|
|
|
84 |
ee.select();
|
|
|
85 |
this.submitButton.disabled = true;
|
|
|
86 |
}, saveEdit:function (e) {
|
|
|
87 |
e.preventDefault();
|
|
|
88 |
e.stopPropagation();
|
|
|
89 |
var ee = this[this.mode.toLowerCase()];
|
|
|
90 |
if ((this.value != ee.value) && (dojo.string.trim(ee.value) != "")) {
|
|
|
91 |
this.doFade = true;
|
|
|
92 |
this.history.push(this.value);
|
|
|
93 |
this.onSave(ee.value, this.value, this.name);
|
|
|
94 |
this.value = ee.value;
|
|
|
95 |
this.editable.innerHTML = "";
|
|
|
96 |
var textNode = document.createTextNode(this.value);
|
|
|
97 |
this.editable.appendChild(textNode);
|
|
|
98 |
} else {
|
|
|
99 |
this.doFade = false;
|
|
|
100 |
}
|
|
|
101 |
this._finishEdit(e);
|
|
|
102 |
}, _stopEditing:function () {
|
|
|
103 |
this.editing = false;
|
|
|
104 |
this.form.style.display = "none";
|
|
|
105 |
this.editable.style.display = "";
|
|
|
106 |
return true;
|
|
|
107 |
}, cancelEdit:function (e) {
|
|
|
108 |
this._stopEditing();
|
|
|
109 |
this.onCancel();
|
|
|
110 |
return true;
|
|
|
111 |
}, _finishEdit:function (e) {
|
|
|
112 |
this._stopEditing();
|
|
|
113 |
if (this.doFade) {
|
|
|
114 |
dojo.lfx.highlight(this.editable, dojo.gfx.color.hex2rgb("#ffc"), 700).play(300);
|
|
|
115 |
}
|
|
|
116 |
this.doFade = false;
|
|
|
117 |
}, setText:function (txt) {
|
|
|
118 |
dojo.deprecated("setText() is deprecated, call setValue() instead, will be removed in 0.5");
|
|
|
119 |
this.setValue(txt);
|
|
|
120 |
}, setValue:function (txt) {
|
|
|
121 |
txt = "" + txt;
|
|
|
122 |
var tt = dojo.string.trim(txt);
|
|
|
123 |
this.value = tt;
|
|
|
124 |
this.editable.innerHTML = tt;
|
|
|
125 |
}, undo:function () {
|
|
|
126 |
if (this.history.length > 0) {
|
|
|
127 |
var curValue = this.value;
|
|
|
128 |
var value = this.history.pop();
|
|
|
129 |
this.editable.innerHTML = value;
|
|
|
130 |
this.value = value;
|
|
|
131 |
this.onUndo(value);
|
|
|
132 |
this.onSave(value, curValue, this.name);
|
|
|
133 |
}
|
|
|
134 |
}, onChange:function (newValue, oldValue) {
|
|
|
135 |
}, onSave:function (newValue, oldValue, name) {
|
|
|
136 |
}, onCancel:function () {
|
|
|
137 |
}, checkForValueChange:function () {
|
|
|
138 |
var ee = this[this.mode.toLowerCase()];
|
|
|
139 |
if ((this.value != ee.value) && (dojo.string.trim(ee.value) != "")) {
|
|
|
140 |
this.submitButton.disabled = false;
|
|
|
141 |
}
|
|
|
142 |
this.onChange(this.value, ee.value);
|
|
|
143 |
}, disable:function () {
|
|
|
144 |
this.submitButton.disabled = true;
|
|
|
145 |
this.cancelButton.disabled = true;
|
|
|
146 |
var ee = this[this.mode.toLowerCase()];
|
|
|
147 |
ee.disabled = true;
|
|
|
148 |
dojo.widget.InlineEditBox.superclass.disable.apply(this, arguments);
|
|
|
149 |
}, enable:function () {
|
|
|
150 |
this.checkForValueChange();
|
|
|
151 |
this.cancelButton.disabled = false;
|
|
|
152 |
var ee = this[this.mode.toLowerCase()];
|
|
|
153 |
ee.disabled = false;
|
|
|
154 |
dojo.widget.InlineEditBox.superclass.enable.apply(this, arguments);
|
|
|
155 |
}});
|
|
|
156 |
|