skins/ajax_scripts/ajax_form_manager.js

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