Revision 05f13042
Added by Marc Dequènes over 13 years ago
- ID 05f13042d910b390b3eeb3123fcdfe209e155da3
public/javascripts/controls.js | ||
---|---|---|
// Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||
// (c) 2005-2008 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
|
||
// (c) 2005-2008 Jon Tirsen (http://www.tirsen.com)
|
||
// (c) 2005-2007 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
|
||
// (c) 2005-2007 Jon Tirsen (http://www.tirsen.com)
|
||
// Contributors:
|
||
// Richard Livsey
|
||
// Rahul Bhargava
|
||
// Rob Wills
|
||
//
|
||
//
|
||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||
|
||
// Autocompleter.Base handles all the autocompletion functionality
|
||
// Autocompleter.Base handles all the autocompletion functionality
|
||
// that's independent of the data source for autocompletion. This
|
||
// includes drawing the autocompletion menu, observing keyboard
|
||
// and mouse events, and similar.
|
||
//
|
||
// Specific autocompleters need to provide, at the very least,
|
||
// Specific autocompleters need to provide, at the very least,
|
||
// a getUpdatedChoices function that will be invoked every time
|
||
// the text inside the monitored textbox changes. This method
|
||
// the text inside the monitored textbox changes. This method
|
||
// should get the text for which to provide autocompletion by
|
||
// invoking this.getToken(), NOT by directly accessing
|
||
// this.element.value. This is to allow incremental tokenized
|
||
... | ... | |
// will incrementally autocomplete with a comma as the token.
|
||
// Additionally, ',' in the above example can be replaced with
|
||
// a token array, e.g. { tokens: [',', '\n'] } which
|
||
// enables autocompletion on multiple tokens. This is most
|
||
// useful when one of the tokens is \n (a newline), as it
|
||
// enables autocompletion on multiple tokens. This is most
|
||
// useful when one of the tokens is \n (a newline), as it
|
||
// allows smart autocompletion after linebreaks.
|
||
|
||
if(typeof Effect == 'undefined')
|
||
throw("controls.js requires including script.aculo.us' effects.js library");
|
||
|
||
var Autocompleter = { };
|
||
var Autocompleter = { }
|
||
Autocompleter.Base = Class.create({
|
||
baseInitialize: function(element, update, options) {
|
||
element = $(element);
|
||
this.element = element;
|
||
this.update = $(update);
|
||
this.hasFocus = false;
|
||
this.changed = false;
|
||
this.active = false;
|
||
this.index = 0;
|
||
element = $(element)
|
||
this.element = element;
|
||
this.update = $(update);
|
||
this.hasFocus = false;
|
||
this.changed = false;
|
||
this.active = false;
|
||
this.index = 0;
|
||
this.entryCount = 0;
|
||
this.oldElementValue = this.element.value;
|
||
|
||
... | ... | |
this.options.tokens = this.options.tokens || [];
|
||
this.options.frequency = this.options.frequency || 0.4;
|
||
this.options.minChars = this.options.minChars || 1;
|
||
this.options.onShow = this.options.onShow ||
|
||
function(element, update){
|
||
this.options.onShow = this.options.onShow ||
|
||
function(element, update){
|
||
if(!update.style.position || update.style.position=='absolute') {
|
||
update.style.position = 'absolute';
|
||
Position.clone(element, update, {
|
||
setHeight: false,
|
||
setHeight: false,
|
||
offsetTop: element.offsetHeight
|
||
});
|
||
}
|
||
Effect.Appear(update,{duration:0.15});
|
||
};
|
||
this.options.onHide = this.options.onHide ||
|
||
this.options.onHide = this.options.onHide ||
|
||
function(element, update){ new Effect.Fade(update,{duration:0.15}) };
|
||
|
||
if(typeof(this.options.tokens) == 'string')
|
||
if(typeof(this.options.tokens) == 'string')
|
||
this.options.tokens = new Array(this.options.tokens);
|
||
// Force carriage returns as token delimiters anyway
|
||
if (!this.options.tokens.include('\n'))
|
||
this.options.tokens.push('\n');
|
||
|
||
this.observer = null;
|
||
|
||
|
||
this.element.setAttribute('autocomplete','off');
|
||
|
||
Element.hide(this.update);
|
||
... | ... | |
|
||
show: function() {
|
||
if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
|
||
if(!this.iefix &&
|
||
if(!this.iefix &&
|
||
(Prototype.Browser.IE) &&
|
||
(Element.getStyle(this.update, 'position')=='absolute')) {
|
||
new Insertion.After(this.update,
|
||
new Insertion.After(this.update,
|
||
'<iframe id="' + this.update.id + '_iefix" '+
|
||
'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
|
||
'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
|
||
... | ... | |
}
|
||
if(this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);
|
||
},
|
||
|
||
|
||
fixIEOverlapping: function() {
|
||
Position.clone(this.update, this.iefix, {setTop:(!this.update.style.height)});
|
||
this.iefix.style.zIndex = 1;
|
||
... | ... | |
Event.stop(event);
|
||
return;
|
||
}
|
||
else
|
||
if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
|
||
else
|
||
if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
|
||
(Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;
|
||
|
||
this.changed = true;
|
||
this.hasFocus = true;
|
||
|
||
if(this.observer) clearTimeout(this.observer);
|
||
this.observer =
|
||
this.observer =
|
||
setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
|
||
},
|
||
|
||
... | ... | |
|
||
onHover: function(event) {
|
||
var element = Event.findElement(event, 'LI');
|
||
if(this.index != element.autocompleteIndex)
|
||
if(this.index != element.autocompleteIndex)
|
||
{
|
||
this.index = element.autocompleteIndex;
|
||
this.render();
|
||
}
|
||
Event.stop(event);
|
||
},
|
||
|
||
|
||
onClick: function(event) {
|
||
var element = Event.findElement(event, 'LI');
|
||
this.index = element.autocompleteIndex;
|
||
this.selectEntry();
|
||
this.hide();
|
||
},
|
||
|
||
|
||
onBlur: function(event) {
|
||
// needed to make click events working
|
||
setTimeout(this.hide.bind(this), 250);
|
||
this.hasFocus = false;
|
||
this.active = false;
|
||
},
|
||
|
||
this.active = false;
|
||
},
|
||
|
||
render: function() {
|
||
if(this.entryCount > 0) {
|
||
for (var i = 0; i < this.entryCount; i++)
|
||
this.index==i ?
|
||
Element.addClassName(this.getEntry(i),"selected") :
|
||
this.index==i ?
|
||
Element.addClassName(this.getEntry(i),"selected") :
|
||
Element.removeClassName(this.getEntry(i),"selected");
|
||
if(this.hasFocus) {
|
||
if(this.hasFocus) {
|
||
this.show();
|
||
this.active = true;
|
||
}
|
||
... | ... | |
this.hide();
|
||
}
|
||
},
|
||
|
||
|
||
markPrevious: function() {
|
||
if(this.index > 0) this.index--;
|
||
if(this.index > 0) this.index--
|
||
else this.index = this.entryCount-1;
|
||
this.getEntry(this.index).scrollIntoView(true);
|
||
},
|
||
|
||
|
||
markNext: function() {
|
||
if(this.index < this.entryCount-1) this.index++;
|
||
if(this.index < this.entryCount-1) this.index++
|
||
else this.index = 0;
|
||
this.getEntry(this.index).scrollIntoView(false);
|
||
},
|
||
|
||
|
||
getEntry: function(index) {
|
||
return this.update.firstChild.childNodes[index];
|
||
},
|
||
|
||
|
||
getCurrentEntry: function() {
|
||
return this.getEntry(this.index);
|
||
},
|
||
|
||
|
||
selectEntry: function() {
|
||
this.active = false;
|
||
this.updateElement(this.getCurrentEntry());
|
||
... | ... | |
if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
|
||
} else
|
||
value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
|
||
|
||
|
||
var bounds = this.getTokenBounds();
|
||
if (bounds[0] != -1) {
|
||
var newValue = this.element.value.substr(0, bounds[0]);
|
||
... | ... | |
}
|
||
this.oldElementValue = this.element.value;
|
||
this.element.focus();
|
||
|
||
|
||
if (this.options.afterUpdateElement)
|
||
this.options.afterUpdateElement(this.element, selectedElement);
|
||
},
|
||
... | ... | |
Element.cleanWhitespace(this.update.down());
|
||
|
||
if(this.update.firstChild && this.update.down().childNodes) {
|
||
this.entryCount =
|
||
this.entryCount =
|
||
this.update.down().childNodes.length;
|
||
for (var i = 0; i < this.entryCount; i++) {
|
||
var entry = this.getEntry(i);
|
||
entry.autocompleteIndex = i;
|
||
this.addObservers(entry);
|
||
}
|
||
} else {
|
||
} else {
|
||
this.entryCount = 0;
|
||
}
|
||
|
||
this.stopIndicator();
|
||
this.index = 0;
|
||
|
||
|
||
if(this.entryCount==1 && this.options.autoSelect) {
|
||
this.selectEntry();
|
||
this.hide();
|
||
... | ... | |
},
|
||
|
||
onObserverEvent: function() {
|
||
this.changed = false;
|
||
this.changed = false;
|
||
this.tokenBounds = null;
|
||
if(this.getToken().length>=this.options.minChars) {
|
||
this.getUpdatedChoices();
|
||
... | ... | |
|
||
getUpdatedChoices: function() {
|
||
this.startIndicator();
|
||
|
||
var entry = encodeURIComponent(this.options.paramName) + '=' +
|
||
|
||
var entry = encodeURIComponent(this.options.paramName) + '=' +
|
||
encodeURIComponent(this.getToken());
|
||
|
||
this.options.parameters = this.options.callback ?
|
||
this.options.callback(this.element, entry) : entry;
|
||
|
||
if(this.options.defaultParams)
|
||
if(this.options.defaultParams)
|
||
this.options.parameters += '&' + this.options.defaultParams;
|
||
|
||
|
||
new Ajax.Request(this.url, this.options);
|
||
},
|
||
|
||
... | ... | |
// - choices - How many autocompletion choices to offer
|
||
//
|
||
// - partialSearch - If false, the autocompleter will match entered
|
||
// text only at the beginning of strings in the
|
||
// text only at the beginning of strings in the
|
||
// autocomplete array. Defaults to true, which will
|
||
// match text at the beginning of any *word* in the
|
||
// strings in the autocomplete array. If you want to
|
||
... | ... | |
// - ignoreCase - Whether to ignore case when autocompleting.
|
||
// Defaults to true.
|
||
//
|
||
// It's possible to pass in a custom function as the 'selector'
|
||
// It's possible to pass in a custom function as the 'selector'
|
||
// option, if you prefer to write your own autocompletion logic.
|
||
// In that case, the other options above will not apply unless
|
||
// you support them.
|
||
... | ... | |
var entry = instance.getToken();
|
||
var count = 0;
|
||
|
||
for (var i = 0; i < instance.options.array.length &&
|
||
ret.length < instance.options.choices ; i++) {
|
||
for (var i = 0; i < instance.options.array.length &&
|
||
ret.length < instance.options.choices ; i++) {
|
||
|
||
var elem = instance.options.array[i];
|
||
var foundPos = instance.options.ignoreCase ?
|
||
elem.toLowerCase().indexOf(entry.toLowerCase()) :
|
||
var foundPos = instance.options.ignoreCase ?
|
||
elem.toLowerCase().indexOf(entry.toLowerCase()) :
|
||
elem.indexOf(entry);
|
||
|
||
while (foundPos != -1) {
|
||
if (foundPos == 0 && elem.length != entry.length) {
|
||
ret.push("<li><strong>" + elem.substr(0, entry.length) + "</strong>" +
|
||
if (foundPos == 0 && elem.length != entry.length) {
|
||
ret.push("<li><strong>" + elem.substr(0, entry.length) + "</strong>" +
|
||
elem.substr(entry.length) + "</li>");
|
||
break;
|
||
} else if (entry.length >= instance.options.partialChars &&
|
||
} else if (entry.length >= instance.options.partialChars &&
|
||
instance.options.partialSearch && foundPos != -1) {
|
||
if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos-1,1))) {
|
||
partial.push("<li>" + elem.substr(0, foundPos) + "<strong>" +
|
||
... | ... | |
}
|
||
}
|
||
|
||
foundPos = instance.options.ignoreCase ?
|
||
elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
|
||
foundPos = instance.options.ignoreCase ?
|
||
elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
|
||
elem.indexOf(entry, foundPos + 1);
|
||
|
||
}
|
||
}
|
||
if (partial.length)
|
||
ret = ret.concat(partial.slice(0, instance.options.choices - ret.length));
|
||
ret = ret.concat(partial.slice(0, instance.options.choices - ret.length))
|
||
return "<ul>" + ret.join('') + "</ul>";
|
||
}
|
||
}, options || { });
|
||
... | ... | |
setTimeout(function() {
|
||
Field.activate(field);
|
||
}, 1);
|
||
};
|
||
}
|
||
|
||
Ajax.InPlaceEditor = Class.create({
|
||
initialize: function(element, url, options) {
|
||
... | ... | |
this.triggerCallback('onEnterHover');
|
||
},
|
||
getText: function() {
|
||
return this.element.innerHTML.unescapeHTML();
|
||
return this.element.innerHTML;
|
||
},
|
||
handleAJAXFailure: function(transport) {
|
||
this.triggerCallback('onFailure', transport);
|
||
... | ... | |
onSuccess: function(transport) {
|
||
var js = transport.responseText.strip();
|
||
if (!/^\[.*\]$/.test(js)) // TODO: improve sanity check
|
||
throw('Server returned an invalid collection representation.');
|
||
throw 'Server returned an invalid collection representation.';
|
||
this._collection = eval(js);
|
||
this.checkForExternalText();
|
||
}.bind(this),
|
||
... | ... | |
loadingCollectionText: 'Loading options...'
|
||
};
|
||
|
||
// Delayed observer, like Form.Element.Observer,
|
||
// Delayed observer, like Form.Element.Observer,
|
||
// but waits for delay after last key input
|
||
// Ideal for live-search fields
|
||
|
||
... | ... | |
this.element = $(element);
|
||
this.callback = callback;
|
||
this.timer = null;
|
||
this.lastValue = $F(this.element);
|
||
this.lastValue = $F(this.element);
|
||
Event.observe(this.element,'keyup',this.delayedListener.bindAsEventListener(this));
|
||
},
|
||
delayedListener: function(event) {
|
||
... | ... | |
this.timer = null;
|
||
this.callback(this.element, $F(this.element));
|
||
}
|
||
});
|
||
});
|
Also available in: Unified diff
[evol] migration to libgettext-ruby 2.1.0 and split rails 2.3.5, step #1