|
1 /* |
|
2 * jquery-in-place-edit plugin |
|
3 * |
|
4 * Copyright (c) 2008 Christian Hellsten |
|
5 * |
|
6 * Plugin homepage: |
|
7 * http://aktagon.com/projects/jquery/in-place-edit/ |
|
8 * http://github.com/christianhellsten/jquery-in-place-edit/ |
|
9 * |
|
10 * Examples: |
|
11 * http://aktagon.com/projects/jquery/in-place-edit/examples/ |
|
12 * |
|
13 * Repository: |
|
14 * git://github.com/christianhellsten/jquery-in-place-edit.git |
|
15 * |
|
16 * Version 1.0.2 |
|
17 * |
|
18 * Tested with: |
|
19 * Windows: Firefox 2, Firefox 3, Internet Explorer 6, Internet Explorer 7 |
|
20 * Linux: Firefox 2, Firefox 3, Opera |
|
21 * Mac: Firefox 2, Firefox 3, Opera |
|
22 * |
|
23 * |
|
24 * Licensed under the MIT license: |
|
25 * http://www.opensource.org/licenses/mit-license.php |
|
26 * |
|
27 */ |
|
28 (function($) { |
|
29 |
|
30 $.fn.inPlaceEdit = function(options) { |
|
31 |
|
32 // Add click handler to all matching elements |
|
33 return this.each(function() { |
|
34 // Use default options, if necessary |
|
35 var settings = $.extend({}, $.fn.inPlaceEdit.defaults, options); |
|
36 |
|
37 var element = $(this); |
|
38 |
|
39 element.click(function() { |
|
40 element.data('skipBlur', false) |
|
41 |
|
42 // Prevent multiple clicks, and check if inplace editing is disabled |
|
43 if (element.hasClass("editing") || element.hasClass("disabled")) { |
|
44 return; |
|
45 } |
|
46 |
|
47 element.addClass("editing"); |
|
48 |
|
49 element.old_value = element.html(); // Store old HTML so we can revert to it later |
|
50 |
|
51 if(typeof(settings.html) == 'string') { // There are two types of form templates: strings and DOM elements |
|
52 element.html(settings.html); // Replace current HTML with given HTML |
|
53 } |
|
54 else { |
|
55 element.html(''); // Replace current HTML with given object's HTML |
|
56 var form_template = settings.html.children(':first').clone(true); |
|
57 form_template.appendTo(element); // Clone event handlers too |
|
58 } |
|
59 |
|
60 $('.field', element).val(element.old_value); // Set field value to old HTML |
|
61 $('.field', element).focus(); // Set focus to input field |
|
62 $('.field', element).select(); // Select all text in field |
|
63 |
|
64 // On blur: cancel action |
|
65 if(settings.onBlurDisabled == false) { |
|
66 $('.field', element).blur(function() { |
|
67 // Prevent cancel from being triggered when clicking Save & Cancel button |
|
68 var skipBlur = element.data('skipBlur') |
|
69 |
|
70 if(skipBlur != true) { |
|
71 element.timeout = setTimeout(cancel, 50); |
|
72 } |
|
73 |
|
74 element.data('skipBlur', false) |
|
75 }); |
|
76 } |
|
77 |
|
78 // On save: revert to old HTML and submit |
|
79 $('.save-button', element).click(function() { |
|
80 return submit(); |
|
81 }); |
|
82 |
|
83 $('.save-button', element).mousedown(function() { |
|
84 element.data('skipBlur', true) |
|
85 }); |
|
86 |
|
87 $('.cancel-button', element).mousedown(function() { |
|
88 element.data('skipBlur', true) |
|
89 }); |
|
90 |
|
91 // On cancel: revert to old HTML |
|
92 $('.cancel-button', element).click(function() { |
|
93 return cancel(); |
|
94 }); |
|
95 |
|
96 // On keyup: submit (ESC) or cancel (enter) |
|
97 if(settings.onKeyupDisabled == false) { |
|
98 $('.field', element).keyup(function(event) { |
|
99 var keycode = event.which; |
|
100 var type = this.tagName.toLowerCase(); |
|
101 |
|
102 if(keycode == 27 && settings.escapeKeyDisabled == false) { // escape |
|
103 return cancel(); |
|
104 } |
|
105 else if(keycode == 13) { // enter |
|
106 // Don't submit on enter if this is a textarea |
|
107 if(type != "textarea") { |
|
108 return submit(); |
|
109 } |
|
110 } |
|
111 return true; |
|
112 }); |
|
113 } |
|
114 }); |
|
115 |
|
116 // Add hover class on mouseover |
|
117 element.mouseover(function() { |
|
118 element.addClass("hover"); |
|
119 }); |
|
120 |
|
121 // Remove hover class on mouseout |
|
122 element.mouseout(function() { |
|
123 element.removeClass("hover"); |
|
124 }); |
|
125 |
|
126 function cancel() { |
|
127 element.html(element.old_value); |
|
128 |
|
129 element.removeClass("hover editing"); |
|
130 |
|
131 if(options.cancel) { |
|
132 options.cancel.apply(element, [element]); |
|
133 } |
|
134 return false; // Stop propagation |
|
135 }; |
|
136 |
|
137 function submit() { |
|
138 clearTimeout(element.timeout); |
|
139 |
|
140 var id = element.attr('id'); |
|
141 var value = $('.field', element).val(); |
|
142 |
|
143 if(options.submit) { |
|
144 options.submit.apply(element, [element, id, value, element.old_value]); |
|
145 } |
|
146 |
|
147 element.removeClass("hover editing"); |
|
148 |
|
149 element.html(value); |
|
150 |
|
151 return false; // Stop propagation |
|
152 }; |
|
153 }); |
|
154 |
|
155 }; |
|
156 |
|
157 // Default (overridable) settings |
|
158 $.fn.inPlaceEdit.defaults = { |
|
159 onBlurDisabled : false, |
|
160 onKeyupDisabled : false, |
|
161 escapeKeyDisabled : false, |
|
162 html : ' \ |
|
163 <div class="inplace-edit"> \ |
|
164 <input type="text" value="" class="field" /> \ |
|
165 <div class="buttons"> \ |
|
166 <input type="button" value="Save" class="save-button" /> \ |
|
167 <input type="button" value="Cancel" class="cancel-button" /> \ |
|
168 </div> \ |
|
169 </div>' |
|
170 }; |
|
171 })(jQuery); |