/* * OpenSearch ajax suggestion engine for MediaWiki * * uses core MediaWiki open search support to fetch suggestions * and show them below search boxes and other inputs * * by Robert Stojnic (April 2008) */ // search_box_id -> Results object var os_map = {}; // cached data, url -> json_text var os_cache = {}; // global variables for suggest_keypress var os_cur_keypressed = 0; var os_last_keypress = 0; var os_keypressed_count = 0; // type: Timer var os_timer = null; // tie mousedown/up events var os_mouse_pressed = false; var os_mouse_num = -1; // if true, the last change was made by mouse (and not keyboard) var os_mouse_moved = false; // delay between keypress and suggestion (in ms) var os_search_timeout = 250; // these pairs of inputs/forms will be autoloaded at startup var os_autoload_inputs = new Array('searchInput', 'searchInput2', 'powerSearchText', 'searchText'); var os_autoload_forms = new Array('searchform', 'searchform2', 'powersearch', 'search' ); // if we stopped the service var os_is_stopped = false; // max lines to show in suggest table var os_max_lines_per_suggest = 7; /** Timeout timer class that will fetch the results */ function os_Timer(id,r,query){ this.id = id; this.r = r; this.query = query; } /** Property class for single search box */ function os_Results(name, formname){ this.searchform = formname; // id of the searchform this.searchbox = name; // id of the searchbox this.container = name+"Suggest"; // div that holds results this.resultTable = name+"Result"; // id base for the result table (+num = table row) this.resultText = name+"ResultText"; // id base for the spans within result tables (+num) this.toggle = name+"Toggle"; // div that has the toggle (enable/disable) link this.query = null; // last processed query this.results = null; // parsed titles this.resultCount = 0; // number of results this.original = null; // query that user entered this.selected = -1; // which result is selected this.containerCount = 0; // number of results visible in container this.containerRow = 0; // height of result field in the container this.containerTotal = 0; // total height of the container will all results this.visible = false; // if container is visible } /** Hide results div */ function os_hideResults(r){ var c = document.getElementById(r.container); if(c != null) c.style.visibility = "hidden"; r.visible = false; r.selected = -1; } /** Show results div */ function os_showResults(r){ if(os_is_stopped) return; os_fitContainer(r); var c = document.getElementById(r.container); r.selected = -1; if(c != null){ c.scrollTop = 0; c.style.visibility = "visible"; r.visible = true; } } function os_operaWidthFix(x){ // TODO: better css2 incompatibility detection here if(is_opera || is_khtml || navigator.userAgent.toLowerCase().indexOf('firefox/1')!=-1){ return x - 30; // opera&konqueror & old firefox don't understand overflow-x, estimate scrollbar width } return x; } function os_encodeQuery(value){ if (encodeURIComponent) { return encodeURIComponent(value); } if(escape) { return escape(value); } return null; } function os_decodeValue(value){ if (decodeURIComponent) { return decodeURIComponent(value); } if(unescape){ return unescape(value); } return null; } /** Brower-dependent functions to find window inner size, and scroll status */ function f_clientWidth() { return f_filterResults ( window.innerWidth ? window.innerWidth : 0, document.documentElement ? document.documentElement.clientWidth : 0, document.body ? document.body.clientWidth : 0 ); } function f_clientHeight() { return f_filterResults ( window.innerHeight ? window.innerHeight : 0, document.documentElement ? document.documentElement.clientHeight : 0, document.body ? document.body.clientHeight : 0 ); } function f_scrollLeft() { return f_filterResults ( window.pageXOffset ? window.pageXOffset : 0, document.documentElement ? document.documentElement.scrollLeft : 0, document.body ? document.body.scrollLeft : 0 ); } function f_scrollTop() { return f_filterResults ( window.pageYOffset ? window.pageYOffset : 0, document.documentElement ? document.documentElement.scrollTop : 0, document.body ? document.body.scrollTop : 0 ); } function f_filterResults(n_win, n_docel, n_body) { var n_result = n_win ? n_win : 0; if (n_docel && (!n_result || (n_result > n_docel))) n_result = n_docel; return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result; } /** Get the height available for the results container */ function os_availableHeight(r){ var absTop = document.getElementById(r.container).style.top; var px = absTop.lastIndexOf("px"); if(px > 0) absTop = absTop.substring(0,px); return f_clientHeight() - (absTop - f_scrollTop()); } /** Get element absolute position {left,top} */ function os_getElementPosition(elemID){ var offsetTrail = document.getElementById(elemID); var offsetLeft = 0; var offsetTop = 0; while (offsetTrail){ offsetLeft += offsetTrail.offsetLeft; offsetTop += offsetTrail.offsetTop; offsetTrail = offsetTrail.offsetParent; } if (navigator.userAgent.indexOf('Mac') != -1 && typeof document.body.leftMargin != 'undefined'){ offsetLeft += document.body.leftMargin; offsetTop += document.body.topMargin; } return {left:offsetLeft,top:offsetTop}; } /** Create the container div that will hold the suggested titles */ function os_createContainer(r){ var c = document.createElement("div"); var s = document.getElementById(r.searchbox); var pos = os_getElementPosition(r.searchbox); var left = pos.left; var top = pos.top + s.offsetHeight; c.className = "os-suggest"; c.setAttribute("id", r.container); document.body.appendChild(c); // dynamically generated style params // IE workaround, cannot explicitely set "style" attribute c = document.getElementById(r.container); c.style.top = top+"px"; c.style.left = left+"px"; c.style.width = s.offsetWidth+"px"; // mouse event handlers c.onmouseover = function(event) { os_eventMouseover(r.searchbox, event); }; c.onmousemove = function(event) { os_eventMousemove(r.searchbox, event); }; c.onmousedown = function(event) { return os_eventMousedown(r.searchbox, event); }; c.onmouseup = function(event) { os_eventMouseup(r.searchbox, event); }; return c; } /** change container height to fit to screen */ function os_fitContainer(r){ var c = document.getElementById(r.container); var h = os_availableHeight(r) - 20; var inc = r.containerRow; h = parseInt(h/inc) * inc; if(h < (2 * inc) && r.resultCount > 1) // min: two results h = 2 * inc; if((h/inc) > os_max_lines_per_suggest ) h = inc * os_max_lines_per_suggest; if(h < r.containerTotal){ c.style.height = h +"px"; r.containerCount = parseInt(Math.round(h/inc)); } else{ c.style.height = r.containerTotal+"px"; r.containerCount = r.resultCount; } } /** If some entries are longer than the box, replace text with "..." */ function os_trimResultText(r){ var w = document.getElementById(r.container).offsetWidth; if(r.containerCount < r.resultCount){ w -= 20; // give 20px for scrollbar } else w = os_operaWidthFix(w); if(w < 10) return; for(var i=0;i w && (e.offsetWidth < lastW || iteration<2)){ changedText = true; lastW = e.offsetWidth; var l = e.innerHTML; e.innerHTML = l.substring(0,l.length-replace)+"..."; iteration++; replace = 4; // how many chars to replace } if(changedText){ // show hint for trimmed titles document.getElementById(r.resultTable+i).setAttribute("title",r.results[i]); } } } /** Handles data from XMLHttpRequest, and updates the suggest results */ function os_updateResults(r, query, text, cacheKey){ os_cache[cacheKey] = text; r.query = query; r.original = query; if(text == ""){ r.results = null; r.resultCount = 0; os_hideResults(r); } else{ try { var p = eval('('+text+')'); // simple json parse, could do a safer one if(p.length<2 || p[1].length == 0){ r.results = null; r.resultCount = 0; os_hideResults(r); return; } var c = document.getElementById(r.container); if(c == null) c = os_createContainer(r); c.innerHTML = os_createResultTable(r,p[1]); // init container table sizes var t = document.getElementById(r.resultTable); r.containerTotal = t.offsetHeight; r.containerRow = t.offsetHeight / r.resultCount; os_trimResultText(r); os_showResults(r); } catch(e){ // bad response from server or such os_hideResults(r); os_cache[cacheKey] = null; } } } /** Create the result table to be placed in the container div */ function os_createResultTable(r, results){ var c = document.getElementById(r.container); var width = os_operaWidthFix(c.offsetWidth); var html = ""; r.results = new Array(); r.resultCount = results.length; for(i=0;i"+title+""; } html+="
" return html; } /** Fetch namespaces from checkboxes or hidden fields in the search form, if none defined use wgSearchNamespaces global */ function os_getNamespaces(r){ var namespaces = ""; var elements = document.forms[r.searchform].elements; for(i=0; i < elements.length; i++){ var name = elements[i].name; if(typeof name != 'undefined' && name.length > 2 && name[0]=='n' && name[1]=='s' && ((elements[i].type=='checkbox' && elements[i].checked) || (elements[i].type=='hidden' && elements[i].value=="1")) ){ if(namespaces!="") namespaces+="|"; namespaces+=name.substring(2); } } if(namespaces == "") namespaces = wgSearchNamespaces.join("|"); return namespaces; } /** Update results if user hasn't already typed something else */ function os_updateIfRelevant(r, query, text, cacheKey){ var t = document.getElementById(r.searchbox); if(t != null && t.value == query){ // check if response is still relevant os_updateResults(r, query, text, cacheKey); } r.query = query; } /** Fetch results after some timeout */ function os_delayedFetch(){ if(os_timer == null) return; var r = os_timer.r; var query = os_timer.query; os_timer = null; var path = wgMWSuggestTemplate.replace("{namespaces}",os_getNamespaces(r)) .replace("{dbname}",wgDBname) .replace("{searchTerms}",os_encodeQuery(query)); // try to get from cache, if not fetch using ajax var cached = os_cache[path]; if(cached != null){ os_updateIfRelevant(r, query, cached, path); } else{ var xmlhttp = sajax_init_object(); if(xmlhttp){ try { xmlhttp.open("GET", path, true); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && typeof os_updateIfRelevant == 'function') { os_updateIfRelevant(r, query, xmlhttp.responseText, path); } }; xmlhttp.send(null); } catch (e) { if (window.location.hostname == "localhost") { alert("Your browser blocks XMLHttpRequest to 'localhost', try using a real hostname for development/testing."); } throw e; } } } } /** Init timed update via os_delayedUpdate() */ function os_fetchResults(r, query, timeout){ if(query == ""){ os_hideResults(r); return; } else if(query == r.query) return; // no change os_is_stopped = false; // make sure we're running /* var cacheKey = wgDBname+":"+query; var cached = os_cache[cacheKey]; if(cached != null){ os_updateResults(r,wgDBname,query,cached); return; } */ // cancel any pending fetches if(os_timer != null && os_timer.id != null) clearTimeout(os_timer.id); // schedule delayed fetching of results if(timeout != 0){ os_timer = new os_Timer(setTimeout("os_delayedFetch()",timeout),r,query); } else{ os_timer = new os_Timer(null,r,query); os_delayedFetch(); // do it now! } } /** Change the highlighted row (i.e. suggestion), from position cur to next */ function os_changeHighlight(r, cur, next, updateSearchBox){ if (next >= r.resultCount) next = r.resultCount-1; if (next < -1) next = -1; r.selected = next; if (cur == next) return; // nothing to do. if(cur >= 0){ var curRow = document.getElementById(r.resultTable + cur); if(curRow != null) curRow.className = "os-suggest-result"; } var newText; if(next >= 0){ var nextRow = document.getElementById(r.resultTable + next); if(nextRow != null) nextRow.className = os_HighlightClass(); newText = r.results[next]; } else newText = r.original; // adjust the scrollbar if any if(r.containerCount < r.resultCount){ var c = document.getElementById(r.container); var vStart = c.scrollTop / r.containerRow; var vEnd = vStart + r.containerCount; if(next < vStart) c.scrollTop = next * r.containerRow; else if(next >= vEnd) c.scrollTop = (next - r.containerCount + 1) * r.containerRow; } // update the contents of the search box if(updateSearchBox){ os_updateSearchQuery(r,newText); } } function os_HighlightClass() { var match = navigator.userAgent.match(/AppleWebKit\/(\d+)/); if (match) { var webKitVersion = parseInt(match[1]); if (webKitVersion < 523) { // CSS system highlight colors broken on old Safari // https://bugs.webkit.org/show_bug.cgi?id=6129 // Safari 3.0.4, 3.1 known ok return "os-suggest-result-hl-webkit"; } } return "os-suggest-result-hl"; } function os_updateSearchQuery(r,newText){ document.getElementById(r.searchbox).value = newText; r.query = newText; } /** Find event target */ function os_getTarget(e){ if (!e) e = window.event; if (e.target) return e.target; else if (e.srcElement) return e.srcElement; else return null; } /******************** * Keyboard events ********************/ /** Event handler that will fetch results on keyup */ function os_eventKeyup(e){ var targ = os_getTarget(e); var r = os_map[targ.id]; if(r == null) return; // not our event // some browsers won't generate keypressed for arrow keys, catch it if(os_keypressed_count == 0){ os_processKey(r,os_cur_keypressed,targ); } var query = targ.value; os_fetchResults(r,query,os_search_timeout); } /** catch arrows up/down and escape to hide the suggestions */ function os_processKey(r,keypressed,targ){ if (keypressed == 40){ // Arrow Down if (r.visible) { os_changeHighlight(r, r.selected, r.selected+1, true); } else if(os_timer == null){ // user wants to get suggestions now r.query = ""; os_fetchResults(r,targ.value,0); } } else if (keypressed == 38){ // Arrow Up if (r.visible){ os_changeHighlight(r, r.selected, r.selected-1, true); } } else if(keypressed == 27){ // Escape document.getElementById(r.searchbox).value = r.original; r.query = r.original; os_hideResults(r); } else if(r.query != document.getElementById(r.searchbox).value){ // os_hideResults(r); // don't show old suggestions } } /** When keys is held down use a timer to output regular events */ function os_eventKeypress(e){ var targ = os_getTarget(e); var r = os_map[targ.id]; if(r == null) return; // not our event var keypressed = os_cur_keypressed; if(keypressed == 38 || keypressed == 40){ var d = new Date() var now = d.getTime(); if(now - os_last_keypress < 120){ os_last_keypress = now; return; } } os_keypressed_count++; os_processKey(r,keypressed,targ); } /** Catch the key code (Firefox bug) */ function os_eventKeydown(e){ if (!e) e = window.event; var targ = os_getTarget(e); var r = os_map[targ.id]; if(r == null) return; // not our event os_mouse_moved = false; os_cur_keypressed = (window.Event) ? e.which : e.keyCode; os_last_keypress = 0; os_keypressed_count = 0; } /** Event: loss of focus of input box */ function os_eventBlur(e){ var targ = os_getTarget(e); var r = os_map[targ.id]; if(r == null) return; // not our event if(!os_mouse_pressed) os_hideResults(r); } /** Event: focus (catch only when stopped) */ function os_eventFocus(e){ // nothing happens here? } /******************** * Mouse events ********************/ /** Mouse over the container */ function os_eventMouseover(srcId, e){ var targ = os_getTarget(e); var r = os_map[srcId]; if(r == null || !os_mouse_moved) return; // not our event var num = os_getNumberSuffix(targ.id); if(num >= 0) os_changeHighlight(r,r.selected,num,false); } /* Get row where the event occured (from its id) */ function os_getNumberSuffix(id){ var num = id.substring(id.length-2); if( ! (num.charAt(0) >= '0' && num.charAt(0) <= '9') ) num = num.substring(1); if(os_isNumber(num)) return parseInt(num); else return -1; } /** Save mouse move as last action */ function os_eventMousemove(srcId, e){ os_mouse_moved = true; } /** Mouse button held down, register possible click */ function os_eventMousedown(srcId, e){ var targ = os_getTarget(e); var r = os_map[srcId]; if(r == null) return; // not our event var num = os_getNumberSuffix(targ.id); os_mouse_pressed = true; if(num >= 0){ os_mouse_num = num; // os_updateSearchQuery(r,r.results[num]); } // keep the focus on the search field document.getElementById(r.searchbox).focus(); return false; // prevents selection } /** Mouse button released, check for click on some row */ function os_eventMouseup(srcId, e){ var targ = os_getTarget(e); var r = os_map[srcId]; if(r == null) return; // not our event var num = os_getNumberSuffix(targ.id); if(num >= 0 && os_mouse_num == num){ os_updateSearchQuery(r,r.results[num]); os_hideResults(r); document.getElementById(r.searchform).submit(); } os_mouse_pressed = false; // keep the focus on the search field document.getElementById(r.searchbox).focus(); } /** Check if x is a valid integer */ function os_isNumber(x){ if(x == "" || isNaN(x)) return false; for(var i=0;i= '0' && c <= '9') ) return false; } return true; } /** When the form is submitted hide everything, cancel updates... */ function os_eventOnsubmit(e){ var targ = os_getTarget(e); os_is_stopped = true; // kill timed requests if(os_timer != null && os_timer.id != null){ clearTimeout(os_timer.id); os_timer = null; } // Hide all suggestions for(i=0;i