r62839 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r62838‎ \| r62839 \| r62840 >
Date:	20:37, 22 February 2010
Author:	adam
Status:	deferred (Comments)
Tags:
Comment:	WikiEditor Template Editor: adding some style
Modified paths:	/trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php (modified) (history) /trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/collapse.png (added) (history) /trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/dialog-collapsed.png (added) (history) /trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/dialog-expanded.png (added) (history) /trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/expand.png (modified) (history) /trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/name-bg.png (added) (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.wikiEditor.html (modified) (history) /trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.templateEditor.js (modified) (history)

Diff [purge]

Index: trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php
—	—	@@ -78,14 +78,14 @@
79	79	array( 'src' => 'js/plugins/jquery.wikiEditor.dialogs.js', 'version' => 18 ),
80	80	array( 'src' => 'js/plugins/jquery.wikiEditor.toc.js', 'version' => 93 ),
81	81	array( 'src' => 'js/plugins/jquery.wikiEditor.preview.js', 'version' => 11 ),
82		~~- array( 'src' => 'js/plugins/jquery.wikiEditor.templateEditor.js', 'version' => 22 ),~~
	82	+ array( 'src' => 'js/plugins/jquery.wikiEditor.templateEditor.js', 'version' => 23 ),
83	83	array( 'src' => 'js/plugins/jquery.wikiEditor.publish.js', 'version' => 3 ),
84	84	),
85	85	'combined' => array(
86		~~- array( 'src' => 'js/plugins.combined.js', 'version' => 274 ),~~
	86	+ array( 'src' => 'js/plugins.combined.js', 'version' => 275 ),
87	87	),
88	88	'minified' => array(
89		~~- array( 'src' => 'js/plugins.combined.min.js', 'version' => 274 ),~~
	89	+ array( 'src' => 'js/plugins.combined.min.js', 'version' => 275 ),
90	90	),
91	91	),
92	92	);
Index: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/expand.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Index: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/collapse.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/collapse.png
___________________________________________________________________
Name: svn:mime-type
93	93	+ application/octet-stream
Index: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/dialog-collapsed.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/dialog-collapsed.png
___________________________________________________________________
Name: svn:mime-type
94	94	+ application/octet-stream
Index: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/dialog-expanded.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/dialog-expanded.png
___________________________________________________________________
Name: svn:mime-type
95	95	+ application/octet-stream
Index: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/name-bg.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/UsabilityInitiative/images/wikiEditor/templateEditor/name-bg.png
___________________________________________________________________
Name: svn:mime-type
96	96	+ application/octet-stream
Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.templateEditor.js
—	—	@@ -137,13 +137,24 @@
138	138	.addClass( 'wikiEditor-template-collapsed' )
139	139	.data( 'model', model );
140	140
141		~~- $( '<span />' )~~
142		~~- .addClass( 'wikiEditor-template-name wikiEditor-noinclude' )~~
143		~~- .text( model.getName() )~~
144		~~- .mousedown(toggleWikiTextEditor)~~
145		~~- //.mousedown( function(){createDialog( $template );} ) //have to pass template so model stays in sync~~
146		~~- .prependTo( $template );~~
	141	+ var $templateName = $( '<span />' )
	142	+ .addClass( 'wikiEditor-template-name wikiEditor-noinclude' )
	143	+ .text( model.getName() )
	144	+ .prependTo( $template );
147	145
	146	+ var $templateExpand = $( '<span />' )
	147	+ .addClass( 'wikiEditor-template-expand wikiEditor-noinclude' )
	148	+ .append( '<img src="' + $.wikiEditor.imgPath + '/templateEditor/expand.png" width="12" height="16" />' )
	149	+ .append( '<img src="' + $.wikiEditor.imgPath + '/templateEditor/collapse.png" width="12" height="16" style="display:none;" />' )
	150	+ .mousedown( toggleWikiTextEditor )
	151	+ .prependTo( $template );
	152	+
	153	+ var $templateDialog = $( '<span />' )
	154	+ .addClass( 'wikiEditor-template-dialog wikiEditor-noinclude' )
	155	+ .append( '<img src="'+$.wikiEditor.imgPath+'/templateEditor/dialog-collapsed.png" width="22" height="16" />' )
	156	+ .append( '<img src="'+$.wikiEditor.imgPath+'/templateEditor/dialog-expanded.png" width="22" height="16" style="display:none;" />' )
	157	+ .mousedown( function() { createDialog( $template ); return false; } )
	158	+ .insertAfter( $templateName );
