some time ago I detected the Mochi-ized Autocompleter within
MochiKit.svn.
I learned from the mailinglist that it was there by accident...
As I needed an Autocompleter, I scratched my itch and made it work.
The main changes where:
1) MochiKit.Position.clone(element, update, {setHeight: false,
MochiKit.Position. at least in the actual MochiKit Version does not
care about "setHeight" in Options. So I rewrote that Position Cloning
by hand within Controls.
2) //MochiKit.Signal.connect(this.element, 'onkeypress', this,
this.onKeyPress, this);
MochiKit.Signal.connect(this.element, 'onkeydown', this,
this.onKeyPress, this);
"onkeypress" does not provide eventes for "Return" and "Tab" and
"Cursor down / up..."; i changed the connect
3) within onKeyPress I had to fix some MochiKit.Event.stop() to
event.stop(), and also had to update some of the Names of Keys
4) Within the scriptaculous-baseversion there was Autocompleter.Base,
Autocompleter.Local and Ajax.Autocompleter. I harmonized that to have
Autocompleter.Ajax instead of Ajax.Autocompleter
a .diff against svn is available on request; and the changed controls
for people googling it is here:
/
*--------------------------------------------------------------------------------------------------------------------------------
*/
/***
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://
mir.aculo.us)
(c) 2005 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
(c) 2005 Jon Tirsen (http://www.tirsen.com)
Contributors:
Richard Livsey
Rahul Bhargava
Rob Wills
Mochi-ized By Thomas Herve ([EMAIL PROTECTED])
See scriptaculous.js for full license.
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,
a getUpdatedChoices function that will be invoked every time
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
autocompletion. Specific auto-completion logic (AJAX, etc)
belongs in getUpdatedChoices.
Tokenized incremental autocompletion is enabled automatically
when an autocompleter is instantiated with the 'tokens' option
in the options parameter, e.g.:
new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });
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
allows smart autocompletion after linebreaks.
***/
MochiKit.Base.update(MochiKit.Base, {
ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)',
/** @id MochiKit.Base.stripScripts */
stripScripts: function (str) {
return str.replace(new RegExp(MochiKit.Base.ScriptFragment,
'img'), '');
},
/** @id MochiKit.Base.stripTags */
stripTags: function(str) {
return str.replace(/<\/?[^>]+>/gi, '');
},
/** @id MochiKit.Base.extractScripts */
extractScripts: function (str) {
var matchAll = new RegExp(MochiKit.Base.ScriptFragment,
'img');
var matchOne = new RegExp(MochiKit.Base.ScriptFragment, 'im');
return MochiKit.Base.map(function (scriptTag) {
return (scriptTag.match(matchOne) || ['', ''])[1];
}, str.match(matchAll) || []);
},
/** @id MochiKit.Base.evalScripts */
evalScripts: function (str) {
return MochiKit.Base.map(function (scr) {
eval(scr);
}, MochiKit.Base.extractScripts(str));
}
});
MochiKit.Form = {
/** @id MochiKit.Form.serialize */
serialize: function (form) {
var elements = MochiKit.Form.getElements(form);
var queryComponents = [];
for (var i = 0; i < elements.length; i++) {
var queryComponent =
MochiKit.Form.serializeElement(elements[i]);
if (queryComponent) {
queryComponents.push(queryComponent);
}
}
return queryComponents.join('&');
},
/** @id MochiKit.Form.getElements */
getElements: function (form) {
form = MochiKit.DOM.getElement(form);
var elements = [];
for (tagName in MochiKit.Form.Serializers) {
var tagElements = form.getElementsByTagName(tagName);
for (var j = 0; j < tagElements.length; j++) {
elements.push(tagElements[j]);
}
}
return elements;
},
/** @id MochiKit.Form.serializeElement */
serializeElement: function (element) {
element = MochiKit.DOM.getElement(element);
var method = element.tagName.toLowerCase();
var parameter = MochiKit.Form.Serializers[method](element);
if (parameter) {
var key = encodeURIComponent(parameter[0]);
if (key.length === 0) {
return;
}
if (!(parameter[1] instanceof Array)) {
parameter[1] = [parameter[1]];
}
return parameter[1].map(function (value) {
return key + '=' + encodeURIComponent(value);
}).join('&');
}
}
};
MochiKit.Form.Serializers = {
/** @id MochiKit.Form.Serializers.input */
input: function (element) {
switch (element.type.toLowerCase()) {
case 'submit':
case 'hidden':
case 'password':
case 'text':
return MochiKit.Form.Serializers.textarea(element);
case 'checkbox':
case 'radio':
return
MochiKit.Form.Serializers.inputSelector(element);
}
return false;
},
/** @id MochiKit.Form.Serializers.inputSelector */
inputSelector: function (element) {
if (element.checked) {
return [element.name, element.value];
}
},
/** @id MochiKit.Form.Serializers.textarea */
textarea: function (element) {
return [element.name, element.value];
},
/** @id MochiKit.Form.Serializers.select */
select: function (element) {
return MochiKit.Form.Serializers[element.type == 'select-
one' ?
'selectOne' : 'selectMany'](element);
},
/** @id MochiKit.Form.Serializers.selectOne */
selectOne: function (element) {
var value = '', opt, index = element.selectedIndex;
if (index >= 0) {
opt = element.options[index];
value = opt.value;
if (!value && !('value' in opt)) {
value = opt.text;
}
}
return [element.name, value];
},
/** @id MochiKit.Form.Serializers.selectMany */
selectMany: function (element) {
var value = [];
for (var i = 0; i < element.length; i++) {
var opt = element.options[i];
if (opt.selected) {
var optValue = opt.value;
if (!optValue && !('value' in opt)) {
optValue = opt.text;
}
value.push(optValue);
}
}
return [element.name, value];
}
};
/** @id Ajax */
var Ajax = {
activeRequestCount: 0
};
Ajax.Responders = {
responders: [],
/** @id Ajax.Responders.register */
register: function (responderToAdd) {
if (MochiKit.Base.find(this.responders, responderToAdd) == -1)
{
this.responders.push(responderToAdd);
}
},
/** @id Ajax.Responders.unregister */
unregister: function (responderToRemove) {
this.responders = this.responders.without(responderToRemove);
},
/** @id Ajax.Responders.dispatch */
dispatch: function (callback, request, transport, json) {
MochiKit.Iter.forEach(this.responders, function (responder) {
if (responder[callback] &&
typeof(responder[callback]) == 'function') {
try {
responder[callback].apply(responder, [request,
transport, json]);
} catch (e) {}
}
});
}
};
Ajax.Responders.register({
/** @id Ajax.Responders.onCreate */
onCreate: function () {
Ajax.activeRequestCount++;
},
/** @id Ajax.Responders.onComplete */
onComplete: function () {
Ajax.activeRequestCount--;
}
});
/** @id Ajax.Base */
Ajax.Base = function () {};
Ajax.Base.prototype = {
/** @id Ajax.Base.prototype.setOptions */
setOptions: function (options) {
this.options = {
method: 'post',
asynchronous: true,
parameters: ''
}
MochiKit.Base.update(this.options, options || {});
},
/** @id Ajax.Base.prototype.responseIsSuccess */
responseIsSuccess: function () {
return this.transport.status == undefined
|| this.transport.status === 0
|| (this.transport.status >= 200 && this.transport.status
< 300);
},
/** @id Ajax.Base.prototype.responseIsFailure */
responseIsFailure: function () {
return !this.responseIsSuccess();
}
};
/** @id Ajax.Request */
Ajax.Request = function (url, options) {
this.__init__(url, options);
};
/** @id Ajax.Events */
Ajax.Request.Events = ['Uninitialized', 'Loading', 'Loaded',
'Interactive', 'Complete'];
MochiKit.Base.update(Ajax.Request.prototype, Ajax.Base.prototype);
MochiKit.Base.update(Ajax.Request.prototype, {
__init__: function (url, options) {
this.transport = MochiKit.Async.getXMLHttpRequest();
this.setOptions(options);
this.request(url);
},
/** @id Ajax.Request.prototype.request */
request: function (url) {
var parameters = this.options.parameters || '';
if (parameters.length > 0){
parameters += '&_=';
}
try {
this.url = url;
if (this.options.method == 'get' && parameters.length > 0)
{
this.url += (this.url.match(/\?/) ? '&' : '?') +
parameters;
}
Ajax.Responders.dispatch('onCreate', this,
this.transport);
this.transport.open(this.options.method, this.url,
this.options.asynchronous);
if (this.options.asynchronous) {
this.transport.onreadystatechange =
MochiKit.Base.bind(this.onStateChange, this);
setTimeout(MochiKit.Base.bind(function () {
this.respondToReadyState(1);
}, this), 10);
}
this.setRequestHeaders();
var body = this.options.postBody ? this.options.postBody :
parameters;
this.transport.send(this.options.method == 'post' ? body :
null);
} catch (e) {
this.dispatchException(e);
}
},
/** @id Ajax.Request.prototype.setRequestHeaders */
setRequestHeaders: function () {
var requestHeaders = ['X-Requested-With', 'XMLHttpRequest'];
if (this.options.method == 'post') {
requestHeaders.push('Content-type',
'application/x-www-form-urlencoded');
/* Force 'Connection: close' for Mozilla browsers to work
around
* a bug where XMLHttpRequest sends an incorrect Content-
length
* header. See Mozilla Bugzilla #246651.
*/
if (this.transport.overrideMimeType) {
requestHeaders.push('Connection', 'close');
}
}
if (this.options.requestHeaders) {
requestHeaders.push.apply(requestHeaders,
this.options.requestHeaders);
}
for (var i = 0; i < requestHeaders.length; i += 2) {
this.transport.setRequestHeader(requestHeaders[i],
requestHeaders[i+1]);
}
},
/** @id Ajax.Request.prototype.onStateChange */
onStateChange: function () {
var readyState = this.transport.readyState;
if (readyState != 1) {
this.respondToReadyState(this.transport.readyState);
}
},
/** @id Ajax.Request.prototype.header */
header: function (name) {
try {
return this.transport.getResponseHeader(name);
} catch (e) {}
},
/** @id Ajax.Request.prototype.evalJSON */
evalJSON: function () {
try {
return eval(this.header('X-JSON'));
} catch (e) {}
},
/** @id Ajax.Request.prototype.evalResponse */
evalResponse: function () {
try {
return eval(this.transport.responseText);
} catch (e) {
this.dispatchException(e);
}
},
/** @id Ajax.Request.prototype.respondToReadyState */
respondToReadyState: function (readyState) {
var event = Ajax.Request.Events[readyState];
var transport = this.transport, json = this.evalJSON();
if (event == 'Complete') {
try {
(this.options['on' + this.transport.status]
|| this.options['on' + (this.responseIsSuccess() ?
'Success' : 'Failure')]
|| MochiKit.Base.noop)(transport, json);
} catch (e) {
this.dispatchException(e);
}
if ((this.header('Content-type') || '').match(/^text\/
javascript/i)) {
this.evalResponse();
}
}
try {
(this.options['on' + event] || MochiKit.Base.noop)
(transport, json);
Ajax.Responders.dispatch('on' + event, this, transport,
json);
} catch (e) {
this.dispatchException(e);
}
/* Avoid memory leak in MSIE: clean up the oncomplete event
handler */
if (event == 'Complete') {
this.transport.onreadystatechange = MochiKit.Base.noop;
}
},
/** @id Ajax.Request.prototype.dispatchException */
dispatchException: function (exception) {
(this.options.onException || MochiKit.Base.noop)(this,
exception);
Ajax.Responders.dispatch('onException', this, exception);
}
});
/** @id Ajax.Updater */
Ajax.Updater = function (container, url, options) {
this.__init__(container, url, options);
};
MochiKit.Base.update(Ajax.Updater.prototype, Ajax.Request.prototype);
MochiKit.Base.update(Ajax.Updater.prototype, {
__init__: function (container, url, options) {
this.containers = {
success: container.success ?
MochiKit.DOM.getElement(container.success) :
MochiKit.DOM.getElement(container),
failure: container.failure ?
MochiKit.DOM.getElement(container.failure) :
(container.success ? null :
MochiKit.DOM.getElement(container))
}
this.transport = MochiKit.Async.getXMLHttpRequest();
this.setOptions(options);
var onComplete = this.options.onComplete ||
MochiKit.Base.noop;
this.options.onComplete = MochiKit.Base.bind(function
(transport, object) {
this.updateContent();
onComplete(transport, object);
}, this);
this.request(url);
},
/** @id Ajax.Updater.prototype.updateContent */
updateContent: function () {
var receiver = this.responseIsSuccess() ?
this.containers.success : this.containers.failure;
var response = this.transport.responseText;
if (!this.options.evalScripts) {
response = MochiKit.Base.stripScripts(response);
}
if (receiver) {
if (this.options.insertion) {
new this.options.insertion(receiver, response);
} else {
MochiKit.DOM.getElement(receiver).innerHTML =
MochiKit.Base.stripScripts(response);
setTimeout(function () {
MochiKit.Base.evalScripts(response);
}, 10);
}
}
if (this.responseIsSuccess()) {
if (this.onComplete) {
setTimeout(MochiKit.Base.bind(this.onComplete, this),
10);
}
}
}
});
/** @id Field */
var Field = {
/** @id clear */
clear: function () {
for (var i = 0; i < arguments.length; i++) {
MochiKit.DOM.getElement(arguments[i]).value = '';
}
},
/** @id focus */
focus: function (element) {
MochiKit.DOM.getElement(element).focus();
},
/** @id present */
present: function () {
for (var i = 0; i < arguments.length; i++) {
if (MochiKit.DOM.getElement(arguments[i]).value == '') {
return false;
}
}
return true;
},
/** @id select */
select: function (element) {
MochiKit.DOM.getElement(element).select();
},
/** @id activate */
activate: function (element) {
element = MochiKit.DOM.getElement(element);
element.focus();
if (element.select) {
element.select();
}
},
/** @id scrollFreeActivate */
scrollFreeActivate: function (field) {
setTimeout(function () {
Field.activate(field);
}, 1);
}
};
/** @id Autocompleter */
var Autocompleter = {};
/** @id Autocompleter.Base */
Autocompleter.Base = function () {};
Autocompleter.Base.prototype = {
/** @id Autocompleter.Base.prototype.baseInitialize */
baseInitialize: function (element, update, options) {
this.element = MochiKit.DOM.getElement(element);
this.update = MochiKit.DOM.getElement(update);
this.hasFocus = false;
this.changed = false;
this.active = false;
this.index = 0;
this.entryCount = 0;
if (this.setOptions) {
this.setOptions(options);
}
else {
this.options = options || {};
}
this.options.paramName = this.options.paramName ||
this.element.name;
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) {
if (!update.style.position || update.style.position ==
'absolute') {
update.style.position = 'absolute';
// Position.Clone does NOT provide options ->
resizing done manually
var
updpos=MochiKit.Style.getElementPosition(element);
var
upddim=MochiKit.Style.getElementDimensions(element);
updpos["y"]=updpos["y"]+upddim["h"];
upddim["h"]=null;
MochiKit.Style.setElementPosition(update,updpos);
MochiKit.Style.setElementDimensions(update,upddim);
}
MochiKit.Visual.appear(update, {duration:0.15});
};
this.options.onHide = this.options.onHide || function
(element, update) {
MochiKit.Visual.fade(update, {duration: 0.15});
};
if (typeof(this.options.tokens) == 'string') {
this.options.tokens = new Array(this.options.tokens);
}
this.observer = null;
this.element.setAttribute('autocomplete', 'off');
MochiKit.Style.hideElement(this.update);
MochiKit.Signal.connect(this.element, 'onblur', this,
this.onBlur);
//MochiKit.Signal.connect(this.element, 'onkeypress', this,
this.onKeyPress, this);
MochiKit.Signal.connect(this.element, 'onkeydown', this,
this.onKeyPress, this);
},
/** @id Autocompleter.Base.prototype.show */
show: function () {
if (MochiKit.Style.getStyle(this.update, 'display') == 'none')
{
this.options.onShow(this.element, this.update);
}
if (!this.iefix && /MSIE/.test(navigator.userAgent &&
(MochiKit.Style.getStyle(this.update, 'position') ==
'absolute'))) {
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>');
this.iefix = MochiKit.DOM.getElement(this.update.id +
'_iefix');
}
if (this.iefix) {
setTimeout(MochiKit.Base.bind(this.fixIEOverlapping,
this), 50);
}
},
/** @id Autocompleter.Base.prototype.fixIEOverlapping */
fixIEOverlapping: function () {
MochiKit.Position.clone(this.update, this.iefix);
this.iefix.style.zIndex = 1;
this.update.style.zIndex = 2;
MochiKit.Style.showElement(this.iefix);
},
/** @id Autocompleter.Base.prototype.hide */
hide: function () {
this.stopIndicator();
if (MochiKit.Style.getStyle(this.update, 'display') != 'none')
{
this.options.onHide(this.element, this.update);
}
if (this.iefix) {
MochiKit.Style.hideElement(this.iefix);
}
},
/** @id Autocompleter.Base.prototype.startIndicator */
startIndicator: function () {
if (this.options.indicator) {
MochiKit.Style.showElement(this.options.indicator);
}
},
/** @id Autocompleter.Base.prototype.stopIndicator */
stopIndicator: function () {
if (this.options.indicator) {
MochiKit.Style.hideElement(this.options.indicator);
}
},
/** @id Autocompleter.Base.prototype.onKeyPress */
onKeyPress: function (event) {
if (this.active) {
//log("event.key()="+event.key()
+"event.key().string"+event.key().string);
if (event.key().string == "KEY_TAB" || event.key().string
== "KEY_RETURN" || event.key().string == "KEY_ENTER") {
this.selectEntry();
event.stop();
} else if (event.key().string == "KEY_ESCAPE") {
this.hide();
this.active = false;
event.stop();
return;
} else if (event.key().string == "KEY_ARROW_LEFT" ||
event.key().string == "KEY_ARROW_RIGHT") {
return;
} else if (event.key().string == "KEY_ARROW_UP") {
this.markPrevious();
this.render();
if (/AppleWebKit'/.test(navigator.appVersion)) {
event.stop();
}
return;
} else if (event.key().string == "KEY_ARROW_DOWN") {
this.markNext();
this.render();
if (/AppleWebKit'/.test(navigator.appVersion)) {
event.stop();
}
return;
}
} else {
if (event.key().string == "KEY_TAB" || event.key().string
== "KEY_RETURN") {
return;
}
}
this.changed = true;
this.hasFocus = true;
if (this.observer) {
clearTimeout(this.observer);
}
this.observer =
setTimeout(MochiKit.Base.bind(this.onObserverEvent, this),
this.options.frequency*1000);
},
/** @id Autocompleter.Base.prototype.findElement */
findElement: function (event, tagName) {
var element = event.target(); // target() is a function, HAM
20070129
while (element.parentNode && (!element.tagName ||
(element.tagName.toUpperCase() !=
tagName.toUpperCase()))) {
element = element.parentNode;
}
return element;
},
/** @id Autocompleter.Base.prototype.hover */
onHover: function (event) {
var element = this.findElement(event, 'LI');
if (this.index != element.autocompleteIndex) {
this.index = element.autocompleteIndex;
this.render();
}
event.stop();
},
/** @id Autocompleter.Base.prototype.onClick */
onClick: function (event) {
var element = this.findElement(event, 'LI');
this.index = element.autocompleteIndex;
this.selectEntry();
this.hide();
},
/** @id Autocompleter.Base.prototype.onBlur */
onBlur: function (event) {
// needed to make click events working
setTimeout(MochiKit.Base.bind(this.hide, this), 250);
this.hasFocus = false;
this.active = false;
},
/** @id Autocompleter.Base.prototype.render */
render: function () {
if (this.entryCount > 0) {
for (var i = 0; i < this.entryCount; i++) {
this.index == i ?
MochiKit.DOM.addElementClass(this.getEntry(i),
'selected') :
MochiKit.DOM.removeElementClass(this.getEntry(i),
'selected');
}
if (this.hasFocus) {
this.show();
this.active = true;
}
} else {
this.active = false;
this.hide();
}
},
/** @id Autocompleter.Base.prototype.markPrevious */
markPrevious: function () {
if (this.index > 0) {
this.index--
} else {
this.index = this.entryCount-1;
}
},
/** @id Autocompleter.Base.prototype.markNext */
markNext: function () {
if (this.index < this.entryCount-1) {
this.index++
} else {
this.index = 0;
}
},
/** @id Autocompleter.Base.prototype.getEntry */
getEntry: function (index) {
return this.update.firstChild.childNodes[index];
},
/** @id Autocompleter.Base.prototype.getCurrentEntry */
getCurrentEntry: function () {
return this.getEntry(this.index);
},
/** @id Autocompleter.Base.prototype.selectEntry */
selectEntry: function () {
this.active = false;
this.updateElement(this.getCurrentEntry());
},
/** @id Autocompleter.Base.prototype.collectTextNodesIgnoreClass */
collectTextNodesIgnoreClass: function (node, className) {
var rval = [];
(function (node) {
var cn = node.childNodes;
if (cn) {
for (var i = 0; i < cn.length; i++) {
arguments.callee.call(this, cn[i]);
}
}
var nodeValue = node.nodeValue;
if (typeof(nodeValue) == 'string' && !
MochiKit.DOM.hasElementClass(node, className)) {
rval.push(nodeValue);
}
})(MochiKit.DOM.getElement(node));
return rval.join("");
},
/** @id Autocompleter.Base.prototype.updateElement */
updateElement: function (selectedElement) {
if (this.options.updateElement) {
this.options.updateElement(selectedElement);
return;
}
var value = '';
if (this.options.select) {
var nodes =
document.getElementsByClassName(this.options.select, selectedElement)
|| [];
if (nodes.length > 0) {
value = MochiKit.DOM.scrapeText(nodes[0]);
}
} else {
value = this.collectTextNodesIgnoreClass(selectedElement,
'informal');
}
var lastTokenPos = this.findLastToken();
if (lastTokenPos != -1) {
var newValue = this.element.value.substr(0, lastTokenPos +
1);
var whitespace = this.element.value.substr(lastTokenPos +
1).match(/^\s+/);
if (whitespace) {
newValue += whitespace[0];
}
this.element.value = newValue + value;
} else {
this.element.value = value;
}
this.element.focus();
if (this.options.afterUpdateElement) {
this.options.afterUpdateElement(this.element,
selectedElement);
}
},
/** @id Autocompleter.Base.prototype.updateChoices */
updateChoices: function (choices) {
if (!this.changed && this.hasFocus) {
this.update.innerHTML = choices;
var d = MochiKit.DOM;
d.removeEmptyTextNodes(this.update);
d.removeEmptyTextNodes(this.update.firstChild);
if (this.update.firstChild &&
this.update.firstChild.childNodes) {
this.entryCount =
this.update.firstChild.childNodes.length;
for (var i = 0; i < this.entryCount; i++) {
var entry = this.getEntry(i);
entry.autocompleteIndex = i;
this.addObservers(entry);
}
} else {
this.entryCount = 0;
}
this.stopIndicator();
this.index = 0;
this.render();
}
},
/** @id Autocompleter.Base.prototype.addObservers */
addObservers: function (element) {
MochiKit.Signal.connect(element, 'onmouseover', this,
this.onHover);
MochiKit.Signal.connect(element, 'onclick', this,
this.onClick);
},
/** @id Autocompleter.Base.prototype.onObserverEvent */
onObserverEvent: function () {
this.changed = false;
if (this.getToken().length >= this.options.minChars) {
this.startIndicator();
this.getUpdatedChoices();
} else {
this.active = false;
this.hide();
}
},
/** @id Autocompleter.Base.prototype.getToken */
getToken: function () {
var tokenPos = this.findLastToken();
if (tokenPos != -1) {
var ret = this.element.value.substr(tokenPos + 1).replace(/
^\s+/,'').replace(/\s+$/,'');
} else {
var ret = this.element.value;
}
return /\n/.test(ret) ? '' : ret;
},
/** @id Autocompleter.Base.prototype.findLastToken */
findLastToken: function () {
var lastTokenPos = -1;
for (var i = 0; i < this.options.tokens.length; i++) {
var thisTokenPos =
this.element.value.lastIndexOf(this.options.tokens[i]);
if (thisTokenPos > lastTokenPos) {
lastTokenPos = thisTokenPos;
}
}
return lastTokenPos;
}
}
/** @id Autocompleter.Ajax */
Autocompleter.Ajax = function (element, update, url, options) {
this.__init__(element, update, url, options);
};
MochiKit.Base.update(Autocompleter.Ajax.prototype,
Autocompleter.Base.prototype);
MochiKit.Base.update(Autocompleter.Ajax.prototype, {
__init__: function (element, update, url, options) {
this.baseInitialize(element, update, options);
this.options.asynchronous = true;
this.options.onComplete = MochiKit.Base.bind(this.onComplete,
this);
this.options.defaultParams = this.options.parameters || null;
this.url = url;
},
/** @id Autocompleter.Ajax.prototype.getUpdatedChoices */
getUpdatedChoices: function () {
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) {
this.options.parameters += '&' +
this.options.defaultParams;
}
new Ajax.Request(this.url, this.options);
},
/** @id Autocompleter.Ajax.prototype.onComplete */
onComplete: function (request) {
this.updateChoices(request.responseText);
}
});
/***
The local array autocompleter. Used when you'd prefer to
inject an array of autocompletion options into the page, rather
than sending out Ajax queries, which can be quite slow sometimes.
The constructor takes four parameters. The first two are, as usual,
the id of the monitored textbox, and id of the autocompletion menu.
The third is the array you want to autocomplete from, and the fourth
is the options block.
Extra local autocompletion 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
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
search anywhere in the string,
additionally set
the option fullSearch to true
(default: off).
- fullSsearch - Search anywhere in autocomplete array strings.
- partialChars - How many characters to enter before triggering
a partial match (unlike minChars,
which defines
how many characters are required
to do any match
at all). Defaults to 2.
- ignoreCase - Whether to ignore case when autocompleting.
Defaults to true.
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.
***/
/** @id Autocompleter.Local */
Autocompleter.Local = function (element, update, array, options) {
this.__init__(element, update, array, options);
};
MochiKit.Base.update(Autocompleter.Local.prototype,
Autocompleter.Base.prototype);
MochiKit.Base.update(Autocompleter.Local.prototype, {
__init__: function (element, update, array, options) {
this.baseInitialize(element, update, options);
this.options.array = array;
},
/** @id Autocompleter.Local.prototype.getUpdatedChoices */
getUpdatedChoices: function () {
this.updateChoices(this.options.selector(this));
},
/** @id Autocompleter.Local.prototype.setOptions */
setOptions: function (options) {
this.options = MochiKit.Base.update({
choices: 10,
partialSearch: true,
partialChars: 2,
ignoreCase: true,
fullSearch: false,
selector: function (instance) {
var ret = []; // Beginning matches
var partial = []; // Inside matches
var entry = instance.getToken();
var count = 0;
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()) :
elem.indexOf(entry);
while (foundPos != -1) {
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 &&
instance.options.partialSearch &&
foundPos != -1) {
if (instance.options.fullSearch || /
\s/.test(elem.substr(foundPos - 1, 1))) {
partial.push('<li>' + elem.substr(0,
foundPos) + '<strong>' +
elem.substr(foundPos,
entry.length) + '</strong>' + elem.substr(
foundPos + entry.length) + '</
li>');
break;
}
}
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))
}
return '<ul>' + ret.join('') + '</ul>';
}
}, options || {});
}
});
/***
AJAX in-place editor
see documentation on http://wiki.script.aculo.us/scriptaculous/show/
Ajax.InPlaceEditor
Use this if you notice weird scrolling problems on some browsers,
the DOM might be a bit confused when this gets called so do this
waits 1 ms (with setTimeout) until it does the activation
***/
/** @id Ajax.InPlaceEditor */
Ajax.InPlaceEditor = function (element, url, options) {
this.__init__(element, url, options);
};
/** @id Ajax.InPlaceEditor.defaultHighlightColor */
Ajax.InPlaceEditor.defaultHighlightColor = '#FFFF99';
Ajax.InPlaceEditor.prototype = {
__init__: function (element, url, options) {
this.url = url;
this.element = MochiKit.DOM.getElement(element);
this.options = MochiKit.Base.update({
okButton: true,
okText: 'ok',
cancelLink: true,
cancelText: 'cancel',
savingText: 'Saving...',
clickToEditText: 'Click to edit',
okText: 'ok',
rows: 1,
onComplete: function (transport, element) {
new MochiKit.Visual.Highlight(element, {startcolor:
this.options.highlightcolor});
},
onFailure: function (transport) {
alert('Error communicating with the server: ' +
MochiKit.Base.stripTags(transport.responseText));
},
callback: function (form) {
return MochiKit.DOM.formContents(form);
},
handleLineBreaks: true,
loadingText: 'Loading...',
savingClassName: 'inplaceeditor-saving',
loadingClassName: 'inplaceeditor-loading',
formClassName: 'inplaceeditor-form',
highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
highlightendcolor: '#FFFFFF',
externalControl: null,
submitOnBlur: false,
ajaxOptions: {}
}, options || {});
if (!this.options.formId && this.element.id) {
this.options.formId = this.element.id + '-inplaceeditor';
if (MochiKit.DOM.getElement(this.options.formId)) {
// there's already a form with that name, don't
specify an id
this.options.formId = null;
}
}
if (this.options.externalControl) {
this.options.externalControl =
MochiKit.DOM.getElement(this.options.externalControl);
}
this.originalBackground =
MochiKit.Style.getStyle(this.element, 'background-color');
if (!this.originalBackground) {
this.originalBackground = 'transparent';
}
this.element.title = this.options.clickToEditText;
this.onclickListener = MochiKit.Signal.connect(this.element,
'onclick', this, this.enterEditMode);
this.mouseoverListener = MochiKit.Signal.connect(this.element,
'onmouseover', this, this.enterHover);
this.mouseoutListener = MochiKit.Signal.connect(this.element,
'onmouseout', this, this.leaveHover);
if (this.options.externalControl) {
this.onclickListenerExternal =
MochiKit.Signal.connect(this.options.externalControl,
'onclick', this, this.enterEditMode);
this.mouseoverListenerExternal =
MochiKit.Signal.connect(this.options.externalControl,
'onmouseover', this, this.enterHover);
this.mouseoutListenerExternal =
MochiKit.Signal.connect(this.options.externalControl,
'onmouseout', this, this.leaveHover);
}
},
/** @id Ajax.InPlaceEditor.prototype.enterEditMode */
enterEditMode: function (evt) {
if (this.saving) {
return;
}
if (this.editing) {
return;
}
this.editing = true;
this.onEnterEditMode();
if (this.options.externalControl) {
MochiKit.Style.hideElement(this.options.externalControl);
}
MochiKit.Style.hideElement(this.element);
this.createForm();
this.element.parentNode.insertBefore(this.form, this.element);
Field.scrollFreeActivate(this.editField);
// stop the event to avoid a page refresh in Safari
if (evt) {
evt.stop();
}
return false;
},
/** @id Ajax.InPlaceEditor.prototype.createForm */
createForm: function () {
this.form = document.createElement('form');
this.form.id = this.options.formId;
MochiKit.DOM.addElementClass(this.form,
this.options.formClassName)
this.form.onsubmit = MochiKit.Base.bind(this.onSubmit, this);
this.createEditField();
if (this.options.textarea) {
var br = document.createElement('br');
this.form.appendChild(br);
}
if (this.options.okButton) {
okButton = document.createElement('input');
okButton.type = 'submit';
okButton.value = this.options.okText;
this.form.appendChild(okButton);
}
if (this.options.cancelLink) {
cancelLink = document.createElement('a');
cancelLink.href = '#';
cancelLink.appendChild(document.createTextNode(this.options.cancelText));
cancelLink.onclick =
MochiKit.Base.bind(this.onclickCancel, this);
this.form.appendChild(cancelLink);
}
},
/** @id Ajax.InPlaceEditor.prototype.hasHTMLLineBreaks */
hasHTMLLineBreaks: function (string) {
if (!this.options.handleLineBreaks) {
return false;
}
return string.match(/<br/i) || string.match(/<p>/i);
},
/** @id Ajax.InPlaceEditor.prototype.convertHTMLLineBreaks */
convertHTMLLineBreaks: function (string) {
return string.replace(/<br>/gi, '\n').replace(/<br\/>/gi,
'\n').replace(/<\/p>/gi, '\n').replace(/<p>/gi, '');
},
/** @id Ajax.InPlaceEditor.prototype.createEditField */
createEditField: function () {
var text;
if (this.options.loadTextURL) {
text = this.options.loadingText;
} else {
text = this.getText();
}
var obj = this;
if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
this.options.textarea = false;
var textField = document.createElement('input');
textField.obj = this;
textField.type = 'text';
textField.name = 'value';
textField.value = text;
textField.style.backgroundColor =
this.options.highlightcolor;
var size = this.options.size || this.options.cols || 0;
if (size !== 0) {
textField.size = size;
}
if (this.options.submitOnBlur) {
textField.onblur = MochiKit.Base.bind(this.onSubmit,
this);
}
this.editField = textField;
} else {
this.options.textarea = true;
var textArea = document.createElement('textarea');
textArea.obj = this;
textArea.name = 'value';
textArea.value = this.convertHTMLLineBreaks(text);
textArea.rows = this.options.rows;
textArea.cols = this.options.cols || 40;
if (this.options.submitOnBlur) {
textArea.onblur = MochiKit.Base.bind(this.onSubmit,
this);
}
this.editField = textArea;
}
if (this.options.loadTextURL) {
this.loadExternalText();
}
this.form.appendChild(this.editField);
},
/** @id Ajax.InPlaceEditor.prototype.getText */
getText: function () {
return this.element.innerHTML;
},
/** @id Ajax.InPlaceEditor.prototype.loadExternalText */
loadExternalText: function () {
MochiKit.DOM.addElementClass(this.form,
this.options.loadingClassName);
this.editField.disabled = true;
new Ajax.Request(
this.options.loadTextURL,
MochiKit.Base.update({
asynchronous: true,
onComplete:
MochiKit.Base.bind(this.onLoadedExternalText, this)
}, this.options.ajaxOptions)
);
},
/** @id Ajax.InPlaceEditor.prototype.onLoadedExternalText */
onLoadedExternalText: function (transport) {
MochiKit.DOM.removeElementClass(this.form,
this.options.loadingClassName);
this.editField.disabled = false;
this.editField.value = MochiKit.Base.stripTags(transport);
},
/** @id Ajax.InPlaceEditor.prototype.onclickCancel */
onclickCancel: function () {
this.onComplete();
this.leaveEditMode();
return false;
},
/** @id Ajax.InPlaceEditor.prototype.onFailure */
onFailure: function (transport) {
this.options.onFailure(transport);
if (this.oldInnerHTML) {
this.element.innerHTML = this.oldInnerHTML;
this.oldInnerHTML = null;
}
return false;
},
/** @id Ajax.InPlaceEditor.prototype.onSubmit */
onSubmit: function () {
// onLoading resets these so we need to save them away for the
Ajax call
var form = this.form;
var value = this.editField.value;
// do this first, sometimes the ajax call returns before we
get a
// chance to switch on Saving which means this will actually
switch on
// Saving *after* we have left edit mode causing Saving to be
// displayed indefinitely
this.onLoading();
new Ajax.Updater(
{
success: this.element,
// dont update on failure (this could be an option)
failure: null
},
this.url,
MochiKit.Base.update({
parameters: this.options.callback(form, value),
onComplete: MochiKit.Base.bind(this.onComplete, this),
onFailure: MochiKit.Base.bind(this.onFailure, this)
}, this.options.ajaxOptions)
);
// stop the event to avoid a page refresh in Safari
if (arguments.length > 1) {
arguments[0].stop();
}
return false;
},
/** @id Ajax.InPlaceEditor.prototype.onLoading */
onLoading: function () {
this.saving = true;
this.removeForm();
this.leaveHover();
this.showSaving();
},
/** @id Ajax.InPlaceEditor.prototype.onSaving */
showSaving: function () {
this.oldInnerHTML = this.element.innerHTML;
this.element.innerHTML = this.options.savingText;
MochiKit.DOM.addElementClass(this.element,
this.options.savingClassName);
this.element.style.backgroundColor = this.originalBackground;
MochiKit.Style.showElement(this.element);
},
/** @id Ajax.InPlaceEditor.prototype.removeForm */
removeForm: function () {
if (this.form) {
if (this.form.parentNode) {
MochiKit.DOM.removeElement(this.form);
}
this.form = null;
}
},
/** @id Ajax.InPlaceEditor.prototype.enterHover */
enterHover: function () {
if (this.saving) {
return;
}
this.element.style.backgroundColor =
this.options.highlightcolor;
if (this.effect) {
this.effect.cancel();
}
MochiKit.DOM.addElementClass(this.element,
this.options.hoverClassName)
},
/** @id Ajax.InPlaceEditor.prototype.leaveHover */
leaveHover: function () {
if (this.options.backgroundColor) {
this.element.style.backgroundColor = this.oldBackground;
}
MochiKit.DOM.removeElementClass(this.element,
this.options.hoverClassName)
if (this.saving) {
return;
}
this.effect = new MochiKit.Visual.Highlight(this.element, {
startcolor: this.options.highlightcolor,
endcolor: this.options.highlightendcolor,
restorecolor: this.originalBackground
});
},
/** @id Ajax.InPlaceEditor.prototype.leaveEditMode */
leaveEditMode: function () {
MochiKit.DOM.removeElementClass(this.element,
this.options.savingClassName);
this.removeForm();
this.leaveHover();
this.element.style.backgroundColor = this.originalBackground;
MochiKit.Style.showElement(this.element);
if (this.options.externalControl) {
MochiKit.Style.showElement(this.options.externalControl);
}
this.editing = false;
this.saving = false;
this.oldInnerHTML = null;
this.onLeaveEditMode();
},
/** @id Ajax.InPlaceEditor.prototype.onComplete */
onComplete: function (transport) {
this.leaveEditMode();
MochiKit.Base.bind(this.options.onComplete, this)(transport,
this.element);
},
/** @id Ajax.InPlaceEditor.prototype.onEnterEditMode */
onEnterEditMode: function () {},
/** @id Ajax.InPlaceEditor.prototype.onLeaveEditMode */
onLeaveEditMode: function () {},
/** @id Ajax.InPlaceEditor.prototype.dispose */
dispose: function () {
if (this.oldInnerHTML) {
this.element.innerHTML = this.oldInnerHTML;
}
this.leaveEditMode();
MochiKit.Signal.disconnect(this.onclickListener);
MochiKit.Signal.disconnect(this.mouseoverListener);
MochiKit.Signal.disconnect(this.mouseoutListener);
if (this.options.externalControl) {
MochiKit.Signal.disconnect(this.onclickListenerExternal);
MochiKit.Signal.disconnect(this.mouseoverListenerExternal);
MochiKit.Signal.disconnect(this.mouseoutListenerExternal);
}
}
};
/
*---------------------------------------------------------------------------------------------------------------------------
*/
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to mochikit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
