/*** 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); } } };