The Tor Browser: dom/tests/mochitest/ajax/scriptaculous/src/controls.js@a63d609f5ebe

     1 // script.aculo.us controls.js v1.7.1_beta2, Tue May 15 15:15:45 EDT 2007

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

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

     5 //           (c) 2005-2007 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/

    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.

    39 if(typeof Effect == 'undefined')

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

    42 var Autocompleter = {}

    43 Autocompleter.Base = function() {};

    44 Autocompleter.Base.prototype = {

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

    46     element          = $(element)

    47     this.element     = element;

    48     this.update      = $(update);

    49     this.hasFocus    = false;

    50     this.changed     = false;

    51     this.active      = false;

    52     this.index       = 0;

    53     this.entryCount  = 0;

    55     if(this.setOptions)

    56       this.setOptions(options);

    57     else

    58       this.options = options || {};

    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}) };

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

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

    81     this.observer = null;

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

    85     Element.hide(this.update);

    87     Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));

    88     Event.observe(this.element, 'keypress', this.onKeyPress.bindAsEventListener(this));

    90     // Turn autocomplete back on when the user leaves the page, so that the

    91     // field's value will be remembered on Mozilla-based browsers.

    92     Event.observe(window, 'beforeunload', function(){

    93       element.setAttribute('autocomplete', 'on');

    94     });

    95   },

    97   show: function() {

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

    99     if(!this.iefix &&

   100       (Prototype.Browser.IE) &&

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

   102       new Insertion.After(this.update,

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

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

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

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

   107     }

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

   109   },

   111   fixIEOverlapping: function() {

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

   113     this.iefix.style.zIndex = 1;

   114     this.update.style.zIndex = 2;

   115     Element.show(this.iefix);

   116   },

   118   hide: function() {

   119     this.stopIndicator();

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

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

   122   },

   124   startIndicator: function() {

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

   126   },

   128   stopIndicator: function() {

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

   130   },

   132   onKeyPress: function(event) {

   133     if(this.active)

   134       switch(event.keyCode) {

   135        case Event.KEY_TAB:

   136        case Event.KEY_RETURN:

   137          this.selectEntry();

   138          Event.stop(event);

   139        case Event.KEY_ESC:

   140          this.hide();

   141          this.active = false;

   142          Event.stop(event);

   143          return;

   144        case Event.KEY_LEFT:

   145        case Event.KEY_RIGHT:

   146          return;

   147        case Event.KEY_UP:

   148          this.markPrevious();

   149          this.render();

   150          if(Prototype.Browser.WebKit) Event.stop(event);

   151          return;

   152        case Event.KEY_DOWN:

   153          this.markNext();

   154          this.render();

   155          if(Prototype.Browser.WebKit) Event.stop(event);

   156          return;

   157       }

   158      else

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

   160          (Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;

   162     this.changed = true;

   163     this.hasFocus = true;

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

   166       this.observer =

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

   168   },

   170   activate: function() {

   171     this.changed = false;

   172     this.hasFocus = true;

   173     this.getUpdatedChoices();

   174   },

   176   onHover: function(event) {

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

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

   179     {

   180         this.index = element.autocompleteIndex;

   181         this.render();

   182     }

   183     Event.stop(event);

   184   },

   186   onClick: function(event) {

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

   188     this.index = element.autocompleteIndex;

   189     this.selectEntry();

   190     this.hide();

   191   },

   193   onBlur: function(event) {

   194     // needed to make click events working

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

   196     this.hasFocus = false;

   197     this.active = false;

   198   },

   200   render: function() {

   201     if(this.entryCount > 0) {

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

   203         this.index==i ?

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

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

   206       if(this.hasFocus) {

   207         this.show();

   208         this.active = true;

   209       }

   210     } else {

   211       this.active = false;

   212       this.hide();

   213     }

   214   },

   216   markPrevious: function() {

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

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

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

   220   },

   222   markNext: function() {

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

   224       else this.index = 0;

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

   226   },

   228   getEntry: function(index) {

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

   230   },

   232   getCurrentEntry: function() {

   233     return this.getEntry(this.index);

   234   },

   236   selectEntry: function() {

   237     this.active = false;

   238     this.updateElement(this.getCurrentEntry());

   239   },

   241   updateElement: function(selectedElement) {

   242     if (this.options.updateElement) {

   243       this.options.updateElement(selectedElement);

   244       return;

   245     }

   246     var value = '';

   247     if (this.options.select) {

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

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

   250     } else

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

   253     var lastTokenPos = this.findLastToken();

   254     if (lastTokenPos != -1) {

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

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

   257       if (whitespace)

   258         newValue += whitespace[0];

   259       this.element.value = newValue + value;

   260     } else {

   261       this.element.value = value;

   262     }

   263     this.element.focus();

   265     if (this.options.afterUpdateElement)

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

   267   },

   269   updateChoices: function(choices) {

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

   271       this.update.innerHTML = choices;

   272       Element.cleanWhitespace(this.update);

   273       Element.cleanWhitespace(this.update.down());

   275       if(this.update.firstChild && this.update.down().childNodes) {

   276         this.entryCount =

   277           this.update.down().childNodes.length;

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

   279           var entry = this.getEntry(i);

   280           entry.autocompleteIndex = i;

   281           this.addObservers(entry);

   282         }

   283       } else {

   284         this.entryCount = 0;

   285       }

   287       this.stopIndicator();

   288       this.index = 0;

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

   291         this.selectEntry();

   292         this.hide();

   293       } else {

   294         this.render();

   295       }

   296     }

   297   },

   299   addObservers: function(element) {

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

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

   302   },

   304   onObserverEvent: function() {

   305     this.changed = false;

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

   307       this.getUpdatedChoices();

   308     } else {

   309       this.active = false;

   310       this.hide();

   311     }

   312   },

   314   getToken: function() {

   315     var tokenPos = this.findLastToken();

   316     if (tokenPos != -1)

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

   318     else

   319       var ret = this.element.value;

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

   322   },

   324   findLastToken: function() {

   325     var lastTokenPos = -1;

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

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

   329       if (thisTokenPos > lastTokenPos)

   330         lastTokenPos = thisTokenPos;

   331     }

   332     return lastTokenPos;

   333   }

   334 }

   336 Ajax.Autocompleter = Class.create();

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

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

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

   340     this.options.asynchronous  = true;

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

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

   343     this.url                   = url;

   344   },

   346   getUpdatedChoices: function() {

   347     this.startIndicator();

   349     var entry = encodeURIComponent(this.options.paramName) + '=' +

   350       encodeURIComponent(this.getToken());

   352     this.options.parameters = this.options.callback ?

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

   355     if(this.options.defaultParams)

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

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

   359   },

   361   onComplete: function(request) {

   362     this.updateChoices(request.responseText);

   363   }

   365 });

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

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

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

   370 //

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

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

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

   374 // is the options block.

   375 //

   376 // Extra local autocompletion options:

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

   378 //

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

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

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

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

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

   384 //                    search anywhere in the string, additionally set

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

   386 //

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

   388 //

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

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

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

   392 //                   at all). Defaults to 2.

   393 //

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

   395 //                 Defaults to true.

   396 //

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

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

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

   400 // you support them.

   402 Autocompleter.Local = Class.create();

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

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

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

   406     this.options.array = array;

   407   },

   409   getUpdatedChoices: function() {

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

   411   },

   413   setOptions: function(options) {

   414     this.options = Object.extend({

   415       choices: 10,

   416       partialSearch: true,

   417       partialChars: 2,

   418       ignoreCase: true,

   419       fullSearch: false,

   420       selector: function(instance) {

   421         var ret       = []; // Beginning matches

   422         var partial   = []; // Inside matches

   423         var entry     = instance.getToken();

   424         var count     = 0;

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

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

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

   430           var foundPos = instance.options.ignoreCase ?

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

   432             elem.indexOf(entry);

   434           while (foundPos != -1) {

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

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

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

   438               break;

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

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

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

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

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

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

   445                 break;

   446               }

   447             }

   449             foundPos = instance.options.ignoreCase ?

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

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

   453           }

   454         }

   455         if (partial.length)

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

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

   458       }

   459     }, options || {});

   460   }

   461 });

   463 // AJAX in-place editor

   464 //

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

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

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

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

   470 Field.scrollFreeActivate = function(field) {

   471   setTimeout(function() {

   472     Field.activate(field);

   473   }, 1);

   474 }

   476 Ajax.InPlaceEditor = Class.create();

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

   478 Ajax.InPlaceEditor.prototype = {

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

   480     this.url = url;

   481     this.element = $(element);

   483     this.options = Object.extend({

   484       paramName: "value",

   485       okButton: true,

   486       okLink: false,

   487       okText: "ok",

   488       cancelButton: false,

   489       cancelLink: true,

   490       cancelText: "cancel",

   491       textBeforeControls: '',

   492       textBetweenControls: '',

   493       textAfterControls: '',

   494       savingText: "Saving...",

   495       clickToEditText: "Click to edit",

   496       okText: "ok",

   497       rows: 1,

   498       onComplete: function(transport, element) {

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

   500       },

   501       onFailure: function(transport) {

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

   503       },

   504       callback: function(form) {

   505         return Form.serialize(form);

   506       },

   507       handleLineBreaks: true,

   508       loadingText: 'Loading...',

   509       savingClassName: 'inplaceeditor-saving',

   510       loadingClassName: 'inplaceeditor-loading',

   511       formClassName: 'inplaceeditor-form',

   512       highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,

   513       highlightendcolor: "#FFFFFF",

   514       externalControl: null,

   515       submitOnBlur: false,

   516       ajaxOptions: {},

   517       evalScripts: false

   518     }, options || {});

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

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

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

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

   524         this.options.formId = null;

   525       }

   526     }

   528     if (this.options.externalControl) {

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

   530     }

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

   533     if (!this.originalBackground) {

   534       this.originalBackground = "transparent";

   535     }

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

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

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

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

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

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

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

   545     if (this.options.externalControl) {

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

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

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

   549     }

   550   },

   551   enterEditMode: function(evt) {

   552     if (this.saving) return;

   553     if (this.editing) return;

   554     this.editing = true;

   555     this.onEnterEditMode();

   556     if (this.options.externalControl) {

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

   558     }

   559     Element.hide(this.element);

   560     this.createForm();

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

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

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

   564     if (evt) {

   565       Event.stop(evt);

   566     }

   567     return false;

   568   },

   569   createForm: function() {

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

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

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

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

   575     this.createEditField();

   577     if (this.options.textarea) {

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

   579       this.form.appendChild(br);

   580     }

   582     if (this.options.textBeforeControls)

   583       this.form.appendChild(document.createTextNode(this.options.textBeforeControls));

   585     if (this.options.okButton) {

   586       var okButton = document.createElement("input");

   587       okButton.type = "submit";

   588       okButton.value = this.options.okText;

   589       okButton.className = 'editor_ok_button';

   590       this.form.appendChild(okButton);

   591     }

   593     if (this.options.okLink) {

   594       var okLink = document.createElement("a");

   595       okLink.href = "#";

   596       okLink.appendChild(document.createTextNode(this.options.okText));

   597       okLink.onclick = this.onSubmit.bind(this);

   598       okLink.className = 'editor_ok_link';

   599       this.form.appendChild(okLink);

   600     }

   602     if (this.options.textBetweenControls &&

   603       (this.options.okLink || this.options.okButton) &&

   604       (this.options.cancelLink || this.options.cancelButton))

   605       this.form.appendChild(document.createTextNode(this.options.textBetweenControls));

   607     if (this.options.cancelButton) {

   608       var cancelButton = document.createElement("input");

   609       cancelButton.type = "submit";

   610       cancelButton.value = this.options.cancelText;

   611       cancelButton.onclick = this.onclickCancel.bind(this);

   612       cancelButton.className = 'editor_cancel_button';

   613       this.form.appendChild(cancelButton);

   614     }

   616     if (this.options.cancelLink) {

   617       var cancelLink = document.createElement("a");

   618       cancelLink.href = "#";

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

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

   621       cancelLink.className = 'editor_cancel editor_cancel_link';

   622       this.form.appendChild(cancelLink);

   623     }

   625     if (this.options.textAfterControls)

   626       this.form.appendChild(document.createTextNode(this.options.textAfterControls));

   627   },

   628   hasHTMLLineBreaks: function(string) {

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

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

   631   },

   632   convertHTMLLineBreaks: function(string) {

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

   634   },

   635   createEditField: function() {

   636     var text;

   637     if(this.options.loadTextURL) {

   638       text = this.options.loadingText;

   639     } else {

   640       text = this.getText();

   641     }

   643     var obj = this;

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

   646       this.options.textarea = false;

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

   648       textField.obj = this;

   649       textField.type = "text";

   650       textField.name = this.options.paramName;

   651       textField.value = text;

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

   653       textField.className = 'editor_field';

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

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

   656       if (this.options.submitOnBlur)

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

   658       this.editField = textField;

   659     } else {

   660       this.options.textarea = true;

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

   662       textArea.obj = this;

   663       textArea.name = this.options.paramName;

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

   665       textArea.rows = this.options.rows;

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

   667       textArea.className = 'editor_field';

   668       if (this.options.submitOnBlur)

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

   670       this.editField = textArea;

   671     }

   673     if(this.options.loadTextURL) {

   674       this.loadExternalText();

   675     }

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

   677   },

   678   getText: function() {

   679     return this.element.innerHTML;

   680   },

   681   loadExternalText: function() {

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

   683     this.editField.disabled = true;

   684     new Ajax.Request(

   685       this.options.loadTextURL,

   686       Object.extend({

   687         asynchronous: true,

   688         onComplete: this.onLoadedExternalText.bind(this)

   689       }, this.options.ajaxOptions)

   690     );

   691   },

   692   onLoadedExternalText: function(transport) {

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

   694     this.editField.disabled = false;

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

   696     Field.scrollFreeActivate(this.editField);

   697   },

   698   onclickCancel: function() {

   699     this.onComplete();

   700     this.leaveEditMode();

   701     return false;

   702   },

   703   onFailure: function(transport) {

   704     this.options.onFailure(transport);

   705     if (this.oldInnerHTML) {

   706       this.element.innerHTML = this.oldInnerHTML;

   707       this.oldInnerHTML = null;

   708     }

   709     return false;

   710   },

   711   onSubmit: function() {

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

   713     var form = this.form;

   714     var value = this.editField.value;

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

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

   718     // to be displayed indefinitely

   719     this.onLoading();

   721     if (this.options.evalScripts) {

   722       new Ajax.Request(

   723         this.url, Object.extend({

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

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

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

   727           asynchronous:true,

   728           evalScripts:true

   729         }, this.options.ajaxOptions));

   730     } else  {

   731       new Ajax.Updater(

   732         { success: this.element,

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

   734           failure: null },

   735         this.url, Object.extend({

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

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

   738           onFailure: this.onFailure.bind(this)

   739         }, this.options.ajaxOptions));

   740     }

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

   742     if (arguments.length > 1) {

   743       Event.stop(arguments[0]);

   744     }

   745     return false;

   746   },

   747   onLoading: function() {

   748     this.saving = true;

   749     this.removeForm();

   750     this.leaveHover();

   751     this.showSaving();

   752   },

   753   showSaving: function() {

   754     this.oldInnerHTML = this.element.innerHTML;

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

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

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

   758     Element.show(this.element);

   759   },

   760   removeForm: function() {

   761     if(this.form) {

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

   763       this.form = null;

   764     }

   765   },

   766   enterHover: function() {

   767     if (this.saving) return;

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

   769     if (this.effect) {

   770       this.effect.cancel();

   771     }

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

   773   },

   774   leaveHover: function() {

   775     if (this.options.backgroundColor) {

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

   777     }

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

   779     if (this.saving) return;

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

   781       startcolor: this.options.highlightcolor,

   782       endcolor: this.options.highlightendcolor,

   783       restorecolor: this.originalBackground

   784     });

   785   },

   786   leaveEditMode: function() {

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

   788     this.removeForm();

   789     this.leaveHover();

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

   791     Element.show(this.element);

   792     if (this.options.externalControl) {

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

   794     }

   795     this.editing = false;

   796     this.saving = false;

   797     this.oldInnerHTML = null;

   798     this.onLeaveEditMode();

   799   },

   800   onComplete: function(transport) {

   801     this.leaveEditMode();

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

   803   },

   804   onEnterEditMode: function() {},

   805   onLeaveEditMode: function() {},

   806   dispose: function() {

   807     if (this.oldInnerHTML) {

   808       this.element.innerHTML = this.oldInnerHTML;

   809     }

   810     this.leaveEditMode();

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

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

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

   814     if (this.options.externalControl) {

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

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

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

   818     }

   819   }

   820 };

   822 Ajax.InPlaceCollectionEditor = Class.create();

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

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

   825   createEditField: function() {

   826     if (!this.cached_selectTag) {

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

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

   829       var optionTag;

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

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

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

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

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

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

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

   837         selectTag.appendChild(optionTag);

   838       }.bind(this));

   839       this.cached_selectTag = selectTag;

   840     }

   842     this.editField = this.cached_selectTag;

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

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

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

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

   847     }

   848   }

   849 });

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

   852 // but waits for delay after last key input

   853 // Ideal for live-search fields

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

   856 Form.Element.DelayedObserver.prototype = {

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

   858     this.delay     = delay || 0.5;

   859     this.element   = $(element);

   860     this.callback  = callback;

   861     this.timer     = null;

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

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

   864   },

   865   delayedListener: function(event) {

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

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

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

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

   870   },

   871   onTimerEvent: function() {

   872     this.timer = null;

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

   874   }

   875 };

The Tor Browser / file revision

dom/tests/mochitest/ajax/scriptaculous/src/controls.js@a63d609f5ebe

dom/tests/mochitest/ajax/scriptaculous/src/controls.js