webcit/static/controls.js

   1 // Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
   2 //           (c) 2005 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
   3 //           (c) 2005 Jon Tirsen (http://www.tirsen.com)
   4 // Contributors:
   5 //  Richard Livsey
   6 //  Rahul Bhargava
   7 //
   8 // Permission is hereby granted, free of charge, to any person obtaining
   9 // a copy of this software and associated documentation files (the
  10 // "Software"), to deal in the Software without restriction, including
  11 // without limitation the rights to use, copy, modify, merge, publish,
  12 // distribute, sublicense, and/or sell copies of the Software, and to
  13 // permit persons to whom the Software is furnished to do so, subject to
  14 // the following conditions:
  15 //
  16 // The above copyright notice and this permission notice shall be
  17 // included in all copies or substantial portions of the Software.
  18 //
  19 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  20 // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  21 // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  22 // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  23 // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  24 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  25 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  26
  27 // Autocompleter.Base handles all the autocompletion functionality
  28 // that's independent of the data source for autocompletion. This
  29 // includes drawing the autocompletion menu, observing keyboard
  30 // and mouse events, and similar.
  31 //
  32 // Specific autocompleters need to provide, at the very least,
  33 // a getUpdatedChoices function that will be invoked every time
  34 // the text inside the monitored textbox changes. This method
  35 // should get the text for which to provide autocompletion by
  36 // invoking this.getToken(), NOT by directly accessing
  37 // this.element.value. This is to allow incremental tokenized
  38 // autocompletion. Specific auto-completion logic (AJAX, etc)
  39 // belongs in getUpdatedChoices.
  40 //
  41 // Tokenized incremental autocompletion is enabled automatically
  42 // when an autocompleter is instantiated with the 'tokens' option
  43 // in the options parameter, e.g.:
  44 // new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });
  45 // will incrementally autocomplete with a comma as the token.
  46 // Additionally, ',' in the above example can be replaced with
  47 // a token array, e.g. { tokens: [',', '\n'] } which
  48 // enables autocompletion on multiple tokens. This is most
  49 // useful when one of the tokens is \n (a newline), as it
  50 // allows smart autocompletion after linebreaks.
  51
  52 var Autocompleter = {}
  53 Autocompleter.Base = function() {};
  54 Autocompleter.Base.prototype = {
  55   baseInitialize: function(element, update, options) {
  56     this.element     = $(element);
  57     this.update      = $(update);
  58     this.hasFocus    = false;
  59     this.changed     = false;
  60     this.active      = false;
  61     this.index       = 0;
  62     this.entryCount  = 0;
  63
  64     if (this.setOptions)
  65       this.setOptions(options);
  66     else
  67       this.options = options || {};
  68
  69     this.options.paramName    = this.options.paramName || this.element.name;
  70     this.options.tokens       = this.options.tokens || [];
  71     this.options.frequency    = this.options.frequency || 0.4;
  72     this.options.minChars     = this.options.minChars || 1;
  73     this.options.onShow       = this.options.onShow ||
  74     function(element, update){
  75       if(!update.style.position || update.style.position=='absolute') {
  76         update.style.position = 'absolute';
  77         Position.clone(element, update, {setHeight: false, offsetTop: element.offsetHeight});
  78       }
  79       new Effect.Appear(update,{duration:0.15});
  80     };
  81     this.options.onHide = this.options.onHide ||
  82     function(element, update){ new Effect.Fade(update,{duration:0.15}) };
  83
  84     if (typeof(this.options.tokens) == 'string')
  85       this.options.tokens = new Array(this.options.tokens);
  86
  87     this.observer = null;
  88
  89     this.element.setAttribute('autocomplete','off');
  90
  91     Element.hide(this.update);
  92
  93     Event.observe(this.element, "blur", this.onBlur.bindAsEventListener(this));
  94     Event.observe(this.element, "keypress", this.onKeyPress.bindAsEventListener(this));
  95   },
  96
  97   show: function() {
  98     if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
  99     if(!this.iefix && (navigator.appVersion.indexOf('MSIE')>0) && (Element.getStyle(this.update, 'position')=='absolute')) {
 100       new Insertion.After(this.update,
 101        '<iframe id="' + this.update.id + '_iefix" '+
 102        'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
 103        'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
 104       this.iefix = $(this.update.id+'_iefix');
 105     }
 106     if(this.iefix) {
 107       Position.clone(this.update, this.iefix);
 108       this.iefix.style.zIndex = 1;
 109       this.update.style.zIndex = 2;
 110       Element.show(this.iefix);
 111     }
 112   },
 113
 114   hide: function() {
 115     if(Element.getStyle(this.update, 'display')!='none') this.options.onHide(this.element, this.update);
 116     if(this.iefix) Element.hide(this.iefix);
 117   },
 118
 119   startIndicator: function() {
 120     if(this.options.indicator) Element.show(this.options.indicator);
 121   },
 122
 123   stopIndicator: function() {
 124     if(this.options.indicator) Element.hide(this.options.indicator);
 125   },
 126
 127   onKeyPress: function(event) {
 128     if(this.active)
 129       switch(event.keyCode) {
 130        case Event.KEY_TAB:
 131        case Event.KEY_RETURN:
 132          this.selectEntry();
 133          Event.stop(event);
 134        case Event.KEY_ESC:
 135          this.hide();
 136          this.active = false;
 137          Event.stop(event);
 138          return;
 139        case Event.KEY_LEFT:
 140        case Event.KEY_RIGHT:
 141          return;
 142        case Event.KEY_UP:
 143          this.markPrevious();
 144          this.render();
 145          if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);
 146          return;
 147        case Event.KEY_DOWN:
 148          this.markNext();
 149          this.render();
 150          if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);
 151          return;
 152       }
 153      else
 154       if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN)
 155         return;
 156
 157     this.changed = true;
 158     this.hasFocus = true;
 159
 160     if(this.observer) clearTimeout(this.observer);
 161       this.observer =
 162         setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
 163   },
 164
 165   onHover: function(event) {
 166     var element = Event.findElement(event, 'LI');
 167     if(this.index != element.autocompleteIndex)
 168     {
 169         this.index = element.autocompleteIndex;
 170         this.render();
 171     }
 172     Event.stop(event);
 173   },
 174
 175   onClick: function(event) {
 176     var element = Event.findElement(event, 'LI');
 177     this.index = element.autocompleteIndex;
 178     this.selectEntry();
 179     this.hide();
 180   },
 181
 182   onBlur: function(event) {
 183     // needed to make click events working
 184     setTimeout(this.hide.bind(this), 250);
 185     this.hasFocus = false;
 186     this.active = false;
 187   },
 188
 189   render: function() {
 190     if(this.entryCount > 0) {
 191       for (var i = 0; i < this.entryCount; i++)
 192         this.index==i ?
 193           Element.addClassName(this.getEntry(i),"selected") :
 194           Element.removeClassName(this.getEntry(i),"selected");
 195
 196       if(this.hasFocus) {
 197         this.show();
 198         this.active = true;
 199       }
 200     } else this.hide();
 201   },
 202
 203   markPrevious: function() {
 204     if(this.index > 0) this.index--
 205       else this.index = this.entryCcount-1;
 206   },
 207
 208   markNext: function() {
 209     if(this.index < this.entryCount-1) this.index++
 210       else this.index = 0;
 211   },
 212
 213   getEntry: function(index) {
 214     return this.update.firstChild.childNodes[index];
 215   },
 216
 217   getCurrentEntry: function() {
 218     return this.getEntry(this.index);
 219   },
 220
 221   selectEntry: function() {
 222     this.active = false;
 223     this.updateElement(this.getCurrentEntry());
 224   },
 225
 226   updateElement: function(selectedElement) {
 227     if (this.options.updateElement) {
 228       this.options.updateElement(selectedElement);
 229       return;
 230     }
 231
 232     var value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
 233     var lastTokenPos = this.findLastToken();
 234     if (lastTokenPos != -1) {
 235       var newValue = this.element.value.substr(0, lastTokenPos + 1);
 236       var whitespace = this.element.value.substr(lastTokenPos + 1).match(/^\s+/);
 237       if (whitespace)
 238         newValue += whitespace[0];
 239       this.element.value = newValue + value;
 240     } else {
 241       this.element.value = value;
 242     }
 243     this.element.focus();
 244   },
 245
 246   updateChoices: function(choices) {
 247     if(!this.changed && this.hasFocus) {
 248       this.update.innerHTML = choices;
 249       Element.cleanWhitespace(this.update);
 250       Element.cleanWhitespace(this.update.firstChild);
 251
 252       if(this.update.firstChild && this.update.firstChild.childNodes) {
 253         this.entryCount =
 254           this.update.firstChild.childNodes.length;
 255         for (var i = 0; i < this.entryCount; i++) {
 256           var entry = this.getEntry(i);
 257           entry.autocompleteIndex = i;
 258           this.addObservers(entry);
 259         }
 260       } else {
 261         this.entryCount = 0;
 262       }
 263
 264       this.stopIndicator();
 265
 266       this.index = 0;
 267       this.render();
 268     }
 269   },
 270
 271   addObservers: function(element) {
 272     Event.observe(element, "mouseover", this.onHover.bindAsEventListener(this));
 273     Event.observe(element, "click", this.onClick.bindAsEventListener(this));
 274   },
 275
 276   onObserverEvent: function() {
 277     this.changed = false;
 278     if(this.getToken().length>=this.options.minChars) {
 279       this.startIndicator();
 280       this.getUpdatedChoices();
 281     } else {
 282       this.active = false;
 283       this.hide();
 284     }
 285   },
 286
 287   getToken: function() {
 288     var tokenPos = this.findLastToken();
 289     if (tokenPos != -1)
 290       var ret = this.element.value.substr(tokenPos + 1).replace(/^\s+/,'').replace(/\s+$/,'');
 291     else
 292       var ret = this.element.value;
 293
 294     return /\n/.test(ret) ? '' : ret;
 295   },
 296
 297   findLastToken: function() {
 298     var lastTokenPos = -1;
 299
 300     for (var i=0; i<this.options.tokens.length; i++) {
 301       var thisTokenPos = this.element.value.lastIndexOf(this.options.tokens[i]);
 302       if (thisTokenPos > lastTokenPos)
 303         lastTokenPos = thisTokenPos;
 304     }
 305     return lastTokenPos;
 306   }
 307 }
 308
 309 Ajax.Autocompleter = Class.create();
 310 Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype), {
 311   initialize: function(element, update, url, options) {
 312           this.baseInitialize(element, update, options);
 313     this.options.asynchronous  = true;
 314     this.options.onComplete    = this.onComplete.bind(this);
 315     this.options.defaultParams = this.options.parameters || null;
 316     this.url                   = url;
 317   },
 318
 319   getUpdatedChoices: function() {
 320     entry = encodeURIComponent(this.options.paramName) + '=' +
 321       encodeURIComponent(this.getToken());
 322
 323     this.options.parameters = this.options.callback ?
 324       this.options.callback(this.element, entry) : entry;
 325
 326     if(this.options.defaultParams)
 327       this.options.parameters += '&' + this.options.defaultParams;
 328
 329     new Ajax.Request(this.url, this.options);
 330   },
 331
 332   onComplete: function(request) {
 333     this.updateChoices(request.responseText);
 334   }
 335
 336 });
 337
 338 // The local array autocompleter. Used when you'd prefer to
 339 // inject an array of autocompletion options into the page, rather
 340 // than sending out Ajax queries, which can be quite slow sometimes.
 341 //
 342 // The constructor takes four parameters. The first two are, as usual,
 343 // the id of the monitored textbox, and id of the autocompletion menu.
 344 // The third is the array you want to autocomplete from, and the fourth
 345 // is the options block.
 346 //
 347 // Extra local autocompletion options:
 348 // - choices - How many autocompletion choices to offer
 349 //
 350 // - partialSearch - If false, the autocompleter will match entered
 351 //                    text only at the beginning of strings in the
 352 //                    autocomplete array. Defaults to true, which will
 353 //                    match text at the beginning of any *word* in the
 354 //                    strings in the autocomplete array. If you want to
 355 //                    search anywhere in the string, additionally set
 356 //                    the option fullSearch to true (default: off).
 357 //
 358 // - fullSsearch - Search anywhere in autocomplete array strings.
 359 //
 360 // - partialChars - How many characters to enter before triggering
 361 //                   a partial match (unlike minChars, which defines
 362 //                   how many characters are required to do any match
 363 //                   at all). Defaults to 2.
 364 //
 365 // - ignoreCase - Whether to ignore case when autocompleting.
 366 //                 Defaults to true.
 367 //
 368 // It's possible to pass in a custom function as the 'selector'
 369 // option, if you prefer to write your own autocompletion logic.
 370 // In that case, the other options above will not apply unless
 371 // you support them.
 372
 373 Autocompleter.Local = Class.create();
 374 Autocompleter.Local.prototype = Object.extend(new Autocompleter.Base(), {
 375   initialize: function(element, update, array, options) {
 376     this.baseInitialize(element, update, options);
 377     this.options.array = array;
 378   },
 379
 380   getUpdatedChoices: function() {
 381     this.updateChoices(this.options.selector(this));
 382   },
 383
 384   setOptions: function(options) {
 385     this.options = Object.extend({
 386       choices: 10,
 387       partialSearch: true,
 388       partialChars: 2,
 389       ignoreCase: true,
 390       fullSearch: false,
 391       selector: function(instance) {
 392         var ret       = []; // Beginning matches
 393         var partial   = []; // Inside matches
 394         var entry     = instance.getToken();
 395         var count     = 0;
 396
 397         for (var i = 0; i < instance.options.array.length &&
 398           ret.length < instance.options.choices ; i++) {
 399
 400           var elem = instance.options.array[i];
 401           var foundPos = instance.options.ignoreCase ?
 402             elem.toLowerCase().indexOf(entry.toLowerCase()) :
 403             elem.indexOf(entry);
 404
 405           while (foundPos != -1) {
 406             if (foundPos == 0 && elem.length != entry.length) {
 407               ret.push("<li><strong>" + elem.substr(0, entry.length) + "</strong>" +
 408                 elem.substr(entry.length) + "</li>");
 409               break;
 410             } else if (entry.length >= instance.options.partialChars &&
 411               instance.options.partialSearch && foundPos != -1) {
 412               if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos-1,1))) {
 413                 partial.push("<li>" + elem.substr(0, foundPos) + "<strong>" +
 414                   elem.substr(foundPos, entry.length) + "</strong>" + elem.substr(
 415                   foundPos + entry.length) + "</li>");
 416                 break;
 417               }
 418             }
 419
 420             foundPos = instance.options.ignoreCase ?
 421               elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
 422               elem.indexOf(entry, foundPos + 1);
 423
 424           }
 425         }
 426         if (partial.length)
 427           ret = ret.concat(partial.slice(0, instance.options.choices - ret.length))
 428         return "<ul>" + ret.join('') + "</ul>";
 429       }
 430     }, options || {});
 431   }
 432 });
 433
 434 // AJAX in-place editor
 435 //
 436 // The constructor takes three parameters. The first is the element
 437 // that should support in-place editing. The second is the url to submit
 438 // the changed value to. The server should respond with the updated
 439 // value (the server might have post-processed it or validation might
 440 // have prevented it from changing). The third is a hash of options.
 441 //
 442 // Supported options are (all are optional and have sensible defaults):
 443 // - okText - The text of the submit button that submits the changed value
 444 //            to the server (default: "ok")
 445 // - cancelText - The text of the link that cancels editing (default: "cancel")
 446 // - savingText - The text being displayed as the AJAX engine communicates
 447 //                with the server (default: "Saving...")
 448 // - formId - The id given to the <form> element
 449 //            (default: the id of the element to edit plus '-inplaceeditor')
 450
 451 Ajax.InPlaceEditor = Class.create();
 452 Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";
 453 Ajax.InPlaceEditor.prototype = {
 454   initialize: function(element, url, options) {
 455     this.url = url;
 456     this.element = $(element);
 457
 458     this.options = Object.extend({
 459       delText: "delete",
 460       deleteingText: "Deleteing",
 461       okText: "ok",
 462       cancelText: "cancel",
 463       savingText: "Saving...",
 464       clickToEditText: "Click to edit",
 465       okText: "ok",
 466       rows: 1,
 467       onComplete: function(transport, element) {
 468         new Effect.Highlight(element, {startcolor: this.options.highlightcolor});
 469       },
 470       onFailure: function(transport) {
 471         alert("Error communicating with the server: " + transport.responseText.stripTags());
 472       },
 473       callback: function(form) {
 474         return Form.serialize(form);
 475       },
 476       loadingText: 'Loading...',
 477       savingClassName: 'inplaceeditor-saving',
 478       formClassName: 'inplaceeditor-form',
 479       highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
 480       highlightendcolor: "#FFFFFF",
 481       externalControl:  null,
 482       ajaxOptions: {}
 483     }, options || {});
 484
 485     if(!this.options.formId && this.element.id) {
 486       this.options.formId = this.element.id + "-inplaceeditor";
 487       if ($(this.options.formId)) {
 488         // there's already a form with that name, don't specify an id
 489         this.options.formId = null;
 490       }
 491     }
 492
 493     if (this.options.externalControl) {
 494       this.options.externalControl = $(this.options.externalControl);
 495     }
 496
 497     this.originalBackground = Element.getStyle(this.element, 'background-color');
 498     if (!this.originalBackground) {
 499       this.originalBackground = "transparent";
 500     }
 501
 502     this.element.title = this.options.clickToEditText;
 503
 504     this.onclickListener = this.enterEditMode.bindAsEventListener(this);
 505     this.mouseoverListener = this.enterHover.bindAsEventListener(this);
 506     this.mouseoutListener = this.leaveHover.bindAsEventListener(this);
 507     Event.observe(this.element, 'click', this.onclickListener);
 508     Event.observe(this.element, 'mouseover', this.mouseoverListener);
 509     Event.observe(this.element, 'mouseout', this.mouseoutListener);
 510     if (this.options.externalControl) {
 511       Event.observe(this.options.externalControl, 'click', this.onclickListener);
 512       Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
 513       Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
 514     }
 515   },
 516   enterEditMode: function() {
 517     if (this.saving) return;
 518     if (this.editing) return;
 519     this.editing = true;
 520     this.onEnterEditMode();
 521     if (this.options.externalControl) {
 522       Element.hide(this.options.externalControl);
 523     }
 524     Element.hide(this.element);
 525     this.form = this.getForm();
 526     this.element.parentNode.insertBefore(this.form, this.element);
 527   },
 528   getForm: function() {
 529     form = document.createElement("form");
 530     form.id = this.options.formId;
 531     Element.addClassName(form, this.options.formClassName)
 532     form.onsubmit = this.onSubmit.bind(this);
 533
 534     this.createEditField(form);
 535
 536     if (this.options.textarea) {
 537       var br = document.createElement("br");
 538       form.appendChild(br);
 539     }
 540
 541     okButton = document.createElement("input");
 542     okButton.type = "submit";
 543     okButton.value = this.options.okText;
 544     form.appendChild(okButton);
 545
 546     delButton = document.createElement("input");
 547     delButton.type = "submit";
 548     delButton.value = this.options.delText;
 549     form.appendChild(delButton);
 550
 551     cancelLink = document.createElement("a");
 552     cancelLink.href = "#";
 553     cancelLink.appendChild(document.createTextNode(this.options.cancelText));
 554     cancelLink.onclick = this.onclickCancel.bind(this);
 555     form.appendChild(cancelLink);
 556     return form;
 557   },
 558   createEditField: function(form) {
 559     if (this.options.rows == 1) {
 560       this.options.textarea = false;
 561       var textField = document.createElement("input");
 562       textField.type = "text";
 563       textField.name = "value";
 564       textField.value = this.getText();
 565       textField.style.backgroundColor = this.options.highlightcolor;
 566       var size = this.options.size || this.options.cols || 0;
 567       if (size != 0)
 568         textField.size = size;
 569       form.appendChild(textField);
 570       this.editField = textField;
 571     } else {
 572       this.options.textarea = true;
 573       var textArea = document.createElement("textarea");
 574       textArea.name = "value";
 575       textArea.value = this.getText();
 576       textArea.rows = this.options.rows;
 577       textArea.cols = this.options.cols || 40;
 578       form.appendChild(textArea);
 579       this.editField = textArea;
 580     }
 581   },
 582   getText: function() {
 583     if (this.options.loadTextURL) {
 584       this.loadExternalText();
 585       return this.options.loadingText;
 586     } else {
 587       return this.element.innerHTML;
 588     }
 589   },
 590   loadExternalText: function() {
 591     new Ajax.Request(
 592       this.options.loadTextURL,
 593       {
 594         asynchronous: true,
 595         onComplete: this.onLoadedExternalText.bind(this)
 596       }
 597     );
 598   },
 599   onLoadedExternalText: function(transport) {
 600     this.form.value.value = transport.responseText.stripTags();
 601   },
 602   onclickCancel: function() {
 603     this.onComplete();
 604     this.leaveEditMode();
 605     return false;
 606   },
 607   onFailure: function(transport) {
 608     this.options.onFailure(transport);
 609     if (this.oldInnerHTML) {
 610       this.element.innerHTML = this.oldInnerHTML;
 611       this.oldInnerHTML = null;
 612     }
 613     return false;
 614   },
 615   onSubmit: function() {
 616     this.saving = true;
 617     new Ajax.Updater(
 618       {
 619         success: this.element,
 620          // don't update on failure (this could be an option)
 621         failure: null
 622       },
 623       this.url,
 624       Object.extend({
 625         parameters: this.options.callback(this.form, this.editField.value),
 626         onComplete: this.onComplete.bind(this),
 627         onFailure: this.onFailure.bind(this)
 628       }, this.options.ajaxOptions)
 629     );
 630     this.onLoading();
 631     return false;
 632   },
 633   onLoading: function() {
 634     this.saving = true;
 635     this.removeForm();
 636     this.leaveHover();
 637     this.showSaving();
 638   },
 639   showSaving: function() {
 640     this.oldInnerHTML = this.element.innerHTML;
 641     this.element.innerHTML = this.options.savingText;
 642     Element.addClassName(this.element, this.options.savingClassName);
 643     this.element.style.backgroundColor = this.originalBackground;
 644     Element.show(this.element);
 645   },
 646   removeForm: function() {
 647     if(this.form) {
 648       Element.remove(this.form);
 649       this.form = null;
 650     }
 651   },
 652   enterHover: function() {
 653     if (this.saving) return;
 654     this.element.style.backgroundColor = this.options.highlightcolor;
 655     if (this.effect) {
 656       this.effect.cancel();
 657     }
 658     Element.addClassName(this.element, this.options.hoverClassName)
 659   },
 660   leaveHover: function() {
 661     if (this.options.backgroundColor) {
 662       this.element.style.backgroundColor = this.oldBackground;
 663     }
 664     Element.removeClassName(this.element, this.options.hoverClassName)
 665     if (this.saving) return;
 666     this.effect = new Effect.Highlight(this.element, {
 667       startcolor: this.options.highlightcolor,
 668       endcolor: this.options.highlightendcolor,
 669       restorecolor: this.originalBackground
 670     });
 671   },
 672   leaveEditMode: function() {
 673     Element.removeClassName(this.element, this.options.savingClassName);
 674     this.removeForm();
 675     this.leaveHover();
 676     this.element.style.backgroundColor = this.originalBackground;
 677     Element.show(this.element);
 678     if (this.options.externalControl) {
 679       Element.show(this.options.externalControl);
 680     }
 681     this.editing = false;
 682     this.saving = false;
 683     this.oldInnerHTML = null;
 684     this.onLeaveEditMode();
 685   },
 686   onComplete: function(transport) {
 687     this.leaveEditMode();
 688     this.options.onComplete.bind(this)(transport, this.element);
 689   },
 690   onEnterEditMode: function() {},
 691   onLeaveEditMode: function() {},
 692   dispose: function() {
 693     if (this.oldInnerHTML) {
 694       this.element.innerHTML = this.oldInnerHTML;
 695     }
 696     this.leaveEditMode();
 697     Event.stopObserving(this.element, 'click', this.onclickListener);
 698     Event.stopObserving(this.element, 'mouseover', this.mouseoverListener);
 699     Event.stopObserving(this.element, 'mouseout', this.mouseoutListener);
 700     if (this.options.externalControl) {
 701       Event.stopObserving(this.options.externalControl, 'click', this.onclickListener);
 702       Event.stopObserving(this.options.externalControl, 'mouseover', this.mouseoverListener);
 703       Event.stopObserving(this.options.externalControl, 'mouseout', this.mouseoutListener);
 704     }
 705   }
 706 };