https://nordanor.eus/NorDaNor2/kudeatu/jquery/js/jquery.editinplace.js

1/*
2 * Another In Place Editor - a jQuery edit in place plugin
3 *
4 * Copyright (c) 2009 Dave Hauenstein
5 *
6 * License:
7 * This source file is subject to the BSD license bundled with this package.
8 * Available online: {@link http://www.opensource.org/licenses/bsd-license.php}
9 * If you did not receive a copy of the license, and are unable to obtain it,
10 * email [email protected],
11 * and I will send you a copy.
12 *
13 * Project home:
14 * http://code.google.com/p/jquery-in-place-editor/
15 *
16 */
17
18/*
19 * Version 1.0.2
20 *
21 * bg_out (string) default: transparent hex code of background color on restore from hover
22 * bg_over (string) default: #ffc hex code of background color on hover
23 * callback (function) default: null function to be called when editing is complete; cancels ajax submission to the url param
24 * cancel_button (string) default: <input type="submit" class="inplace_cancel" value="Cancel"/> image button tag to use as "Cancel" button
25 * default_text (string) default: "(Click here to add text)" text to show up if the element that has this functionality is empty
26 * element_id (string) default: element_id name of parameter holding element_id
27 * error (function) this function gets called if server responds with an error
28 * field_type (string) "text", "textarea", or "select"; default: "text" The type of form field that will appear on instantiation
29 * on_blur (string) "save" or null; default: "save" what to do on blur; will be overridden if $param show_buttons is true
30 * original_html (string) default: original_html name of parameter holding original_html
31 * params (string) example: first_name=dave&last_name=hauenstein paramters sent via the post request to the server
32 * save_button (string) default: <input type="submit" class="inplace_save" value="Save"/> image button tag to use as "Save" button
33 * saving_image (string) default: uses saving text specify an image location instead of text while server is saving
34 * saving_text (string) default: "Saving..." text to be used when server is saving information
35 * select_options (string) comma delimited list of options if field_type is set to select
36 * select_text (string)default text to show up in select box
37 * show_buttons (boolean) default: false will show the buttons: cancel or save; will automatically cancel out the onBlur functionality
38 * success (function) default: null this function gets called if server responds with a success
39 * textarea_cols (integer) default: 25 set cols attribute of textarea, if field_type is set to textarea
40 * textarea_rows (integer) default: 10 set rows attribute of textarea, if field_type is set to textarea
41 * update_value (string) default: update_value name of parameter holding update_value
42 * url (string) POST URL to send edited content
43 * value_required (string) default: false if set to true, the element will not be saved unless a value is entered
44 *
45 */
46
47jQuery.fn.editInPlace = function(options) {
48
49	/* DEFINE THE DEFAULT SETTINGS, SWITCH THEM WITH THE OPTIONS USER PROVIDES */
50	var settings = {
51		url:				"",
52		params:				"",
53		field_type:			"text",
54		select_options:		"",
55		textarea_cols:		"25",
56		textarea_rows:		"10",
57		bg_over:			"#ffc",
58		bg_out:				"transparent",
59		saving_text:		"Saving...",
60		saving_image:		"",
61		default_text:		"(Click here to add text)",
62		select_text:		"Choose new value",
63		value_required:		null,
64		element_id:			"element_id",
65		update_value:		"update_value",
66		original_html:		"original_html",
67		save_button:		'<button class="inplace_save">Save</button>',
68		cancel_button:		'<button class="inplace_cancel">Cancel</button>',
69		show_buttons:		false,
70		on_blur:			"save",
71		callback:			null,
72		callbackShowErrors: true,
73		success:			null,
74		error:				function(request){
75                                alert("Huts egin du: " + request.responseText || 'Zehaztu gabeko hutsegitea');
76                            }
77	};
78
79	if(options) {
80		jQuery.extend(settings, options);
81	}
82
83	/* preload the loading icon if it exists */
84	if(settings.saving_image != ""){
85		var loading_image = new Image();
86		loading_image.src = settings.saving_image;
87	}
88
89	/* THIS FUNCTION WILL TRIM WHITESPACE FROM BEFORE/AFTER A STRING */
90	String.prototype.trim = function() {
91		return this.replace(/^\s+/, '')
92							 .replace(/\s+$/, '');
93	};
94
95	/* THIS FUNCTION WILL ESCAPE ANY HTML ENTITIES SO "Quoted Values" work */
96	String.prototype.escape_html = function() {
97		return this.replace(/&/g, "&amp;")
98							 .replace(/</g, "&lt;")
99							 .replace(/>/g, "&gt;")
100							 .replace(/"/g, "&quot;");
101  };
102
103	/* CREATE THE INPLACE EDITOR */
104	return this.each(function(){
105

106		if(jQuery(this).html() == "") jQuery(this).html(settings.default_text);
107
108		var editing = false;
109
110		//save the original element - for change of scope
111		var original_element = jQuery(this);
112
113		var click_count = 0;
114
115		jQuery(this)
116
117		.mouseover(function(){
118			jQuery(this).css("background", settings.bg_over);
119		})
120
121		.mouseout(function(){
122			jQuery(this).css("background", settings.bg_out);
123		})
124
125		.click(function(){
126			click_count++;
127
128			if(!editing)
129			{
130				editing = true;
131
132				//save original text - for cancellation functionality
133				var original_html = jQuery(this).html();
134				var buttons_code  = (settings.show_buttons) ? settings.save_button + ' ' + settings.cancel_button : '';
135
136				//if html is our default text, clear it out to prevent saving accidentally
137				if (original_html == settings.default_text) jQuery(this).html('');
138
139				if (settings.field_type == "textarea")
140				{
141					var use_field_type = '<textarea name="inplace_value" class="inplace_field" rows="' + settings.textarea_rows + '" cols="' + settings.textarea_cols + '">' + jQuery(this).text().trim().escape_html() + '</textarea>';
142				}
143				else if(settings.field_type == "text")
144				{
145					var use_field_type = '<input type="text" name="inplace_value" class="inplace_field" value="' +
146											jQuery(this).text().trim().escape_html() + '" />';
147				}
148				else if(settings.field_type == "select")
149				{
150					var optionsArray = settings.select_options.split(',');
151					var use_field_type = '<select name="inplace_value" class="inplace_field"><option value="">' + settings.select_text + '</option>';
152						for(var i=0; i<optionsArray.length; i++){
153							var optionsValuesArray = optionsArray[i].split(':');
154							var use_value = optionsValuesArray[1] || optionsValuesArray[0];
155							var selected = use_value == original_html ? 'selected="selected" ' : '';
156							use_field_type += '<option ' + selected + 'value="' + use_value.trim().escape_html() + '">' + optionsValuesArray[0].trim().escape_html() + '</option>';
157                        }
158						use_field_type += '</select>';
159				}
160
161				/* insert the new in place form after the element they click, then empty out the original element */
162				jQuery(this).html('<form class="inplace_form" style="display: inline; margin: 0; padding: 0;">' + use_field_type + ' ' + buttons_code + '</form>');
163
164			}/* END- if(!editing) -END */
165
166			if(click_count == 1)
167			{
168				function cancelAction()
169				{
170					editing = false;
171					click_count = 0;
172
173					/* put the original background color in */
174					original_element.css("background", settings.bg_out);
175
176					/* put back the original text */
177					original_element.html(original_html);
178
179					return false;
180				}
181
182				function saveAction()
183				{
184					/* put the original background color in */
185					original_element.css("background", settings.bg_out);
186
187                    var this_elem = jQuery(this);
188
189					var new_html = (this_elem.is('form')) ? this_elem.children(0).val() : this_elem.parent().children(0).val();
190
191					/* set saving message */
192					if(settings.saving_image != ""){
193						var saving_message = '<img src="' + settings.saving_image + '" alt="Saving..." />';
194					} else {
195						var saving_message = settings.saving_text;
196					}
197
198					/* place the saving text/image in the original element */
199					original_element.html(saving_message);
200
201					if(settings.params != ""){
202						settings.params = "&" + settings.params;
203					}
204
205					if(settings.callback) {
206						html = settings.callback(original_element.attr("id"), new_html, original_html, settings.params);
207						editing = false;
208						click_count = 0;
209						if (html) {
210							/* put the newly updated info into the original element */
211							original_element.html(html || new_html);
212						} else {
213							/* failure; put original back */
214							if(settings.callbackShowErrors)
215							{
216                                alert("Balioren bat hautatu behar da");
217							}
218							original_element.html(original_html);
219						}
220					} else if (settings.value_required && (new_html == "" || new_html == undefined)) {
221						editing = false;
222						click_count = 0;
223						original_element.html(original_html);
224						alert("Error: You must enter a value to save this field");
225					} else {
226						/* JOSU: puntua eta koma ez ditu jasotzen */
227						new_html = new_html.replace(/;/,".,");
228						jQuery.ajax({
229							url: settings.url,
230							type: "POST",
231							data: settings.update_value + '=' + new_html + '&' + settings.element_id + '=' + original_element.attr("id") + settings.params + '&' + settings.original_html + '=' + original_html,
232							dataType: "html",
233							complete: function(request){
234								editing = false;

235								click_count = 0;
236							},
237							success: function(html){
238								/* if the text returned by the server is empty, */
239   								/* put a marker as text in the original element */
240								var new_text = html || settings.default_text;
241
242								/* put the newly updated info into the original element */
243								original_element.html(new_text);
244								if (settings.success) settings.success(html, original_element);
245							},
246							error: function(request) {
247								original_element.html(original_html);
248								if (settings.error) settings.error(request, original_element);
249							}
250						});
251					}
252
253					return false;
254				}
255
256				/* set the focus to the new input element */
257				original_element.children("form").children(".inplace_field").focus().select();
258
259				/* CLICK CANCEL BUTTON functionality */
260				original_element.children("form").children(".inplace_cancel").click(cancelAction);
261
262				/* CLICK SAVE BUTTON functionality */
263				original_element.children("form").children(".inplace_save").click(saveAction);
264
265                /* if cancel/save buttons should be shown, cancel blur functionality */
266                if(!settings.show_buttons){
267                    /* if on_blur is set to save, set the save funcion */
268    				if(settings.on_blur == "save")
269    					original_element.children("form").children(".inplace_field").blur(saveAction);
270    				/* if on_blur is set to cancel, set the cancel funcion */
271    				else
272    					original_element.children("form").children(".inplace_field").blur(cancelAction);
273                }
274
275				/* hit esc key */
276				$(document).keyup(function(event){
277				    if (event.keyCode == 27) {
278						cancelAction();
279				    }
280				});
281
282                original_element.children("form").submit(saveAction);
283
284			}/* END- if(click_count == 1) -END */
285		});
286	});
287};