skins/common/mwsuggest.js

   1 /*
   2  * OpenSearch ajax suggestion engine for MediaWiki
   3  *
   4  * uses core MediaWiki open search support to fetch suggestions
   5  * and show them below search boxes and other inputs
   6  *
   7  * by Robert Stojnic (April 2008)
   8  */
   9
  10 // search_box_id -> Results object
  11 var os_map = {};
  12 // cached data, url -> json_text
  13 var os_cache = {};
  14 // global variables for suggest_keypress
  15 var os_cur_keypressed = 0;
  16 var os_last_keypress = 0;
  17 var os_keypressed_count = 0;
  18 // type: Timer
  19 var os_timer = null;
  20 // tie mousedown/up events
  21 var os_mouse_pressed = false;
  22 var os_mouse_num = -1;
  23 // if true, the last change was made by mouse (and not keyboard)
  24 var os_mouse_moved = false;
  25 // delay between keypress and suggestion (in ms)
  26 var os_search_timeout = 250;
  27 // these pairs of inputs/forms will be autoloaded at startup
  28 var os_autoload_inputs = new Array('searchInput', 'searchInput2', 'powerSearchText', 'searchText');
  29 var os_autoload_forms = new Array('searchform', 'searchform2', 'powersearch', 'search' );
  30 // if we stopped the service
  31 var os_is_stopped = false;
  32 // max lines to show in suggest table
  33 var os_max_lines_per_suggest = 7;
  34 // if we are about to focus the searchbox for the first time
  35 var os_first_focus = true;
  36
  37 /** Timeout timer class that will fetch the results */
  38 function os_Timer(id,r,query){
  39         this.id = id;
  40         this.r = r;
  41         this.query = query;
  42 }
  43
  44 /** Property class for single search box */
  45 function os_Results(name, formname){
  46         this.searchform = formname; // id of the searchform
  47         this.searchbox = name; // id of the searchbox
  48         this.container = name+"Suggest"; // div that holds results
  49         this.resultTable = name+"Result"; // id base for the result table (+num = table row)
  50         this.resultText = name+"ResultText"; // id base for the spans within result tables (+num)
  51         this.toggle = name+"Toggle"; // div that has the toggle (enable/disable) link
  52         this.query = null; // last processed query
  53         this.results = null;  // parsed titles
  54         this.resultCount = 0; // number of results
  55         this.original = null; // query that user entered
  56         this.selected = -1; // which result is selected
  57         this.containerCount = 0; // number of results visible in container
  58         this.containerRow = 0; // height of result field in the container
  59         this.containerTotal = 0; // total height of the container will all results
  60         this.visible = false; // if container is visible
  61 }
  62
  63 /** Hide results div */
  64 function os_hideResults(r){
  65         var c = document.getElementById(r.container);
  66         if(c != null)
  67                 c.style.visibility = "hidden";
  68         r.visible = false;
  69         r.selected = -1;
  70 }
  71
  72 /** Show results div */
  73 function os_showResults(r){
  74         if(os_is_stopped)
  75                 return;
  76         os_fitContainer(r);
  77         var c = document.getElementById(r.container);
  78         r.selected = -1;
  79         if(c != null){
  80                 c.scrollTop = 0;
  81                 c.style.visibility = "visible";
  82                 r.visible = true;
  83         }
  84 }
  85
  86 function os_operaWidthFix(x){
  87         // TODO: better css2 incompatibility detection here
  88         if(is_opera || is_khtml || navigator.userAgent.toLowerCase().indexOf('firefox/1')!=-1){
  89                 return x - 30; // opera&konqueror & old firefox don't understand overflow-x, estimate scrollbar width
  90         }
  91         return x;
  92 }
  93
  94 function os_encodeQuery(value){
  95   if (encodeURIComponent) {
  96     return encodeURIComponent(value);
  97   }
  98   if(escape) {
  99     return escape(value);
 100   }
 101 }
 102 function os_decodeValue(value){
 103   if (decodeURIComponent) {
 104     return decodeURIComponent(value);
 105   }
 106   if(unescape){
 107         return unescape(value);
 108   }
 109 }
 110
 111 /** Brower-dependent functions to find window inner size, and scroll status */
 112 function f_clientWidth() {
 113         return f_filterResults (
 114                 window.innerWidth ? window.innerWidth : 0,
 115                 document.documentElement ? document.documentElement.clientWidth : 0,
 116                 document.body ? document.body.clientWidth : 0
 117         );
 118 }
 119 function f_clientHeight() {
 120         return f_filterResults (
 121                 window.innerHeight ? window.innerHeight : 0,
 122                 document.documentElement ? document.documentElement.clientHeight : 0,
 123                 document.body ? document.body.clientHeight : 0
 124         );
 125 }
 126 function f_scrollLeft() {
 127         return f_filterResults (
 128                 window.pageXOffset ? window.pageXOffset : 0,
 129                 document.documentElement ? document.documentElement.scrollLeft : 0,
 130                 document.body ? document.body.scrollLeft : 0
 131         );
 132 }
 133 function f_scrollTop() {
 134         return f_filterResults (
 135                 window.pageYOffset ? window.pageYOffset : 0,
 136                 document.documentElement ? document.documentElement.scrollTop : 0,
 137                 document.body ? document.body.scrollTop : 0
 138         );
 139 }
 140 function f_filterResults(n_win, n_docel, n_body) {
 141         var n_result = n_win ? n_win : 0;
 142         if (n_docel && (!n_result || (n_result > n_docel)))
 143                 n_result = n_docel;
 144         return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
 145 }
 146
 147 /** Get the height available for the results container */
 148 function os_availableHeight(r){
 149         var absTop = document.getElementById(r.container).style.top;
 150         var px = absTop.lastIndexOf("px");
 151         if(px > 0)
 152                 absTop = absTop.substring(0,px);
 153         return f_clientHeight() - (absTop - f_scrollTop());
 154 }
 155
 156
 157 /** Get element absolute position {left,top} */
 158 function os_getElementPosition(elemID){
 159         var offsetTrail = document.getElementById(elemID);
 160         var offsetLeft = 0;
 161         var offsetTop = 0;
 162         while (offsetTrail){
 163                 offsetLeft += offsetTrail.offsetLeft;
 164                 offsetTop += offsetTrail.offsetTop;
 165                 offsetTrail = offsetTrail.offsetParent;
 166         }
 167         if (navigator.userAgent.indexOf('Mac') != -1 && typeof document.body.leftMargin != 'undefined'){
 168                 offsetLeft += document.body.leftMargin;
 169                 offsetTop += document.body.topMargin;
 170         }
 171         return {left:offsetLeft,top:offsetTop};
 172 }
 173
 174 /** Create the container div that will hold the suggested titles */
 175 function os_createContainer(r){
 176         var c = document.createElement("div");
 177         var s = document.getElementById(r.searchbox);
 178         var pos = os_getElementPosition(r.searchbox);
 179         var left = pos.left;
 180         var top = pos.top + s.offsetHeight;
 181         c.className = "os-suggest";
 182         c.setAttribute("id", r.container);
 183         document.body.appendChild(c);
 184
 185         // dynamically generated style params
 186         // IE workaround, cannot explicitely set "style" attribute
 187         c = document.getElementById(r.container);
 188         c.style.top = top+"px";
 189         c.style.left = left+"px";
 190         c.style.width = s.offsetWidth+"px";
 191
 192         // mouse event handlers
 193         c.onmouseover = function(event) { os_eventMouseover(r.searchbox, event); };
 194         c.onmousemove = function(event) { os_eventMousemove(r.searchbox, event); };
 195         c.onmousedown = function(event) { return os_eventMousedown(r.searchbox, event); };
 196         c.onmouseup = function(event) { os_eventMouseup(r.searchbox, event); };
 197         return c;
 198 }
 199
 200 /** change container height to fit to screen */
 201 function os_fitContainer(r){
 202         var c = document.getElementById(r.container);
 203         var h = os_availableHeight(r) - 20;
 204         var inc = r.containerRow;
 205         h = parseInt(h/inc) * inc;
 206         if(h < (2 * inc) && r.resultCount > 1) // min: two results
 207                 h = 2 * inc;
 208         if((h/inc) > os_max_lines_per_suggest )
 209                 h = inc * os_max_lines_per_suggest;
 210         if(h < r.containerTotal){
 211                 c.style.height = h +"px";
 212                 r.containerCount = parseInt(Math.round(h/inc));
 213         } else{
 214                 c.style.height = r.containerTotal+"px";
 215                 r.containerCount = r.resultCount;
 216         }
 217 }
 218 /** If some entries are longer than the box, replace text with "..." */
 219 function os_trimResultText(r){
 220         var w = document.getElementById(r.container).offsetWidth;
 221         if(r.containerCount < r.resultCount){
 222                 w -= 20; // give 20px for scrollbar
 223         } else
 224                 w = os_operaWidthFix(w);
 225         if(w < 10)
 226                 return;
 227         for(var i=0;i<r.resultCount;i++){
 228                 var e = document.getElementById(r.resultText+i);
 229                 var replace = 1;
 230                 var lastW = e.offsetWidth+1;
 231                 var iteration = 0;
 232                 var changedText = false;
 233                 while(e.offsetWidth > w && (e.offsetWidth < lastW || iteration<2)){
 234                         changedText = true;
 235                         lastW = e.offsetWidth;
 236                         var l = e.innerHTML;
 237                         e.innerHTML = l.substring(0,l.length-replace)+"...";
 238                         iteration++;
 239                         replace = 4; // how many chars to replace
 240                 }
 241                 if(changedText){
 242                         // show hint for trimmed titles
 243                         document.getElementById(r.resultTable+i).setAttribute("title",r.results[i]);
 244                 }
 245         }
 246 }
 247
 248 /** Handles data from XMLHttpRequest, and updates the suggest results */
 249 function os_updateResults(r, query, text, cacheKey){
 250         os_cache[cacheKey] = text;
 251         r.query = query;
 252         r.original = query;
 253         if(text == ""){
 254                 r.results = null;
 255                 r.resultCount = 0;
 256                 os_hideResults(r);
 257         } else{
 258                 try {
 259                         var p = eval('('+text+')'); // simple json parse, could do a safer one
 260                         if(p.length<2 || p[1].length == 0){
 261                                 r.results = null;
 262                                 r.resultCount = 0;
 263                                 os_hideResults(r);
 264                                 return;
 265                         }
 266                         var c = document.getElementById(r.container);
 267                         if(c == null)
 268                                 c = os_createContainer(r);
 269                         c.innerHTML = os_createResultTable(r,p[1]);
 270                         // init container table sizes
 271                         var t = document.getElementById(r.resultTable);
 272                         r.containerTotal = t.offsetHeight;
 273                         r.containerRow = t.offsetHeight / r.resultCount;
 274                         os_trimResultText(r);
 275                         os_showResults(r);
 276                 } catch(e){
 277                         // bad response from server or such
 278                         os_hideResults(r);
 279                         os_cache[cacheKey] = null;
 280                 }
 281         }
 282 }
 283
 284 /** Create the result table to be placed in the container div */
 285 function os_createResultTable(r, results){
 286         var c = document.getElementById(r.container);
 287         var width = os_operaWidthFix(c.offsetWidth);
 288         var html = "<table class=\"os-suggest-results\" id=\""+r.resultTable+"\" style=\"width: "+width+"px;\">";
 289         r.results = new Array();
 290         r.resultCount = results.length;
 291         for(i=0;i<results.length;i++){
 292                 var title = os_decodeValue(results[i]);
 293                 r.results[i] = title;
 294                 html += "<tr><td class=\"os-suggest-result\" id=\""+r.resultTable+i+"\"><span id=\""+r.resultText+i+"\">"+title+"</span></td></tr>";
 295         }
 296         html+="</table>"
 297         return html;
 298 }
 299
 300 /** Fetch namespaces from checkboxes or hidden fields in the search form,
 301     if none defined use wgSearchNamespaces global */
 302 function os_getNamespaces(r){
 303         var namespaces = "";
 304         var elements = document.forms[r.searchform].elements;
 305         for(i=0; i < elements.length; i++){
 306                 var name = elements[i].name;
 307                 if(typeof name != 'undefined' && name.length > 2
 308                 && name[0]=='n' && name[1]=='s'
 309                 && ((elements[i].type=='checkbox' && elements[i].checked)
 310                         || (elements[i].type=='hidden' && elements[i].value=="1")) ){
 311                         if(namespaces!="")
 312                                 namespaces+="|";
 313                         namespaces+=name.substring(2);
 314                 }
 315         }
 316         if(namespaces == "")
 317                 namespaces = wgSearchNamespaces.join("|");
 318         return namespaces;
 319 }
 320
 321 /** Update results if user hasn't already typed something else */
 322 function os_updateIfRelevant(r, query, text, cacheKey){
 323         var t = document.getElementById(r.searchbox);
 324         if(t != null && t.value == query){ // check if response is still relevant
 325                 os_updateResults(r, query, text, cacheKey);
 326         }
 327         r.query = query;
 328 }
 329
 330 /** Fetch results after some timeout */
 331 function os_delayedFetch(){
 332         if(os_timer == null)
 333                 return;
 334         var r = os_timer.r;
 335         var query = os_timer.query;
 336         os_timer = null;
 337         var path = wgMWSuggestTemplate.replace("{namespaces}",os_getNamespaces(r))
 338                                                                   .replace("{dbname}",wgDBname)
 339                                                                   .replace("{searchTerms}",os_encodeQuery(query));
 340
 341         // try to get from cache, if not fetch using ajax
 342         var cached = os_cache[path];
 343         if(cached != null){
 344                 os_updateIfRelevant(r, query, cached, path);
 345         } else{
 346                 var xmlhttp = sajax_init_object();
 347                 if(xmlhttp){
 348                         try {
 349                                 xmlhttp.open("GET", path, true);
 350                                 xmlhttp.onreadystatechange=function(){
 351                                 if (xmlhttp.readyState==4 && typeof os_updateIfRelevant == 'function') {
 352                                         os_updateIfRelevant(r, query, xmlhttp.responseText, path);
 353                                 }
 354                         };
 355                         xmlhttp.send(null);
 356                 } catch (e) {
 357                                 if (window.location.hostname == "localhost") {
 358                                         alert("Your browser blocks XMLHttpRequest to 'localhost', try using a real hostname for development/testing.");
 359                                 }
 360                                 throw e;
 361                         }
 362                 }
 363         }
 364 }
 365
 366 /** Init timed update via os_delayedUpdate() */
 367 function os_fetchResults(r, query, timeout){
 368         if(query == ""){
 369                 os_hideResults(r);
 370                 return;
 371         } else if(query == r.query)
 372                 return; // no change
 373
 374         os_is_stopped = false; // make sure we're running
 375
 376         /* var cacheKey = wgDBname+":"+query;
 377         var cached = os_cache[cacheKey];
 378         if(cached != null){
 379                 os_updateResults(r,wgDBname,query,cached);
 380                 return;
 381         } */
 382
 383         // cancel any pending fetches
 384         if(os_timer != null && os_timer.id != null)
 385                 clearTimeout(os_timer.id);
 386         // schedule delayed fetching of results
 387         if(timeout != 0){
 388                 os_timer = new os_Timer(setTimeout("os_delayedFetch()",timeout),r,query);
 389         } else{
 390                 os_timer = new os_Timer(null,r,query);
 391                 os_delayedFetch(); // do it now!
 392         }
 393
 394 }
 395 /** Change the highlighted row (i.e. suggestion), from position cur to next */
 396 function os_changeHighlight(r, cur, next, updateSearchBox){
 397         if (next >= r.resultCount)
 398                 next = r.resultCount-1;
 399         if (next < -1)
 400                 next = -1;
 401         r.selected = next;
 402         if (cur == next)
 403         return; // nothing to do.
 404
 405     if(cur >= 0){
 406         var curRow = document.getElementById(r.resultTable + cur);
 407         if(curRow != null)
 408                 curRow.className = "os-suggest-result";
 409     }
 410     var newText;
 411     if(next >= 0){
 412         var nextRow = document.getElementById(r.resultTable + next);
 413         if(nextRow != null)
 414                 nextRow.className = os_HighlightClass();
 415         newText = r.results[next];
 416     } else
 417         newText = r.original;
 418
 419     // adjust the scrollbar if any
 420     if(r.containerCount < r.resultCount){
 421         var c = document.getElementById(r.container);
 422         var vStart = c.scrollTop / r.containerRow;
 423         var vEnd = vStart + r.containerCount;
 424         if(next < vStart)
 425                 c.scrollTop = next * r.containerRow;
 426         else if(next >= vEnd)
 427                 c.scrollTop = (next - r.containerCount + 1) * r.containerRow;
 428     }
 429
 430     // update the contents of the search box
 431     if(updateSearchBox){
 432         os_updateSearchQuery(r,newText);
 433     }
 434 }
 435
 436 function os_HighlightClass() {
 437         var match = navigator.userAgent.match(/AppleWebKit\/(\d+)/);
 438         if (match) {
 439                 var webKitVersion = parseInt(match[1]);
 440                 if (webKitVersion < 523) {
 441                         // CSS system highlight colors broken on old Safari
 442                         // https://bugs.webkit.org/show_bug.cgi?id=6129
 443                         // Safari 3.0.4, 3.1 known ok
 444                         return "os-suggest-result-hl-webkit";
 445                 }
 446         }
 447         return "os-suggest-result-hl";
 448 }
 449
 450 function os_updateSearchQuery(r,newText){
 451         document.getElementById(r.searchbox).value = newText;
 452     r.query = newText;
 453 }
 454
 455 /** Find event target */
 456 function os_getTarget(e){
 457         if (!e) var e = window.event;
 458         if (e.target) return e.target;
 459         else if (e.srcElement) return e.srcElement;
 460         else return null;
 461 }
 462
 463
 464
 465 /********************
 466  *  Keyboard events
 467  ********************/
 468
 469 /** Event handler that will fetch results on keyup */
 470 function os_eventKeyup(e){
 471         var targ = os_getTarget(e);
 472         var r = os_map[targ.id];
 473         if(r == null)
 474                 return; // not our event
 475
 476         // some browsers won't generate keypressed for arrow keys, catch it
 477         if(os_keypressed_count == 0){
 478                 os_processKey(r,os_cur_keypressed,targ);
 479         }
 480         var query = targ.value;
 481         os_fetchResults(r,query,os_search_timeout);
 482 }
 483
 484 /** catch arrows up/down and escape to hide the suggestions */
 485 function os_processKey(r,keypressed,targ){
 486         if (keypressed == 40){ // Arrow Down
 487         if (r.visible) {
 488                 os_changeHighlight(r, r.selected, r.selected+1, true);
 489         } else if(os_timer == null){
 490                 // user wants to get suggestions now
 491                 r.query = "";
 492                         os_fetchResults(r,targ.value,0);
 493         }
 494         } else if (keypressed == 38){ // Arrow Up
 495                 if (r.visible){
 496                         os_changeHighlight(r, r.selected, r.selected-1, true);
 497                 }
 498         } else if(keypressed == 27){ // Escape
 499                 document.getElementById(r.searchbox).value = r.original;
 500                 r.query = r.original;
 501                 os_hideResults(r);
 502         } else if(r.query != document.getElementById(r.searchbox).value){
 503                 // os_hideResults(r); // don't show old suggestions
 504         }
 505 }
 506
 507 /** When keys is held down use a timer to output regular events */
 508 function os_eventKeypress(e){
 509         var targ = os_getTarget(e);
 510         var r = os_map[targ.id];
 511         if(r == null)
 512                 return; // not our event
 513
 514         var keypressed = os_cur_keypressed;
 515         if(keypressed == 38 || keypressed == 40){
 516                 var d = new Date()
 517                 var now = d.getTime();
 518                 if(now - os_last_keypress < 120){
 519                         os_last_keypress = now;
 520                         return;
 521                 }
 522         }
 523
 524         os_keypressed_count++;
 525         os_processKey(r,keypressed,targ);
 526 }
 527
 528 /** Catch the key code (Firefox bug)  */
 529 function os_eventKeydown(e){
 530         if (!e) var e = window.event;
 531         var targ = os_getTarget(e);
 532         var r = os_map[targ.id];
 533         if(r == null)
 534                 return; // not our event
 535
 536         os_mouse_moved = false;
 537
 538         if(os_first_focus){
 539                 // firefox bug, focus&defocus to make autocomplete=off valid
 540                 targ.blur(); targ.focus();
 541                 os_first_focus = false;
 542         }
 543
 544         os_cur_keypressed = (window.Event) ? e.which : e.keyCode;
 545         os_last_keypress = 0;
 546         os_keypressed_count = 0;
 547 }
 548
 549 /** Event: loss of focus of input box */
 550 function os_eventBlur(e){
 551         if(os_first_focus)
 552                 return; // we are focusing/defocusing
 553         var targ = os_getTarget(e);
 554         var r = os_map[targ.id];
 555         if(r == null)
 556                 return; // not our event
 557         if(!os_mouse_pressed)
 558                 os_hideResults(r);
 559 }
 560
 561 /** Event: focus (catch only when stopped) */
 562 function os_eventFocus(e){
 563         if(os_first_focus)
 564                 return; // we are focusing/defocusing
 565 }
 566
 567
 568
 569 /********************
 570  *  Mouse events
 571  ********************/
 572
 573 /** Mouse over the container */
 574 function os_eventMouseover(srcId, e){
 575         var targ = os_getTarget(e);
 576         var r = os_map[srcId];
 577         if(r == null || !os_mouse_moved)
 578                 return; // not our event
 579         var num = os_getNumberSuffix(targ.id);
 580         if(num >= 0)
 581                 os_changeHighlight(r,r.selected,num,false);
 582
 583 }
 584
 585 /* Get row where the event occured (from its id) */
 586 function os_getNumberSuffix(id){
 587         var num = id.substring(id.length-2);
 588         if( ! (num.charAt(0) >= '0' && num.charAt(0) <= '9') )
 589                 num = num.substring(1);
 590         if(os_isNumber(num))
 591                 return parseInt(num);
 592         else
 593                 return -1;
 594 }
 595
 596 /** Save mouse move as last action */
 597 function os_eventMousemove(srcId, e){
 598         os_mouse_moved = true;
 599 }
 600
 601 /** Mouse button held down, register possible click  */
 602 function os_eventMousedown(srcId, e){
 603         var targ = os_getTarget(e);
 604         var r = os_map[srcId];
 605         if(r == null)
 606                 return; // not our event
 607         var num = os_getNumberSuffix(targ.id);
 608
 609         os_mouse_pressed = true;
 610         if(num >= 0){
 611                 os_mouse_num = num;
 612                 // os_updateSearchQuery(r,r.results[num]);
 613         }
 614         // keep the focus on the search field
 615         document.getElementById(r.searchbox).focus();
 616
 617         return false; // prevents selection
 618 }
 619
 620 /** Mouse button released, check for click on some row */
 621 function os_eventMouseup(srcId, e){
 622         var targ = os_getTarget(e);
 623         var r = os_map[srcId];
 624         if(r == null)
 625                 return; // not our event
 626         var num = os_getNumberSuffix(targ.id);
 627
 628         if(num >= 0 && os_mouse_num == num){
 629                 os_updateSearchQuery(r,r.results[num]);
 630                 os_hideResults(r);
 631                 document.getElementById(r.searchform).submit();
 632         }
 633         os_mouse_pressed = false;
 634         // keep the focus on the search field
 635         document.getElementById(r.searchbox).focus();
 636 }
 637
 638 /** Check if x is a valid integer */
 639 function os_isNumber(x){
 640         if(x == "" || isNaN(x))
 641                 return false;
 642         for(var i=0;i<x.length;i++){
 643                 var c = x.charAt(i);
 644                 if( ! (c >= '0' && c <= '9') )
 645                         return false;
 646         }
 647         return true;
 648 }
 649
 650
 651 /** When the form is submitted hide everything, cancel updates... */
 652 function os_eventOnsubmit(e){
 653         var targ = os_getTarget(e);
 654
 655         os_is_stopped = true;
 656         // kill timed requests
 657         if(os_timer != null && os_timer.id != null){
 658                 clearTimeout(os_timer.id);
 659                 os_timer = null;
 660         }
 661         // Hide all suggestions
 662         for(i=0;i<os_autoload_inputs.length;i++){
 663                 var r = os_map[os_autoload_inputs[i]];
 664                 if(r != null){
 665                         var b = document.getElementById(r.searchform);
 666                         if(b != null && b == targ){
 667                                 // set query value so the handler won't try to fetch additional results
 668                                 r.query = document.getElementById(r.searchbox).value;
 669                         }
 670                         os_hideResults(r);
 671                 }
 672         }
 673         return true;
 674 }
 675
 676 function os_hookEvent(element, hookName, hookFunct) {
 677         if (element.addEventListener) {
 678                 element.addEventListener(hookName, hookFunct, false);
 679         } else if (window.attachEvent) {
 680                 element.attachEvent("on" + hookName, hookFunct);
 681         }
 682 }
 683
 684 /** Init Result objects and event handlers */
 685 function os_initHandlers(name, formname, element){
 686         var r = new os_Results(name, formname);
 687         // event handler
 688         os_hookEvent(element, "keyup", function(event) { os_eventKeyup(event); });
 689         os_hookEvent(element, "keydown", function(event) { os_eventKeydown(event); });
 690         os_hookEvent(element, "keypress", function(event) { os_eventKeypress(event); });
 691         os_hookEvent(element, "blur", function(event) { os_eventBlur(event); });
 692         os_hookEvent(element, "focus", function(event) { os_eventFocus(event); });
 693         element.setAttribute("autocomplete","off");
 694         // stopping handler
 695         os_hookEvent(document.getElementById(formname), "submit", function(event){ return os_eventOnsubmit(event); });
 696         os_map[name] = r;
 697         // toggle link
 698         if(document.getElementById(r.toggle) == null){
 699                 // TODO: disable this while we figure out a way for this to work in all browsers
 700                 /* if(name=='searchInput'){
 701                         // special case: place above the main search box
 702                         var t = os_createToggle(r,"os-suggest-toggle");
 703                         var searchBody = document.getElementById('searchBody');
 704                         var first = searchBody.parentNode.firstChild.nextSibling.appendChild(t);
 705                 } else{
 706                         // default: place below search box to the right
 707                         var t = os_createToggle(r,"os-suggest-toggle-def");
 708                         var top = element.offsetTop + element.offsetHeight;
 709                         var left = element.offsetLeft + element.offsetWidth;
 710                         t.style.position = "absolute";
 711                         t.style.top = top + "px";
 712                         t.style.left = left + "px";
 713                         element.parentNode.appendChild(t);
 714                         // only now width gets calculated, shift right
 715                         left -= t.offsetWidth;
 716                         t.style.left = left + "px";
 717                         t.style.visibility = "visible";
 718                 } */
 719         }
 720
 721 }
 722
 723 /** Return the span element that contains the toggle link */
 724 function os_createToggle(r,className){
 725         var t = document.createElement("span");
 726         t.className = className;
 727         t.setAttribute("id", r.toggle);
 728         var link = document.createElement("a");
 729         link.setAttribute("href","javascript:void(0);");
 730         link.onclick = function(){ os_toggle(r.searchbox,r.searchform) };
 731         var msg = document.createTextNode(wgMWSuggestMessages[0]);
 732         link.appendChild(msg);
 733         t.appendChild(link);
 734         return t;
 735 }
 736
 737 /** Call when user clicks on some of the toggle links */
 738 function os_toggle(inputId,formName){
 739         r = os_map[inputId];
 740         var msg = '';
 741         if(r == null){
 742                 os_enableSuggestionsOn(inputId,formName);
 743                 r = os_map[inputId];
 744                 msg = wgMWSuggestMessages[0];
 745         } else{
 746                 os_disableSuggestionsOn(inputId,formName);
 747                 msg = wgMWSuggestMessages[1];
 748         }
 749         // change message
 750         var link = document.getElementById(r.toggle).firstChild;
 751         link.replaceChild(document.createTextNode(msg),link.firstChild);
 752 }
 753
 754 /** Call this to enable suggestions on input (id=inputId), on a form (name=formName) */
 755 function os_enableSuggestionsOn(inputId, formName){
 756         os_initHandlers( inputId, formName, document.getElementById(inputId) );
 757 }
 758
 759 /** Call this to disable suggestios on input box (id=inputId) */
 760 function os_disableSuggestionsOn(inputId){
 761         r = os_map[inputId];
 762         if(r != null){
 763                 // cancel/hide results
 764                 os_timer = null;
 765                 os_hideResults(r);
 766                 // turn autocomplete on !
 767                 document.getElementById(inputId).setAttribute("autocomplete","on");
 768                 // remove descriptor
 769                 os_map[inputId] = null;
 770         }
 771 }
 772
 773 /** Initialization, call upon page onload */
 774 function os_MWSuggestInit() {
 775         for(i=0;i<os_autoload_inputs.length;i++){
 776                 var id = os_autoload_inputs[i];
 777                 var form = os_autoload_forms[i];
 778                 element = document.getElementById( id );
 779                 if(element != null)
 780                         os_initHandlers(id,form,element);
 781         }
 782 }
 783
 784 hookEvent("load", os_MWSuggestInit);