bugfix envoi du formulaire par méthode get.
[Plinn.git] / skins / ajax_scripts / ajax_form_manager.js
1 // (c) Benoît PIN 2006-2014
2 // http://plinn.org
3 // Licence GPL
4 //
5 //
6
7 var FormManager;
8
9 (function(){
10
11 FormManager = function(form, responseTextDest, lazy, noHistory) {
12 if (form.elements.namedItem("noAjax")) {return;}
13
14 this.form = form;
15 this.responseTextDest = responseTextDest;
16 this.lazy = lazy;
17 this.noHistory = noHistory;
18 var thisManager = this;
19 this.form.onsubmit = function(evt) { thisManager.submit(evt); };
20 this.form.onclick = function(evt) { thisManager.click(evt); };
21
22 /* raised on form submit */
23 this.onBeforeSubmit = null;
24 /* raised after xmlhttp response */
25 this.onResponseLoad = null;
26 /* raised when the responseText is added inside the main element.
27 * (onResponseLoad may have the default value) */
28 this.onAfterPopulate = null;
29 this.submitButton = null;
30
31 if (this.lazy) {
32 this.form.onclick = function(evt){
33 thisManager.replaceElementByField(evt);
34 thisManager.click(evt);
35 };
36 if (browser.isDOM2Event) {
37 this.form.onfocus = this.form.onclick;
38 }
39 else if (browser.isIE6up) {
40 this.form.onfocusin = this.form.onclick;
41 }
42 this.onResponseLoad = function(req){ thisManager.restoreField(req); };
43 this.lazyListeners = [];
44 }
45 };
46
47 FormManager.prototype.submit = function(evt) {
48 var form = this.form;
49 var thisManager = this;
50
51 var bsMessage; // before submit message
52 if (!this.onBeforeSubmit) {
53 var onBeforeSubmit = form.elements.namedItem("onBeforeSubmit");
54 if (onBeforeSubmit) {
55 if (onBeforeSubmit.length) {
56 onBeforeSubmit = onBeforeSubmit[0];
57 }
58 /*jslint evil: true */
59 this.onBeforeSubmit = eval(onBeforeSubmit.value);
60 bsMessage = this.onBeforeSubmit(thisManager, evt);
61 }
62 }
63 else {
64 bsMessage = this.onBeforeSubmit(thisManager, evt);
65 }
66
67 if (bsMessage === 'cancelSubmit') {
68 try {disableDefault(evt);}
69 catch (e){}
70 return;
71 }
72
73 if (!this.onResponseLoad) {
74 var onResponseLoad = form.elements.namedItem("onResponseLoad");
75 if (onResponseLoad) {
76 this.onResponseLoad = eval(onResponseLoad.value);
77 }
78 else {
79 this.onResponseLoad = this.loadResponse;
80 }
81 }
82
83 var submitButton = this.submitButton;
84 var queryInfo = this.formData2QueryString();
85 var query = queryInfo.query;
86 this.hasFile = queryInfo.hasFile;
87
88
89 if (!this.onAfterPopulate) {
90 var onAfterPopulate = form.elements.namedItem("onAfterPopulate");
91 if (onAfterPopulate) {
92 this.onAfterPopulate = onAfterPopulate.value;
93 }
94 else {
95 this.onAfterPopulate = function() {};
96 }
97 }
98
99 if (submitButton) {
100 query += submitButton.name + '=' + submitButton.value + '&';
101 }
102
103 if (form.method.toLowerCase() === 'post') {
104 this._post(query);
105 }
106 else {
107 this._get(query);
108 }
109
110 try {disableDefault(evt);}
111 catch (e2){}
112 };
113
114 FormManager.prototype._post = function(query) {
115 // send form by XmlHttpRequest
116 query += "ajax=1";
117
118 var req = new XMLHttpRequest();
119 var thisManager = this;
120 req.onreadystatechange = function() {
121 switch (req.readyState) {
122 case 1 :
123 showProgressImage();
124 break;
125 case 4 :
126 hideProgressImage();
127 if (req.status === 200 || req.status === 204) {
128 thisManager.onResponseLoad(req);
129 }
130 else {
131 alert('Error: ' + req.status);
132 }
133 break;
134 }
135 };
136 var url = this.form.action;
137 req.open("POST", url, true);
138 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
139 req.send(query);
140 };
141
142 FormManager.prototype._get = function(query) {
143 var url = this.form.action;
144 url += '?' + query;
145 AjaxLinkHandler.loadUrl(url);
146 };
147
148
149 FormManager.prototype.click = function(evt) {
150 var target = getTargetedObject(evt);
151 if(target.type === "submit" || target.type === "image") {
152 this.submitButton = target;
153 disablePropagation(evt);
154 }
155 };
156
157 FormManager.prototype.replaceElementByField = function(evt) {
158 evt = getEventObject(evt);
159 var ob = getTargetedObject(evt);
160 var eventType = evt.type;
161 if (eventType === 'focus' || eventType === 'focusin') {
162 if (this.liveFormField && ob.tagName !== 'INPUT') {
163 this.pendingEvent = [ob, 'click'];
164 }
165 return;
166 }
167 var fieldName = ob.getAttribute('id');
168 if (fieldName) {
169 this.fieldTagName = ob.tagName;
170 var tabIndex = ob.tabIndex;
171 var text;
172 if (ob.firstChild && ob.firstChild.className === 'hidden_value') {
173 text = ob.firstChild.innerHTML;
174 }
175 else {
176 text = ob.innerHTML;
177 }
178 disablePropagation(evt);
179 var parent;
180 thisManager = this;
181 switch (ob.tagName) {
182 case 'SPAN' :
183 // create input element
184 var inputText = document.createElement("input");
185 inputText.setAttribute("type", "text");
186 text = text.replace(/\n/g, ' ');
187 text = text.replace(/\s+/g, ' ');
188 text = text.replace(/^ /, '');
189 text = text.replace(/ $/, '');
190 inputText.setAttribute("value", text);
191 var inputWidth = text.length / 1.9;
192 inputWidth = (inputWidth > 5) ? inputWidth : 5;
193 inputText.style.width = inputWidth + 'em';
194 //inputText.setAttribute("size", text.length);
195
196 // replacement
197 parent = ob.parentNode;
198 parent.replaceChild(inputText, ob);
199
200 inputText.focus();
201 inputText.select();
202 inputText.setAttribute('name', fieldName);
203 inputText.tabIndex = tabIndex;
204 inputText.className = 'live_field';
205 this.liveFormField = inputText;
206 this.lazyListeners.push({'element': inputText, 'eventName' : 'blur', 'handler': function(){ thisManager.submit();}});
207 this.lazyListeners.push({'element': inputText, 'eventName' : 'keypress', 'handler': function(evt){ thisManager._fitField(evt);}});
208 this._addLazyListeners();
209 break;
210
211 case 'DIV' :
212 case 'P' :
213 // create textarea
214 var ta = document.createElement('textarea');
215 ta.style.display = 'block';
216 ta.className = 'live_field';
217 text = text.replace(/^\s*/, '');
218 text = text.replace(/\s*$/, '');
219 ta.value = text;
220
221 // replacement
222 parent = ob.parentNode;
223 parent.replaceChild(ta, ob);
224
225 ta.focus();
226 ta.select();
227 ta.setAttribute('name', fieldName);
228 ta.tabIndex = tabIndex;
229 this.liveFormField = ta;
230 this.lazyListeners.push({'element': ta, 'eventName' : 'blur', 'handler': function(){ thisManager.submit();}});
231 this._addLazyListeners();
232 break;
233 }
234 }
235 };
236
237 FormManager.prototype._addLazyListeners = function() {
238 var i, handlerInfo;
239 for (i=0 ; i<this.lazyListeners.length ; i++) {
240 handlerInfo = this.lazyListeners[i];
241 addListener(handlerInfo.element, handlerInfo.eventName, handlerInfo.handler);
242 }
243 };
244
245 FormManager.prototype._removeLazyListeners = function() {
246 var i, handlerInfo;
247 for (i=0 ; i<this.lazyListeners.length ; i++) {
248 handlerInfo = this.lazyListeners[i];
249 removeListener(handlerInfo.element, handlerInfo.eventName, handlerInfo.handler);
250 }
251 };
252
253
254 FormManager.prototype.restoreField = function(req) {
255 var text;
256 var input = this.liveFormField;
257 if (req.status === 200) {
258 if (req.getResponseHeader('Content-Type').indexOf('text/xml') !== -1) {
259 var out = '..........';
260 if (req.responseXML.documentElement.firstChild) {
261 out = req.responseXML.documentElement.firstChild.nodeValue;
262 }
263
264 switch (req.responseXML.documentElement.nodeName) {
265 case 'computedField':
266 text = out;
267 break;
268 case 'error':
269 this._removeLazyListeners();
270 alert(out);
271 this.pendingEvent = null;
272 input.focus();
273 this._addLazyListeners();
274 return false;
275 }
276 }
277 else {
278 text = req.responseText;
279 }
280 }
281 else {
282 text = '';
283 }
284
285 if (!text.match(/\w/)) {
286 text = '..........';
287 }
288
289 var field = document.createElement(this.fieldTagName);
290 field.innerHTML = text;
291 field.setAttribute('id', input.getAttribute('name'));
292 field.className = 'editable';
293 field.tabIndex = input.tabIndex;
294
295 var parent = input.parentNode;
296 parent.replaceChild(field, input);
297 this.liveFormField = null;
298
299 if (this.pendingEvent) {
300 raiseMouseEvent(this.pendingEvent[0], this.pendingEvent[1]);
301 }
302 return true;
303 };
304
305
306 FormManager.prototype.formData2QueryString = function() {
307 // http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html
308 var form = this.form;
309 var strSubmit = '', formElem, elements;
310 var hasFile = false;
311 var i;
312
313 if (!this.lazy) {
314 elements = form.elements;
315 }
316 else {
317 elements = [];
318 var formElements = form.elements;
319 for (i = 0; i < formElements.length; i++) {
320 formElem = formElements[i];
321 switch (formElem.type) {
322 case 'hidden':
323 elements.push(formElem);
324 break;
325 default :
326 if (formElem === this.liveFormField) {
327 elements.push(formElem);
328 }
329 }
330 }
331 }
332
333 for (i = 0; i < elements.length; i++) {
334 formElem = elements[i];
335 switch (formElem.type) {
336 // text, select, hidden, password, textarea elements
337 case 'text':
338 case 'select-one':
339 case 'hidden':
340 case 'password':
341 case 'textarea':
342 strSubmit += formElem.name + '=' + encodeURIComponent(formElem.value) + '&';
343 break;
344 case 'radio':
345 case 'checkbox':
346 if (formElem.checked) {
347 strSubmit += formElem.name + '=' + encodeURIComponent(formElem.value) + '&';
348 }
349 break;
350 case 'select-multiple':
351 var options = formElem.getElementsByTagName("OPTION"), option;
352 var j;
353 for (j = 0 ; j < options.length ; j++) {
354 option = options[j];
355 if (option.selected) {
356 strSubmit += formElem.name + '=' + encodeURIComponent(option.value) + '&';
357 }
358 }
359 break;
360 case 'file':
361 if (formElem.value) {
362 hasFile = true;
363 }
364 break;
365 }
366 }
367 return {'query' : strSubmit, 'hasFile' : hasFile};
368 };
369
370 FormManager.prototype.loadResponse = function(req) {
371 var scripts;
372 if (req.getResponseHeader('Content-Type').indexOf('text/xml') !== -1) {
373 switch(req.responseXML.documentElement.nodeName) {
374 case 'fragments' :
375 if (this.hasFile) {
376 var sb = this.submitButton;
377 if (sb) {
378 var h = document.createElement('input');
379 h.type = 'hidden';
380 h.name = sb.name;
381 h.value = sb.value;
382 this.form.appendChild(h);
383 }
384
385 this.form.submit();
386 return;
387 }
388 var fragments = req.responseXML.documentElement.childNodes;
389 var element, dest, i, j;
390 for (i=0 ; i < fragments.length ; i++) {
391 element = fragments[i];
392 switch (element.nodeName) {
393 case 'fragment' :
394 dest = document.getElementById(element.getAttribute('id'));
395 if(dest) {
396 dest.innerHTML = element.firstChild.nodeValue;
397 scripts = dest.getElementsByTagName('script');
398 for (j=0 ; j < scripts.length ; j++) {
399 globalScriptRegistry.loadScript(scripts[j]); }
400 }
401 break;
402 case 'base' :
403 var headBase = document.getElementsByTagName('base');
404 if (headBase.length > 0) {
405 headBase[0].setAttribute('href', element.getAttribute('href'));
406 }
407 else {
408 headBase = document.createElement('base');
409 headBase.setAttribute('href', element.getAttribute('href'));
410 document.head.appendChild(headBase);
411 }
412 break;
413 }
414 }
415 break;
416 case 'error':
417 alert(req.responseXML.documentElement.firstChild.nodeValue);
418 return;
419 }
420 }
421 else {
422 this.responseTextDest.innerHTML = req.responseText;
423 scripts = this.responseTextDest.getElementsByTagName('script');
424 var k;
425 for (k=0 ; k < scripts.length ; k++) {
426 globalScriptRegistry.loadScript(scripts[k]);
427 }
428 }
429
430 var onAfterPopulate = this.onAfterPopulate;
431 onAfterPopulate();
432 this.scrollToPortalMessage();
433 var url = this.form.action;
434 if (!this.noHistory){ history.pushState(url, document.title, url); }
435 };
436
437 FormManager.prototype.scrollToPortalMessage = function() {
438 var psm = document.getElementById('DesktopStatusBar');
439 if (psm) {
440 var msgOffset = psm.offsetTop;
441 smoothScroll(window.scrollY, msgOffset);
442 shake(psm, 10, 1000);
443 }
444 };
445
446 FormManager.prototype._fitField = function(evt) {
447 var ob = getTargetedObject(evt);
448 var inputWidth = ob.value.length / 1.9;
449 inputWidth = (inputWidth > 5) ? inputWidth : 5;
450 ob.style.width = inputWidth + 'em';
451 };
452
453 function initForms(baseElement, lazy) {
454 if (!baseElement) {
455 baseElement = document;
456 }
457 var dest = document.getElementById("mainCell");
458 var forms = baseElement.getElementsByTagName("form");
459 var f, i;
460 for (i = 0 ; i < forms.length ; i++ ) {
461 f = new FormManager(forms[i], dest, lazy);
462 }
463 }
464
465 function smoothScroll(from, to) {
466 var intervalId;
467 var step = 25;
468 var pos = from;
469 var dir;
470 if (to > from) {
471 dir = 1;
472 }
473 else {
474 dir = -1;
475 }
476
477 var jump = function() {
478 window.scroll(0, pos);
479 pos = pos + step * dir;
480 if ((dir === 1 && pos >= to) ||
481 (dir === -1 && pos <= to)) {
482 window.clearInterval(intervalId);
483 window.scroll(0, to);
484 }
485 };
486 intervalId = window.setInterval(jump, 10);
487 }
488
489 /* adapted from http://xahlee.info/js/js_shake_box.html */
490 function shake(e, distance, time) {
491 // Handle arguments
492 if (!time) { time = 500; }
493 if (!distance) { distance = 5; }
494
495 // Save the original style of e, Make e relatively positioned, Note the animation start time, Start the animation
496 var originalStyle = e.style.cssText;
497 e.style.position = "relative";
498 var start = (new Date()).getTime();
499
500 // This function checks the elapsed time and updates the position of e.
501 // If the animation is complete, it restores e to its original state.
502 // Otherwise, it updates e's position and schedules itself to run again.
503 function animate() {
504 var now = (new Date()).getTime();
505 // Get current time
506 var elapsed = now-start;
507 // How long since we started
508 var fraction = elapsed/time;
509 // What fraction of total time?
510 if (fraction < 1) {
511 // If the animation is not yet complete
512 // Compute the x position of e as a function of animation
513 // completion fraction. We use a sinusoidal function, and multiply
514 // the completion fraction by 4pi, so that it shakes back and
515 // forth twice.
516 var x = distance * Math.sin(fraction*8*Math.PI);
517 e.style.left = x + "px";
518 // Try to run again in 25ms or at the end of the total time.
519 // We're aiming for a smooth 40 frames/second animation.
520 setTimeout(animate, Math.min(25, time-elapsed));
521 }
522 else {
523 // Otherwise, the animation is complete
524 e.style.cssText = originalStyle; // Restore the original style
525 }
526 }
527 animate();
528 }
529
530 }());