diff options
Diffstat (limited to 'skins/common/mwsuggest.js')
| -rw-r--r-- | skins/common/mwsuggest.js | 995 |
1 files changed, 995 insertions, 0 deletions
diff --git a/skins/common/mwsuggest.js b/skins/common/mwsuggest.js new file mode 100644 index 0000000..8f638c4 --- /dev/null +++ b/skins/common/mwsuggest.js @@ -0,0 +1,995 @@ +/* + * 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_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; +// number of steps to animate expansion/contraction of container width +var os_animation_steps = 6; +// num of pixels of smallest step +var os_animation_min_step = 2; +// delay between steps (in ms) +var os_animation_delay = 30; +// max width of container in percent of normal size (1 == 100%) +var os_container_max_width = 2; +// currently active animation timer +var os_animation_timer = null; +/** + * <datalist> is a new HTML5 element that allows you to manually supply + * suggestion lists and have them rendered according to the right platform + * conventions. However, the only shipping browser as of early 2010 is Opera, + * and that has a fatal problem: the suggestion lags behind what the user types + * by one keypress. (Reported as DSK-276870 to Opera's secret bug tracker.) + * The code here otherwise seems to work, though, so this can be flipped on + * (maybe with a UA check) when some browser has a better implementation. + */ +// var os_use_datalist = 'list' in document.createElement( 'input' ); +var os_use_datalist = false; + +/** 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 + this.stayHidden = false; // don't try to show if lost focus +} + +/** Timer user to animate expansion/contraction of container width */ +function os_AnimationTimer( r, target ) { + this.r = r; + var current = document.getElementById(r.container).offsetWidth; + this.inc = Math.round( ( target - current ) / os_animation_steps ); + if( this.inc < os_animation_min_step && this.inc >=0 ) { + this.inc = os_animation_min_step; // minimal animation step + } + if( this.inc > -os_animation_min_step && this.inc < 0 ) { + this.inc = -os_animation_min_step; + } + this.target = target; +} + +/****************** + * Initialization + ******************/ + +/** Initialization, call upon page onload */ +function os_MWSuggestInit() { + for( i = 0; i < os_autoload_inputs.length; i++ ) { + var id = os_autoload_inputs[i]; + var form = os_autoload_forms[i]; + element = document.getElementById( id ); + if( element != null ) { + os_initHandlers( id, form, element ); + } + } +} + +/** Init Result objects and event handlers */ +function os_initHandlers( name, formname, element ) { + var r = new os_Results( name, formname ); + // event handler + os_hookEvent( element, 'keyup', function( event ) { os_eventKeyup( event ); } ); + os_hookEvent( element, 'keydown', function( event ) { os_eventKeydown( event ); } ); + os_hookEvent( element, 'keypress', function( event ) { os_eventKeypress( event ); } ); + if ( !os_use_datalist ) { + // These are needed for the div hack to hide it if the user blurs. + os_hookEvent( element, 'blur', function( event ) { os_eventBlur( event ); } ); + os_hookEvent( element, 'focus', function( event ) { os_eventFocus( event ); } ); + // We don't want browser auto-suggestions interfering with our div, but + // autocomplete must be on for datalist to work (at least in Opera + // 10.10). + element.setAttribute( 'autocomplete', 'off' ); + } + // stopping handler + os_hookEvent( document.getElementById( formname ), 'submit', function( event ) { return os_eventOnsubmit( event ); } ); + os_map[name] = r; + // toggle link + if( document.getElementById( r.toggle ) == null ) { + // TODO: disable this while we figure out a way for this to work in all browsers + /* if( name == 'searchInput' ) { + // special case: place above the main search box + var t = os_createToggle( r, 'os-suggest-toggle' ); + var searchBody = document.getElementById( 'searchBody' ); + var first = searchBody.parentNode.firstChild.nextSibling.appendChild(t); + } else { + // default: place below search box to the right + var t = os_createToggle( r, 'os-suggest-toggle-def' ); + var top = element.offsetTop + element.offsetHeight; + var left = element.offsetLeft + element.offsetWidth; + t.style.position = 'absolute'; + t.style.top = top + 'px'; + t.style.left = left + 'px'; + element.parentNode.appendChild( t ); + // only now width gets calculated, shift right + left -= t.offsetWidth; + t.style.left = left + 'px'; + t.style.visibility = 'visible'; + } */ + } + +} + +function os_hookEvent( element, hookName, hookFunct ) { + if ( element.addEventListener ) { + element.addEventListener( hookName, hookFunct, false ); + } else if ( window.attachEvent ) { + element.attachEvent( 'on' + hookName, hookFunct ); + } +} + +/******************** + * 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 && !r.visible && os_timer == null ) { + // If the user hits the down arrow, fetch results immediately if none + // are already displayed. + r.query = ''; + os_fetchResults( r, targ.value, 0 ); + } + // Otherwise, if we're not using datalist, we need to handle scrolling and + // so on. + if ( os_use_datalist ) { + return; + } + if ( keypressed == 40 ) { // Arrow Down + if ( r.visible ) { + os_changeHighlight( r, r.selected, r.selected + 1, true ); + } + } 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; + + 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 = ( e.keyCode == undefined ) ? e.which : e.keyCode; + os_keypressed_count = 0; +} + + +/** 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 < os_autoload_inputs.length; i++ ) { + var r = os_map[os_autoload_inputs[i]]; + if( r != null ) { + var b = document.getElementById( r.searchform ); + if( b != null && b == targ ) { + // set query value so the handler won't try to fetch additional results + r.query = document.getElementById( r.searchbox ).value; + } + os_hideResults( r ); + } + } + return true; +} + + + +/** Hide results from the user, either making the div visibility=hidden or + * detaching the datalist from the input. */ +function os_hideResults( r ) { + if ( os_use_datalist ) { + document.getElementById( r.searchbox ).setAttribute( 'list', '' ); + } else { + var c = document.getElementById( r.container ); + if ( c != null ) { + c.style.visibility = 'hidden'; + } + } + r.visible = false; + r.selected = -1; +} + +function os_decodeValue( value ) { + if ( decodeURIComponent ) { + return decodeURIComponent( value ); + } + if( unescape ) { + return unescape( value ); + } + return null; +} + +function os_encodeQuery( value ) { + if ( encodeURIComponent ) { + return encodeURIComponent( value ); + } + if( escape ) { + return escape( value ); + } + return null; +} + +/** 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; + } + if ( os_use_datalist ) { + os_setupDatalist( r, p[1] ); + } else { + os_setupDiv( r, p[1] ); + } + } catch( e ) { + // bad response from server or such + os_hideResults( r ); + os_cache[cacheKey] = null; + } + } +} + +/** + * Create and populate a <datalist>. + * + * @param r os_Result object + * @param results Array of the new results to replace existing ones + */ +function os_setupDatalist( r, results ) { + var s = document.getElementById( r.searchbox ); + var c = document.getElementById( r.container ); + if ( c == null ) { + c = document.createElement( 'datalist' ); + c.setAttribute( 'id', r.container ); + document.body.appendChild( c ); + } else { + c.innerHTML = ''; + } + s.setAttribute( 'list', r.container ); + + r.results = new Array(); + r.resultCount = results.length; + r.visible = true; + for ( i = 0; i < results.length; i++ ) { + var title = os_decodeValue( results[i] ); + var opt = document.createElement( 'option' ); + opt.value = title; + r.results[i] = title; + c.appendChild( opt ); + } +} + +/** 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 && cached != undefined ) { + 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 == '' ) { + r.query = ''; + os_hideResults( r ); + return; + } else if( query == r.query ) { + return; // no change + } + + os_is_stopped = false; // make sure we're running + + // 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! + } +} + +/** 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; + } +} + +/** Check if x is a valid integer */ +function os_isNumber( x ) { + if( x == '' || isNaN( x ) ) { + return false; + } + for( var i = 0; i < x.length; i++ ) { + var c = x.charAt( i ); + if( !( c >= '0' && c <= '9' ) ) { + return false; + } + } + return true; +} + +/** Call this to enable suggestions on input (id=inputId), on a form (name=formName) */ +function os_enableSuggestionsOn( inputId, formName ) { + os_initHandlers( inputId, formName, document.getElementById( inputId ) ); +} + +/** Call this to disable suggestios on input box (id=inputId) */ +function os_disableSuggestionsOn( inputId ) { + r = os_map[inputId]; + if( r != null ) { + // cancel/hide results + os_timer = null; + os_hideResults( r ); + // turn autocomplete on ! + document.getElementById( inputId ).setAttribute( 'autocomplete', 'on' ); + // remove descriptor + os_map[inputId] = null; + } + + // Remove the element from the os_autoload_* arrays + var index = os_autoload_inputs.indexOf( inputId ); + if ( index >= 0 ) { + os_autoload_inputs[index] = os_autoload_forms[index] = ''; + } +} + +/************************************************ + * Div-only functions (irrelevant for datalist) + ************************************************/ + +/** 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 ); + // force canvas to stay hidden + r.stayHidden = true; + // cancel any pending fetches + if( os_timer != null && os_timer.id != null ) { + clearTimeout( os_timer.id ); + } + os_timer = null; + } +} + +/** Event: focus (catch only when stopped) */ +function os_eventFocus( e ) { + var targ = os_getTarget( e ); + var r = os_map[targ.id]; + if( r == null ) { + return; // not our event + } + r.stayHidden = false; +} + +/** + * Create and populate a <div>, for non-<datalist>-supporting browsers. + * + * @param r os_Result object + * @param results Array of the new results to replace existing ones + */ +function os_setupDiv( r, results ) { + var c = document.getElementById( r.container ); + if ( c == null ) { + c = os_createContainer( r ); + } + c.innerHTML = os_createResultTable( r, results ); + // init container table sizes + var t = document.getElementById( r.resultTable ); + r.containerTotal = t.offsetHeight; + r.containerRow = t.offsetHeight / r.resultCount; + os_fitContainer( r ); + os_trimResultText( r ); + os_showResults( r ); +} + +/** Create the result table to be placed in the container div */ +function os_createResultTable( r, results ) { + var c = document.getElementById( r.container ); + var width = c.offsetWidth - os_operaWidthFix( c.offsetWidth ); + var html = '<table class="os-suggest-results" id="' + r.resultTable + '" style="width: ' + width + 'px;">'; + r.results = new Array(); + r.resultCount = results.length; + for( i = 0; i < results.length; i++ ) { + var title = os_decodeValue( results[i] ); + r.results[i] = title; + html += '<tr><td class="os-suggest-result" id="' + r.resultTable + i + '"><span id="' + r.resultText + i + '">' + title + '</span></td></tr>'; + } + html += '</table>'; + return html; +} + +/** Show results div */ +function os_showResults( r ) { + if( os_is_stopped ) { + return; + } + if( r.stayHidden ) { + 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 ) { + // For browsers that don't understand overflow-x, estimate scrollbar width + if( typeof document.body.style.overflowX != 'string' ) { + return 30; + } + return 0; +} + +/** 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 ) { + // find max width, first see if we could expand the container to fit it + var maxW = 0; + for( var i = 0; i < r.resultCount; i++ ) { + var e = document.getElementById( r.resultText + i ); + if( e.offsetWidth > maxW ) { + maxW = e.offsetWidth; + } + } + var w = document.getElementById( r.container ).offsetWidth; + var fix = 0; + if( r.containerCount < r.resultCount ) { + fix = 20; // give 20px for scrollbar + } else { + fix = os_operaWidthFix( w ); + } + if( fix < 4 ) { + fix = 4; // basic padding + } + maxW += fix; + + // resize container to fit more data if permitted + var normW = document.getElementById( r.searchbox ).offsetWidth; + var prop = maxW / normW; + if( prop > os_container_max_width ) { + prop = os_container_max_width; + } else if( prop < 1 ) { + prop = 1; + } + var newW = Math.round( normW * prop ); + if( w != newW ) { + w = newW; + if( os_animation_timer != null ) { + clearInterval( os_animation_timer.id ); + } + os_animation_timer = new os_AnimationTimer( r, w ); + os_animation_timer.id = setInterval( "os_animateChangeWidth()", os_animation_delay ); + w -= fix; // this much is reserved + } + + // trim results + if( w < 10 ) { + return; + } + for( var i = 0; i < r.resultCount; i++ ) { + var e = document.getElementById( r.resultText + i ); + var replace = 1; + var lastW = e.offsetWidth + 1; + var iteration = 0; + var changedText = false; + while( e.offsetWidth > 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] ); + } + } +} + +/** Invoked on timer to animate change in container width */ +function os_animateChangeWidth() { + var r = os_animation_timer.r; + var c = document.getElementById( r.container ); + var w = c.offsetWidth; + var normW = document.getElementById( r.searchbox ).offsetWidth; + var normL = os_getElementPosition( r.searchbox ).left; + var inc = os_animation_timer.inc; + var target = os_animation_timer.target; + var nw = w + inc; + if( ( inc > 0 && nw >= target ) || ( inc <= 0 && nw <= target ) ) { + // finished ! + c.style.width = target + 'px'; + clearInterval( os_animation_timer.id ); + os_animation_timer = null; + } else { + // in-progress + c.style.width = nw + 'px'; + if( document.documentElement.dir == 'rtl' ) { + c.style.left = ( normL + normW + ( target - nw ) - os_animation_timer.target - 1 ) + 'px'; + } + } +} + +/** 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; +} + + +/******************** + * 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(); +} + +/** Toggle stuff seems to be dead code? */ + +/** Return the span element that contains the toggle link */ +function os_createToggle( r, className ) { + var t = document.createElement( 'span' ); + t.className = className; + t.setAttribute( 'id', r.toggle ); + var link = document.createElement( 'a' ); + link.setAttribute( 'href', 'javascript:void(0);' ); + link.onclick = function() { os_toggle( r.searchbox, r.searchform ); }; + var msg = document.createTextNode( wgMWSuggestMessages[0] ); + link.appendChild( msg ); + t.appendChild( link ); + return t; +} + +/** Call when user clicks on some of the toggle links */ +function os_toggle( inputId, formName ) { + r = os_map[inputId]; + var msg = ''; + if( r == null ) { + os_enableSuggestionsOn( inputId, formName ); + r = os_map[inputId]; + msg = wgMWSuggestMessages[0]; + } else{ + os_disableSuggestionsOn( inputId, formName ); + msg = wgMWSuggestMessages[1]; + } + // change message + var link = document.getElementById( r.toggle ).firstChild; + link.replaceChild( document.createTextNode( msg ), link.firstChild ); +} + +hookEvent( 'load', os_MWSuggestInit ); |