r56220 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r56219‎ \| r56220 \| r56221 >
Date:	04:46, 12 September 2009
Author:	tparscal
Status:	resolved (Comments)
Tags:
Comment:	Resotred automatic ellipsis for suggestions, added autoEllipse plugin. Also noticed that namespaceSelect needed to be added to list of combined and minified scripts. Ellipis seems a little screwy still - working on getting it to be more stable.
Modified paths:	/trunk/extensions/UsabilityInitiative/SimpleSearch/SimpleSearch.js (modified) (history) /trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php (modified) (history) /trunk/extensions/UsabilityInitiative/combine.sh (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 (added) (history) /trunk/extensions/UsabilityInitiative/js/plugins/jquery.suggestions.js (modified) (history)

Diff [purge]

Index: trunk/extensions/UsabilityInitiative/SimpleSearch/SimpleSearch.js
—	—	@@ -80,27 +80,28 @@
81	81	render: function( query ) {
82	82	var perfectMatch = false;
83	83	$j(this).closest( '.suggestions' ).find( '.suggestions-results div' ).each( function() {
84		~~- if ( $j(this).text() == query ) {~~
	84	+ if ( $j(this).data( 'text' ) == query ) {
85	85	perfectMatch = true;
86	86	}
87	87	} );
88	88	if ( perfectMatch ) {
89	89	if ( $j(this).children().size() == 0 ) {
90		~~- $j(this).append(~~
91		~~- $j( '<div />' )~~
92		~~- .addClass( 'special-label' )~~
93		~~- .text( gM( 'simplesearch-containing' ) )~~
94		~~- );~~
95		~~- $j(this).append(~~
96		~~- $j( '<span />' ).addClass( 'special-query' ).text( query )~~
97		~~- );~~
98	90	$j(this).show();
	91	+ $label = $j( '<div />' )
	92	+ .addClass( 'special-label' )
	93	+ .text( gM( 'simplesearch-containing' ) )
	94	+ .appendTo( $j(this) );
	95	+ $query = $j( '<span />' )
	96	+ .addClass( 'special-query' )
	97	+ .text( query )
	98	+ .appendTo( $j(this) );
	99	+ $query.autoEllipse();
99	100	} else {
100		~~- $j(this).find( '.special-query' ).text( query );~~
	101	+ $j(this).find( '.special-query' ).empty().text( query ).autoEllipse();
101	102	}
102	103	} else {
	104	+ $j(this).hide();
103	105	$j(this).empty();
104		~~- $j(this).hide();~~
105	106	}
106	107	},
107	108	select: function( $textbox ) {
Index: trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php
—	—	@@ -18,10 +18,10 @@
19	19	private static $styleFiles = array(
20	20	'base_sets' => array(
21	21	'raw' => array(
22		~~- array( 'src' => 'css/suggestions.css', 'version' => 5 ),~~
	22	+ array( 'src' => 'css/suggestions.css', 'version' => 6 ),
23	23	array( 'src' => 'css/wikiEditor.css', 'version' => 4 ),
24	24	array( 'src' => 'css/wikiEditor.toolbar.css', 'version' => 5 ),
25		~~- array( 'src' => 'css/wikiEditor.dialogs.css', 'version' => 2 ),~~
	25	+ array( 'src' => 'css/wikiEditor.dialogs.css', 'version' => 1 ),
26	26	array( 'src' => 'css/wikiEditor.toc.css', 'version' => 5 ),
27	27	array( 'src' => 'css/vector/jquery-ui-1.7.2.css', 'version' => '1.7.2' ),
28	28	),
—	—	@@ -57,22 +57,23 @@
58	58	'base_sets' => array(
59	59	'raw' => array(
60	60	array( 'src' => 'js/plugins/jquery.async.js', 'version' => 3 ),
	61	+ array( 'src' => 'js/plugins/jquery.autoEllipse.js', 'version' => 1 ),
61	62	array( 'src' => 'js/plugins/jquery.browser.js', 'version' => 3 ),
62	63	array( 'src' => 'js/plugins/jquery.cookie.js', 'version' => 3 ),
63		~~- array( 'src' => 'js/plugins/jquery.namespaceSelect.js', 'version' => 0 ),~~
64		~~- array( 'src' => 'js/plugins/jquery.suggestions.js', 'version' => 2 ),~~
65		~~- array( 'src' => 'js/plugins/jquery.textSelection.js', 'version' => 10 ),~~
	64	+ array( 'src' => 'js/plugins/jquery.namespaceSelect.js', 'version' => 1 ),
	65	+ array( 'src' => 'js/plugins/jquery.suggestions.js', 'version' => 1 ),
	66	+ array( 'src' => 'js/plugins/jquery.textSelection.js', 'version' => 9 ),
66	67	array( 'src' => 'js/plugins/jquery.wikiEditor.js', 'version' => 4 ),
67	68	array( 'src' => 'js/plugins/jquery.wikiEditor.toolbar.js', 'version' => 11 ),
68		~~- array( 'src' => 'js/plugins/jquery.wikiEditor.dialogs.js', 'version' => 2 ),~~
69		~~- array( 'src' => 'js/plugins/jquery.wikiEditor.toc.js', 'version' => 8 ),~~
	69	+ array( 'src' => 'js/plugins/jquery.wikiEditor.dialogs.js', 'version' => 1 ),
	70	+ array( 'src' => 'js/plugins/jquery.wikiEditor.toc.js', 'version' => 5 ),
70	71	array( 'src' => 'js/js2/jquery-ui-1.7.2.js', 'version' => '1.7.2x' ),
71	72	),
72	73	'combined' => array(
73		~~- array( 'src' => 'js/plugins.combined.js', 'version' => 19 ),~~
	74	+ array( 'src' => 'js/plugins.combined.js', 'version' => 18 ),
74	75	),
75	76	'minified' => array(
76		~~- array( 'src' => 'js/plugins.combined.min.js', 'version' => 19 ),~~
	77	+ array( 'src' => 'js/plugins.combined.min.js', 'version' => 18 ),
77	78	),
78	79	),
79	80	);
Index: trunk/extensions/UsabilityInitiative/combine.sh
—	—	@@ -5,7 +5,7 @@
6	6	echo "Merging raw scripts and styles"
7	7	# Explicitly including scripts is important, because loading order is important
8	8	cat js/js2/jquery-1.3.2.js js/js2/jquery-ui-1.7.2.js js/js2/js2.js > js/js2.combined.js
9		-cat js/plugins/jquery.async.js js/plugins/jquery.browser.js js/plugins/jquery.cookie.js js/plugins/jquery.suggestions.js js/plugins/jquery.textSelection.js js/plugins/jquery.wikiEditor.js js/plugins/jquery.wikiEditor.dialogs.js js/plugins/jquery.wikiEditor.toolbar.js js/plugins/jquery.wikiEditor.toc.js > js/plugins.combined.js
	9	+cat js/plugins/jquery.async.js js/plugins/jquery.autoEllipse.js js/plugins/jquery.browser.js js/plugins/jquery.cookie.js js/plugins/jquery.namespaceSelect.js js/plugins/jquery.suggestions.js js/plugins/jquery.textSelection.js js/plugins/jquery.wikiEditor.js js/plugins/jquery.wikiEditor.dialogs.js js/plugins/jquery.wikiEditor.toolbar.js js/plugins/jquery.wikiEditor.toc.js > js/plugins.combined.js
10	10	# Styles can be loaded in any order
11	11	cat css/*.css > css/combined.css
12	12	# For more info on JSMin, see: http://www.crockford.com/javascript/jsmin.html
Index: trunk/extensions/UsabilityInitiative/css/suggestions.css
—	—	@@ -39,6 +39,7 @@
40	40	padding: 0.25em 0.25em;
41	41	line-height: 1.25em;
42	42	margin: 0;
	43	+ width: 100%;
43	44	}
44	45	.suggestions-result-current {
45	46	background-color: #4C59A6;
Index: trunk/extensions/UsabilityInitiative/css/combined.css
—	—	@@ -39,6 +39,7 @@
40	40	padding: 0.25em 0.25em;
41	41	line-height: 1.25em;
42	42	margin: 0;
	43	+ width: 100%;
43	44	}
44	45	.suggestions-result-current {
45	46	background-color: #4C59A6;
Index: trunk/extensions/UsabilityInitiative/css/combined.min.css
—	—	@@ -37,6 +37,7 @@
38	38	padding:0.25em 0.25em;
39	39	line-height:1.25em;
40	40	margin:0;
	41	+width:100%;
41	42	}
42	43	.suggestions-result-current{
43	44	background-color:#4C59A6;
—	—	@@ -445,4 +446,4 @@
446	447	background-color:white;
447	448	text-decoration:none;
448	449	border-color:#a8d7f9;
449		-}
\ No newline at end of file
	450	+}
Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.autoEllipse.js
—	—	@@ -0,0 +1,21 @@
	2	+/**
	3	+ * Plugin that automatically truncates the plain text contents of an element and adds an ellipsis
	4	+ */
	5	+( function( $ ) {
	6	+
	7	+$.fn.autoEllipse = function() {
	8	+ $(this).each( function() {
	9	+ var text = $(this).text();
	10	+ var $text = $( '<span />' ).text( text ).css( 'whiteSpace', 'nowrap' );
	11	+ $(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--;
	17	+ }
	18	+ }
	19	+ } );
	20	+};
	21	+
	22	+} )( jQuery );
\ No newline at end of file
Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.suggestions.js
—	—	@@ -125,14 +125,15 @@
126	126	$result = $( '<div />' )
127	127	.addClass( 'suggestions-result' )
128	128	.attr( 'rel', i )
129		~~- .data( 'text', context.config.suggestions[i] );~~
	129	+ .data( 'text', context.config.suggestions[i] )
	130	+ .appendTo( $results );
130	131	// Allow custom rendering
131	132	if ( typeof context.config.result.render == 'function' ) {
132	133	context.config.result.render.call( $result, context.config.suggestions[i] );
133	134	} else {
134	135	$result.text( context.config.suggestions[i] );
	136	+ $result.autoEllipse();
135	137	}
136		~~- $results.append( $result );~~
137	138	}
138	139	// Update the size and position of the list
139	140	context.data.$container.css( {
Index: trunk/extensions/UsabilityInitiative/js/plugins.combined.js
—	—	@@ -76,8 +76,28 @@
77	77
78	78	})(jQuery);
79	79
80		-/*
	80	+/**
	81	+ * Plugin that automatically truncates the plain text contents of an element and adds an ellipsis
	82	+ */
	83	+( function( $ ) {
81	84
	85	+$.fn.autoEllipse = function() {
	86	+ $(this).each( function() {
	87	+ var text = $(this).text();
	88	+ var $text = $( '<span />' ).text( text ).css( 'whiteSpace', 'nowrap' );
	89	+ $(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--;
	95	+ }
	96	+ }
	97	+ } );
	98	+};
	99	+
	100	+} )( jQuery );/*
	101	+
82	102	jQuery Browser Plugin
83	103	* Version 2.3
84	104	* 2008-09-17 19:27:05
—	—	@@ -256,6 +276,26 @@
257	277	};
258	278
259	279	/**
	280	+ * Plugin that fills a <select> with namespaces
	281	+ */
	282	+
	283	+(function ($) {
	284	+$.fn.namespaceSelector = function( defaultNS ) {
	285	+ if ( typeof defaultNS == 'undefined' )
	286	+ defaultNS = 0;
	287	+ return this.each( function() {
	288	+ for ( var id in wgFormattedNamespaces ) {
	289	+ var opt = $( '<option />' )
	290	+ .attr( 'value', id )
	291	+ .text( wgFormattedNamespaces[id] );
	292	+ if ( id == defaultNS )
	293	+ opt.attr( 'selected', 'selected' );
	294	+ opt.appendTo( $(this) );
	295	+ }
	296	+ });
	297	+};})(jQuery);
	298	+
	299	+/**
260	300	* This plugin provides a generic way to add suggestions to a text box.
261	301	*
262	302	* Usage:
—	—	@@ -382,14 +422,15 @@
383	423	$result = $( '<div />' )
384	424	.addClass( 'suggestions-result' )
385	425	.attr( 'rel', i )
386		~~- .data( 'text', context.config.suggestions[i] );~~
	426	+ .data( 'text', context.config.suggestions[i] )
	427	+ .appendTo( $results );
387	428	// Allow custom rendering
388	429	if ( typeof context.config.result.render == 'function' ) {
389	430	context.config.result.render.call( $result, context.config.suggestions[i] );
390	431	} else {
391	432	$result.text( context.config.suggestions[i] );
	433	+ $result.autoEllipse();
392	434	}
393		~~- $results.append( $result );~~
394	435	}
395	436	// Update the size and position of the list
396	437	context.data.$container.css( {
Index: trunk/extensions/UsabilityInitiative/js/plugins.combined.min.js
—	—	@@ -11,19 +11,20 @@
12	12	{var i=0,l=array.length,loop=opts.loop\|\|function(){};$.whileAsync($.extend(opts,{test:function(){return i<l;},loop:function()
13	13	{var val=array[i];return loop.call(val,i++,val);}}));}
14	14	$.fn.eachAsync=function(opts)
15		~~-{$.eachAsync(this,opts);return this;}})(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(){$(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]);}
16	16	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';}
17	17	if(r.name==='presto'){r.version=($.browser.version>9.27)?'futhark':'linear_b';}
18	18	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;}
19	19	var expires='';if(options.expires&&(typeof options.expires=='number'\|\|options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires2460601000));}else{date=options.expires;}
20	20	expires='; expires='+date.toUTCString();}
21	21	var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}
22		~~-return cookieValue;}};(function($){$.suggestions={cancel:function(context){if(context.data.timerID!=null){clearTimeout(context.data.timerID);}~~
	22	+return cookieValue;}};(function($){$.fn.namespaceSelector=function(defaultNS){if(typeof defaultNS=='undefined')
	23	+defaultNS=0;return this.each(function(){for(var id in wgFormattedNamespaces){var opt=$('<option />').attr('value',id).text(wgFormattedNamespaces[id]);if(id==defaultNS)
	24	+opt.attr('selected','selected');opt.appendTo($(this));}});};})(jQuery);(function($){$.suggestions={cancel:function(context){if(context.data.timerID!=null){clearTimeout(context.data.timerID);}
23	25	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());}}}
24	26	if(context.data.timerID!=null){clearTimeout(context.data.timerID);}
25	27	if(delayed){context.data.timerID=setTimeout(maybeFetch,context.config.delay);}else{maybeFetch();}
26		-$.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]);if(typeof context.config.result.render=='function'){context.config.result.render.call($result,context.config.suggestions[i]);}else{$result.text(context.config.suggestions[i]);}
27		~~-$results.append($result);}~~
	28	+$.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();}}
28	29	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'});}}
29	30	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')
30	31	if(!result.get\|\|selected.get(0)!=result.get(0)){if(result=='prev'){result=selected.prev();}else if(result=='next'){if(selected.size()==0)

Follow-up revisions

Revision	Commit summary	Author	Date
r60792	Fixme on r56220: Fix spelling ellipse -> ellipsis	demon	13:47, 7 January 2010

Comments

#Comment by Tim Starling (talk | contribs) 05:13, 1 December 2009

Needs spelling fix, ellipse -> ellipsis, especially in the public interface name.

Status & tagging log

12:32, 17 January 2010 😂 (talk | contribs) changed the status of r56220 [removed: fixme added: resolved]
05:13, 1 December 2009 Tim Starling (talk | contribs) changed the status of r56220 [removed: new added: fixme]
17:57, 27 September 2009 Catrope (talk | contribs) changed the tags for r56220 [removed: babacofix]
17:56, 15 September 2009 Catrope (talk | contribs) changed the tags for r56220 [added: babacofix]