public/javascripts/controls.js

   1 // script.aculo.us controls.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
   2
   3 // Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
   4 //           (c) 2005-2009 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
   5 //           (c) 2005-2009 Jon Tirsen (http://www.tirsen.com)
   6 // Contributors:
   7 //  Richard Livsey
   8 //  Rahul Bhargava
   9 //  Rob Wills
  10 //
  11 // script.aculo.us is freely distributable under the terms of an MIT-style license.
  12 // For details, see the script.aculo.us web site: http://script.aculo.us/
  13
  14 // Autocompleter.Base handles all the autocompletion functionality
  15 // that's independent of the data source for autocompletion. This
  16 // includes drawing the autocompletion menu, observing keyboard
  17 // and mouse events, and similar.
  18 //
  19 // Specific autocompleters need to provide, at the very least,
  20 // a getUpdatedChoices function that will be invoked every time
  21 // the text inside the monitored textbox changes. This method
  22 // should get the text for which to provide autocompletion by
  23 // invoking this.getToken(), NOT by directly accessing
  24 // this.element.value. This is to allow incremental tokenized
  25 // autocompletion. Specific auto-completion logic (AJAX, etc)
  26 // belongs in getUpdatedChoices.
  27 //
  28 // Tokenized incremental autocompletion is enabled automatically
  29 // when an autocompleter is instantiated with the 'tokens' option
  30 // in the options parameter, e.g.:
  31 // new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });
  32 // will incrementally autocomplete with a comma as the token.
  33 // Additionally, ',' in the above example can be replaced with
  34 // a token array, e.g. { tokens: [',', '\n'] } which
  35 // enables autocompletion on multiple tokens. This is most
  36 // useful when one of the tokens is \n (a newline), as it
  37 // allows smart autocompletion after linebreaks.
  38
  39 if(typeof Effect == 'undefined')
  40   throw("controls.js requires including script.aculo.us' effects.js library");
  41
  42 var Autocompleter = { };
  43 Autocompleter.Base = Class.create({
  44   baseInitialize: function(element, update, options) {
  45     element          = $(element);
  46     this.element     = element;
  47     this.update      = $(update);
  48     this.hasFocus    = false;
  49     this.changed     = false;
  50     this.active      = false;
  51     this.index       = 0;
  52     this.entryCount  = 0;
  53     this.oldElementValue = this.element.value;
  54
  55     if(this.setOptions)
  56       this.setOptions(options);
  57     else
  58       this.options = options || { };
  59
  60     this.options.paramName    = this.options.paramName || this.element.name;
  61     this.options.tokens       = this.options.tokens || [];
  62     this.options.frequency    = this.options.frequency || 0.4;
  63     this.options.minChars     = this.options.minChars || 1;
  64     this.options.onShow       = this.options.onShow ||
  65       function(element, update){
  66         if(!update.style.position || update.style.position=='absolute') {
  67           update.style.position = 'absolute';
  68           Position.clone(element, update, {
  69             setHeight: false,
  70             offsetTop: element.offsetHeight
  71           });
  72         }
  73         Effect.Appear(update,{duration:0.15});
  74       };
  75     this.options.onHide = this.options.onHide ||
  76       function(element, update){ new Effect.Fade(update,{duration:0.15}) };
  77
  78     if(typeof(this.options.tokens) == 'string')
  79       this.options.tokens = new Array(this.options.tokens);
  80     // Force carriage returns as token delimiters anyway
  81     if (!this.options.tokens.include('\n'))
  82       this.options.tokens.push('\n');
  83
  84     this.observer = null;
  85
  86     this.element.setAttribute('autocomplete','off');
  87
  88     Element.hide(this.update);
  89
  90     Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));
  91     Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
  92   },
  93
  94   show: function() {
  95     if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
  96     if(!this.iefix &&
  97       (Prototype.Browser.IE) &&
  98       (Element.getStyle(this.update, 'position')=='absolute')) {
  99       new Insertion.After(this.update,
 100        '<iframe id="' + this.update.id + '_iefix" '+
 101        'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
 102        'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
 103       this.iefix = $(this.update.id+'_iefix');
 104     }
 105     if(this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);
 106   },
 107
 108   fixIEOverlapping: function() {
 109     Position.clone(this.update, this.iefix, {setTop:(!this.update.style.height)});
 110     this.iefix.style.zIndex = 1;
 111     this.update.style.zIndex = 2;
 112     Element.show(this.iefix);
 113   },
 114
 115   hide: function() {
 116     this.stopIndicator();
 117     if(Element.getStyle(this.update, 'display')!='none') this.options.onHide(this.element, this.update);
 118     if(this.iefix) Element.hide(this.iefix);
 119   },
 120
 121   startIndicator: function() {
 122     if(this.options.indicator) Element.show(this.options.indicator);
 123   },
 124
 125   stopIndicator: function() {
 126     if(this.options.indicator) Element.hide(this.options.indicator);
 127   },
 128
 129   onKeyPress: function(event) {
 130     if(this.active)
 131       switch(event.keyCode) {
 132        case Event.KEY_TAB:
 133        case Event.KEY_RETURN:
 134          this.selectEntry();
 135          Event.stop(event);
 136        case Event.KEY_ESC:
 137          this.hide();
 138          this.active = false;
 139          Event.stop(event);
 140          return;
 141        case Event.KEY_LEFT:
 142        case Event.KEY_RIGHT:
 143          return;
 144        case Event.KEY_UP:
 145          this.markPrevious();
 146          this.render();
 147          Event.stop(event);
 148          return;
 149        case Event.KEY_DOWN:
 150          this.markNext();
 151          this.render();
 152          Event.stop(event);
 153          return;
 154       }
 155      else
 156        if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
 157          (Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;
 158
 159     this.changed = true;
 160     this.hasFocus = true;
 161
 162     if(this.observer) clearTimeout(this.observer);
 163       this.observer =
 164         setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
 165   },
 166
 167   activate: function() {
 168     this.changed = false;
 169     this.hasFocus = true;
 170     this.getUpdatedChoices();
 171   },
 172
 173   onHover: function(event) {
 174     var element = Event.findElement(event, 'LI');
 175     if(this.index != element.autocompleteIndex)
 176     {
 177         this.index = element.autocompleteIndex;
 178         this.render();
 179     }
 180     Event.stop(event);
 181   },
 182
 183   onClick: function(event) {
 184     var element = Event.findElement(event, 'LI');
 185     this.index = element.autocompleteIndex;
 186     this.selectEntry();
 187     this.hide();
 188   },
 189
 190   onBlur: function(event) {
 191     // needed to make click events working
 192     setTimeout(this.hide.bind(this), 250);
 193     this.hasFocus = false;
 194     this.active = false;
 195   },
 196
 197   render: function() {
 198     if(this.entryCount > 0) {
 199       for (var i = 0; i < this.entryCount; i++)
 200         this.index==i ?
 201           Element.addClassName(this.getEntry(i),"selected") :
 202           Element.removeClassName(this.getEntry(i),"selected");
 203       if(this.hasFocus) {
 204         this.show();
 205         this.active = true;
 206       }
 207     } else {
 208       this.active = false;
 209       this.hide();
 210     }
 211   },
 212
 213   markPrevious: function() {
 214     if(this.index > 0) this.index--;
 215       else this.index = this.entryCount-1;
 216     this.getEntry(this.index).scrollIntoView(true);
 217   },
 218
 219   markNext: function() {
 220     if(this.index < this.entryCount-1) this.index++;
 221       else this.index = 0;
 222     this.getEntry(this.index).scrollIntoView(false);
 223   },
 224
 225   getEntry: function(index) {
 226     return this.update.firstChild.childNodes[index];
 227   },
 228
 229   getCurrentEntry: function() {
 230     return this.getEntry(this.index);
 231   },
 232
 233   selectEntry: function() {
 234     this.active = false;
 235     this.updateElement(this.getCurrentEntry());
 236   },
 237
 238   updateElement: function(selectedElement) {
 239     if (this.options.updateElement) {
 240       this.options.updateElement(selectedElement);
 241       return;
 242     }
 243     var value = '';
 244     if (this.options.select) {
 245       var nodes = $(selectedElement).select('.' + this.options.select) || [];
 246       if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
 247     } else
 248       value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
 249
 250     var bounds = this.getTokenBounds();
 251     if (bounds[0] != -1) {
 252       var newValue = this.element.value.substr(0, bounds[0]);
 253       var whitespace = this.element.value.substr(bounds[0]).match(/^\s+/);
 254       if (whitespace)
 255         newValue += whitespace[0];
 256       this.element.value = newValue + value + this.element.value.substr(bounds[1]);
 257     } else {
 258       this.element.value = value;
 259     }
 260     this.oldElementValue = this.element.value;
 261     this.element.focus();
 262
 263     if (this.options.afterUpdateElement)
 264       this.options.afterUpdateElement(this.element, selectedElement);
 265   },
 266
 267   updateChoices: function(choices) {
 268     if(!this.changed && this.hasFocus) {
 269       this.update.innerHTML = choices;
 270       Element.cleanWhitespace(this.update);
 271       Element.cleanWhitespace(this.update.down());
 272
 273       if(this.update.firstChild && this.update.down().childNodes) {
 274         this.entryCount =
 275           this.update.down().childNodes.length;
 276         for (var i = 0; i < this.entryCount; i++) {
 277           var entry = this.getEntry(i);
 278           entry.autocompleteIndex = i;
 279           this.addObservers(entry);
 280         }
 281       } else {
 282         this.entryCount = 0;
 283       }
 284
 285       this.stopIndicator();
 286       this.index = 0;
 287
 288       if(this.entryCount==1 && this.options.autoSelect) {
 289         this.selectEntry();
 290         this.hide();
 291       } else {
 292         this.render();
 293       }
 294     }
 295   },
 296
 297   addObservers: function(element) {
 298     Event.observe(element, "mouseover", this.onHover.bindAsEventListener(this));
 299     Event.observe(element, "click", this.onClick.bindAsEventListener(this));
 300   },
 301
 302   onObserverEvent: function() {
 303     this.changed = false;
 304     this.tokenBounds = null;
 305     if(this.getToken().length>=this.options.minChars) {
 306       this.getUpdatedChoices();
 307     } else {
 308       this.active = false;
 309       this.hide();
 310     }
 311     this.oldElementValue = this.element.value;
 312   },
 313
 314   getToken: function() {
 315     var bounds = this.getTokenBounds();
 316     return this.element.value.substring(bounds[0], bounds[1]).strip();
 317   },
 318
 319   getTokenBounds: function() {
 320     if (null != this.tokenBounds) return this.tokenBounds;
 321     var value = this.element.value;
 322     if (value.strip().empty()) return [-1, 0];
 323     var diff = arguments.callee.getFirstDifferencePos(value, this.oldElementValue);
 324     var offset = (diff == this.oldElementValue.length ? 1 : 0);
 325     var prevTokenPos = -1, nextTokenPos = value.length;
 326     var tp;
 327     for (var index = 0, l = this.options.tokens.length; index < l; ++index) {
 328       tp = value.lastIndexOf(this.options.tokens[index], diff + offset - 1);
 329       if (tp > prevTokenPos) prevTokenPos = tp;
 330       tp = value.indexOf(this.options.tokens[index], diff + offset);
 331       if (-1 != tp && tp < nextTokenPos) nextTokenPos = tp;
 332     }
 333     return (this.tokenBounds = [prevTokenPos + 1, nextTokenPos]);
 334   }
 335 });
 336
 337 Autocompleter.Base.prototype.getTokenBounds.getFirstDifferencePos = function(newS, oldS) {
 338   var boundary = Math.min(newS.length, oldS.length);
 339   for (var index = 0; index < boundary; ++index)
 340     if (newS[index] != oldS[index])
 341       return index;
 342   return boundary;
 343 };
 344
 345 Ajax.Autocompleter = Class.create(Autocompleter.Base, {
 346   initialize: function(element, update, url, options) {
 347     this.baseInitialize(element, update, options);
 348     this.options.asynchronous  = true;
 349     this.options.onComplete    = this.onComplete.bind(this);
 350     this.options.defaultParams = this.options.parameters || null;
 351     this.url                   = url;
 352   },
 353
 354   getUpdatedChoices: function() {
 355     this.startIndicator();
 356
 357     var entry = encodeURIComponent(this.options.paramName) + '=' +
 358       encodeURIComponent(this.getToken());
 359
 360     this.options.parameters = this.options.callback ?
 361       this.options.callback(this.element, entry) : entry;
 362
 363     if(this.options.defaultParams)
 364       this.options.parameters += '&' + this.options.defaultParams;
 365
 366     new Ajax.Request(this.url, this.options);
 367   },
 368
 369   onComplete: function(request) {
 370     this.updateChoices(request.responseText);
 371   }
 372 });
 373
 374 // The local array autocompleter. Used when you'd prefer to
 375 // inject an array of autocompletion options into the page, rather
 376 // than sending out Ajax queries, which can be quite slow sometimes.
 377 //
 378 // The constructor takes four parameters. The first two are, as usual,
 379 // the id of the monitored textbox, and id of the autocompletion menu.
 380 // The third is the array you want to autocomplete from, and the fourth
 381 // is the options block.
 382 //
 383 // Extra local autocompletion options:
 384 // - choices - How many autocompletion choices to offer
 385 //
 386 // - partialSearch - If false, the autocompleter will match entered
 387 //                    text only at the beginning of strings in the
 388 //                    autocomplete array. Defaults to true, which will
 389 //                    match text at the beginning of any *word* in the
 390 //                    strings in the autocomplete array. If you want to
 391 //                    search anywhere in the string, additionally set
 392 //                    the option fullSearch to true (default: off).
 393 //
 394 // - fullSsearch - Search anywhere in autocomplete array strings.
 395 //
 396 // - partialChars - How many characters to enter before triggering
 397 //                   a partial match (unlike minChars, which defines
 398 //                   how many characters are required to do any match
 399 //                   at all). Defaults to 2.
 400 //
 401 // - ignoreCase - Whether to ignore case when autocompleting.
 402 //                 Defaults to true.
 403 //
 404 // It's possible to pass in a custom function as the 'selector'
 405 // option, if you prefer to write your own autocompletion logic.
 406 // In that case, the other options above will not apply unless
 407 // you support them.
 408
 409 Autocompleter.Local = Class.create(Autocompleter.Base, {
 410   initialize: function(element, update, array, options) {
 411     this.baseInitialize(element, update, options);
 412     this.options.array = array;
 413   },
 414
 415   getUpdatedChoices: function() {
 416     this.updateChoices(this.options.selector(this));
 417   },
 418
 419   setOptions: function(options) {
 420     this.options = Object.extend({
 421       choices: 10,
 422       partialSearch: true,
 423       partialChars: 2,
 424       ignoreCase: true,
 425       fullSearch: false,
 426       selector: function(instance) {
 427         var ret       = []; // Beginning matches
 428         var partial   = []; // Inside matches
 429         var entry     = instance.getToken();
 430         var count     = 0;
 431
 432         for (var i = 0; i < instance.options.array.length &&
 433           ret.length < instance.options.choices ; i++) {
 434
 435           var elem = instance.options.array[i];
 436           var foundPos = instance.options.ignoreCase ?
 437             elem.toLowerCase().indexOf(entry.toLowerCase()) :
 438             elem.indexOf(entry);
 439
 440           while (foundPos != -1) {
 441             if (foundPos == 0 && elem.length != entry.length) {
 442               ret.push("<li><strong>" + elem.substr(0, entry.length) + "</strong>" +
 443                 elem.substr(entry.length) + "</li>");
 444               break;
 445             } else if (entry.length >= instance.options.partialChars &&
 446               instance.options.partialSearch && foundPos != -1) {
 447               if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos-1,1))) {
 448                 partial.push("<li>" + elem.substr(0, foundPos) + "<strong>" +
 449                   elem.substr(foundPos, entry.length) + "</strong>" + elem.substr(
 450                   foundPos + entry.length) + "</li>");
 451                 break;
 452               }
 453             }
 454
 455             foundPos = instance.options.ignoreCase ?
 456               elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
 457               elem.indexOf(entry, foundPos + 1);
 458
 459           }
 460         }
 461         if (partial.length)
 462           ret = ret.concat(partial.slice(0, instance.options.choices - ret.length));
 463         return "<ul>" + ret.join('') + "</ul>";
 464       }
 465     }, options || { });
 466   }
 467 });
 468
 469 // AJAX in-place editor and collection editor
 470 // Full rewrite by Christophe Porteneuve <tdd@tddsworld.com> (April 2007).
 471
 472 // Use this if you notice weird scrolling problems on some browsers,
 473 // the DOM might be a bit confused when this gets called so do this
 474 // waits 1 ms (with setTimeout) until it does the activation
 475 Field.scrollFreeActivate = function(field) {
 476   setTimeout(function() {
 477     Field.activate(field);
 478   }, 1);
 479 };
 480
 481 Ajax.InPlaceEditor = Class.create({
 482   initialize: function(element, url, options) {
 483     this.url = url;
 484     this.element = element = $(element);
 485     this.prepareOptions();
 486     this._controls = { };
 487     arguments.callee.dealWithDeprecatedOptions(options); // DEPRECATION LAYER!!!
 488     Object.extend(this.options, options || { });
 489     if (!this.options.formId && this.element.id) {
 490       this.options.formId = this.element.id + '-inplaceeditor';
 491       if ($(this.options.formId))
 492         this.options.formId = '';
 493     }
 494     if (this.options.externalControl)
 495       this.options.externalControl = $(this.options.externalControl);
 496     if (!this.options.externalControl)
 497       this.options.externalControlOnly = false;
 498     this._originalBackground = this.element.getStyle('background-color') || 'transparent';
 499     this.element.title = this.options.clickToEditText;
 500     this._boundCancelHandler = this.handleFormCancellation.bind(this);
 501     this._boundComplete = (this.options.onComplete || Prototype.emptyFunction).bind(this);
 502     this._boundFailureHandler = this.handleAJAXFailure.bind(this);
 503     this._boundSubmitHandler = this.handleFormSubmission.bind(this);
 504     this._boundWrapperHandler = this.wrapUp.bind(this);
 505     this.registerListeners();
 506   },
 507   checkForEscapeOrReturn: function(e) {
 508     if (!this._editing || e.ctrlKey || e.altKey || e.shiftKey) return;
 509     if (Event.KEY_ESC == e.keyCode)
 510       this.handleFormCancellation(e);
 511     else if (Event.KEY_RETURN == e.keyCode)
 512       this.handleFormSubmission(e);
 513   },
 514   createControl: function(mode, handler, extraClasses) {
 515     var control = this.options[mode + 'Control'];
 516     var text = this.options[mode + 'Text'];
 517     if ('button' == control) {
 518       var btn = document.createElement('input');
 519       btn.type = 'submit';
 520       btn.value = text;
 521       btn.className = 'editor_' + mode + '_button';
 522       if ('cancel' == mode)
 523         btn.onclick = this._boundCancelHandler;
 524       this._form.appendChild(btn);
 525       this._controls[mode] = btn;
 526     } else if ('link' == control) {
 527       var link = document.createElement('a');
 528       link.href = '#';
 529       link.appendChild(document.createTextNode(text));
 530       link.onclick = 'cancel' == mode ? this._boundCancelHandler : this._boundSubmitHandler;
 531       link.className = 'editor_' + mode + '_link';
 532       if (extraClasses)
 533         link.className += ' ' + extraClasses;
 534       this._form.appendChild(link);
 535       this._controls[mode] = link;
 536     }
 537   },
 538   createEditField: function() {
 539     var text = (this.options.loadTextURL ? this.options.loadingText : this.getText());
 540     var fld;
 541     if (1 >= this.options.rows && !/\r|\n/.test(this.getText())) {
 542       fld = document.createElement('input');
 543       fld.type = 'text';
 544       var size = this.options.size || this.options.cols || 0;
 545       if (0 < size) fld.size = size;
 546     } else {
 547       fld = document.createElement('textarea');
 548       fld.rows = (1 >= this.options.rows ? this.options.autoRows : this.options.rows);
 549       fld.cols = this.options.cols || 40;
 550     }
 551     fld.name = this.options.paramName;
 552     fld.value = text; // No HTML breaks conversion anymore
 553     fld.className = 'editor_field';
 554     if (this.options.submitOnBlur)
 555       fld.onblur = this._boundSubmitHandler;
 556     this._controls.editor = fld;
 557     if (this.options.loadTextURL)
 558       this.loadExternalText();
 559     this._form.appendChild(this._controls.editor);
 560   },
 561   createForm: function() {
 562     var ipe = this;
 563     function addText(mode, condition) {
 564       var text = ipe.options['text' + mode + 'Controls'];
 565       if (!text || condition === false) return;
 566       ipe._form.appendChild(document.createTextNode(text));
 567     };
 568     this._form = $(document.createElement('form'));
 569     this._form.id = this.options.formId;
 570     this._form.addClassName(this.options.formClassName);
 571     this._form.onsubmit = this._boundSubmitHandler;
 572     this.createEditField();
 573     if ('textarea' == this._controls.editor.tagName.toLowerCase())
 574       this._form.appendChild(document.createElement('br'));
 575     if (this.options.onFormCustomization)
 576       this.options.onFormCustomization(this, this._form);
 577     addText('Before', this.options.okControl || this.options.cancelControl);
 578     this.createControl('ok', this._boundSubmitHandler);
 579     addText('Between', this.options.okControl && this.options.cancelControl);
 580     this.createControl('cancel', this._boundCancelHandler, 'editor_cancel');
 581     addText('After', this.options.okControl || this.options.cancelControl);
 582   },
 583   destroy: function() {
 584     if (this._oldInnerHTML)
 585       this.element.innerHTML = this._oldInnerHTML;
 586     this.leaveEditMode();
 587     this.unregisterListeners();
 588   },
 589   enterEditMode: function(e) {
 590     if (this._saving || this._editing) return;
 591     this._editing = true;
 592     this.triggerCallback('onEnterEditMode');
 593     if (this.options.externalControl)
 594       this.options.externalControl.hide();
 595     this.element.hide();
 596     this.createForm();
 597     this.element.parentNode.insertBefore(this._form, this.element);
 598     if (!this.options.loadTextURL)
 599       this.postProcessEditField();
 600     if (e) Event.stop(e);
 601   },
 602   enterHover: function(e) {
 603     if (this.options.hoverClassName)
 604       this.element.addClassName(this.options.hoverClassName);
 605     if (this._saving) return;
 606     this.triggerCallback('onEnterHover');
 607   },
 608   getText: function() {
 609     return this.element.innerHTML.unescapeHTML();
 610   },
 611   handleAJAXFailure: function(transport) {
 612     this.triggerCallback('onFailure', transport);
 613     if (this._oldInnerHTML) {
 614       this.element.innerHTML = this._oldInnerHTML;
 615       this._oldInnerHTML = null;
 616     }
 617   },
 618   handleFormCancellation: function(e) {
 619     this.wrapUp();
 620     if (e) Event.stop(e);
 621   },
 622   handleFormSubmission: function(e) {
 623     var form = this._form;
 624     var value = $F(this._controls.editor);
 625     this.prepareSubmission();
 626     var params = this.options.callback(form, value) || '';
 627     if (Object.isString(params))
 628       params = params.toQueryParams();
 629     params.editorId = this.element.id;
 630     if (this.options.htmlResponse) {
 631       var options = Object.extend({ evalScripts: true }, this.options.ajaxOptions);
 632       Object.extend(options, {
 633         parameters: params,
 634         onComplete: this._boundWrapperHandler,
 635         onFailure: this._boundFailureHandler
 636       });
 637       new Ajax.Updater({ success: this.element }, this.url, options);
 638     } else {
 639       var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
 640       Object.extend(options, {
 641         parameters: params,
 642         onComplete: this._boundWrapperHandler,
 643         onFailure: this._boundFailureHandler
 644       });
 645       new Ajax.Request(this.url, options);
 646     }
 647     if (e) Event.stop(e);
 648   },
 649   leaveEditMode: function() {
 650     this.element.removeClassName(this.options.savingClassName);
 651     this.removeForm();
 652     this.leaveHover();
 653     this.element.style.backgroundColor = this._originalBackground;
 654     this.element.show();
 655     if (this.options.externalControl)
 656       this.options.externalControl.show();
 657     this._saving = false;
 658     this._editing = false;
 659     this._oldInnerHTML = null;
 660     this.triggerCallback('onLeaveEditMode');
 661   },
 662   leaveHover: function(e) {
 663     if (this.options.hoverClassName)
 664       this.element.removeClassName(this.options.hoverClassName);
 665     if (this._saving) return;
 666     this.triggerCallback('onLeaveHover');
 667   },
 668   loadExternalText: function() {
 669     this._form.addClassName(this.options.loadingClassName);
 670     this._controls.editor.disabled = true;
 671     var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
 672     Object.extend(options, {
 673       parameters: 'editorId=' + encodeURIComponent(this.element.id),
 674       onComplete: Prototype.emptyFunction,
 675       onSuccess: function(transport) {
 676         this._form.removeClassName(this.options.loadingClassName);
 677         var text = transport.responseText;
 678         if (this.options.stripLoadedTextTags)
 679           text = text.stripTags();
 680         this._controls.editor.value = text;
 681         this._controls.editor.disabled = false;
 682         this.postProcessEditField();
 683       }.bind(this),
 684       onFailure: this._boundFailureHandler
 685     });
 686     new Ajax.Request(this.options.loadTextURL, options);
 687   },
 688   postProcessEditField: function() {
 689     var fpc = this.options.fieldPostCreation;
 690     if (fpc)
 691       $(this._controls.editor)['focus' == fpc ? 'focus' : 'activate']();
 692   },
 693   prepareOptions: function() {
 694     this.options = Object.clone(Ajax.InPlaceEditor.DefaultOptions);
 695     Object.extend(this.options, Ajax.InPlaceEditor.DefaultCallbacks);
 696     [this._extraDefaultOptions].flatten().compact().each(function(defs) {
 697       Object.extend(this.options, defs);
 698     }.bind(this));
 699   },
 700   prepareSubmission: function() {
 701     this._saving = true;
 702     this.removeForm();
 703     this.leaveHover();
 704     this.showSaving();
 705   },
 706   registerListeners: function() {
 707     this._listeners = { };
 708     var listener;
 709     $H(Ajax.InPlaceEditor.Listeners).each(function(pair) {
 710       listener = this[pair.value].bind(this);
 711       this._listeners[pair.key] = listener;
 712       if (!this.options.externalControlOnly)
 713         this.element.observe(pair.key, listener);
 714       if (this.options.externalControl)
 715         this.options.externalControl.observe(pair.key, listener);
 716     }.bind(this));
 717   },
 718   removeForm: function() {
 719     if (!this._form) return;
 720     this._form.remove();
 721     this._form = null;
 722     this._controls = { };
 723   },
 724   showSaving: function() {
 725     this._oldInnerHTML = this.element.innerHTML;
 726     this.element.innerHTML = this.options.savingText;
 727     this.element.addClassName(this.options.savingClassName);
 728     this.element.style.backgroundColor = this._originalBackground;
 729     this.element.show();
 730   },
 731   triggerCallback: function(cbName, arg) {
 732     if ('function' == typeof this.options[cbName]) {
 733       this.options[cbName](this, arg);
 734     }
 735   },
 736   unregisterListeners: function() {
 737     $H(this._listeners).each(function(pair) {
 738       if (!this.options.externalControlOnly)
 739         this.element.stopObserving(pair.key, pair.value);
 740       if (this.options.externalControl)
 741         this.options.externalControl.stopObserving(pair.key, pair.value);
 742     }.bind(this));
 743   },
 744   wrapUp: function(transport) {
 745     this.leaveEditMode();
 746     // Can't use triggerCallback due to backward compatibility: requires
 747     // binding + direct element
 748     this._boundComplete(transport, this.element);
 749   }
 750 });
 751
 752 Object.extend(Ajax.InPlaceEditor.prototype, {
 753   dispose: Ajax.InPlaceEditor.prototype.destroy
 754 });
 755
 756 Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
 757   initialize: function($super, element, url, options) {
 758     this._extraDefaultOptions = Ajax.InPlaceCollectionEditor.DefaultOptions;
 759     $super(element, url, options);
 760   },
 761
 762   createEditField: function() {
 763     var list = document.createElement('select');
 764     list.name = this.options.paramName;
 765     list.size = 1;
 766     this._controls.editor = list;
 767     this._collection = this.options.collection || [];
 768     if (this.options.loadCollectionURL)
 769       this.loadCollection();
 770     else
 771       this.checkForExternalText();
 772     this._form.appendChild(this._controls.editor);
 773   },
 774
 775   loadCollection: function() {
 776     this._form.addClassName(this.options.loadingClassName);
 777     this.showLoadingText(this.options.loadingCollectionText);
 778     var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
 779     Object.extend(options, {
 780       parameters: 'editorId=' + encodeURIComponent(this.element.id),
 781       onComplete: Prototype.emptyFunction,
 782       onSuccess: function(transport) {
 783         var js = transport.responseText.strip();
 784         if (!/^\[.*\]$/.test(js)) // TODO: improve sanity check
 785           throw('Server returned an invalid collection representation.');
 786         this._collection = eval(js);
 787         this.checkForExternalText();
 788       }.bind(this),
 789       onFailure: this.onFailure
 790     });
 791     new Ajax.Request(this.options.loadCollectionURL, options);
 792   },
 793
 794   showLoadingText: function(text) {
 795     this._controls.editor.disabled = true;
 796     var tempOption = this._controls.editor.firstChild;
 797     if (!tempOption) {
 798       tempOption = document.createElement('option');
 799       tempOption.value = '';
 800       this._controls.editor.appendChild(tempOption);
 801       tempOption.selected = true;
 802     }
 803     tempOption.update((text || '').stripScripts().stripTags());
 804   },
 805
 806   checkForExternalText: function() {
 807     this._text = this.getText();
 808     if (this.options.loadTextURL)
 809       this.loadExternalText();
 810     else
 811       this.buildOptionList();
 812   },
 813
 814   loadExternalText: function() {
 815     this.showLoadingText(this.options.loadingText);
 816     var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
 817     Object.extend(options, {
 818       parameters: 'editorId=' + encodeURIComponent(this.element.id),
 819       onComplete: Prototype.emptyFunction,
 820       onSuccess: function(transport) {
 821         this._text = transport.responseText.strip();
 822         this.buildOptionList();
 823       }.bind(this),
 824       onFailure: this.onFailure
 825     });
 826     new Ajax.Request(this.options.loadTextURL, options);
 827   },
 828
 829   buildOptionList: function() {
 830     this._form.removeClassName(this.options.loadingClassName);
 831     this._collection = this._collection.map(function(entry) {
 832       return 2 === entry.length ? entry : [entry, entry].flatten();
 833     });
 834     var marker = ('value' in this.options) ? this.options.value : this._text;
 835     var textFound = this._collection.any(function(entry) {
 836       return entry[0] == marker;
 837     }.bind(this));
 838     this._controls.editor.update('');
 839     var option;
 840     this._collection.each(function(entry, index) {
 841       option = document.createElement('option');
 842       option.value = entry[0];
 843       option.selected = textFound ? entry[0] == marker : 0 == index;
 844       option.appendChild(document.createTextNode(entry[1]));
 845       this._controls.editor.appendChild(option);
 846     }.bind(this));
 847     this._controls.editor.disabled = false;
 848     Field.scrollFreeActivate(this._controls.editor);
 849   }
 850 });
 851
 852 //**** DEPRECATION LAYER FOR InPlace[Collection]Editor! ****
 853 //**** This only  exists for a while,  in order to  let ****
 854 //**** users adapt to  the new API.  Read up on the new ****
 855 //**** API and convert your code to it ASAP!            ****
 856
 857 Ajax.InPlaceEditor.prototype.initialize.dealWithDeprecatedOptions = function(options) {
 858   if (!options) return;
 859   function fallback(name, expr) {
 860     if (name in options || expr === undefined) return;
 861     options[name] = expr;
 862   };
 863   fallback('cancelControl', (options.cancelLink ? 'link' : (options.cancelButton ? 'button' :
 864     options.cancelLink == options.cancelButton == false ? false : undefined)));
 865   fallback('okControl', (options.okLink ? 'link' : (options.okButton ? 'button' :
 866     options.okLink == options.okButton == false ? false : undefined)));
 867   fallback('highlightColor', options.highlightcolor);
 868   fallback('highlightEndColor', options.highlightendcolor);
 869 };
 870
 871 Object.extend(Ajax.InPlaceEditor, {
 872   DefaultOptions: {
 873     ajaxOptions: { },
 874     autoRows: 3,                                // Use when multi-line w/ rows == 1
 875     cancelControl: 'link',                      // 'link'|'button'|false
 876     cancelText: 'cancel',
 877     clickToEditText: 'Click to edit',
 878     externalControl: null,                      // id|elt
 879     externalControlOnly: false,
 880     fieldPostCreation: 'activate',              // 'activate'|'focus'|false
 881     formClassName: 'inplaceeditor-form',
 882     formId: null,                               // id|elt
 883     highlightColor: '#ffff99',
 884     highlightEndColor: '#ffffff',
 885     hoverClassName: '',
 886     htmlResponse: true,
 887     loadingClassName: 'inplaceeditor-loading',
 888     loadingText: 'Loading...',
 889     okControl: 'button',                        // 'link'|'button'|false
 890     okText: 'ok',
 891     paramName: 'value',
 892     rows: 1,                                    // If 1 and multi-line, uses autoRows
 893     savingClassName: 'inplaceeditor-saving',
 894     savingText: 'Saving...',
 895     size: 0,
 896     stripLoadedTextTags: false,
 897     submitOnBlur: false,
 898     textAfterControls: '',
 899     textBeforeControls: '',
 900     textBetweenControls: ''
 901   },
 902   DefaultCallbacks: {
 903     callback: function(form) {
 904       return Form.serialize(form);
 905     },
 906     onComplete: function(transport, element) {
 907       // For backward compatibility, this one is bound to the IPE, and passes
 908       // the element directly.  It was too often customized, so we don't break it.
 909       new Effect.Highlight(element, {
 910         startcolor: this.options.highlightColor, keepBackgroundImage: true });
 911     },
 912     onEnterEditMode: null,
 913     onEnterHover: function(ipe) {
 914       ipe.element.style.backgroundColor = ipe.options.highlightColor;
 915       if (ipe._effect)
 916         ipe._effect.cancel();
 917     },
 918     onFailure: function(transport, ipe) {
 919       alert('Error communication with the server: ' + transport.responseText.stripTags());
 920     },
 921     onFormCustomization: null, // Takes the IPE and its generated form, after editor, before controls.
 922     onLeaveEditMode: null,
 923     onLeaveHover: function(ipe) {
 924       ipe._effect = new Effect.Highlight(ipe.element, {
 925         startcolor: ipe.options.highlightColor, endcolor: ipe.options.highlightEndColor,
 926         restorecolor: ipe._originalBackground, keepBackgroundImage: true
 927       });
 928     }
 929   },
 930   Listeners: {
 931     click: 'enterEditMode',
 932     keydown: 'checkForEscapeOrReturn',
 933     mouseover: 'enterHover',
 934     mouseout: 'leaveHover'
 935   }
 936 });
 937
 938 Ajax.InPlaceCollectionEditor.DefaultOptions = {
 939   loadingCollectionText: 'Loading options...'
 940 };
 941
 942 // Delayed observer, like Form.Element.Observer,
 943 // but waits for delay after last key input
 944 // Ideal for live-search fields
 945
 946 Form.Element.DelayedObserver = Class.create({
 947   initialize: function(element, delay, callback) {
 948     this.delay     = delay || 0.5;
 949     this.element   = $(element);
 950     this.callback  = callback;
 951     this.timer     = null;
 952     this.lastValue = $F(this.element);
 953     Event.observe(this.element,'keyup',this.delayedListener.bindAsEventListener(this));
 954   },
 955   delayedListener: function(event) {
 956     if(this.lastValue == $F(this.element)) return;
 957     if(this.timer) clearTimeout(this.timer);
 958     this.timer = setTimeout(this.onTimerEvent.bind(this), this.delay * 1000);
 959     this.lastValue = $F(this.element);
 960   },
 961   onTimerEvent: function() {
 962     this.timer = null;
 963     this.callback(this.element, $F(this.element));
 964   }
 965 });