1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.
(function($) {
function startEditing(elem, options) {
var editable = $(elem);
var origHtml = editable.html();
var origText = options.populate($.trim(editable.text()));
if (!options.begin.apply(elem, [origText])) {
return;
}
var input = options.createInput.apply(elem, [origText])
.addClass("editinline").val(origText)
.dblclick(function() { return false; })
.keydown(function(evt) {
switch (evt.keyCode) {
case 13: { // return
if (!input.is("textarea")) applyChange(evt.keyCode);
break;
}
case 27: { // escape
cancelChange(evt.keyCode);
break;
}
case 9: { // tab
if (!input.is("textarea")) {
applyChange(evt.keyCode);
return false;
}
}
}
});
if (options.acceptOnBlur) {
input.blur(function() {
return applyChange();
});
}
function applyChange(keyCode) {
var newText = input.val();
if (newText == origText) {
cancelChange(keyCode);
return true;
}
if ((!options.allowEmpty && !newText.length) ||
!options.validate.apply(elem, [newText, origText])) {
input.addClass("invalid");
return false;
}
input.remove();
tools.remove();
options.accept.apply(elem, [newText, origText]);
editable.removeClass("editinline-container");
options.end.apply(elem, [keyCode]);
return true;
}
function cancelChange(keyCode) {
options.cancel.apply(elem, [origText]);
editable.html(origHtml).removeClass("editinline-container");
options.end.apply(elem, [keyCode]);
}
var tools = $("<span class='editinline-tools'></span>");
$("<button type='button' class='apply'></button>")
.text(options.acceptLabel).click(applyChange).appendTo(tools);
$("<button type='button' class='cancel'></button>")
.text(options.cancelLabel).click(cancelChange).appendTo(tools)
editable.html("").append(tools).append(input)
.addClass("editinline-container");
options.prepareInput.apply(elem, [input[0]]);
input.each(function() { this.focus(); this.select(); });
}
$.fn.makeEditable = function(options) {
options = $.extend({
allowEmpty: true,
acceptLabel: "",
cancelLabel: "",
toolTip: "Click to edit",
acceptOnBlur: true,
// callbacks
begin: function() { return true },
accept: function(newValue, oldValue) {},
cancel: function(oldValue) {},
createInput: function(value) { return $("<input type='text'>") },
prepareInput: function(input) {},
end: function(keyCode) {},
populate: function(value) { return value },
validate: function() { return true }
}, options || {});
return this.each(function() {
$(this).attr("title", options.toolTip).click(function() {
startEditing(this, options);
});
});
}
})(jQuery);
|
