From 56a4aff8ca61106c784dfa50eea3374aa934ebde Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Tue, 4 Feb 2014 13:11:17 +0100 Subject: [PATCH] jquery.suggestions, mediawiki.searchSuggest: Don't use jquery.autoEllipsis (How's that for a loaded commit topic, huh?) We can just use text-overflow: ellipsis, which is widely supported these days. The result is a lot less code being loaded on every page view and a lot less processing being done on the suggestions. This changes the position of the ellipsis from the "middle" of the text to the end of it. I don't think this is a problem. Bug: 30309 Bug: 59172 Change-Id: I6fc229a292a90a3cbb945b58061ee99b0ac7f97d --- resources/Resources.php | 3 +-- resources/jquery/jquery.suggestions.css | 6 ++++- resources/jquery/jquery.suggestions.js | 22 +++++-------------- .../mediawiki/mediawiki.searchSuggest.css | 10 ++++++++- .../mediawiki/mediawiki.searchSuggest.js | 12 ++-------- 5 files changed, 22 insertions(+), 31 deletions(-) diff --git a/resources/Resources.php b/resources/Resources.php index 72c17f302e..708e25a4c8 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -320,7 +320,7 @@ return array( 'jquery.suggestions' => array( 'scripts' => 'resources/jquery/jquery.suggestions.js', 'styles' => 'resources/jquery/jquery.suggestions.css', - 'dependencies' => 'jquery.autoEllipsis', + 'dependencies' => 'jquery.highlightText', ), 'jquery.tabIndex' => array( 'scripts' => 'resources/jquery/jquery.tabIndex.js', @@ -857,7 +857,6 @@ return array( 'searchsuggest-containing', ), 'dependencies' => array( - 'jquery.autoEllipsis', 'jquery.client', 'jquery.placeholder', 'jquery.suggestions', diff --git a/resources/jquery/jquery.suggestions.css b/resources/jquery/jquery.suggestions.css index e0ba647b9d..ea65946659 100644 --- a/resources/jquery/jquery.suggestions.css +++ b/resources/jquery/jquery.suggestions.css @@ -44,6 +44,11 @@ html > body .suggestions { line-height: 1.5em; padding: 0.01em 0.25em; text-align: left; + /* Apply ellipsis to suggestions */ + overflow: hidden; + -o-text-overflow: ellipsis; /* Opera 9 to 10 */ + text-overflow: ellipsis; + white-space: nowrap; } .suggestions-result-current { @@ -71,7 +76,6 @@ html > body .suggestions { color: white; } -.autoellipsis-matched, .highlight { font-weight: bold; } diff --git a/resources/jquery/jquery.suggestions.js b/resources/jquery/jquery.suggestions.js index f9a225fd52..29be239227 100644 --- a/resources/jquery/jquery.suggestions.js +++ b/resources/jquery/jquery.suggestions.js @@ -138,8 +138,8 @@ $.suggestions = { */ configure: function ( context, property, value ) { var newCSS, - $autoEllipseMe, $result, $results, childrenWidth, - i, expWidth, matchedText, maxWidth, text; + $result, $results, childrenWidth, + i, expWidth, maxWidth, text; // Validate creation using fallback values switch ( property ) { @@ -237,8 +237,6 @@ $.suggestions = { $results = context.data.$container.children( '.suggestions-results' ); $results.empty(); expWidth = -1; - $autoEllipseMe = $( [] ); - matchedText = null; for ( i = 0; i < context.config.suggestions.length; i++ ) { /*jshint loopfunc:true */ text = context.config.suggestions[i]; @@ -259,15 +257,11 @@ $.suggestions = { if ( typeof context.config.result.render === 'function' ) { context.config.result.render.call( $result, context.config.suggestions[i], context ); } else { - // Add with text - $result.append( $( '' ) - .css( 'whiteSpace', 'nowrap' ) - .text( text ) - ); + $result.text( text ); } if ( context.config.highlightInput ) { - matchedText = context.data.prevText; + $result.highlightText( context.data.prevText ); } // Widen results box if needed @@ -277,19 +271,13 @@ $.suggestions = { // factor in any padding, margin, or border space on the parent expWidth = childrenWidth + ( context.data.$container.width() - $result.width() ); } - $autoEllipseMe = $autoEllipseMe.add( $result ); } + // Apply new width for results box, if any if ( expWidth > context.data.$container.width() ) { maxWidth = context.config.maxExpandFactor * context.data.$textbox.width(); context.data.$container.width( Math.min( expWidth, maxWidth ) ); } - // autoEllipse the results. Has to be done after changing the width - $autoEllipseMe.autoEllipsis( { - hasSpan: true, - tooltip: true, - matchText: matchedText - } ); } } break; diff --git a/resources/mediawiki/mediawiki.searchSuggest.css b/resources/mediawiki/mediawiki.searchSuggest.css index 0fb862b944..df144ce91d 100644 --- a/resources/mediawiki/mediawiki.searchSuggest.css +++ b/resources/mediawiki/mediawiki.searchSuggest.css @@ -4,8 +4,8 @@ .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus { - text-decoration: none; color: black; + text-decoration: none; } .suggestions-result-current a.mw-searchSuggest-link, @@ -14,3 +14,11 @@ .suggestions-result-current a.mw-searchSuggest-link:focus { color: white; } + +.suggestions a.mw-searchSuggest-link .special-query { + /* Apply ellipsis to suggestions */ + overflow: hidden; + -o-text-overflow: ellipsis; /* Opera 9 to 10 */ + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/resources/mediawiki/mediawiki.searchSuggest.js b/resources/mediawiki/mediawiki.searchSuggest.js index 6999610756..8a8871d8fd 100644 --- a/resources/mediawiki/mediawiki.searchSuggest.js +++ b/resources/mediawiki/mediawiki.searchSuggest.js @@ -62,13 +62,7 @@ resultRenderCache.linkParams[ resultRenderCache.textParam ] = text; // this is the container
, jQueryfied - this - .append( - // the is needed for $.autoEllipsis to work - $( '' ) - .css( 'whiteSpace', 'nowrap' ) - .text( text ) - ) + this.text( text ) .wrap( $( '' ) .attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) ) @@ -95,13 +89,11 @@ $( '
' ) .addClass( 'special-query' ) .text( query ) - .autoEllipsis() ) .show(); } else { $el.find( '.special-query' ) - .text( query ) - .autoEllipsis(); + .text( query ); } if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) { -- 2.20.1