// $Id: autocomplete.js,v 1.7 2006/01/22 17:37:41 unconed Exp $ // $Id: drupal.js,v 1.18 2006/01/22 17:37:41 unconed Exp $ /** * Only enable Javascript functionality if all required features are supported. */ function isJsEnabled() { if (typeof document.jsEnabled == 'undefined') { // Note: ! casts to boolean implicitly. document.jsEnabled = !( !document.getElementsByTagName || !document.createElement || !document.createTextNode || !document.documentElement || !document.getElementById); } return document.jsEnabled; } // Global Killswitch on the element if (isJsEnabled()) { document.documentElement.className = 'js'; } /** * Make IE's XMLHTTP object accessible through XMLHttpRequest() */ if (typeof XMLHttpRequest == 'undefined') { XMLHttpRequest = function () { var msxmls = ['MSXML3', 'MSXML2', 'Microsoft'] for (var i=0; i < msxmls.length; i++) { try { return new ActiveXObject(msxmls[i]+'.XMLHTTP') } catch (e) { } } throw new Error("No XML component installed!"); } } /** * Creates an HTTP GET request and sends the response to the callback function. * * Note that dynamic arguments in the URI should be escaped with encodeURIComponent(). */ function HTTPGet(uri, callbackFunction, callbackParameter) { var xmlHttp = new XMLHttpRequest(); var bAsync = true; if (!callbackFunction) { bAsync = false; } xmlHttp.open('GET', uri, bAsync); xmlHttp.send(null); if (bAsync) { if (callbackFunction) { xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { callbackFunction(xmlHttp.responseText, xmlHttp, callbackParameter); } } } return true; } else { return xmlHttp.responseText; } } /** * Creates an HTTP POST request and sends the response to the callback function * * Note: passing null or undefined for 'object' makes the request fail in Opera 8. * Pass an empty string instead. */ function HTTPPost(uri, callbackFunction, callbackParameter, object) { var xmlHttp = new XMLHttpRequest(); var bAsync = true; if (!callbackFunction) { bAsync = false; } xmlHttp.open('POST', uri, bAsync); var toSend = ''; if (typeof object == 'object') { xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); for (var i in object) { toSend += (toSend ? '&' : '') + i + '=' + encodeURIComponent(object[i]); } } else { toSend = object; } xmlHttp.send(toSend); if (bAsync) { if (callbackFunction) { xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { callbackFunction(xmlHttp.responseText, xmlHttp, callbackParameter); } } } return true; } else { return xmlHttp.responseText; } } /** * Redirects a button's form submission to a hidden iframe and displays the result * in a given wrapper. The iframe should contain a call to * window.parent.iframeHandler() after submission. */ function redirectFormButton(uri, button, handler) { // Insert the iframe // Note: some browsers require the literal name/id attributes on the tag, // some want them set through JS. We do both. var div = document.createElement('div'); div.innerHTML = ''; var iframe = div.firstChild; with (iframe) { name = 'redirect-target'; setAttribute('name', 'redirect-target'); id = 'redirect-target'; } with (iframe.style) { position = 'absolute'; height = '1px'; width = '1px'; visibility = 'hidden'; } document.body.appendChild(iframe); // Trap the button button.onmouseover = button.onfocus = function() { button.onclick = function() { // Prepare variables for use in anonymous function. var button = this; var action = button.form.action; var target = button.form.target; // Redirect form submission this.form.action = uri; this.form.target = 'redirect-target'; handler.onsubmit(); // Set iframe handler for later window.iframeHandler = function (data) { // Restore form submission button.form.action = action; button.form.target = target; handler.oncomplete(data); } return true; } } button.onmouseout = button.onblur = function() { button.onclick = null; } } /** * Adds a function to the window onload event */ function addLoadEvent(func) { var oldOnload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldOnload(); func(); } } } /** * Adds a function to a given form's submit event */ function addSubmitEvent(form, func) { var oldSubmit = form.onsubmit; if (typeof oldSubmit != 'function') { form.onsubmit = func; } else { form.onsubmit = function() { return oldSubmit() && func(); } } } /** * Retrieves the absolute position of an element on the screen */ function absolutePosition(el) { var sLeft = 0, sTop = 0; var isDiv = /^div$/i.test(el.tagName); if (isDiv && el.scrollLeft) { sLeft = el.scrollLeft; } if (isDiv && el.scrollTop) { sTop = el.scrollTop; } var r = { x: el.offsetLeft - sLeft, y: el.offsetTop - sTop }; if (el.offsetParent) { var tmp = absolutePosition(el.offsetParent); r.x += tmp.x; r.y += tmp.y; } return r; }; function dimensions(el) { return { width: el.offsetWidth, height: el.offsetHeight }; } /** * Returns true if an element has a specified class name */ function hasClass(node, className) { if (node.className == className) { return true; } var reg = new RegExp('(^| )'+ className +'($| )') if (reg.test(node.className)) { return true; } return false; } /** * Adds a class name to an element */ function addClass(node, className) { if (hasClass(node, className)) { return false; } node.className += ' '+ className; return true; } /** * Removes a class name from an element */ function removeClass(node, className) { if (!hasClass(node, className)) { return false; } node.className = eregReplace('(^| )'+ className +'($| )', '', node.className); return true; } /** * Toggles a class name on or off for an element */ function toggleClass(node, className) { if (!removeClass(node, className) && !addClass(node, className)) { return false; } return true; } /** * Emulate PHP's ereg_replace function in javascript */ function eregReplace(search, replace, subject) { return subject.replace(new RegExp(search,'g'), replace); } /** * Removes an element from the page */ function removeNode(node) { if (typeof node == 'string') { node = $(node); } if (node && node.parentNode) { return node.parentNode.removeChild(node); } else { return false; } } /** * Prevents an event from propagating. */ function stopEvent(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; } } /** * Wrapper around document.getElementById(). */ function $(id) { return document.getElementById(id); } // Global Killswitch if (isJsEnabled()) { addLoadEvent(autocompleteAutoAttach); } /** * Attaches the autocomplete behaviour to all required fields */ function autocompleteAutoAttach() { var acdb = []; var inputs = document.getElementsByTagName('input'); for (i = 0; input = inputs[i]; i++) { if (input && hasClass(input, 'autocomplete')) { uri = input.value; if (!acdb[uri]) { acdb[uri] = new ACDB(uri); } input = $(input.id.substr(0, input.id.length - 13)); input.setAttribute('autocomplete', 'OFF'); addSubmitEvent(input.form, autocompleteSubmit); new jsAC(input, acdb[uri]); } } } /** * Prevents the form from submitting if the suggestions popup is open */ function autocompleteSubmit() { var popup = document.getElementById('autocomplete'); if (popup) { popup.owner.hidePopup(); return true; } return true; } /** * An AutoComplete object */ function jsAC(input, db) { var ac = this; this.input = input; this.db = db; this.input.onkeydown = function (event) { return ac.onkeydown(this, event); }; this.input.onkeyup = function (event) { ac.onkeyup(this, event) }; this.input.onblur = function () { ac.hidePopup() }; this.popup = document.createElement('div'); this.popup.id = 'autocomplete'; this.popup.owner = this; }; /** * Hides the autocomplete suggestions */ jsAC.prototype.hidePopup = function (keycode) { if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) { this.input.value = this.selected.autocompleteValue; } if (this.popup.parentNode && this.popup.parentNode.tagName) { removeNode(this.popup); } this.selected = false; } /** * Handler for the "keydown" event */ jsAC.prototype.onkeydown = function (input, e) { if (!e) { e = window.event; } switch (e.keyCode) { case 40: // down arrow this.selectDown(); return false; case 38: // up arrow this.selectUp(); return false; default: // all other keys return true; } } /** * Handler for the "keyup" event */ jsAC.prototype.onkeyup = function (input, e) { if (!e) { e = window.event; } switch (e.keyCode) { case 16: // shift case 17: // ctrl case 18: // alt case 20: // caps lock case 33: // page up case 34: // page down case 35: // end case 36: // home case 37: // left arrow case 38: // up arrow case 39: // right arrow case 40: // down arrow return true; case 9: // tab case 13: // enter case 27: // esc this.hidePopup(e.keyCode); return true; default: // all other keys if (input.value.length > 0) this.populatePopup(); else this.hidePopup(e.keyCode); return true; } } /** * Puts the currently highlighted suggestion into the autocomplete field */ jsAC.prototype.select = function (node) { this.input.value = node.autocompleteValue; } /** * Highlights the next suggestion */ jsAC.prototype.selectDown = function () { if (this.selected && this.selected.nextSibling) { this.highlight(this.selected.nextSibling); } else { var lis = this.popup.getElementsByTagName('li'); if (lis.length > 0) { this.highlight(lis[0]); } } } /** * Highlights the previous suggestion */ jsAC.prototype.selectUp = function () { if (this.selected && this.selected.previousSibling) { this.highlight(this.selected.previousSibling); } } /** * Highlights a suggestion */ jsAC.prototype.highlight = function (node) { removeClass(this.selected, 'selected'); addClass(node, 'selected'); this.selected = node; } /** * Unhighlights a suggestion */ jsAC.prototype.unhighlight = function (node) { removeClass(node, 'selected'); this.selected = false; } /** * Positions the suggestions popup and starts a search */ jsAC.prototype.populatePopup = function () { var ac = this; var pos = absolutePosition(this.input); this.selected = false; this.popup.style.top = (pos.y + this.input.offsetHeight) +'px'; this.popup.style.left = pos.x +'px'; this.popup.style.width = (this.input.offsetWidth - 4) +'px'; this.db.owner = this; this.db.search(this.input.value); } /** * Fills the suggestion popup with any matches received */ jsAC.prototype.found = function (matches) { while (this.popup.hasChildNodes()) { this.popup.removeChild(this.popup.childNodes[0]); } if (!this.popup.parentNode || !this.popup.parentNode.tagName) { document.getElementsByTagName('body')[0].appendChild(this.popup); } var ul = document.createElement('ul'); var ac = this; if (matches.length > 0) { for (i in matches) { li = document.createElement('li'); div = document.createElement('div'); div.innerHTML = matches[i][1]; li.appendChild(div); li.autocompleteValue = matches[i][0]; li.onmousedown = function() { ac.select(this); }; li.onmouseover = function() { ac.highlight(this); }; li.onmouseout = function() { ac.unhighlight(this); }; ul.appendChild(li); } this.popup.appendChild(ul); } else { this.hidePopup(); } removeClass(this.input, 'throbbing'); } /** * An AutoComplete DataBase object */ function ACDB(uri) { this.uri = uri; this.delay = 300; this.cache = {}; } /** * Performs a cached and delayed search */ ACDB.prototype.search = function(searchString) { this.searchString = searchString; if (this.cache[searchString]) { return this.owner.found(this.cache[searchString]); } if (this.timer) { clearTimeout(this.timer); } var db = this; this.timer = setTimeout(function() { addClass(db.owner.input, 'throbbing'); HTTPGet(db.uri + encodeURIComponent(searchString), db.receive, db); }, this.delay); } /** * HTTP callback function. Passes suggestions to the autocomplete object */ ACDB.prototype.receive = function(string, xmlhttp, acdb) { // Note: Safari returns 'undefined' status if the request returns no data. if (xmlhttp.status != 200 && typeof xmlhttp.status != 'undefined') { removeClass(acdb.owner.input, 'throbbing'); //return alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ acdb.uri); } // Split into array of key->value pairs var matches = string.length > 0 ? string.split('||') : []; for (i in matches) { matches[i] = matches[i].length > 0 ? matches[i].split('|') : []; // Decode textfield pipes back to plain-text matches[i][0] = eregReplace('|', '|', matches[i][0]); } acdb.cache[acdb.searchString] = matches; acdb.owner.found(matches); }