148	159	/*
149	160	var $options = $( '<ul />' )
150	161	.addClass( 'wikiEditor-template-modes wikiEditor-noinclude' )
—	—	@@ -160,7 +171,11 @@
161	172	var $template = $( this ).closest( '.wikiEditor-template' );
162	173	$template
163	174	.toggleClass( 'wikiEditor-template-expanded' )
164		~~- .toggleClass( 'wikiEditor-template-collapsed' );~~
	175	+ .toggleClass( 'wikiEditor-template-collapsed' )
	176	+ .find( 'img' )
	177	+ .each( function() {
	178	+ $( this ).toggle();
	179	+ } );
165	180	var $wikitext = $template.children('.wikiEditor-template-text');
166	181	$wikitext.toggleClass('wikiEditor-nodisplay');
167	182
Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.html
—	—	@@ -45,29 +45,27 @@
46	46	padding-left: 4em;
47	47	}
48	48	/* A collapsed template */
	49	+ .wikiEditor-template {
	50	+ margin: 0 2px;
	51	+ }
49	52	.wikiEditor-template-name {
50		~~- background-color:#e8e8e8;~~
	53	+ background: url( '../../images/wikiEditor/templateEditor/name-bg.png' ) 0 0 repeat-x #e8e8e8;
51	54	color:#333333;
52	55	font-family: Helvetica, sans-serif;
53	56	font-size: 12px;
54	57	padding-left:4px;
55		~~- padding-right: 4px;~~
56		~~- padding-top: 2px;~~
	58	+ padding-right: 9px;
	59	+ padding-top: 1px;
57	60	display: inline;
58	61	text-decoration:none;
59		~~- }~~
60		-
61		~~- .wikiEditor-template-expanded .wikiEditor-template-name {~~
62		~~- border-color:#D9D9D9 #D9D9D9 -moz-use-text-color;~~
63		~~- border-style:solid solid none;~~
64		~~- border-width:1px 1px medium;~~
65		~~- }~~
66		-
67		~~- .wikiEditor-template-collapsed .wikiEditor-template-name {~~
68	62	border:1px solid #d9d9d9;
	63	+ border-right: none;
69	64	}
70		-
71		-
	65	+ .wikiEditor-template-expanded img,
	66	+ .wikiEditor-template-collapsed img {
	67	+ vertical-align: top;
	68	+ padding-top: 1px;
	69	+ }
