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

diff --git a/resources/Resources.php b/resources/Resources.php
index 72c17f3..708e25a 100644 (file)
--- 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 e0ba647..ea65946 100644 (file)
--- 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 f9a225f..29be239 100644 (file)
--- 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 <span> with text
-                                                               $result.append( $( '<span>' )
-                                                                               .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 0fb862b..df144ce 100644 (file)
--- 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 6999610..8a8871d 100644 (file)
--- 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 <div>, jQueryfied
-                       this
-                               .append(
-                                       // the <span> is needed for $.autoEllipsis to work
-                                       $( '<span>' )
-                                               .css( 'whiteSpace', 'nowrap' )
-                                               .text( text )
-                               )
+                       this.text( text )
                                .wrap(
                                        $( '<a>' )
                                                .attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
@@ -95,13 +89,11 @@
                                                $( '<div>' )
                                                        .addClass( 'special-query' )
                                                        .text( query )
-                                                       .autoEllipsis()
                                        )
                                        .show();
                        } else {
                                $el.find( '.special-query' )
-                                       .text( query )
-                                       .autoEllipsis();
+                                       .text( query );
                        }
 
                        if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) {