6f6748ef32819b129e4ec1927d40624968358507
1 // (c) BenoƮt PIN 2006-2014
11 FormManager = function(form
, responseTextDest
, lazy
, noHistory
) {
12 if (form
.elements
.namedItem("noAjax")) {return;}
15 this.responseTextDest
= responseTextDest
;
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
); };
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;
32 this.form
.onclick = function(evt
){
33 thisManager
.replaceElementByField(evt
);
34 thisManager
.click(evt
);
36 if (browser
.isDOM2Event
) {
37 this.form
.onfocus
= this.form
.onclick
;
39 else if (browser
.isIE6up
) {
40 this.form
.onfocusin
= this.form
.onclick
;
42 this.onResponseLoad = function(req
){ thisManager
.restoreField(req
); };
43 this.lazyListeners
= [];
47 FormManager
.prototype.submit = function(evt
) {
49 var thisManager
= this;
51 var bsMessage
; // before submit message
52 if (!this.onBeforeSubmit
) {
53 var onBeforeSubmit
= form
.elements
.namedItem("onBeforeSubmit");
55 if (onBeforeSubmit
.length
) {
56 onBeforeSubmit
= onBeforeSubmit
[0];
58 /*jslint evil: true */
59 this.onBeforeSubmit
= eval(onBeforeSubmit
.value
);
60 bsMessage
= this.onBeforeSubmit(thisManager
, evt
);
64 bsMessage
= this.onBeforeSubmit(thisManager
, evt
);
67 if (bsMessage
=== 'cancelSubmit') {
68 try {disableDefault(evt
);}
73 if (!this.onResponseLoad
) {
74 var onResponseLoad
= form
.elements
.namedItem("onResponseLoad");
76 this.onResponseLoad
= eval(onResponseLoad
.value
);
79 this.onResponseLoad
= this.loadResponse
;
83 var submitButton
= this.submitButton
;
84 var queryInfo
= this.formData2QueryString();
85 var query
= queryInfo
.query
;
86 this.hasFile
= queryInfo
.hasFile
;
89 if (!this.onAfterPopulate
) {
90 var onAfterPopulate
= form
.elements
.namedItem("onAfterPopulate");
91 if (onAfterPopulate
) {
92 this.onAfterPopulate
= onAfterPopulate
.value
;
95 this.onAfterPopulate = function() {};
100 query
+= submitButton
.name
+ '=' + submitButton
.value
+ '&';
103 if (form
.method
.toLowerCase() === 'post') {
110 try {disableDefault(evt
);}
114 FormManager
.prototype._post = function(query
) {
115 // send form by XmlHttpRequest
118 var req
= new XMLHttpRequest();
119 var thisManager
= this;
120 req
.onreadystatechange = function() {
121 switch (req
.readyState
) {
127 if (req
.status
=== 200 || req
.status
=== 204) {
128 thisManager
.onResponseLoad(req
);
131 alert('Error: ' + req
.status
);
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");
142 FormManager
.prototype._get = function(query
) {
143 var url
= this.form
.action
;
145 AjaxLinkHandler
.prototype.loadUrl(url
);
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
);
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'];
167 var fieldName
= ob
.getAttribute('id');
169 this.fieldTagName
= ob
.tagName
;
170 var tabIndex
= ob
.tabIndex
;
172 if (ob
.firstChild
&& ob
.firstChild
.className
=== 'hidden_value') {
173 text
= ob
.firstChild
.innerHTML
;
178 disablePropagation(evt
);
181 switch (ob
.tagName
) {
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);
197 parent
= ob
.parentNode
;
198 parent
.replaceChild(inputText
, ob
);
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();
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*$/, '');
222 parent
= ob
.parentNode
;
223 parent
.replaceChild(ta
, ob
);
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();
237 FormManager
.prototype._addLazyListeners = function() {
239 for (i
=0 ; i
<this.lazyListeners
.length
; i
++) {
240 handlerInfo
= this.lazyListeners
[i
];
241 addListener(handlerInfo
.element
, handlerInfo
.eventName
, handlerInfo
.handler
);
245 FormManager
.prototype._removeLazyListeners = function() {
247 for (i
=0 ; i
<this.lazyListeners
.length
; i
++) {
248 handlerInfo
= this.lazyListeners
[i
];
249 removeListener(handlerInfo
.element
, handlerInfo
.eventName
, handlerInfo
.handler
);
254 FormManager
.prototype.restoreField = function(req
) {
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
;
264 switch (req
.responseXML
.documentElement
.nodeName
) {
265 case 'computedField':
269 this._removeLazyListeners();
271 this.pendingEvent
= null;
273 this._addLazyListeners();
278 text
= req
.responseText
;
285 if (!text
.match(/\w/)) {
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
;
295 var parent
= input
.parentNode
;
296 parent
.replaceChild(field
, input
);
297 this.liveFormField
= null;
299 if (this.pendingEvent
) {
300 raiseMouseEvent(this.pendingEvent
[0], this.pendingEvent
[1]);
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
;
314 elements
= form
.elements
;
318 var formElements
= form
.elements
;
319 for (i
= 0; i
< formElements
.length
; i
++) {
320 formElem
= formElements
[i
];
321 switch (formElem
.type
) {
323 elements
.push(formElem
);
326 if (formElem
=== this.liveFormField
) {
327 elements
.push(formElem
);
333 for (i
= 0; i
< elements
.length
; i
++) {
334 formElem
= elements
[i
];
335 switch (formElem
.type
) {
336 // text, select, hidden, password, textarea elements
342 strSubmit
+= formElem
.name
+ '=' + encodeURIComponent(formElem
.value
) + '&';
346 if (formElem
.checked
) {
347 strSubmit
+= formElem
.name
+ '=' + encodeURIComponent(formElem
.value
) + '&';
350 case 'select-multiple':
351 var options
= formElem
.getElementsByTagName("OPTION"), option
;
353 for (j
= 0 ; j
< options
.length
; j
++) {
355 if (option
.selected
) {
356 strSubmit
+= formElem
.name
+ '=' + encodeURIComponent(option
.value
) + '&';
361 if (formElem
.value
) {
367 return {'query' : strSubmit
, 'hasFile' : hasFile
};
370 FormManager
.prototype.loadResponse = function(req
) {
372 if (req
.getResponseHeader('Content-Type').indexOf('text/xml') !== -1) {
373 switch(req
.responseXML
.documentElement
.nodeName
) {
376 var sb
= this.submitButton
;
378 var h
= document
.createElement('input');
382 this.form
.appendChild(h
);
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
) {
394 dest
= document
.getElementById(element
.getAttribute('id'));
396 dest
.innerHTML
= element
.firstChild
.nodeValue
;
397 scripts
= dest
.getElementsByTagName('script');
398 for (j
=0 ; j
< scripts
.length
; j
++) {
399 globalScriptRegistry
.loadScript(scripts
[j
]); }
403 var headBase
= document
.getElementsByTagName('base');
404 if (headBase
.length
> 0) {
405 headBase
[0].setAttribute('href', element
.getAttribute('href'));
408 headBase
= document
.createElement('base');
409 headBase
.setAttribute('href', element
.getAttribute('href'));
410 document
.head
.appendChild(headBase
);
417 alert(req
.responseXML
.documentElement
.firstChild
.nodeValue
);
422 this.responseTextDest
.innerHTML
= req
.responseText
;
423 scripts
= this.responseTextDest
.getElementsByTagName('script');
425 for (k
=0 ; k
< scripts
.length
; k
++) {
426 globalScriptRegistry
.loadScript(scripts
[k
]);
430 var onAfterPopulate
= this.onAfterPopulate
;
432 this.scrollToPortalMessage();
433 var url
= this.form
.action
;
434 if (!this.noHistory
){ history
.pushState(url
, document
.title
, url
); }
437 FormManager
.prototype.scrollToPortalMessage = function() {
438 var psm
= document
.getElementById('DesktopStatusBar');
440 var msgOffset
= psm
.offsetTop
;
441 smoothScroll(window
.scrollY
, msgOffset
);
442 shake(psm
, 10, 1000);
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';
453 function initForms(baseElement
, lazy
) {
455 baseElement
= document
;
457 var dest
= document
.getElementById("mainCell");
458 var forms
= baseElement
.getElementsByTagName("form");
460 for (i
= 0 ; i
< forms
.length
; i
++ ) {
461 f
= new FormManager(forms
[i
], dest
, lazy
);
465 function smoothScroll(from, to
) {
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
);
486 intervalId
= window
.setInterval(jump
, 10);
489 /* adapted from http://xahlee.info/js/js_shake_box.html */
490 function shake(e, distance, time) {
492 if (!time) { time = 500; }
493 if (!distance) { distance = 5; }
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();
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.
504 var now = (new Date()).getTime();
506 var elapsed = now-start;
507 // How long since we started
508 var fraction = elapsed/time;
509 // What fraction of total time?
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
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));
523 // Otherwise, the animation is complete
524 e.style.cssText = originalStyle; // Restore the original style