r56934 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r56933‎ | r56934 | r56935 >
Date:23:18, 25 September 2009
Author:tparscal
Status:deferred
Tags:
Comment:
Made the suggestions plugin use the correct width calculations - and also added position parameter to autoEllipse, so now you can do left ("...end"), center ("start...end") or right ("start...") positioned ellipsis.
Modified paths:
  • /trunk/extensions/UsabilityInitiative/SimpleSearch/SimpleSearch.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/css/combined.css (modified) (history)
  • /trunk/extensions/UsabilityInitiative/css/combined.min.css (modified) (history)
  • /trunk/extensions/UsabilityInitiative/css/suggestions.css (modified) (history)
  • /trunk/extensions/UsabilityInitiative/js/plugins.combined.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/js/plugins.combined.min.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/js/plugins/jquery.autoEllipse.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/js/plugins/jquery.suggestions.js (modified) (history)

Diff [purge]

Index: trunk/extensions/UsabilityInitiative/SimpleSearch/SimpleSearch.js
——@@ -91,13 +91,16 @@
9292 .addClass( 'special-label' )
9393 .text( gM( 'simplesearch-containing' ) )
9494 .appendTo( $j(this) );
95 - $query = $j( '<span />' )
 95+ $query = $j( '<div />' )
9696 .addClass( 'special-query' )
9797 .text( query )
9898 .appendTo( $j(this) );
9999 $query.autoEllipse();
100100 } else {
101 - $j(this).find( '.special-query' ).empty().text( query ).autoEllipse();
 101+ $j(this).find( '.special-query' )
 102+ .empty()
 103+ .text( query )
 104+ .autoEllipse();
102105 }
103106 } else {
104107 $j(this).hide();
Index: trunk/extensions/UsabilityInitiative/css/suggestions.css
——@@ -36,11 +36,13 @@
3737 .suggestions-result {
3838 color: black;
3939 color: WindowText;
40 - padding: 0.25em 0.25em;
41 - line-height: 1.25em;
4240 margin: 0;
4341 width: 100%;
4442 }
 43+.suggestions-result span {
 44+ line-height: 1.5em;
 45+ padding: 0.25em 0.25em;
 46+}
4547 .suggestions-result-current {
4648 background-color: #4C59A6;
4749 background-color: Highlight;
Index: trunk/extensions/UsabilityInitiative/css/combined.css
——@@ -36,11 +36,13 @@
3737 .suggestions-result {
3838 color: black;
3939 color: WindowText;
40 - padding: 0.25em 0.25em;
41 - line-height: 1.25em;
4240 margin: 0;
4341 width: 100%;
4442 }
 43+.suggestions-result span {
 44+ line-height: 1.5em;
 45+ padding: 0.25em 0.25em;
 46+}
4547 .suggestions-result-current {
4648 background-color: #4C59A6;
4749 background-color: Highlight;
Index: trunk/extensions/UsabilityInitiative/css/combined.min.css
——@@ -34,11 +34,13 @@
3535 .suggestions-result{
3636 color:black;
3737 color:WindowText;
38 -padding:0.25em 0.25em;
39 -line-height:1.25em;
4038 margin:0;
4139 width:100%;
4240 }
 41+.suggestions-result span{
 42+line-height:1.5em;
 43+padding:0.25em 0.25em;
 44+}
4345 .suggestions-result-current{
4446 background-color:#4C59A6;
4547 background-color:Highlight;
——@@ -446,4 +448,4 @@
447449 background-color:white;
448450 text-decoration:none;
449451 border-color:#a8d7f9;
450 -}
\ No newline at end of file
 452+}
Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.autoEllipse.js
——@@ -3,16 +3,47 @@
44 */
55 ( function( $ ) {
66
7 -$.fn.autoEllipse = function() {
 7+$.fn.autoEllipse = function( options ) {
88 $(this).each( function() {
 9+ options = $.extend( {
 10+ 'position': 'center'
 11+ }, options );
912 var text = $(this).text();
1013 var $text = $( '<span />' ).text( text ).css( 'whiteSpace', 'nowrap' );
1114 $(this).empty().append( $text );
12 - if ( $text.outerWidth() > $(this).outerWidth() ) {
13 - var i = text.length;
14 - while ( $text.outerWidth() > $(this).outerWidth() && i > 0 ) {
15 - $text.text( text.substr( 0, i ) + '...' );
16 - i--;
 15+ if ( $text.outerWidth() > $(this).innerWidth() ) {
 16+ switch ( options.position ) {
 17+ case 'right':
 18+ var l = text.length;
 19+ while ( $text.outerWidth() > $(this).innerWidth() && l > 0 ) {
 20+ $text.text( text.substr( 0, l ) + '...' );
 21+ l--;
 22+ }
 23+ break;
 24+ case 'center':
 25+ var i = [Math.round( text.length / 2 ), Math.round( text.length / 2 )];
 26+ var side = 1; // Begin with making the end shorter
 27+ while ( $text.outerWidth() > ( $(this).innerWidth() ) && i[0] > 0 ) {
 28+ $text.text( text.substr( 0, i[0] ) + '...' + text.substr( i[1] ) );
 29+ // Alternate between trimming the end and begining
 30+ if ( side == 0 ) {
 31+ // Make the begining shorter
 32+ i[0]--;
 33+ side = 1;
 34+ } else {
 35+ // Make the end shorter
 36+ i[1]++;
 37+ side = 0;
 38+ }
 39+ }
 40+ break;
 41+ case 'left':
 42+ var r = 0;
 43+ while ( $text.outerWidth() > $(this).innerWidth() && r < text.length ) {
 44+ $text.text( '...' + text.substr( r ) );
 45+ r++;
 46+ }
 47+ break;
1748 }
1849 }
1950 } );
Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.suggestions.js
——@@ -119,6 +119,15 @@
120120 } else {
121121 // Rebuild the suggestions list
122122 context.data.$container.show();
 123+ // Update the size and position of the list
 124+ context.data.$container.css( {
 125+ 'top': context.config.$region.offset().top + context.config.$region.outerHeight(),
 126+ 'bottom': 'auto',
 127+ 'width': context.config.$region.outerWidth(),
 128+ 'height': 'auto',
 129+ 'left': context.config.$region.offset().left,
 130+ 'right': 'auto'
 131+ } );
123132 var $results = context.data.$container.children( '.suggestions-results' );
124133 $results.empty();
125134 for ( var i = 0; i < context.config.suggestions.length; i++ ) {
——@@ -131,19 +140,9 @@
132141 if ( typeof context.config.result.render == 'function' ) {
133142 context.config.result.render.call( $result, context.config.suggestions[i] );
134143 } else {
135 - $result.text( context.config.suggestions[i] );
136 - $result.autoEllipse();
 144+ $result.text( context.config.suggestions[i] ).autoEllipse();
137145 }
138146 }
139 - // Update the size and position of the list
140 - context.data.$container.css( {
141 - 'top': context.config.$region.offset().top + context.config.$region.outerHeight(),
142 - 'bottom': 'auto',
143 - 'width': context.config.$region.outerWidth(),
144 - 'height': 'auto',
145 - 'left': context.config.$region.offset().left,
146 - 'right': 'auto'
147 - } );
148147 }
149148 }
150149 break;
Index: trunk/extensions/UsabilityInitiative/js/plugins.combined.js
——@@ -81,16 +81,47 @@
8282 */
8383 ( function( $ ) {
8484
85 -$.fn.autoEllipse = function() {
 85+$.fn.autoEllipse = function( options ) {
8686 $(this).each( function() {
 87+ options = $.extend( {
 88+ 'position': 'center'
 89+ }, options );
8790 var text = $(this).text();
8891 var $text = $( '<span />' ).text( text ).css( 'whiteSpace', 'nowrap' );
8992 $(this).empty().append( $text );
90 - if ( $text.outerWidth() > $(this).outerWidth() ) {
91 - var i = text.length;
92 - while ( $text.outerWidth() > $(this).outerWidth() && i > 0 ) {
93 - $text.text( text.substr( 0, i ) + '...' );
94 - i--;
 93+ if ( $text.outerWidth() > $(this).innerWidth() ) {
 94+ switch ( options.position ) {
 95+ case 'right':
 96+ var l = text.length;
 97+ while ( $text.outerWidth() > $(this).innerWidth() && l > 0 ) {
 98+ $text.text( text.substr( 0, l ) + '...' );
 99+ l--;
 100+ }
 101+ break;
 102+ case 'center':
 103+ var i = [Math.round( text.length / 2 ), Math.round( text.length / 2 )];
 104+ var side = 1; // Begin with making the end shorter
 105+ while ( $text.outerWidth() > ( $(this).innerWidth() ) && i[0] > 0 ) {
 106+ $text.text( text.substr( 0, i[0] ) + '...' + text.substr( i[1] ) );
 107+ // Alternate between trimming the end and begining
 108+ if ( side == 0 ) {
 109+ // Make the begining shorter
 110+ i[0]--;
 111+ side = 1;
 112+ } else {
 113+ // Make the end shorter
 114+ i[1]++;
 115+ side = 0;
 116+ }
 117+ }
 118+ break;
 119+ case 'left':
 120+ var r = 0;
 121+ while ( $text.outerWidth() > $(this).innerWidth() && r < text.length ) {
 122+ $text.text( '...' + text.substr( r ) );
 123+ r++;
 124+ }
 125+ break;
95126 }
96127 }
97128 } );
——@@ -484,6 +515,15 @@
485516 } else {
486517 // Rebuild the suggestions list
487518 context.data.$container.show();
 519+ // Update the size and position of the list
 520+ context.data.$container.css( {
 521+ 'top': context.config.$region.offset().top + context.config.$region.outerHeight(),
 522+ 'bottom': 'auto',
 523+ 'width': context.config.$region.outerWidth(),
 524+ 'height': 'auto',
 525+ 'left': context.config.$region.offset().left,
 526+ 'right': 'auto'
 527+ } );
488528 var $results = context.data.$container.children( '.suggestions-results' );
489529 $results.empty();
490530 for ( var i = 0; i < context.config.suggestions.length; i++ ) {
——@@ -496,19 +536,9 @@
497537 if ( typeof context.config.result.render == 'function' ) {
498538 context.config.result.render.call( $result, context.config.suggestions[i] );
499539 } else {
500 - $result.text( context.config.suggestions[i] );
501 - $result.autoEllipse();
 540+ $result.text( context.config.suggestions[i] ).autoEllipse();
502541 }
503542 }
504 - // Update the size and position of the list
505 - context.data.$container.css( {
506 - 'top': context.config.$region.offset().top + context.config.$region.outerHeight(),
507 - 'bottom': 'auto',
508 - 'width': context.config.$region.outerWidth(),
509 - 'height': 'auto',
510 - 'left': context.config.$region.offset().left,
511 - 'right': 'auto'
512 - } );
513543 }
514544 }
515545 break;
Index: trunk/extensions/UsabilityInitiative/js/plugins.combined.min.js
——@@ -11,7 +11,10 @@
1212 {var i=0,l=array.length,loop=opts.loop||function(){};$.whileAsync($.extend(opts,{test:function(){return i<l;},loop:function()
1313 {var val=array[i];return loop.call(val,i++,val);}}));}
1414 $.fn.eachAsync=function(opts)
15 -{$.eachAsync(this,opts);return this;}})(jQuery);(function($){$.fn.autoEllipse=function(){$(this).each(function(){var text=$(this).text();var $text=$('<span />').text(text).css('whiteSpace','nowrap');$(this).empty().append($text);if($text.outerWidth()>$(this).outerWidth()){var i=text.length;while($text.outerWidth()>$(this).outerWidth()&&i>0){$text.text(text.substr(0,i)+'...');i--;}}});};})(jQuery);(function($){$.browserTest=function(a,z){var u='unknown',x='X',m=function(r,h){for(var i=0;i<h.length;i=i+1){r=r.replace(h[i][0],h[i][1]);}
 15+{$.eachAsync(this,opts);return this;}})(jQuery);(function($){$.fn.autoEllipse=function(options){$(this).each(function(){options=$.extend({'position':'center'},options);var text=$(this).text();var $text=$('<span />').text(text).css('whiteSpace','nowrap');$(this).empty().append($text);if($text.outerWidth()>$(this).innerWidth()){switch(options.position){case'right':var l=text.length;while($text.outerWidth()>$(this).innerWidth()&&l>0){$text.text(text.substr(0,l)+'...');l--;}
 16+break;case'center':var i=[Math.round(text.length/2),Math.round(text.length/2)];var side=1;while($text.outerWidth()>($(this).innerWidth())&&i[0]>0){$text.text(text.substr(0,i[0])+'...'+text.substr(i[1]));if(side==0){i[0]--;side=1;}else{i[1]++;side=0;}}
 17+break;case'left':var r=0;while($text.outerWidth()>$(this).innerWidth()&&r<text.length){$text.text('...'+text.substr(r));r++;}
 18+break;}}});};})(jQuery);(function($){$.browserTest=function(a,z){var u='unknown',x='X',m=function(r,h){for(var i=0;i<h.length;i=i+1){r=r.replace(h[i][0],h[i][1]);}
1619 return r;},c=function(i,a,b,c){var r={name:m((a.exec(i)||[u,u])[1],b)};r[r.name]=true;r.version=(c.exec(i)||[x,x,x,x])[3];if(r.name.match(/safari/)&&r.version>400){r.version='2.0';}
1720 if(r.name==='presto'){r.version=($.browser.version>9.27)?'futhark':'linear_b';}
1821 r.versionNumber=parseFloat(r.version,10)||0;r.versionX=(r.version!==x)?(r.version+'').substr(0,1):x;r.className=r.name+r.versionX;return r;};a=(a.match(/Opera|Navigator|Minefield|KHTML|Chrome/)?m(a,[[/(Firefox|MSIE|KHTML,\slike\sGecko|Konqueror)/,''],['Chrome Safari','Chrome'],['KHTML','Konqueror'],['Minefield','Firefox'],['Navigator','Netscape']]):a).toLowerCase();$.browser=$.extend((!z)?$.browser:{},c(a,/(camino|chrome|firefox|netscape|konqueror|lynx|msie|opera|safari)/,[],/(camino|chrome|firefox|netscape|netscape6|opera|version|konqueror|lynx|msie|safari)(\/|\s)([a-z0-9\.\+]*?)(\;|dev|rel|\s|$)/));$.layout=c(a,/(gecko|konqueror|msie|opera|webkit)/,[['konqueror','khtml'],['msie','trident'],['opera','presto']],/(applewebkit|rv|konqueror|msie)(\:|\/|\s)([a-z0-9\.]*?)(\;|\)|\s)/);$.os={name:(/(win|mac|linux|sunos|solaris|iphone)/.exec(navigator.platform.toLowerCase())||[u])[0].replace('sunos','solaris')};if(!z){$('html').addClass([$.os.name,$.browser.name,$.browser.className,$.layout.name,$.layout.className].join(' '));}};$.browserTest(navigator.userAgent);})(jQuery);jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1;}
——@@ -28,8 +31,7 @@
2932 if(typeof context.config.cancel=='function'){context.config.cancel.call(context.data.$textbox);}},restore:function(context){context.data.$textbox.val(context.data.prevText);},update:function(context,delayed){function maybeFetch(){if(context.data.$textbox.val()!==context.data.prevText){context.data.prevText=context.data.$textbox.val();if(typeof context.config.fetch=='function'){context.config.fetch.call(context.data.$textbox,context.data.$textbox.val());}}}
3033 if(context.data.timerID!=null){clearTimeout(context.data.timerID);}
3134 if(delayed){context.data.timerID=setTimeout(maybeFetch,context.config.delay);}else{maybeFetch();}
32 -$.suggestions.special(context);},special:function(context){if(typeof context.config.special.render=='function'){setTimeout(function(){$special=context.data.$container.find('.suggestions-special');context.config.special.render.call($special,context.data.$textbox.val());},1);}},configure:function(context,property,value){switch(property){case'fetch':case'cancel':case'special':case'result':case'$region':context.config[property]=value;break;case'suggestions':context.config[property]=value;if(typeof context.data!=='undefined'){if(context.config.suggestions.length==0){context.data.$container.hide();}else{context.data.$container.show();var $results=context.data.$container.children('.suggestions-results');$results.empty();for(var i=0;i<context.config.suggestions.length;i++){$result=$('<div />').addClass('suggestions-result').attr('rel',i).data('text',context.config.suggestions[i]).appendTo($results);if(typeof context.config.result.render=='function'){context.config.result.render.call($result,context.config.suggestions[i]);}else{$result.text(context.config.suggestions[i]);$result.autoEllipse();}}
33 -context.data.$container.css({'top':context.config.$region.offset().top+context.config.$region.outerHeight(),'bottom':'auto','width':context.config.$region.outerWidth(),'height':'auto','left':context.config.$region.offset().left,'right':'auto'});}}
 35+$.suggestions.special(context);},special:function(context){if(typeof context.config.special.render=='function'){setTimeout(function(){$special=context.data.$container.find('.suggestions-special');context.config.special.render.call($special,context.data.$textbox.val());},1);}},configure:function(context,property,value){switch(property){case'fetch':case'cancel':case'special':case'result':case'$region':context.config[property]=value;break;case'suggestions':context.config[property]=value;if(typeof context.data!=='undefined'){if(context.config.suggestions.length==0){context.data.$container.hide();}else{context.data.$container.show();context.data.$container.css({'top':context.config.$region.offset().top+context.config.$region.outerHeight(),'bottom':'auto','width':context.config.$region.outerWidth(),'height':'auto','left':context.config.$region.offset().left,'right':'auto'});var $results=context.data.$container.children('.suggestions-results');$results.empty();for(var i=0;i<context.config.suggestions.length;i++){$result=$('<div />').addClass('suggestions-result').attr('rel',i).data('text',context.config.suggestions[i]).appendTo($results);if(typeof context.config.result.render=='function'){context.config.result.render.call($result,context.config.suggestions[i]);}else{$result.text(context.config.suggestions[i]).autoEllipse();}}}}
3436 break;case'maxRows':context.config[property]=Math.max(1,Math.min(100,value));break;case'delay':context.config[property]=Math.max(0,Math.min(12000,value));break;case'submitOnClick':context.config[property]=value?true:false;break;}},highlight:function(context,result,updateTextbox){var selected=context.data.$container.find('.suggestions-result-current')
3537 if(!result.get||selected.get(0)!=result.get(0)){if(result=='prev'){result=selected.prev();}else if(result=='next'){if(selected.size()==0)
3638 result=context.data.$container.find('.suggestions-results div:first');else{result=selected.next();if(result.size()==0)

Status & tagging log