1 // script.aculo.us controls.js v1.6.4, Wed Sep 06 11:30:58 CEST 2006

     2 

     3 // Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)

     4 //           (c) 2005 Ivan Krstic (http://blogs.law.harvard.edu/ivan)

     5 //           (c) 2005 Jon Tirsen (http://www.tirsen.com)

     6 // Contributors:

     7 //  Richard Livsey

     8 //  Rahul Bhargava

     9 //  Rob Wills

    10 // 

    11 // See scriptaculous.js for full license.

    12 

    13 // Autocompleter.Base handles all the autocompletion functionality 

    14 // that's independent of the data source for autocompletion. This

    15 // includes drawing the autocompletion menu, observing keyboard

    16 // and mouse events, and similar.

    17 //

    18 // Specific autocompleters need to provide, at the very least, 

    19 // a getUpdatedChoices function that will be invoked every time

    20 // the text inside the monitored textbox changes. This method 

    21 // should get the text for which to provide autocompletion by

    22 // invoking this.getToken(), NOT by directly accessing

    23 // this.element.value. This is to allow incremental tokenized

    24 // autocompletion. Specific auto-completion logic (AJAX, etc)

    25 // belongs in getUpdatedChoices.

    26 //

    27 // Tokenized incremental autocompletion is enabled automatically

    28 // when an autocompleter is instantiated with the 'tokens' option

    29 // in the options parameter, e.g.:

    30 // new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });

    31 // will incrementally autocomplete with a comma as the token.

    32 // Additionally, ',' in the above example can be replaced with

    33 // a token array, e.g. { tokens: [',', '\n'] } which

    34 // enables autocompletion on multiple tokens. This is most 

    35 // useful when one of the tokens is \n (a newline), as it 

    36 // allows smart autocompletion after linebreaks.

    37 

    38 if(typeof Effect == 'undefined')

    39   throw("controls.js requires including script.aculo.us' effects.js library");

    40 

    41 var Autocompleter = {}

    42 Autocompleter.Base = function() {};

    43 Autocompleter.Base.prototype = {

    44   baseInitialize: function(element, update, options) {

    45     this.element     = $(element); 

    46     this.update      = $(update);  

    47     this.hasFocus    = false; 

    48     this.changed     = false; 

    49     this.active      = false; 

    50     this.index       = 0;     

    51     this.entryCount  = 0;

    52 

    53     if(this.setOptions)

    54       this.setOptions(options);

    55     else

    56       this.options = options || {};

    57 

    58     this.options.paramName    = this.options.paramName || this.element.name;

    59     this.options.tokens       = this.options.tokens || [];

    60     this.options.frequency    = this.options.frequency || 0.4;

    61     this.options.minChars     = this.options.minChars || 1;

    62     this.options.onShow       = this.options.onShow || 

    63       function(element, update){ 

    64         if(!update.style.position || update.style.position=='absolute') {

    65           update.style.position = 'absolute';

    66           Position.clone(element, update, {

    67             setHeight: false, 

    68             offsetTop: element.offsetHeight

    69           });

    70         }

    71         Effect.Appear(update,{duration:0.15});

    72       };

    73     this.options.onHide = this.options.onHide || 

    74       function(element, update){ new Effect.Fade(update,{duration:0.15}) };

    75 

    76     if(typeof(this.options.tokens) == 'string') 

    77       this.options.tokens = new Array(this.options.tokens);

    78 

    79     this.observer = null;

    80     

    81     this.element.setAttribute('autocomplete','off');

    82 

    83     Element.hide(this.update);

    84 

    85     Event.observe(this.element, "blur", this.onBlur.bindAsEventListener(this));

    86     Event.observe(this.element, "keypress", this.onKeyPress.bindAsEventListener(this));

    87   },

    88 

    89   show: function() {

    90     if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);

    91     if(!this.iefix && 

    92       (navigator.appVersion.indexOf('MSIE')>0) &&

    93       (navigator.userAgent.indexOf('Opera')<0) &&

    94       (Element.getStyle(this.update, 'position')=='absolute')) {

    95       new Insertion.After(this.update, 

    96        '<iframe id="' + this.update.id + '_iefix" '+

    97        'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +

    98        'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');

    99       this.iefix = $(this.update.id+'_iefix');

   100     }

   101     if(this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);

   102   },

   103   

   104   fixIEOverlapping: function() {

   105     Position.clone(this.update, this.iefix, {setTop:(!this.update.style.height)});

   106     this.iefix.style.zIndex = 1;

   107     this.update.style.zIndex = 2;

   108     Element.show(this.iefix);

   109   },

   110 

   111   hide: function() {

   112     this.stopIndicator();

   113     if(Element.getStyle(this.update, 'display')!='none') this.options.onHide(this.element, this.update);

   114     if(this.iefix) Element.hide(this.iefix);

   115   },

   116 

   117   startIndicator: function() {

   118     if(this.options.indicator) Element.show(this.options.indicator);

   119   },

   120 

   121   stopIndicator: function() {

   122     if(this.options.indicator) Element.hide(this.options.indicator);

   123   },

   124 

   125   onKeyPress: function(event) {

   126     if(this.active)

   127       switch(event.keyCode) {

   128        case Event.KEY_TAB:

   129        case Event.KEY_RETURN:

   130          this.selectEntry();

   131          Event.stop(event);

   132        case Event.KEY_ESC:

   133          this.hide();

   134          this.active = false;

   135          Event.stop(event);

   136          return;

   137        case Event.KEY_LEFT:

   138        case Event.KEY_RIGHT:

   139          return;

   140        case Event.KEY_UP:

   141          this.markPrevious();

   142          this.render();

   143          if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);

   144          return;

   145        case Event.KEY_DOWN:

   146          this.markNext();

   147          this.render();

   148          if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);

   149          return;

   150       }

   151      else 

   152        if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN || 

   153          (navigator.appVersion.indexOf('AppleWebKit') > 0 && event.keyCode == 0)) return;

   154 

   155     this.changed = true;

   156     this.hasFocus = true;

   157 

   158     if(this.observer) clearTimeout(this.observer);

   159       this.observer = 

   160         setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);

   161   },

   162 

   163   activate: function() {

   164     this.changed = false;

   165     this.hasFocus = true;

   166     this.getUpdatedChoices();

   167   },

   168 

   169   onHover: function(event) {

   170     var element = Event.findElement(event, 'LI');

   171     if(this.index != element.autocompleteIndex) 

   172     {

   173         this.index = element.autocompleteIndex;

   174         this.render();

   175     }

   176     Event.stop(event);

   177   },

   178   

   179   onClick: function(event) {

   180     var element = Event.findElement(event, 'LI');

   181     this.index = element.autocompleteIndex;

   182     this.selectEntry();

   183     this.hide();

   184   },

   185   

   186   onBlur: function(event) {

   187     // needed to make click events working

   188     setTimeout(this.hide.bind(this), 250);

   189     this.hasFocus = false;

   190     this.active = false;     

   191   }, 

   192   

   193   render: function() {

   194     if(this.entryCount > 0) {

   195       for (var i = 0; i < this.entryCount; i++)

   196         this.index==i ? 

   197           Element.addClassName(this.getEntry(i),"selected") : 

   198           Element.removeClassName(this.getEntry(i),"selected");

   199         

   200       if(this.hasFocus) { 

   201         this.show();

   202         this.active = true;

   203       }

   204     } else {

   205       this.active = false;

   206       this.hide();

   207     }

   208   },

   209   

   210   markPrevious: function() {

   211     if(this.index > 0) this.index--

   212       else this.index = this.entryCount-1;

   213     this.getEntry(this.index).scrollIntoView(true);

   214   },

   215   

   216   markNext: function() {

   217     if(this.index < this.entryCount-1) this.index++

   218       else this.index = 0;

   219     this.getEntry(this.index).scrollIntoView(false);

   220   },

   221   

   222   getEntry: function(index) {

   223     return this.update.firstChild.childNodes[index];

   224   },

   225   

   226   getCurrentEntry: function() {

   227     return this.getEntry(this.index);

   228   },

   229   

   230   selectEntry: function() {

   231     this.active = false;

   232     this.updateElement(this.getCurrentEntry());

   233   },

   234 

   235   updateElement: function(selectedElement) {

   236     if (this.options.updateElement) {

   237       this.options.updateElement(selectedElement);

   238       return;

   239     }

   240     var value = '';

   241     if (this.options.select) {

   242       var nodes = document.getElementsByClassName(this.options.select, selectedElement) || [];

   243       if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);

   244     } else

   245       value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');

   246     

   247     var lastTokenPos = this.findLastToken();

   248     if (lastTokenPos != -1) {

   249       var newValue = this.element.value.substr(0, lastTokenPos + 1);

   250       var whitespace = this.element.value.substr(lastTokenPos + 1).match(/^\s+/);

   251       if (whitespace)

   252         newValue += whitespace[0];

   253       this.element.value = newValue + value;

   254     } else {

   255       this.element.value = value;

   256     }

   257     this.element.focus();

   258     

   259     if (this.options.afterUpdateElement)

   260       this.options.afterUpdateElement(this.element, selectedElement);

   261   },

   262 

   263   updateChoices: function(choices) {

   264     if(!this.changed && this.hasFocus) {

   265       this.update.innerHTML = choices;

   266       Element.cleanWhitespace(this.update);

   267       Element.cleanWhitespace(this.update.firstChild);

   268 

   269       if(this.update.firstChild && this.update.firstChild.childNodes) {

   270         this.entryCount = 

   271           this.update.firstChild.childNodes.length;

   272         for (var i = 0; i < this.entryCount; i++) {

   273           var entry = this.getEntry(i);

   274           entry.autocompleteIndex = i;

   275           this.addObservers(entry);

   276         }

   277       } else { 

   278         this.entryCount = 0;

   279       }

   280 

   281       this.stopIndicator();

   282       this.index = 0;

   283       

   284       if(this.entryCount==1 && this.options.autoSelect) {

   285         this.selectEntry();

   286         this.hide();

   287       } else {

   288         this.render();

   289       }

   290     }

   291   },

   292 

   293   addObservers: function(element) {

   294     Event.observe(element, "mouseover", this.onHover.bindAsEventListener(this));

   295     Event.observe(element, "click", this.onClick.bindAsEventListener(this));

   296   },

   297 

   298   onObserverEvent: function() {

   299     this.changed = false;   

   300     if(this.getToken().length>=this.options.minChars) {

   301       this.startIndicator();

   302       this.getUpdatedChoices();

   303     } else {

   304       this.active = false;

   305       this.hide();

   306     }

   307   },

   308 

   309   getToken: function() {

   310     var tokenPos = this.findLastToken();

   311     if (tokenPos != -1)

   312       var ret = this.element.value.substr(tokenPos + 1).replace(/^\s+/,'').replace(/\s+$/,'');

   313     else

   314       var ret = this.element.value;

   315 

   316     return /\n/.test(ret) ? '' : ret;

   317   },

   318 

   319   findLastToken: function() {

   320     var lastTokenPos = -1;

   321 

   322     for (var i=0; i<this.options.tokens.length; i++) {

   323       var thisTokenPos = this.element.value.lastIndexOf(this.options.tokens[i]);

   324       if (thisTokenPos > lastTokenPos)

   325         lastTokenPos = thisTokenPos;

   326     }

   327     return lastTokenPos;

   328   }

   329 }

   330 

   331 Ajax.Autocompleter = Class.create();

   332 Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype), {

   333   initialize: function(element, update, url, options) {

   334     this.baseInitialize(element, update, options);

   335     this.options.asynchronous  = true;

   336     this.options.onComplete    = this.onComplete.bind(this);

   337     this.options.defaultParams = this.options.parameters || null;

   338     this.url                   = url;

   339   },

   340 

   341   getUpdatedChoices: function() {

   342     entry = encodeURIComponent(this.options.paramName) + '=' + 

   343       encodeURIComponent(this.getToken());

   344 

   345     this.options.parameters = this.options.callback ?

   346       this.options.callback(this.element, entry) : entry;

   347 

   348     if(this.options.defaultParams) 

   349       this.options.parameters += '&' + this.options.defaultParams;

   350 

   351     new Ajax.Request(this.url, this.options);

   352   },

   353 

   354   onComplete: function(request) {

   355     this.updateChoices(request.responseText);

   356   }

   357 

   358 });

   359 

   360 // The local array autocompleter. Used when you'd prefer to

   361 // inject an array of autocompletion options into the page, rather

   362 // than sending out Ajax queries, which can be quite slow sometimes.

   363 //

   364 // The constructor takes four parameters. The first two are, as usual,

   365 // the id of the monitored textbox, and id of the autocompletion menu.

   366 // The third is the array you want to autocomplete from, and the fourth

   367 // is the options block.

   368 //

   369 // Extra local autocompletion options:

   370 // - choices - How many autocompletion choices to offer

   371 //

   372 // - partialSearch - If false, the autocompleter will match entered

   373 //                    text only at the beginning of strings in the 

   374 //                    autocomplete array. Defaults to true, which will

   375 //                    match text at the beginning of any *word* in the

   376 //                    strings in the autocomplete array. If you want to

   377 //                    search anywhere in the string, additionally set

   378 //                    the option fullSearch to true (default: off).

   379 //

   380 // - fullSsearch - Search anywhere in autocomplete array strings.

   381 //

   382 // - partialChars - How many characters to enter before triggering

   383 //                   a partial match (unlike minChars, which defines

   384 //                   how many characters are required to do any match

   385 //                   at all). Defaults to 2.

   386 //

   387 // - ignoreCase - Whether to ignore case when autocompleting.

   388 //                 Defaults to true.

   389 //

   390 // It's possible to pass in a custom function as the 'selector' 

   391 // option, if you prefer to write your own autocompletion logic.

   392 // In that case, the other options above will not apply unless

   393 // you support them.

   394 

   395 Autocompleter.Local = Class.create();

   396 Autocompleter.Local.prototype = Object.extend(new Autocompleter.Base(), {

   397   initialize: function(element, update, array, options) {

   398     this.baseInitialize(element, update, options);

   399     this.options.array = array;

   400   },

   401 

   402   getUpdatedChoices: function() {

   403     this.updateChoices(this.options.selector(this));

   404   },

   405 

   406   setOptions: function(options) {

   407     this.options = Object.extend({

   408       choices: 10,

   409       partialSearch: true,

   410       partialChars: 2,

   411       ignoreCase: true,

   412       fullSearch: false,

   413       selector: function(instance) {

   414         var ret       = []; // Beginning matches

   415         var partial   = []; // Inside matches

   416         var entry     = instance.getToken();

   417         var count     = 0;

   418 

   419         for (var i = 0; i < instance.options.array.length &&  

   420           ret.length < instance.options.choices ; i++) { 

   421 

   422           var elem = instance.options.array[i];

   423           var foundPos = instance.options.ignoreCase ? 

   424             elem.toLowerCase().indexOf(entry.toLowerCase()) : 

   425             elem.indexOf(entry);

   426 

   427           while (foundPos != -1) {

   428             if (foundPos == 0 && elem.length != entry.length) { 

   429               ret.push("<li><strong>" + elem.substr(0, entry.length) + "</strong>" + 

   430                 elem.substr(entry.length) + "</li>");

   431               break;

   432             } else if (entry.length >= instance.options.partialChars && 

   433               instance.options.partialSearch && foundPos != -1) {

   434               if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos-1,1))) {

   435                 partial.push("<li>" + elem.substr(0, foundPos) + "<strong>" +

   436                   elem.substr(foundPos, entry.length) + "</strong>" + elem.substr(

   437                   foundPos + entry.length) + "</li>");

   438                 break;

   439               }

   440             }

   441 

   442             foundPos = instance.options.ignoreCase ? 

   443               elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) : 

   444               elem.indexOf(entry, foundPos + 1);

   445 

   446           }

   447         }

   448         if (partial.length)

   449           ret = ret.concat(partial.slice(0, instance.options.choices - ret.length))

   450         return "<ul>" + ret.join('') + "</ul>";

   451       }

   452     }, options || {});

   453   }

   454 });

   455 

   456 // AJAX in-place editor

   457 //

   458 // see documentation on http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor

   459 

   460 // Use this if you notice weird scrolling problems on some browsers,

   461 // the DOM might be a bit confused when this gets called so do this

   462 // waits 1 ms (with setTimeout) until it does the activation

   463 Field.scrollFreeActivate = function(field) {

   464   setTimeout(function() {

   465     Field.activate(field);

   466   }, 1);

   467 }

   468 

   469 Ajax.InPlaceEditor = Class.create();

   470 Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";

   471 Ajax.InPlaceEditor.prototype = {

   472   initialize: function(element, url, options) {

   473     this.url = url;

   474     this.element = $(element);

   475 

   476     this.options = Object.extend({

   477       okButton: true,

   478       okText: "ok",

   479       cancelLink: true,

   480       cancelText: "cancel",

   481       savingText: "Saving...",

   482       clickToEditText: "Click to edit",

   483       okText: "ok",

   484       rows: 1,

   485       onComplete: function(transport, element) {

   486         new Effect.Highlight(element, {startcolor: this.options.highlightcolor});

   487       },

   488       onFailure: function(transport) {

   489         alert("Error communicating with the server: " + transport.responseText.stripTags());

   490       },

   491       callback: function(form) {

   492         return Form.serialize(form);

   493       },

   494       handleLineBreaks: true,

   495       loadingText: 'Loading...',

   496       savingClassName: 'inplaceeditor-saving',

   497       loadingClassName: 'inplaceeditor-loading',

   498       formClassName: 'inplaceeditor-form',

   499       highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,

   500       highlightendcolor: "#FFFFFF",

   501       externalControl: null,

   502       submitOnBlur: false,

   503       ajaxOptions: {},

   504       evalScripts: false

   505     }, options || {});

   506 

   507     if(!this.options.formId && this.element.id) {

   508       this.options.formId = this.element.id + "-inplaceeditor";

   509       if ($(this.options.formId)) {

   510         // there's already a form with that name, don't specify an id

   511         this.options.formId = null;

   512       }

   513     }

   514     

   515     if (this.options.externalControl) {

   516       this.options.externalControl = $(this.options.externalControl);

   517     }

   518     

   519     this.originalBackground = Element.getStyle(this.element, 'background-color');

   520     if (!this.originalBackground) {

   521       this.originalBackground = "transparent";

   522     }

   523     

   524     this.element.title = this.options.clickToEditText;

   525     

   526     this.onclickListener = this.enterEditMode.bindAsEventListener(this);

   527     this.mouseoverListener = this.enterHover.bindAsEventListener(this);

   528     this.mouseoutListener = this.leaveHover.bindAsEventListener(this);

   529     Event.observe(this.element, 'click', this.onclickListener);

   530     Event.observe(this.element, 'mouseover', this.mouseoverListener);

   531     Event.observe(this.element, 'mouseout', this.mouseoutListener);

   532     if (this.options.externalControl) {

   533       Event.observe(this.options.externalControl, 'click', this.onclickListener);

   534       Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);

   535       Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);

   536     }

   537   },

   538   enterEditMode: function(evt) {

   539     if (this.saving) return;

   540     if (this.editing) return;

   541     this.editing = true;

   542     this.onEnterEditMode();

   543     if (this.options.externalControl) {

   544       Element.hide(this.options.externalControl);

   545     }

   546     Element.hide(this.element);

   547     this.createForm();

   548     this.element.parentNode.insertBefore(this.form, this.element);

   549     if (!this.options.loadTextURL) Field.scrollFreeActivate(this.editField);

   550     // stop the event to avoid a page refresh in Safari

   551     if (evt) {

   552       Event.stop(evt);

   553     }

   554     return false;

   555   },

   556   createForm: function() {

   557     this.form = document.createElement("form");

   558     this.form.id = this.options.formId;

   559     Element.addClassName(this.form, this.options.formClassName)

   560     this.form.onsubmit = this.onSubmit.bind(this);

   561 

   562     this.createEditField();

   563 

   564     if (this.options.textarea) {

   565       var br = document.createElement("br");

   566       this.form.appendChild(br);

   567     }

   568 

   569     if (this.options.okButton) {

   570       okButton = document.createElement("input");

   571       okButton.type = "submit";

   572       okButton.value = this.options.okText;

   573       okButton.className = 'editor_ok_button';

   574       this.form.appendChild(okButton);

   575     }

   576 

   577     if (this.options.cancelLink) {

   578       cancelLink = document.createElement("a");

   579       cancelLink.href = "#";

   580       cancelLink.appendChild(document.createTextNode(this.options.cancelText));

   581       cancelLink.onclick = this.onclickCancel.bind(this);

   582       cancelLink.className = 'editor_cancel';      

   583       this.form.appendChild(cancelLink);

   584     }

   585   },

   586   hasHTMLLineBreaks: function(string) {

   587     if (!this.options.handleLineBreaks) return false;

   588     return string.match(/<br/i) || string.match(/<p>/i);

   589   },

   590   convertHTMLLineBreaks: function(string) {

   591     return string.replace(/<br>/gi, "\n").replace(/<br\/>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<p>/gi, "");

   592   },

   593   createEditField: function() {

   594     var text;

   595     if(this.options.loadTextURL) {

   596       text = this.options.loadingText;

   597     } else {

   598       text = this.getText();

   599     }

   600 

   601     var obj = this;

   602     

   603     if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {

   604       this.options.textarea = false;

   605       var textField = document.createElement("input");

   606       textField.obj = this;

   607       textField.type = "text";

   608       textField.name = "value";

   609       textField.value = text;

   610       textField.style.backgroundColor = this.options.highlightcolor;

   611       textField.className = 'editor_field';

   612       var size = this.options.size || this.options.cols || 0;

   613       if (size != 0) textField.size = size;

   614       if (this.options.submitOnBlur)

   615         textField.onblur = this.onSubmit.bind(this);

   616       this.editField = textField;

   617     } else {

   618       this.options.textarea = true;

   619       var textArea = document.createElement("textarea");

   620       textArea.obj = this;

   621       textArea.name = "value";

   622       textArea.value = this.convertHTMLLineBreaks(text);

   623       textArea.rows = this.options.rows;

   624       textArea.cols = this.options.cols || 40;

   625       textArea.className = 'editor_field';      

   626       if (this.options.submitOnBlur)

   627         textArea.onblur = this.onSubmit.bind(this);

   628       this.editField = textArea;

   629     }

   630     

   631     if(this.options.loadTextURL) {

   632       this.loadExternalText();

   633     }

   634     this.form.appendChild(this.editField);

   635   },

   636   getText: function() {

   637     return this.element.innerHTML;

   638   },

   639   loadExternalText: function() {

   640     Element.addClassName(this.form, this.options.loadingClassName);

   641     this.editField.disabled = true;

   642     new Ajax.Request(

   643       this.options.loadTextURL,

   644       Object.extend({

   645         asynchronous: true,

   646         onComplete: this.onLoadedExternalText.bind(this)

   647       }, this.options.ajaxOptions)

   648     );

   649   },

   650   onLoadedExternalText: function(transport) {

   651     Element.removeClassName(this.form, this.options.loadingClassName);

   652     this.editField.disabled = false;

   653     this.editField.value = transport.responseText.stripTags();

   654     Field.scrollFreeActivate(this.editField);

   655   },

   656   onclickCancel: function() {

   657     this.onComplete();

   658     this.leaveEditMode();

   659     return false;

   660   },

   661   onFailure: function(transport) {

   662     this.options.onFailure(transport);

   663     if (this.oldInnerHTML) {

   664       this.element.innerHTML = this.oldInnerHTML;

   665       this.oldInnerHTML = null;

   666     }

   667     return false;

   668   },

   669   onSubmit: function() {

   670     // onLoading resets these so we need to save them away for the Ajax call

   671     var form = this.form;

   672     var value = this.editField.value;

   673     

   674     // do this first, sometimes the ajax call returns before we get a chance to switch on Saving...

   675     // which means this will actually switch on Saving... *after* we've left edit mode causing Saving...

   676     // to be displayed indefinitely

   677     this.onLoading();

   678     

   679     if (this.options.evalScripts) {

   680       new Ajax.Request(

   681         this.url, Object.extend({

   682           parameters: this.options.callback(form, value),

   683           onComplete: this.onComplete.bind(this),

   684           onFailure: this.onFailure.bind(this),

   685           asynchronous:true, 

   686           evalScripts:true

   687         }, this.options.ajaxOptions));

   688     } else  {

   689       new Ajax.Updater(

   690         { success: this.element,

   691           // don't update on failure (this could be an option)

   692           failure: null }, 

   693         this.url, Object.extend({

   694           parameters: this.options.callback(form, value),

   695           onComplete: this.onComplete.bind(this),

   696           onFailure: this.onFailure.bind(this)

   697         }, this.options.ajaxOptions));

   698     }

   699     // stop the event to avoid a page refresh in Safari

   700     if (arguments.length > 1) {

   701       Event.stop(arguments[0]);

   702     }

   703     return false;

   704   },

   705   onLoading: function() {

   706     this.saving = true;

   707     this.removeForm();

   708     this.leaveHover();

   709     this.showSaving();

   710   },

   711   showSaving: function() {

   712     this.oldInnerHTML = this.element.innerHTML;

   713     this.element.innerHTML = this.options.savingText;

   714     Element.addClassName(this.element, this.options.savingClassName);

   715     this.element.style.backgroundColor = this.originalBackground;

   716     Element.show(this.element);

   717   },

   718   removeForm: function() {

   719     if(this.form) {

   720       if (this.form.parentNode) Element.remove(this.form);

   721       this.form = null;

   722     }

   723   },

   724   enterHover: function() {

   725     if (this.saving) return;

   726     this.element.style.backgroundColor = this.options.highlightcolor;

   727     if (this.effect) {

   728       this.effect.cancel();

   729     }

   730     Element.addClassName(this.element, this.options.hoverClassName)

   731   },

   732   leaveHover: function() {

   733     if (this.options.backgroundColor) {

   734       this.element.style.backgroundColor = this.oldBackground;

   735     }

   736     Element.removeClassName(this.element, this.options.hoverClassName)

   737     if (this.saving) return;

   738     this.effect = new Effect.Highlight(this.element, {

   739       startcolor: this.options.highlightcolor,

   740       endcolor: this.options.highlightendcolor,

   741       restorecolor: this.originalBackground

   742     });

   743   },

   744   leaveEditMode: function() {

   745     Element.removeClassName(this.element, this.options.savingClassName);

   746     this.removeForm();

   747     this.leaveHover();

   748     this.element.style.backgroundColor = this.originalBackground;

   749     Element.show(this.element);

   750     if (this.options.externalControl) {

   751       Element.show(this.options.externalControl);

   752     }

   753     this.editing = false;

   754     this.saving = false;

   755     this.oldInnerHTML = null;

   756     this.onLeaveEditMode();

   757   },

   758   onComplete: function(transport) {

   759     this.leaveEditMode();

   760     this.options.onComplete.bind(this)(transport, this.element);

   761   },

   762   onEnterEditMode: function() {},

   763   onLeaveEditMode: function() {},

   764   dispose: function() {

   765     if (this.oldInnerHTML) {

   766       this.element.innerHTML = this.oldInnerHTML;

   767     }

   768     this.leaveEditMode();

   769     Event.stopObserving(this.element, 'click', this.onclickListener);

   770     Event.stopObserving(this.element, 'mouseover', this.mouseoverListener);

   771     Event.stopObserving(this.element, 'mouseout', this.mouseoutListener);

   772     if (this.options.externalControl) {

   773       Event.stopObserving(this.options.externalControl, 'click', this.onclickListener);

   774       Event.stopObserving(this.options.externalControl, 'mouseover', this.mouseoverListener);

   775       Event.stopObserving(this.options.externalControl, 'mouseout', this.mouseoutListener);

   776     }

   777   }

   778 };

   779 

   780 Ajax.InPlaceCollectionEditor = Class.create();

   781 Object.extend(Ajax.InPlaceCollectionEditor.prototype, Ajax.InPlaceEditor.prototype);

   782 Object.extend(Ajax.InPlaceCollectionEditor.prototype, {

   783   createEditField: function() {

   784     if (!this.cached_selectTag) {

   785       var selectTag = document.createElement("select");

   786       var collection = this.options.collection || [];

   787       var optionTag;

   788       collection.each(function(e,i) {

   789         optionTag = document.createElement("option");

   790         optionTag.value = (e instanceof Array) ? e[0] : e;

   791         if((typeof this.options.value == 'undefined') && 

   792           ((e instanceof Array) ? this.element.innerHTML == e[1] : e == optionTag.value)) optionTag.selected = true;

   793         if(this.options.value==optionTag.value) optionTag.selected = true;

   794         optionTag.appendChild(document.createTextNode((e instanceof Array) ? e[1] : e));

   795         selectTag.appendChild(optionTag);

   796       }.bind(this));

   797       this.cached_selectTag = selectTag;

   798     }

   799 

   800     this.editField = this.cached_selectTag;

   801     if(this.options.loadTextURL) this.loadExternalText();

   802     this.form.appendChild(this.editField);

   803     this.options.callback = function(form, value) {

   804       return "value=" + encodeURIComponent(value);

   805     }

   806   }

   807 });

   808 

   809 // Delayed observer, like Form.Element.Observer, 

   810 // but waits for delay after last key input

   811 // Ideal for live-search fields

   812 

   813 Form.Element.DelayedObserver = Class.create();

   814 Form.Element.DelayedObserver.prototype = {

   815   initialize: function(element, delay, callback) {

   816     this.delay     = delay || 0.5;

   817     this.element   = $(element);

   818     this.callback  = callback;

   819     this.timer     = null;

   820     this.lastValue = $F(this.element); 

   821     Event.observe(this.element,'keyup',this.delayedListener.bindAsEventListener(this));

   822   },

   823   delayedListener: function(event) {

   824     if(this.lastValue == $F(this.element)) return;

   825     if(this.timer) clearTimeout(this.timer);

   826     this.timer = setTimeout(this.onTimerEvent.bind(this), this.delay * 1000);

   827     this.lastValue = $F(this.element);

   828   },

   829   onTimerEvent: function() {

   830     this.timer = null;

   831     this.callback(this.element, $F(this.element));

   832   }

   833 };