72	70	ul.wikiEditor-template-modes,
73	71	ul.wikiEditor-template-modes li {
74	72	display: inline;
—	—	@@ -88,14 +86,12 @@
89	87	cursor: pointer !important;
90	88	}
91	89	/* An expanded template */
92		-
93	90	.wikiEditor-template-expanded {
94	91	display: inline;
95	92	}
96		-
97	93	.wikiEditor-template-text{
98	94	background: #f3f3f3;
99		~~- margin-top: -3px;~~
	95	+ margin-top: -4px;
100	96	border: solid 1px #d9d9d9;
101	97	padding-left: 4px;
102	98	display: block;
—	—	@@ -104,13 +100,6 @@
105	101	color: blue;
106	102	cursor: pointer;
107	103	}
108		~~- /*.wikiEditor-template-expanded {~~
109		~~- background:#DDEEFF none repeat scroll 0 0;~~
110		~~- border:1px inset #DDEEFF;~~
111		~~- color:black;~~
112		~~- margin:3px;~~
113		~~- padding:0 0.25em;~~
114		~~- }*/~~
115	104	/* == Header == */
116	105	.wikiEditor-toc-header {
117	106	/* Fix for Webkit Browsers resistence to give these elements an offsetTop value */
Index: trunk/extensions/UsabilityInitiative/js/plugins.combined.js
—	—	@@ -9075,13 +9075,24 @@
9076	9076	.addClass( 'wikiEditor-template-collapsed' )
9077	9077	.data( 'model', model );
9078	9078
9079		~~- $( '<span />' )~~
9080		~~- .addClass( 'wikiEditor-template-name wikiEditor-noinclude' )~~
9081		~~- .text( model.getName() )~~
9082		~~- .mousedown(toggleWikiTextEditor)~~
9083		~~- //.mousedown( function(){createDialog( $template );} ) //have to pass template so model stays in sync~~
9084		~~- .prependTo( $template );~~
	9079	+ var $templateName = $( '<span />' )
	9080	+ .addClass( 'wikiEditor-template-name wikiEditor-noinclude' )
	9081	+ .text( model.getName() )
	9082	+ .prependTo( $template );
9085	9083
	9084	+ var $templateExpand = $( '<span />' )
	9085	+ .addClass( 'wikiEditor-template-expand wikiEditor-noinclude' )
	9086	+ .append( '<img src="' + $.wikiEditor.imgPath + '/templateEditor/expand.png" width="12" height="16" />' )
	9087	+ .append( '<img src="' + $.wikiEditor.imgPath + '/templateEditor/collapse.png" width="12" height="16" style="display:none;" />' )
	9088	+ .mousedown( toggleWikiTextEditor )
	9089	+ .prependTo( $template );
	9090	+
	9091	+ var $templateDialog = $( '<span />' )
	9092	+ .addClass( 'wikiEditor-template-dialog wikiEditor-noinclude' )
	9093	+ .append( '<img src="'+$.wikiEditor.imgPath+'/templateEditor/dialog-collapsed.png" width="22" height="16" />' )
	9094	+ .append( '<img src="'+$.wikiEditor.imgPath+'/templateEditor/dialog-expanded.png" width="22" height="16" style="display:none;" />' )
	9095	+ .mousedown( function() { createDialog( $template ); return false; } )
	9096	+ .insertAfter( $templateName );
9086	9097	/*
9087	9098	var $options = $( '<ul />' )
9088	9099	.addClass( 'wikiEditor-template-modes wikiEditor-noinclude' )
—	—	@@ -9098,7 +9109,11 @@
9099	9110	var $template = $( this ).closest( '.wikiEditor-template' );
9100	9111	$template
9101	9112	.toggleClass( 'wikiEditor-template-expanded' )
9102		~~- .toggleClass( 'wikiEditor-template-collapsed' );~~
	9113	+ .toggleClass( 'wikiEditor-template-collapsed' )
	9114	+ .find( 'img' )
	9115	+ .each( function() {
	9116	+ $( this ).toggle();
	9117	+ } );
9103	9118	var $wikitext = $template.children('.wikiEditor-template-text');
9104	9119	$wikitext.toggleClass('wikiEditor-nodisplay');
9105	9120
Index: trunk/extensions/UsabilityInitiative/js/plugins.combined.min.js
—	—	@@ -627,7 +627,7 @@
628	628	if(tokenIndex<tokenArray.length){var beginIndex=tokenIndex;var endIndex=-1;var openTemplates=1;var templatesMatched=false;while(tokenIndex<tokenArray.length-1&&endIndex==-1){tokenIndex++;if(tokenArray[tokenIndex].label=='TEMPLATE_BEGIN'){openTemplates++;}else if(tokenArray[tokenIndex].label=='TEMPLATE_END'){openTemplates--;if(openTemplates==0){endIndex=tokenIndex;}}}
629	629	if(endIndex!=-1){var model=new $.wikiEditor.modules.templateEditor.fn.model(context.fn.getContents().substring(tokenArray[beginIndex].offset,tokenArray[endIndex].offset));markers.push({start:tokenArray[beginIndex].offset,end:tokenArray[endIndex].offset,type:'template',anchor:'wrap',splitPs:false,afterWrap:$.wikiEditor.modules.templateEditor.fn.stylize,beforeUnwrap:function(node){},onSkip:function(){},getAnchor:function(ca1,ca2){return $(ca1.parentNode).is('span.wikiEditor-template-text')?ca1.parentNode:null;},model:model});}else{tokenArray[beginIndex].label='TEMPLATE_FALSE_BEGIN';tokenIndex=beginIndex;}}}}},exp:[{'regex':/{{/,'label':"TEMPLATE_BEGIN"},{'regex':/}}/,'label':"TEMPLATE_END",'markAfter':true}],cfg:{},fn:{create:function(context,config){context.modules.templateEditor={};},stylize:function(wrappedTemplate){$(wrappedTemplate).each(function(){if(typeof $(this).data('setupDone')!='undefined'){return;}
630	630	var model=$(this).data('marker').model;if(!model.isCollapsible()){$(this).addClass('wikiEditor-template-text');return;}
631		-var $template=$(this).wrap('<span class="wikiEditor-template"></span>').addClass('wikiEditor-template-text wikiEditor-nodisplay').parent().addClass('wikiEditor-template-collapsed').data('model',model);$('<span />').addClass('wikiEditor-template-name wikiEditor-noinclude').text(model.getName()).mousedown(toggleWikiTextEditor).prependTo($template);$(this).data('setupDone',true);function toggleWikiTextEditor(){var $template=$(this).closest('.wikiEditor-template');$template.toggleClass('wikiEditor-template-expanded').toggleClass('wikiEditor-template-collapsed');var $wikitext=$template.children('.wikiEditor-template-text');$wikitext.toggleClass('wikiEditor-nodisplay');if($template.hasClass('wikiEditor-template-collapsed')){var model=new $.wikiEditor.modules.templateEditor.fn.model($template.children('.wikiEditor-template-text').text());$template.data('model',model);$template.children('.wikiEditor-template-name').text(model.getName());}
	631	+var $template=$(this).wrap('<span class="wikiEditor-template"></span>').addClass('wikiEditor-template-text wikiEditor-nodisplay').parent().addClass('wikiEditor-template-collapsed').data('model',model);var $templateName=$('<span />').addClass('wikiEditor-template-name wikiEditor-noinclude').text(model.getName()).prependTo($template);var $templateExpand=$('<span />').addClass('wikiEditor-template-expand wikiEditor-noinclude').append('<img src="'+$.wikiEditor.imgPath+'/templateEditor/expand.png" width="12" height="16" />').append('<img src="'+$.wikiEditor.imgPath+'/templateEditor/collapse.png" width="12" height="16" style="display:none;" />').mousedown(toggleWikiTextEditor).prependTo($template);var $templateDialog=$('<span />').addClass('wikiEditor-template-dialog wikiEditor-noinclude').append('<img src="'+$.wikiEditor.imgPath+'/templateEditor/dialog-collapsed.png" width="22" height="16" />').append('<img src="'+$.wikiEditor.imgPath+'/templateEditor/dialog-expanded.png" width="22" height="16" style="display:none;" />').mousedown(function(){createDialog($template);return false;}).insertAfter($templateName);$(this).data('setupDone',true);function toggleWikiTextEditor(){var $template=$(this).closest('.wikiEditor-template');$template.toggleClass('wikiEditor-template-expanded').toggleClass('wikiEditor-template-collapsed').find('img').each(function(){$(this).toggle();});var $wikitext=$template.children('.wikiEditor-template-text');$wikitext.toggleClass('wikiEditor-nodisplay');if($template.hasClass('wikiEditor-template-collapsed')){var model=new $.wikiEditor.modules.templateEditor.fn.model($template.children('.wikiEditor-template-text').text());$template.data('model',model);$template.children('.wikiEditor-template-name').text(model.getName());}
632	632	else{$wikitext.text($template.data('model').getText());}
633	633	return false;};function expandTemplate($displayDiv){$displayDiv.removeClass('wikiEditor-template-collapsed');$displayDiv.addClass('wikiEditor-template-expanded');$displayDiv.unbind('mousedown');$keyValueTable=$('<table />').appendTo($displayDiv);$header_row=$('<tr />').appendTo($keyValueTable);$('<th />').attr('colspan','2').text(model.getName()).appendTo($header_row);for(param in model.getAllParamNames()){$keyVal_row=$('<tr />').appendTo($keyValueTable);$('<td />').text(param).appendTo($keyVal_row);$('<td />').text(model.getValue(param)).appendTo($keyVal_row);}};function collapseTemplate($displayDiv){$displayDiv.addClass('wikiEditor-template-collapsed');$displayDiv.removeClass('wikiEditor-template-expanded');$displayDiv.text(model.getName());};function createDialog($templateDiv){var $wikitext=$templateDiv.children('.wikiEditor-template-text');var templateModel=new $.wikiEditor.modules.templateEditor.fn.model($wikitext.text());$templateDiv.data('model',templateModel);var $dialog=$("<div></div>");var $title=$("<div>"+templateModel.getName()+"</div>").addClass('wikiEditor-template-dialog-title');var $table=$("<table></table>").addClass('wikiEditor-template-dialog-table').appendTo($dialog);var allInitialParams=templateModel.getAllInitialParams();for(var paramIndex in allInitialParams){var param=allInitialParams[paramIndex];if(typeof param.name=='undefined'){continue;}
634	634	var $paramRow=$("<tr></tr>").addClass('wikiEditor-template-dialog-row');var $paramName=$("<td></td>").addClass('wikiEditor-template-dialog-name').text(param.name);var $paramVal=$("<td></td>").addClass('wikiEditor-template-dialog-value');var $paramInput=$("<input></input>").data('name',param.name).val(templateModel.getValue(param.name));$paramVal.append($paramInput);$paramRow.append($paramName).append($paramVal);$table.append($paramRow);}

Follow-up revisions

Revision	Commit summary	Author	Date
r62848	WikiEditor templateEditor: Followup to r62839. Forgot the importance of the m...	adam	21:38, 22 February 2010

Comments

#Comment by Catrope (talk | contribs) 22:02, 22 February 2010

+				.append( '<img src="' + $.wikiEditor.imgPath + '/templateEditor/expand.png" width="12" height="16" />' )

You should use $.wikiEditor.autoImg( '/templateEditor/expand.png' ) here. You asked me about this before and I didn't find the right function at the time, sorry about that.

Status & tagging log

01:33, 18 June 2010 Tim Starling (talk | contribs) changed the status of r62839 [removed: new added: deferred]