(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
'jquery.suggestions' => array(
'scripts' => 'resources/jquery/jquery.suggestions.js',
'styles' => 'resources/jquery/jquery.suggestions.css',
'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',
),
'jquery.tabIndex' => array(
'scripts' => 'resources/jquery/jquery.tabIndex.js',
'searchsuggest-containing',
),
'dependencies' => array(
'searchsuggest-containing',
),
'dependencies' => array(
'jquery.client',
'jquery.placeholder',
'jquery.suggestions',
'jquery.client',
'jquery.placeholder',
'jquery.suggestions',
line-height: 1.5em;
padding: 0.01em 0.25em;
text-align: left;
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 {
}
.suggestions-result-current {
.highlight {
font-weight: bold;
}
.highlight {
font-weight: bold;
}
*/
configure: function ( context, property, value ) {
var newCSS,
*/
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 ) {
// Validate creation using fallback values
switch ( property ) {
$results = context.data.$container.children( '.suggestions-results' );
$results.empty();
expWidth = -1;
$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];
for ( i = 0; i < context.config.suggestions.length; i++ ) {
/*jshint loopfunc:true */
text = context.config.suggestions[i];
if ( typeof context.config.result.render === 'function' ) {
context.config.result.render.call( $result, context.config.suggestions[i], context );
} else {
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 )
- );
}
if ( context.config.highlightInput ) {
}
if ( context.config.highlightInput ) {
- matchedText = context.data.prevText;
+ $result.highlightText( context.data.prevText );
}
// Widen results box if needed
}
// Widen results box if needed
// factor in any padding, margin, or border space on the parent
expWidth = childrenWidth + ( context.data.$container.width() - $result.width() );
}
// 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 ) );
}
// 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
- } );
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
}
.suggestions-result-current a.mw-searchSuggest-link,
}
.suggestions-result-current a.mw-searchSuggest-link,
.suggestions-result-current a.mw-searchSuggest-link:focus {
color: white;
}
.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;
+}
resultRenderCache.linkParams[ resultRenderCache.textParam ] = text;
// this is the container <div>, jQueryfied
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 )
- )
.wrap(
$( '<a>' )
.attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
.wrap(
$( '<a>' )
.attr( 'href', resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
$( '<div>' )
.addClass( 'special-query' )
.text( query )
$( '<div>' )
.addClass( 'special-query' )
.text( query )
)
.show();
} else {
$el.find( '.special-query' )
)
.show();
} else {
$el.find( '.special-query' )
- .text( query )
- .autoEllipsis();
}
if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) {
}
if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) {