1389 lines
47 KiB
JavaScript
1389 lines
47 KiB
JavaScript
|
/***
|
||
|
|
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 (_firstname_@nimail.org)
|
||
|
|
|
||
|
|
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';
|
||
|
|
MochiKit.Position.clone(element, update, {
|
||
|
|
setHeight: false,
|
||
|
|
offsetTop: element.offsetHeight
|
||
|
|
});
|
||
|
|
}
|
||
|
|
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);
|
||
|
|
},
|
||
|
|
|
||
|
|
/** @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) {
|
||
|
|
if (event.key().string == "KEY_TAB" || event.key().string == "KEY_RETURN") {
|
||
|
|
this.selectEntry();
|
||
|
|
MochiKit.Event.stop(event);
|
||
|
|
} else if (event.key().string == "KEY_ESCAPE") {
|
||
|
|
this.hide();
|
||
|
|
this.active = false;
|
||
|
|
MochiKit.Event.stop(event);
|
||
|
|
return;
|
||
|
|
} else if (event.key().string == "KEY_LEFT" || event.key().string == "KEY_RIGHT") {
|
||
|
|
return;
|
||
|
|
} else if (event.key().string == "KEY_UP") {
|
||
|
|
this.markPrevious();
|
||
|
|
this.render();
|
||
|
|
if (/AppleWebKit'/.test(navigator.appVersion)) {
|
||
|
|
event.stop();
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
} else if (event.key().string == "KEY_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;
|
||
|
|
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 (element, className) {
|
||
|
|
return MochiKit.Base.flattenArray(MochiKit.Base.map(function (node) {
|
||
|
|
if (node.nodeType == 3) {
|
||
|
|
return node.nodeValue;
|
||
|
|
} else if (node.hasChildNodes() && !MochiKit.DOM.hasElementClass(node, className)) {
|
||
|
|
return this.collectTextNodesIgnoreClass(node, className);
|
||
|
|
}
|
||
|
|
return '';
|
||
|
|
}, MochiKit.DOM.getElement(element).childNodes)).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 Ajax.Autocompleter */
|
||
|
|
Ajax.Autocompleter = function (element, update, url, options) {
|
||
|
|
this.__init__(element, update, url, options);
|
||
|
|
};
|
||
|
|
|
||
|
|
MochiKit.Base.update(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype);
|
||
|
|
|
||
|
|
MochiKit.Base.update(Ajax.Autocompleter.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 Ajax.Autocompleter.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 Ajax.Autocompleter.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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|