]>
git.wh0rd.org - tt-rss.git/blob - scriptaculous/controls.js
1 // script.aculo.us controls.js v1.7.0, Fri Jan 19 19:16:36 CET 2007
3 // Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
4 // (c) 2005, 2006 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
5 // (c) 2005, 2006 Jon Tirsen (http://www.tirsen.com)
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.
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.
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 this.element
= $(element
);
47 this.update
= $(update
);
48 this.hasFocus
= false;
55 this.setOptions(options
);
57 this.options
= options
|| {};
59 this.options
.paramName
= this.options
.paramName
|| this.element
.name
;
60 this.options
.tokens
= this.options
.tokens
|| [];
61 this.options
.frequency
= this.options
.frequency
|| 0.4;
62 this.options
.minChars
= this.options
.minChars
|| 1;
63 this.options
.onShow
= this.options
.onShow
||
64 function(element
, update
){
65 if(!update
.style
.position
|| update
.style
.position
=='absolute') {
66 update
.style
.position
= 'absolute';
67 Position
.clone(element
, update
, {
69 offsetTop
: element
.offsetHeight
72 Effect
.Appear(update
,{duration
:0.15});
74 this.options
.onHide
= this.options
.onHide
||
75 function(element
, update
){ new Effect
.Fade(update
,{duration
:0.15}) };
77 if(typeof(this.options
.tokens
) == 'string')
78 this.options
.tokens
= new Array(this.options
.tokens
);
82 this.element
.setAttribute('autocomplete','off');
84 Element
.hide(this.update
);
86 Event
.observe(this.element
, "blur", this.onBlur
.bindAsEventListener(this));
87 Event
.observe(this.element
, "keypress", this.onKeyPress
.bindAsEventListener(this));
91 if(Element
.getStyle(this.update
, 'display')=='none') this.options
.onShow(this.element
, this.update
);
93 (navigator
.appVersion
.indexOf('MSIE')>0) &&
94 (navigator
.userAgent
.indexOf('Opera')<0) &&
95 (Element
.getStyle(this.update
, 'position')=='absolute')) {
96 new Insertion
.After(this.update
,
97 '<iframe id="' + this.update
.id
+ '_iefix" '+
98 'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
99 'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
100 this.iefix
= $(this.update
.id
+'_iefix');
102 if(this.iefix
) setTimeout(this.fixIEOverlapping
.bind(this), 50);
105 fixIEOverlapping: function() {
106 Position
.clone(this.update
, this.iefix
, {setTop
:(!this.update
.style
.height
)});
107 this.iefix
.style
.zIndex
= 1;
108 this.update
.style
.zIndex
= 2;
109 Element
.show(this.iefix
);
113 this.stopIndicator();
114 if(Element
.getStyle(this.update
, 'display')!='none') this.options
.onHide(this.element
, this.update
);
115 if(this.iefix
) Element
.hide(this.iefix
);
118 startIndicator: function() {
119 if(this.options
.indicator
) Element
.show(this.options
.indicator
);
122 stopIndicator: function() {
123 if(this.options
.indicator
) Element
.hide(this.options
.indicator
);
126 onKeyPress: function(event
) {
128 switch(event
.keyCode
) {
130 case Event
.KEY_RETURN
:
139 case Event
.KEY_RIGHT
:
144 if(navigator
.appVersion
.indexOf('AppleWebKit')>0) Event
.stop(event
);
149 if(navigator
.appVersion
.indexOf('AppleWebKit')>0) Event
.stop(event
);
153 if(event
.keyCode
==Event
.KEY_TAB
|| event
.keyCode
==Event
.KEY_RETURN
||
154 (navigator
.appVersion
.indexOf('AppleWebKit') > 0 && event
.keyCode
== 0)) return;
157 this.hasFocus
= true;
159 if(this.observer
) clearTimeout(this.observer
);
161 setTimeout(this.onObserverEvent
.bind(this), this.options
.frequency
*1000);
164 activate: function() {
165 this.changed
= false;
166 this.hasFocus
= true;
167 this.getUpdatedChoices();
170 onHover: function(event
) {
171 var element
= Event
.findElement(event
, 'LI');
172 if(this.index
!= element
.autocompleteIndex
)
174 this.index
= element
.autocompleteIndex
;
180 onClick: function(event
) {
181 var element
= Event
.findElement(event
, 'LI');
182 this.index
= element
.autocompleteIndex
;
187 onBlur: function(event
) {
188 // needed to make click events working
189 setTimeout(this.hide
.bind(this), 250);
190 this.hasFocus
= false;
195 if(this.entryCount
> 0) {
196 for (var i
= 0; i
< this.entryCount
; i
++)
198 Element
.addClassName(this.getEntry(i
),"selected") :
199 Element
.removeClassName(this.getEntry(i
),"selected");
211 markPrevious: function() {
212 if(this.index
> 0) this.index
--
213 else this.index
= this.entryCount
-1;
214 this.getEntry(this.index
).scrollIntoView(true);
217 markNext: function() {
218 if(this.index
< this.entryCount
-1) this.index
++
220 this.getEntry(this.index
).scrollIntoView(false);
223 getEntry: function(index
) {
224 return this.update
.firstChild
.childNodes
[index
];
227 getCurrentEntry: function() {
228 return this.getEntry(this.index
);
231 selectEntry: function() {
233 this.updateElement(this.getCurrentEntry());
236 updateElement: function(selectedElement
) {
237 if (this.options
.updateElement
) {
238 this.options
.updateElement(selectedElement
);
242 if (this.options
.select
) {
243 var nodes
= document
.getElementsByClassName(this.options
.select
, selectedElement
) || [];
244 if(nodes
.length
>0) value
= Element
.collectTextNodes(nodes
[0], this.options
.select
);
246 value
= Element
.collectTextNodesIgnoreClass(selectedElement
, 'informal');
248 var lastTokenPos
= this.findLastToken();
249 if (lastTokenPos
!= -1) {
250 var newValue
= this.element
.value
.substr(0, lastTokenPos
+ 1);
251 var whitespace
= this.element
.value
.substr(lastTokenPos
+ 1).match(/^\s+/);
253 newValue
+= whitespace
[0];
254 this.element
.value
= newValue
+ value
;
256 this.element
.value
= value
;
258 this.element
.focus();
260 if (this.options
.afterUpdateElement
)
261 this.options
.afterUpdateElement(this.element
, selectedElement
);
264 updateChoices: function(choices
) {
265 if(!this.changed
&& this.hasFocus
) {
266 this.update
.innerHTML
= choices
;
267 Element
.cleanWhitespace(this.update
);
268 Element
.cleanWhitespace(this.update
.down());
270 if(this.update
.firstChild
&& this.update
.down().childNodes
) {
272 this.update
.down().childNodes
.length
;
273 for (var i
= 0; i
< this.entryCount
; i
++) {
274 var entry
= this.getEntry(i
);
275 entry
.autocompleteIndex
= i
;
276 this.addObservers(entry
);
282 this.stopIndicator();
285 if(this.entryCount
==1 && this.options
.autoSelect
) {
294 addObservers: function(element
) {
295 Event
.observe(element
, "mouseover", this.onHover
.bindAsEventListener(this));
296 Event
.observe(element
, "click", this.onClick
.bindAsEventListener(this));
299 onObserverEvent: function() {
300 this.changed
= false;
301 if(this.getToken().length
>=this.options
.minChars
) {
302 this.startIndicator();
303 this.getUpdatedChoices();
310 getToken: function() {
311 var tokenPos
= this.findLastToken();
313 var ret
= this.element
.value
.substr(tokenPos
+ 1).replace(/^\s+/,'').replace(/\s+$/,'');
315 var ret
= this.element
.value
;
317 return /\n/.test(ret
) ? '' : ret
;
320 findLastToken: function() {
321 var lastTokenPos
= -1;
323 for (var i
=0; i
<this.options
.tokens
.length
; i
++) {
324 var thisTokenPos
= this.element
.value
.lastIndexOf(this.options
.tokens
[i
]);
325 if (thisTokenPos
> lastTokenPos
)
326 lastTokenPos
= thisTokenPos
;
332 Ajax
.Autocompleter
= Class
.create();
333 Object
.extend(Object
.extend(Ajax
.Autocompleter
.prototype, Autocompleter
.Base
.prototype), {
334 initialize: function(element
, update
, url
, options
) {
335 this.baseInitialize(element
, update
, options
);
336 this.options
.asynchronous
= true;
337 this.options
.onComplete
= this.onComplete
.bind(this);
338 this.options
.defaultParams
= this.options
.parameters
|| null;
342 getUpdatedChoices: function() {
343 entry
= encodeURIComponent(this.options
.paramName
) + '=' +
344 encodeURIComponent(this.getToken());
346 this.options
.parameters
= this.options
.callback
?
347 this.options
.callback(this.element
, entry
) : entry
;
349 if(this.options
.defaultParams
)
350 this.options
.parameters
+= '&' + this.options
.defaultParams
;
352 new Ajax
.Request(this.url
, this.options
);
355 onComplete: function(request
) {
356 this.updateChoices(request
.responseText
);
361 // The local array autocompleter. Used when you'd prefer to
362 // inject an array of autocompletion options into the page, rather
363 // than sending out Ajax queries, which can be quite slow sometimes.
365 // The constructor takes four parameters. The first two are, as usual,
366 // the id of the monitored textbox, and id of the autocompletion menu.
367 // The third is the array you want to autocomplete from, and the fourth
368 // is the options block.
370 // Extra local autocompletion options:
371 // - choices - How many autocompletion choices to offer
373 // - partialSearch - If false, the autocompleter will match entered
374 // text only at the beginning of strings in the
375 // autocomplete array. Defaults to true, which will
376 // match text at the beginning of any *word* in the
377 // strings in the autocomplete array. If you want to
378 // search anywhere in the string, additionally set
379 // the option fullSearch to true (default: off).
381 // - fullSsearch - Search anywhere in autocomplete array strings.
383 // - partialChars - How many characters to enter before triggering
384 // a partial match (unlike minChars, which defines
385 // how many characters are required to do any match
386 // at all). Defaults to 2.
388 // - ignoreCase - Whether to ignore case when autocompleting.
391 // It's possible to pass in a custom function as the 'selector'
392 // option, if you prefer to write your own autocompletion logic.
393 // In that case, the other options above will not apply unless
396 Autocompleter
.Local
= Class
.create();
397 Autocompleter
.Local
.prototype = Object
.extend(new Autocompleter
.Base(), {
398 initialize: function(element
, update
, array
, options
) {
399 this.baseInitialize(element
, update
, options
);
400 this.options
.array
= array
;
403 getUpdatedChoices: function() {
404 this.updateChoices(this.options
.selector(this));
407 setOptions: function(options
) {
408 this.options
= Object
.extend({
414 selector: function(instance
) {
415 var ret
= []; // Beginning matches
416 var partial
= []; // Inside matches
417 var entry
= instance
.getToken();
420 for (var i
= 0; i
< instance
.options
.array
.length
&&
421 ret
.length
< instance
.options
.choices
; i
++) {
423 var elem
= instance
.options
.array
[i
];
424 var foundPos
= instance
.options
.ignoreCase
?
425 elem
.toLowerCase().indexOf(entry
.toLowerCase()) :
428 while (foundPos
!= -1) {
429 if (foundPos
== 0 && elem
.length
!= entry
.length
) {
430 ret
.push("<li><strong>" + elem
.substr(0, entry
.length
) + "</strong>" +
431 elem
.substr(entry
.length
) + "</li>");
433 } else if (entry
.length
>= instance
.options
.partialChars
&&
434 instance
.options
.partialSearch
&& foundPos
!= -1) {
435 if (instance
.options
.fullSearch
|| /\s/.test(elem
.substr(foundPos
-1,1))) {
436 partial
.push("<li>" + elem
.substr(0, foundPos
) + "<strong>" +
437 elem
.substr(foundPos
, entry
.length
) + "</strong>" + elem
.substr(
438 foundPos
+ entry
.length
) + "</li>");
443 foundPos
= instance
.options
.ignoreCase
?
444 elem
.toLowerCase().indexOf(entry
.toLowerCase(), foundPos
+ 1) :
445 elem
.indexOf(entry
, foundPos
+ 1);
450 ret
= ret
.concat(partial
.slice(0, instance
.options
.choices
- ret
.length
))
451 return "<ul>" + ret
.join('') + "</ul>";
457 // AJAX in-place editor
459 // see documentation on http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor
461 // Use this if you notice weird scrolling problems on some browsers,
462 // the DOM might be a bit confused when this gets called so do this
463 // waits 1 ms (with setTimeout) until it does the activation
464 Field
.scrollFreeActivate = function(field
) {
465 setTimeout(function() {
466 Field
.activate(field
);
470 Ajax
.InPlaceEditor
= Class
.create();
471 Ajax
.InPlaceEditor
.defaultHighlightColor
= "#FFFF99";
472 Ajax
.InPlaceEditor
.prototype = {
473 initialize: function(element
, url
, options
) {
475 this.element
= $(element
);
477 this.options
= Object
.extend({
482 cancelText
: "cancel",
483 savingText
: "Saving...",
484 clickToEditText
: "Click to edit",
487 onComplete: function(transport
, element
) {
488 new Effect
.Highlight(element
, {startcolor
: this.options
.highlightcolor
});
490 onFailure: function(transport
) {
491 alert("Error communicating with the server: " + transport
.responseText
.stripTags());
493 callback: function(form
) {
494 return Form
.serialize(form
);
496 handleLineBreaks
: true,
497 loadingText
: 'Loading...',
498 savingClassName
: 'inplaceeditor-saving',
499 loadingClassName
: 'inplaceeditor-loading',
500 formClassName
: 'inplaceeditor-form',
501 highlightcolor
: Ajax
.InPlaceEditor
.defaultHighlightColor
,
502 highlightendcolor
: "#FFFFFF",
503 externalControl
: null,
509 if(!this.options
.formId
&& this.element
.id
) {
510 this.options
.formId
= this.element
.id
+ "-inplaceeditor";
511 if ($(this.options
.formId
)) {
512 // there's already a form with that name, don't specify an id
513 this.options
.formId
= null;
517 if (this.options
.externalControl
) {
518 this.options
.externalControl
= $(this.options
.externalControl
);
521 this.originalBackground
= Element
.getStyle(this.element
, 'background-color');
522 if (!this.originalBackground
) {
523 this.originalBackground
= "transparent";
526 this.element
.title
= this.options
.clickToEditText
;
528 this.onclickListener
= this.enterEditMode
.bindAsEventListener(this);
529 this.mouseoverListener
= this.enterHover
.bindAsEventListener(this);
530 this.mouseoutListener
= this.leaveHover
.bindAsEventListener(this);
531 Event
.observe(this.element
, 'click', this.onclickListener
);
532 Event
.observe(this.element
, 'mouseover', this.mouseoverListener
);
533 Event
.observe(this.element
, 'mouseout', this.mouseoutListener
);
534 if (this.options
.externalControl
) {
535 Event
.observe(this.options
.externalControl
, 'click', this.onclickListener
);
536 Event
.observe(this.options
.externalControl
, 'mouseover', this.mouseoverListener
);
537 Event
.observe(this.options
.externalControl
, 'mouseout', this.mouseoutListener
);
540 enterEditMode: function(evt
) {
541 if (this.saving
) return;
542 if (this.editing
) return;
544 this.onEnterEditMode();
545 if (this.options
.externalControl
) {
546 Element
.hide(this.options
.externalControl
);
548 Element
.hide(this.element
);
550 this.element
.parentNode
.insertBefore(this.form
, this.element
);
551 if (!this.options
.loadTextURL
) Field
.scrollFreeActivate(this.editField
);
552 // stop the event to avoid a page refresh in Safari
558 createForm: function() {
559 this.form
= document
.createElement("form");
560 this.form
.id
= this.options
.formId
;
561 Element
.addClassName(this.form
, this.options
.formClassName
)
562 this.form
.onsubmit
= this.onSubmit
.bind(this);
564 this.createEditField();
566 if (this.options
.textarea
) {
567 var br
= document
.createElement("br");
568 this.form
.appendChild(br
);
571 if (this.options
.okButton
) {
572 okButton
= document
.createElement("input");
573 okButton
.type
= "submit";
574 okButton
.value
= this.options
.okText
;
575 okButton
.className
= 'editor_ok_button';
576 this.form
.appendChild(okButton
);
579 if (this.options
.cancelLink
) {
580 cancelLink
= document
.createElement("a");
581 cancelLink
.href
= "#";
582 cancelLink
.appendChild(document
.createTextNode(this.options
.cancelText
));
583 cancelLink
.onclick
= this.onclickCancel
.bind(this);
584 cancelLink
.className
= 'editor_cancel';
585 this.form
.appendChild(cancelLink
);
588 hasHTMLLineBreaks: function(string
) {
589 if (!this.options
.handleLineBreaks
) return false;
590 return string
.match(/<br/i) || string
.match(/<p>/i);
592 convertHTMLLineBreaks: function(string
) {
593 return string
.replace(/<br>/gi, "\n").replace(/<br\/>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<p>/gi, "");
595 createEditField: function() {
597 if(this.options
.loadTextURL
) {
598 text
= this.options
.loadingText
;
600 text
= this.getText();
605 if (this.options
.rows
== 1 && !this.hasHTMLLineBreaks(text
)) {
606 this.options
.textarea
= false;
607 var textField
= document
.createElement("input");
608 textField
.obj
= this;
609 textField
.type
= "text";
610 textField
.name
= this.options
.paramName
;
611 textField
.value
= text
;
612 textField
.style
.backgroundColor
= this.options
.highlightcolor
;
613 textField
.className
= 'editor_field';
614 var size
= this.options
.size
|| this.options
.cols
|| 0;
615 if (size
!= 0) textField
.size
= size
;
616 if (this.options
.submitOnBlur
)
617 textField
.onblur
= this.onSubmit
.bind(this);
618 this.editField
= textField
;
620 this.options
.textarea
= true;
621 var textArea
= document
.createElement("textarea");
623 textArea
.name
= this.options
.paramName
;
624 textArea
.value
= this.convertHTMLLineBreaks(text
);
625 textArea
.rows
= this.options
.rows
;
626 textArea
.cols
= this.options
.cols
|| 40;
627 textArea
.className
= 'editor_field';
628 if (this.options
.submitOnBlur
)
629 textArea
.onblur
= this.onSubmit
.bind(this);
630 this.editField
= textArea
;
633 if(this.options
.loadTextURL
) {
634 this.loadExternalText();
636 this.form
.appendChild(this.editField
);
638 getText: function() {
639 return this.element
.innerHTML
;
641 loadExternalText: function() {
642 Element
.addClassName(this.form
, this.options
.loadingClassName
);
643 this.editField
.disabled
= true;
645 this.options
.loadTextURL
,
648 onComplete
: this.onLoadedExternalText
.bind(this)
649 }, this.options
.ajaxOptions
)
652 onLoadedExternalText: function(transport
) {
653 Element
.removeClassName(this.form
, this.options
.loadingClassName
);
654 this.editField
.disabled
= false;
655 this.editField
.value
= transport
.responseText
.stripTags();
656 Field
.scrollFreeActivate(this.editField
);
658 onclickCancel: function() {
660 this.leaveEditMode();
663 onFailure: function(transport
) {
664 this.options
.onFailure(transport
);
665 if (this.oldInnerHTML
) {
666 this.element
.innerHTML
= this.oldInnerHTML
;
667 this.oldInnerHTML
= null;
671 onSubmit: function() {
672 // onLoading resets these so we need to save them away for the Ajax call
673 var form
= this.form
;
674 var value
= this.editField
.value
;
676 // do this first, sometimes the ajax call returns before we get a chance to switch on Saving...
677 // which means this will actually switch on Saving... *after* we've left edit mode causing Saving...
678 // to be displayed indefinitely
681 if (this.options
.evalScripts
) {
683 this.url
, Object
.extend({
684 parameters
: this.options
.callback(form
, value
),
685 onComplete
: this.onComplete
.bind(this),
686 onFailure
: this.onFailure
.bind(this),
689 }, this.options
.ajaxOptions
));
692 { success
: this.element
,
693 // don't update on failure (this could be an option)
695 this.url
, Object
.extend({
696 parameters
: this.options
.callback(form
, value
),
697 onComplete
: this.onComplete
.bind(this),
698 onFailure
: this.onFailure
.bind(this)
699 }, this.options
.ajaxOptions
));
701 // stop the event to avoid a page refresh in Safari
702 if (arguments
.length
> 1) {
703 Event
.stop(arguments
[0]);
707 onLoading: function() {
713 showSaving: function() {
714 this.oldInnerHTML
= this.element
.innerHTML
;
715 this.element
.innerHTML
= this.options
.savingText
;
716 Element
.addClassName(this.element
, this.options
.savingClassName
);
717 this.element
.style
.backgroundColor
= this.originalBackground
;
718 Element
.show(this.element
);
720 removeForm: function() {
722 if (this.form
.parentNode
) Element
.remove(this.form
);
726 enterHover: function() {
727 if (this.saving
) return;
728 this.element
.style
.backgroundColor
= this.options
.highlightcolor
;
730 this.effect
.cancel();
732 Element
.addClassName(this.element
, this.options
.hoverClassName
)
734 leaveHover: function() {
735 if (this.options
.backgroundColor
) {
736 this.element
.style
.backgroundColor
= this.oldBackground
;
738 Element
.removeClassName(this.element
, this.options
.hoverClassName
)
739 if (this.saving
) return;
740 this.effect
= new Effect
.Highlight(this.element
, {
741 startcolor
: this.options
.highlightcolor
,
742 endcolor
: this.options
.highlightendcolor
,
743 restorecolor
: this.originalBackground
746 leaveEditMode: function() {
747 Element
.removeClassName(this.element
, this.options
.savingClassName
);
750 this.element
.style
.backgroundColor
= this.originalBackground
;
751 Element
.show(this.element
);
752 if (this.options
.externalControl
) {
753 Element
.show(this.options
.externalControl
);
755 this.editing
= false;
757 this.oldInnerHTML
= null;
758 this.onLeaveEditMode();
760 onComplete: function(transport
) {
761 this.leaveEditMode();
762 this.options
.onComplete
.bind(this)(transport
, this.element
);
764 onEnterEditMode: function() {},
765 onLeaveEditMode: function() {},
766 dispose: function() {
767 if (this.oldInnerHTML
) {
768 this.element
.innerHTML
= this.oldInnerHTML
;
770 this.leaveEditMode();
771 Event
.stopObserving(this.element
, 'click', this.onclickListener
);
772 Event
.stopObserving(this.element
, 'mouseover', this.mouseoverListener
);
773 Event
.stopObserving(this.element
, 'mouseout', this.mouseoutListener
);
774 if (this.options
.externalControl
) {
775 Event
.stopObserving(this.options
.externalControl
, 'click', this.onclickListener
);
776 Event
.stopObserving(this.options
.externalControl
, 'mouseover', this.mouseoverListener
);
777 Event
.stopObserving(this.options
.externalControl
, 'mouseout', this.mouseoutListener
);
782 Ajax
.InPlaceCollectionEditor
= Class
.create();
783 Object
.extend(Ajax
.InPlaceCollectionEditor
.prototype, Ajax
.InPlaceEditor
.prototype);
784 Object
.extend(Ajax
.InPlaceCollectionEditor
.prototype, {
785 createEditField: function() {
786 if (!this.cached_selectTag
) {
787 var selectTag
= document
.createElement("select");
788 var collection
= this.options
.collection
|| [];
790 collection
.each(function(e
,i
) {
791 optionTag
= document
.createElement("option");
792 optionTag
.value
= (e
instanceof Array
) ? e
[0] : e
;
793 if((typeof this.options
.value
== 'undefined') &&
794 ((e
instanceof Array
) ? this.element
.innerHTML
== e
[1] : e
== optionTag
.value
)) optionTag
.selected
= true;
795 if(this.options
.value
==optionTag
.value
) optionTag
.selected
= true;
796 optionTag
.appendChild(document
.createTextNode((e
instanceof Array
) ? e
[1] : e
));
797 selectTag
.appendChild(optionTag
);
799 this.cached_selectTag
= selectTag
;
802 this.editField
= this.cached_selectTag
;
803 if(this.options
.loadTextURL
) this.loadExternalText();
804 this.form
.appendChild(this.editField
);
805 this.options
.callback = function(form
, value
) {
806 return "value=" + encodeURIComponent(value
);
811 // Delayed observer, like Form.Element.Observer,
812 // but waits for delay after last key input
813 // Ideal for live-search fields
815 Form
.Element
.DelayedObserver
= Class
.create();
816 Form
.Element
.DelayedObserver
.prototype = {
817 initialize: function(element
, delay
, callback
) {
818 this.delay
= delay
|| 0.5;
819 this.element
= $(element
);
820 this.callback
= callback
;
822 this.lastValue
= $F(this.element
);
823 Event
.observe(this.element
,'keyup',this.delayedListener
.bindAsEventListener(this));
825 delayedListener: function(event
) {
826 if(this.lastValue
== $F(this.element
)) return;
827 if(this.timer
) clearTimeout(this.timer
);
828 this.timer
= setTimeout(this.onTimerEvent
.bind(this), this.delay
* 1000);
829 this.lastValue
= $F(this.element
);
831 onTimerEvent: function() {
833 this.callback(this.element
, $F(this.element
));