From: Leo Koppelkamm Date: Fri, 8 Jul 2011 13:24:05 +0000 (+0000) Subject: Backport jQuery UI CSS fix for weird Webkit reflow bug. See https://github.com/jquery... X-Git-Tag: 1.31.0-rc.0~28995 X-Git-Url: http://git.cyclocoop.org/%7B%7B%20url_for%28%27admin_vote_add%27%29%20%7D%7D?a=commitdiff_plain;h=346e0f1c5ef855d0427202cd434f323acf0ef370;p=lhc%2Fweb%2Fwiklou.git Backport jQuery UI CSS fix for weird Webkit reflow bug. See https://github.com/jquery/jquery-ui/commit/a090faa833cf5b40105bb4aa74bca7ac39366fe9/ --- diff --git a/resources/Resources.php b/resources/Resources.php index 88ec765647..511f00200b 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -652,7 +652,7 @@ return array( 'scripts' => 'common/mwsuggest.js', 'remoteBasePath' => $GLOBALS['wgStylePath'], 'localBasePath' => $GLOBALS['wgStyleDirectory'], - 'dependencies' => array( 'mediawiki.legacy.wikibits', 'jquery.client' ), + 'dependencies' => array( 'mediawiki.legacy.wikibits', 'jquery.client', 'jquery.ui.autocomplete', 'jquery.suggestions' ), 'messages' => array( 'search-mwsuggest-enabled', 'search-mwsuggest-disabled' ), ), 'mediawiki.legacy.preview' => array( diff --git a/resources/jquery.ui/jquery.ui.autocomplete.js b/resources/jquery.ui/jquery.ui.autocomplete.js index 93424831d2..66a6569283 100644 --- a/resources/jquery.ui/jquery.ui.autocomplete.js +++ b/resources/jquery.ui/jquery.ui.autocomplete.js @@ -1,5 +1,5 @@ /* - * jQuery UI Autocomplete 1.8.11 + * jQuery UI Autocomplete 1.8.14 * * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. @@ -352,8 +352,9 @@ $.widget( "ui.autocomplete", { }, _suggest: function( items ) { - var ul = this.menu.element - .empty() + var ul = this.menu.element; + ul.children().remove(); + ul.empty() .zIndex( this.element.zIndex() + 1 ); this._renderMenu( ul, items ); // TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate @@ -470,10 +471,10 @@ $.widget("ui.menu", { var self = this; // don't refresh list items that are already adapted - var items = this.element.children("li:not(.ui-menu-item):has(a)") - .addClass("ui-menu-item") - .attr("role", "menuitem"); - + var items = this.element.children("li:not(.ui-menu-item):has(a)") + .addClass("ui-menu-item") + .attr("role", "menuitem"); + // items.children("a") .addClass("ui-corner-all") .attr("tabindex", -1) @@ -490,12 +491,12 @@ $.widget("ui.menu", { this.deactivate(); if (this.hasScroll()) { var offset = item.offset().top - this.element.offset().top, - scroll = this.element.attr("scrollTop"), + scroll = this.element.scrollTop(), elementHeight = this.element.height(); if (offset < 0) { - this.element.attr("scrollTop", scroll + offset); + this.element.scrollTop( scroll + offset); } else if (offset >= elementHeight) { - this.element.attr("scrollTop", scroll + offset - elementHeight + item.height()); + this.element.scrollTop( scroll + offset - elementHeight + item.height()); } } this.active = item.eq(0) @@ -601,7 +602,7 @@ $.widget("ui.menu", { }, hasScroll: function() { - return this.element.height() < this.element.attr("scrollHeight"); + return this.element.height() < this.element[ $.fn.prop ? "prop" : "attr" ]("scrollHeight"); }, select: function( event ) { diff --git a/resources/jquery.ui/themes/default/jquery.ui.autocomplete.css b/resources/jquery.ui/themes/default/jquery.ui.autocomplete.css index 5957f78ffa..f287dbe998 100644 --- a/resources/jquery.ui/themes/default/jquery.ui.autocomplete.css +++ b/resources/jquery.ui/themes/default/jquery.ui.autocomplete.css @@ -13,6 +13,7 @@ padding: 2px; margin: 0; display:block; + float: left; } .ui-menu .ui-menu { margin-top: -3px; diff --git a/resources/jquery.ui/themes/vector/jquery.ui.autocomplete.css b/resources/jquery.ui/themes/vector/jquery.ui.autocomplete.css index 6610a8781a..c06fd18a24 100644 --- a/resources/jquery.ui/themes/vector/jquery.ui.autocomplete.css +++ b/resources/jquery.ui/themes/vector/jquery.ui.autocomplete.css @@ -13,6 +13,7 @@ padding: 2px; margin: 0; display:block; + float: left; } .ui-menu .ui-menu { margin-top: -3px; diff --git a/skins/common/mwsuggest.js b/skins/common/mwsuggest.js index 6971d30df1..b8fe2cff63 100644 --- a/skins/common/mwsuggest.js +++ b/skins/common/mwsuggest.js @@ -1,1066 +1,92 @@ -/* - * 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) - */ - -// Make sure wgMWSuggestTemplate is defined -if ( !mw.config.exists( 'wgMWSuggestTemplate' ) ) { - mw.config.set( 'wgMWSuggestTemplate', mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' ) - + "/api.php?action=opensearch\x26search={searchTerms}\x26namespace={namespaces}\x26suggest" ); -} - -// search_box_id -> Results object -window.os_map = {}; -// cached data, url -> json_text -window.os_cache = {}; -// global variables for suggest_keypress -window.os_cur_keypressed = 0; -window.os_keypressed_count = 0; -// type: Timer -window.os_timer = null; -// tie mousedown/up events -window.os_mouse_pressed = false; -window.os_mouse_num = -1; -// if true, the last change was made by mouse (and not keyboard) -window.os_mouse_moved = false; -// delay between keypress and suggestion (in ms) -window.os_search_timeout = 250; -// these pairs of inputs/forms will be autoloaded at startup -window.os_autoload_inputs = new Array('searchInput', 'searchInput2', 'powerSearchText', 'searchText'); -window.os_autoload_forms = new Array('searchform', 'searchform2', 'powersearch', 'search' ); -// if we stopped the service -window.os_is_stopped = false; -// max lines to show in suggest table -window.os_max_lines_per_suggest = 7; -// number of steps to animate expansion/contraction of container width -window.os_animation_steps = 6; -// num of pixels of smallest step -window.os_animation_min_step = 2; -// delay between steps (in ms) -window.os_animation_delay = 30; -// max width of container in percent of normal size (1 == 100%) -window.os_container_max_width = 2; -// currently active animation timer -window.os_animation_timer = null; -// whether MWSuggest is enabled. Set to false when os_MWSuggestDisable() is called -window.os_enabled = true; - -/** - * is a new HTML5 element that allows you to manually supply - * suggestion lists and have them rendered according to the right platform - * conventions. Opera as of version 11 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.) However, Firefox 4 supports it without - * problems, so Opera is just blacklisted here. Ideally we wouldn't blacklist - * future versions, in case they fix it, but the fallback isn't bad at all and - * the failure if they don't fix it is very annoying, so in this case we'll - * blacklist future versions too. - */ -window.os_use_datalist = 'list' in document.createElement( 'input' ) - && $.client.profile().name != 'opera'; - -/** Timeout timer class that will fetch the results */ -window.os_Timer = function( id, r, query ) { - this.id = id; - this.r = r; - this.query = query; -}; - -/** Property class for single search box */ -window.os_Results = function( 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 */ -window.os_AnimationTimer = function( 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 */ -window.os_MWSuggestInit = function() { - if ( !window.os_enabled ) { - return; - } +var $container = $('
', {'class' : 'open-search-suggestions'}), + cache = {}, + $t, + url = mw.config.get('wgScriptPath') + '/api.php?format=json&action=opensearch&search=', + maxRowWindow; - for( var 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 ); - } - } -}; - -/* Teardown, called when things like SimpleSearch need to disable MWSuggest */ -window.os_MWSuggestTeardown = function() { - for( var 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_teardownHandlers( id, form, element ); - } - } -}; - -/* Call this to disable MWSuggest. Works regardless of whether MWSuggest has been initialized already. */ -window.os_MWSuggestDisable = function() { - window.os_MWSuggestTeardown(); - window.os_enabled = false; -} - - -/** Init Result objects and event handlers */ -window.os_initHandlers = function( name, formname, element ) { - var r = new os_Results( name, formname ); - var formElement = document.getElementById( formname ); - if( !formElement ) { - // Older browsers (Opera 8) cannot get form elements - return; - } - // event handler - os_hookEvent( element, 'keyup', os_eventKeyup ); - os_hookEvent( element, 'keydown', os_eventKeydown ); - os_hookEvent( element, 'keypress', os_eventKeypress ); - if ( !os_use_datalist ) { - // These are needed for the div hack to hide it if the user blurs. - os_hookEvent( element, 'blur', os_eventBlur ); - os_hookEvent( element, 'focus', os_eventFocus ); - // 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( formElement, 'submit', os_eventOnsubmit ); - 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'; - } */ - } - -}; - -window.os_teardownHandlers = function( name, formname, element ) { - var formElement = document.getElementById( formname ); - if( !formElement ) { - // Older browsers (Opera 8) cannot get form elements - return; - } - - os_unhookEvent( element, 'keyup', os_eventKeyup ); - os_unhookEvent( element, 'keydown', os_eventKeydown ); - os_unhookEvent( element, 'keypress', os_eventKeypress ); - if ( !os_use_datalist ) { - // These are needed for the div hack to hide it if the user blurs. - os_unhookEvent( element, 'blur', os_eventBlur ); - os_unhookEvent( element, 'focus', os_eventFocus ); - // 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.removeAttribute( 'autocomplete' ); - } - // stopping handler - os_unhookEvent( formElement, 'submit', os_eventOnsubmit ); -}; - - -window.os_hookEvent = function( element, hookName, hookFunct ) { - if ( element.addEventListener ) { - element.addEventListener( hookName, hookFunct, false ); - } else if ( window.attachEvent ) { - element.attachEvent( 'on' + hookName, hookFunct ); - } -}; - -window.os_unhookEvent = function( element, hookName, hookFunct ) { - if ( element.removeEventListener ) { - element.removeEventListener( hookName, hookFunct, false ); - } else if ( element.detachEvent ) { - element.detachEvent( 'on' + hookName, hookFunct ); - } -} - -/******************** - * Keyboard events - ********************/ - -/** Event handler that will fetch results on keyup */ -window.os_eventKeyup = function( 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 */ -window.os_processKey = function( 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 */ -window.os_eventKeypress = function( 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) */ -window.os_eventKeydown = function( 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... */ -window.os_eventOnsubmit = function( e ) { - var targ = os_getTarget( e ); +$('body').append( $container ); - 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 ); +//Grabs namespaces from DOM +//@return: Array of Namespaces +getNamespaces = function() { + var namespaces = []; + $('form#powersearch, form#search').find( '[name^="ns"]' ).each(function() { + if ( this.checked || ( this.type == 'hidden' && this.value == '1' ) ) { + namespaces.push( this.name.substring( 2 ) ); } + }); + if ( !namespaces.length ) { + namespaces = wgSearchNamespaces; } - return true; + return namespaces.join('|'); }; - -/** Hide results from the user, either making the div visibility=hidden or - * detaching the datalist from the input. */ -window.os_hideResults = function( r ) { - if ( os_use_datalist ) { - document.getElementById( r.searchbox ).setAttribute( 'list', '' ); +deliverResult = function( obj, response, maxRowWindow ) { + if (obj && obj.length > 1) { + response( obj[1] ); + var maxRow = Math.min.apply( Math, [7, obj[1].length, maxRowWindow] ); + $t.css( 'height', maxRow * $t.find( '.ui-menu-item' ).eq( 0 ).height() ); } else { - var c = document.getElementById( r.container ); - if ( c != null ) { - c.style.visibility = 'hidden'; - } - } - r.visible = false; - r.selected = -1; -}; - -window.os_decodeValue = function( value ) { - if ( decodeURIComponent ) { - return decodeURIComponent( value ); - } - if( unescape ) { - return unescape( value ); - } - return null; -}; - -window.os_encodeQuery = function( value ) { - if ( encodeURIComponent ) { - return encodeURIComponent( value ); - } - if( escape ) { - return escape( value ); - } - return null; -}; - -/** Handles data from XMLHttpRequest, and updates the suggest results */ -window.os_updateResults = function( 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 . - * - * @param r os_Result object - * @param results Array of the new results to replace existing ones - */ -window.os_setupDatalist = function( 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 */ -window.os_getNamespaces = function( 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 */ -window.os_updateIfRelevant = function( 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 */ -window.os_delayedFetch = function() { - if( os_timer == null ) { - return; - } - var r = os_timer.r; - var query = os_timer.query; - os_timer = null; - var path = mw.config.get( '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() */ -window.os_fetchResults = function( 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 */ -window.os_getTarget = function( 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 */ -window.os_isNumber = function( 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) */ -window.os_enableSuggestionsOn = function( inputId, formName ) { - os_initHandlers( inputId, formName, document.getElementById( inputId ) ); -}; - -/** Call this to disable suggestios on input box (id=inputId) */ -window.os_disableSuggestionsOn = function( 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 */ -window.os_eventBlur = function( 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) */ -window.os_eventFocus = function( 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
, for non--supporting browsers. - * - * @param r os_Result object - * @param results Array of the new results to replace existing ones - */ -window.os_setupDiv = function( 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 */ -window.os_createResultTable = function( r, results ) { - var c = document.getElementById( r.container ); - var width = c.offsetWidth - os_operaWidthFix( c.offsetWidth ); - var html = ''; - 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 += ''; - } - html += '
' + title + '
'; - return html; -}; - -/** Show results div */ -window.os_showResults = function( 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; - } -}; - -window.os_operaWidthFix = function( 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 */ -window.f_clientWidth = function() { - return f_filterResults( - window.innerWidth ? window.innerWidth : 0, - document.documentElement ? document.documentElement.clientWidth : 0, - document.body ? document.body.clientWidth : 0 - ); -}; - -window.f_clientHeight = function() { - return f_filterResults( - window.innerHeight ? window.innerHeight : 0, - document.documentElement ? document.documentElement.clientHeight : 0, - document.body ? document.body.clientHeight : 0 - ); -}; - -window.f_scrollLeft = function() { - return f_filterResults( - window.pageXOffset ? window.pageXOffset : 0, - document.documentElement ? document.documentElement.scrollLeft : 0, - document.body ? document.body.scrollLeft : 0 - ); -}; - -window.f_scrollTop = function() { - return f_filterResults( - window.pageYOffset ? window.pageYOffset : 0, - document.documentElement ? document.documentElement.scrollTop : 0, - document.body ? document.body.scrollTop : 0 - ); -}; - -window.f_filterResults = function( 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 */ -window.os_availableHeight = function( 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} */ -window.os_getElementPosition = function( 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 */ -window.os_createContainer = function( 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 */ -window.os_fitContainer = function( 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 "..." */ -window.os_trimResultText = function( 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 */ -window.os_animateChangeWidth = function() { - 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 */ -window.os_changeHighlight = function( 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 ); - } -}; - -window.os_HighlightClass = function() { - 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'; -}; - -window.os_updateSearchQuery = function( r, newText ) { - document.getElementById( r.searchbox ).value = newText; - r.query = newText; -}; - - -/******************** - * Mouse events - ********************/ - -/** Mouse over the container */ -window.os_eventMouseover = function( 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) */ -window.os_getNumberSuffix = function( 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 */ -window.os_eventMousemove = function( srcId, e ) { - os_mouse_moved = true; -}; - -/** Mouse button held down, register possible click */ -window.os_eventMousedown = function( 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 */ -window.os_eventMouseup = function( 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 */ -window.os_createToggle = function( 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 */ -window.os_toggle = function( 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 ); + response( [] ); + } +}; + +$("#searchInput").autocomplete({ + minLength: 2, + source: function ( request, response ) { + request.term = $.trim (request.term); + var namespaces = getNamespaces(); + var term = request.term + namespaces; + if (term in cache) { + deliverResult( cache[term], response, maxRowWindow ); + return; + } + $.getJSON(url + mw.util.rawurlencode( request.term ) + '&namespace=' + namespaces, function ( obj ) { + cache[term] = obj; + deliverResult( obj, response, maxRowWindow ); + }); + }, + select: function() { + $('#searchGoButton').click(); + }, + create : function() { + $t = $container.find('ul'); + }, + appendTo: '.open-search-suggestions', + open: function() { + maxRowWindow = Math.floor( ( $(window).height() - $t.offset().top + $(window).scrollTop() ) / $t.find( '.ui-menu-item' ).eq( 0 ).height() ); + }, + focus : function() { + console.log('focused'); + } +}); +$("#searchInput").data("autocomplete")._resizeMenu = function () { +}; +// $("#searchInput").data("autocomplete")._resizeMenu = function () { +// var ul = this.menu.element; +// ul.width( "" ); +// ul.children().each(function() { +// console.log($(this).width('').width()); +// }); +// //Fix weird webkit reflow bug +// // window.setTimeout(function(ul) { +// // var ul = $('.ui-autocomplete'); +// // ul.outerWidth( Math.max( +// // ul.width( "" ).outerWidth(), +// // this.element.outerWidth() +// // ) ); +// // }, 80); +// // window.setTimeout(function(ul) { +// var ht = ul[0].offsetWidth +// // }, 10); +// // var children = ul.children(); +// // ul.empty(); +// // ul.append(children); +// +// +// } +/* Teardown, called when things like SimpleSearch need to disable MWSuggest */ +window.os_MWSuggestTeardown = function() { + $("#searchInput").autocomplete( "destroy" ); +}; \ No newline at end of file diff --git a/skins/common/shared.css b/skins/common/shared.css index 9ed108575d..b8270f348c 100644 --- a/skins/common/shared.css +++ b/skins/common/shared.css @@ -193,6 +193,24 @@ p.mw-revdel-editreasons { /* * OpenSearch ajax suggestions */ +.ui-autocomplete { + font-size: 95%!important; + border: 1px solid #AAA!important; + overflow: auto; + height: 100px; +} +.ui-autocomplete #ui-active-menuitem { + background: #4C59A6; + background: Highlight; + color: white; + color: HighlightText; + border-color: #4C59A6; + border-color: Highlight; +} +.ui-autocomplete .ui-menu-item a{ + line-height: 1.1!important; + font-size: 95%!important; +} .os-suggest { overflow: auto; overflow-x: hidden; diff --git a/skins/monobook/main.css b/skins/monobook/main.css index f5f8ef9fc2..ffb85b997e 100644 --- a/skins/monobook/main.css +++ b/skins/monobook/main.css @@ -1246,8 +1246,8 @@ div.mw-lag-warn-high { } /* God-damned hack for the crappy layout */ -.os-suggest { - font-size: 127%; +.ui-autocomplete { + font-size: 127%!important; } /* Sometimes people don't want personal tools to be lowercase! */