[Sommaire] [Imprimer]

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