r63784 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r63783‎ \| r63784 \| r63785 >
Date:	21:56, 15 March 2010
Author:	tparscal
Status:	ok (Comments)
Tags:
Comment:	Improved performance a bit by reducing the jquery-based dom buildout for template capsules, and also restructured the capsules a bit so that there's now the label is in it's own span making opdating that label possible.
Modified paths:	/trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php (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.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' => 21 ),
80	80	array( 'src' => 'js/plugins/jquery.wikiEditor.toc.js', 'version' => 97 ),
81	81	array( 'src' => 'js/plugins/jquery.wikiEditor.preview.js', 'version' => 11 ),
82		~~- array( 'src' => 'js/plugins/jquery.wikiEditor.templateEditor.js', 'version' => 56 ),~~
	82	+ array( 'src' => 'js/plugins/jquery.wikiEditor.templateEditor.js', 'version' => 57 ),
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' => 336 ),~~
	86	+ array( 'src' => 'js/plugins.combined.js', 'version' => 337 ),
87	87	),
88	88	'minified' => array(
89		~~- array( 'src' => 'js/plugins.combined.min.js', 'version' => 336 ),~~
	89	+ array( 'src' => 'js/plugins.combined.min.js', 'version' => 337 ),
90	90	),
91	91	),
92	92	);
Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.templateEditor.js
—	—	@@ -88,9 +88,9 @@
89	89
90	90	// Update template name if needed
91	91	if ( $( node ).parent().hasClass( 'wikiEditor-template' ) ) {
92		~~- var $name = $( node ).parent().children( '.wikiEditor-template-name' );~~
93		~~- if ( $name.text() != model.getName() ) {~~
94		~~- $name.text( model.getName() );~~
	92	+ var $label = $( node ).parent().find( '.wikiEditor-template-label' );
	93	+ if ( $label.text() != model.getName() ) {
	94	+ $label.text( model.getName() );
95	95	}
96	96	}
97	97
—	—	@@ -192,17 +192,14 @@
193	193	.wrap( '<span class="wikiEditor-template"></span>' )
194	194	.addClass( 'wikiEditor-template-text wikiEditor-nodisplay' )
195	195	.parent()
196		~~- .addClass( 'wikiEditor-template-collapsed' );~~
197		~~- var $templateName = $( '<span />' )~~
198		~~- .addClass( 'wikiEditor-template-name wikiEditor-noinclude' )~~
199		~~- .text( model.getName() )~~
200		~~- .prependTo( $template );~~
201		~~- var $templateExpand = $( '<span />' )~~
202		~~- .addClass( 'wikiEditor-template-expand wikiEditor-noinclude' )~~
203		~~- .prependTo( $template );~~
204		~~- var $templateDialog = $( '<span />' )~~
205		~~- .addClass( 'wikiEditor-template-dialog wikiEditor-noinclude' )~~
206		~~- .appendTo( $templateName );~~
	196	+ .addClass( 'wikiEditor-template-collapsed' )
	197	+ .prepend( $(
	198	+ '<span class="wikiEditor-template-expand wikiEditor-noinclude"></span>' +
	199	+ '<span class="wikiEditor-template-name wikiEditor-noinclude">' +
	200	+ '<span class="wikiEditor-template-label wikiEditor-noinclude">' + model.getName() + '</span>' +
	201	+ '<span class="wikiEditor-template-dialog wikiEditor-noinclude"></span>' +
	202	+ '</span>'
	203	+ ) );
207	204	},
208	205	/**
209	206	* Turn a complex template wrapper back into a simple one
—	—	@@ -223,9 +220,6 @@
224	221	$template.find( '.wikiEditor-template-expand' )
225	222	.click( function() { $.wikiEditor.modules.templateEditor.fn.toggleWikiTextEditor( $wrapper ); return false; } )
226	223	.mousedown( function() { return false; } );
227		~~- $template.find( '.wikiEditor-template-dialog' )~~
228		~~- .click( function() { $.wikiEditor.modules.templateEditor.fn.createDialog( $wrapper ); return false; } )~~
229		~~- .mousedown( function() { return false; } );~~
230	224	},
231	225	/**
232	226	* Toggle the visisbilty of the wikitext for a given template
Index: trunk/extensions/UsabilityInitiative/js/plugins.combined.js
—	—	@@ -9332,9 +9332,9 @@
9333	9333
9334	9334	// Update template name if needed
9335	9335	if ( $( node ).parent().hasClass( 'wikiEditor-template' ) ) {
9336		~~- var $name = $( node ).parent().children( '.wikiEditor-template-name' );~~
9337		~~- if ( $name.text() != model.getName() ) {~~
9338		~~- $name.text( model.getName() );~~
	9336	+ var $label = $( node ).parent().find( '.wikiEditor-template-label' );
	9337	+ if ( $label.text() != model.getName() ) {
	9338	+ $label.text( model.getName() );
9339	9339	}
9340	9340	}
9341	9341
—	—	@@ -9436,17 +9436,14 @@
9437	9437	.wrap( '<span class="wikiEditor-template"></span>' )
9438	9438	.addClass( 'wikiEditor-template-text wikiEditor-nodisplay' )
9439	9439	.parent()
9440		~~- .addClass( 'wikiEditor-template-collapsed' );~~
9441		~~- var $templateName = $( '<span />' )~~
9442		~~- .addClass( 'wikiEditor-template-name wikiEditor-noinclude' )~~
9443		~~- .text( model.getName() )~~
9444		~~- .prependTo( $template );~~
9445		~~- var $templateExpand = $( '<span />' )~~
9446		~~- .addClass( 'wikiEditor-template-expand wikiEditor-noinclude' )~~
9447		~~- .prependTo( $template );~~
9448		~~- var $templateDialog = $( '<span />' )~~
9449		~~- .addClass( 'wikiEditor-template-dialog wikiEditor-noinclude' )~~
9450		~~- .appendTo( $templateName );~~
	9440	+ .addClass( 'wikiEditor-template-collapsed' )
	9441	+ .prepend( $(
	9442	+ '<span class="wikiEditor-template-expand wikiEditor-noinclude"></span>' +
	9443	+ '<span class="wikiEditor-template-name wikiEditor-noinclude">' +
	9444	+ '<span class="wikiEditor-template-label wikiEditor-noinclude">' + model.getName() + '</span>' +
	9445	+ '<span class="wikiEditor-template-dialog wikiEditor-noinclude"></span>' +
	9446	+ '</span>'
	9447	+ ) );
9451	9448	},
9452	9449	/**
9453	9450	* Turn a complex template wrapper back into a simple one
—	—	@@ -9467,9 +9464,6 @@
9468	9465	$template.find( '.wikiEditor-template-expand' )
9469	9466	.click( function() { $.wikiEditor.modules.templateEditor.fn.toggleWikiTextEditor( $wrapper ); return false; } )
9470	9467	.mousedown( function() { return false; } );
9471		~~- $template.find( '.wikiEditor-template-dialog' )~~
9472		~~- .click( function() { $.wikiEditor.modules.templateEditor.fn.createDialog( $wrapper ); return false; } )~~
9473		~~- .mousedown( function() { return false; } );~~
9474	9468	},
9475	9469	/**
9476	9470	* Toggle the visisbilty of the wikitext for a given template
Index: trunk/extensions/UsabilityInitiative/js/plugins.combined.min.js
—	—	@@ -645,8 +645,8 @@
646	646	$('#wikiEditor-'+context.instance+'-dialog-watch').attr('checked','checked');$(this).find('form').submit(function(e){$(this).closest('.ui-dialog').find('button:first').click();e.preventDefault();});},dialog:{buttons:{'wikieditor-publish-dialog-publish':function(){var minorChecked=$('#wikiEditor-'+context.instance+'-dialog-minor').is(':checked')?'checked':'';var watchChecked=$('#wikiEditor-'+context.instance+'-dialog-watch').is(':checked')?'checked':'';$('#wpMinoredit').attr('checked',minorChecked);$('#wpWatchthis').attr('checked',watchChecked);$('#wpSummary').val($j('#wikiEditor-'+context.instance+'-dialog-summary').val());$('#editform').submit();},'wikieditor-publish-dialog-goback':function(){$(this).dialog('close');}},open:function(){$('#wikiEditor-'+context.instance+'-dialog-summary').focus();},width:500},resizeme:false}});context.fn.addButton({'captionMsg':'wikieditor-publish-button-publish','action':function(){$('#'+dialogID).dialog('open');return false;}});context.fn.addButton({'captionMsg':'wikieditor-publish-button-cancel','action':function(){}});}}};})(jQuery);(function($){$.wikiEditor.modules.templateEditor={'browsers':{'ltr':{'msie':[['>=',8]],'firefox':[['>=',3]],'opera':[['>=',10]],'safari':[['>=',4]]},'rtl':{'msie':[['>=',8]],'firefox':[['>=',3]],'opera':[['>=',10]],'safari':[['>=',4]]}},'req':['iframe'],evt:{mark:function(context,event){var markers=context.modules.highlight.markers;var tokenArray=context.modules.highlight.tokenArray;var level=0;var tokenIndex=0;while(tokenIndex<tokenArray.length){while(tokenIndex<tokenArray.length&&tokenArray[tokenIndex].label!='TEMPLATE_BEGIN'){tokenIndex++;}
647	647	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;}}}
648	648	if(endIndex!=-1){markers.push({start:tokenArray[beginIndex].offset,end:tokenArray[endIndex].offset,type:'template',anchor:'wrap',afterWrap:function(node){var model=$.wikiEditor.modules.templateEditor.fn.updateModel($(node));if(model.isCollapsible()){$.wikiEditor.modules.templateEditor.fn.wrapTemplate($(node));$.wikiEditor.modules.templateEditor.fn.bindTemplateEvents($(node));}else{$(node).addClass('wikiEditor-template-text');}},beforeUnwrap:function(node){if($(node).parent().hasClass('wikiEditor-template')){$.wikiEditor.modules.templateEditor.fn.unwrapTemplate($(node));}},onSkip:function(node){if($(node).html()==$(node).data('oldHTML')){return;}
649		-var model=$.wikiEditor.modules.templateEditor.fn.updateModel($(node));if($(node).parent().hasClass('wikiEditor-template')){var $name=$(node).parent().children('.wikiEditor-template-name');if($name.text()!=model.getName()){$name.text(model.getName());}}
650		-if($(node).parent().hasClass('wikiEditor-template')&&!model.isCollapsible()){$.wikiEditor.modules.templateEditor.fn.unwrapTemplate($(node));}else if(!$(node).parent().hasClass('wikiEditor-template')&&model.isCollapsible()){$.wikiEditor.modules.templateEditor.fn.wrapTemplate($(node));$.wikiEditor.modules.templateEditor.fn.bindTemplateEvents($(node));}},getAnchor:function(ca1,ca2){return $(ca1.parentNode).is('span.wikiEditor-template-text')?ca1.parentNode:null;},context:context});}else{tokenArray[beginIndex].label='TEMPLATE_FALSE_BEGIN';tokenIndex=beginIndex;}}}},keydown:function(context,event){if(context.$iframe.data('ignoreKeypress'))context.$iframe.data('ignoreKeypress',false);var $evtElem=event.jQueryNode;if($evtElem.hasClass('wikiEditor-template-name')){if(event.ctrlKey\|\|event.metaKey)return true;switch(event.which){case 37:case 38:case 39:case 40:return true;default:context.$iframe.data('ignoreKeypress',true);return false;}}else if($evtElem.hasClass('wikiEditor-template-text')){switch(event.which){case 13:context.fn.encapsulateSelection({'pre':'\n','peri':'','post':''});return false;default:return true;}}},keyup:function(context,event){if(context.$iframe.data('ignoreKeypress'))context.$iframe.data('ignoreKeypress',false);return true;},keypress:function(context,event){return(context.$iframe.data('ignoreKeypress')?false:true);}},exp:[{'regex':/{{/,'label':"TEMPLATE_BEGIN"},{'regex':/}}/,'label':"TEMPLATE_END",'markAfter':true}],cfg:{},fn:{create:function(context,config){context.modules.templateEditor={};},wrapTemplate:function($wrapper){var model=$wrapper.data('model');var context=$wrapper.data('marker').context;var $template=$wrapper.wrap('<span class="wikiEditor-template"></span>').addClass('wikiEditor-template-text wikiEditor-nodisplay').parent().addClass('wikiEditor-template-collapsed');var $templateName=$('<span />').addClass('wikiEditor-template-name wikiEditor-noinclude').text(model.getName()).prependTo($template);var $templateExpand=$('<span />').addClass('wikiEditor-template-expand wikiEditor-noinclude').prependTo($template);var $templateDialog=$('<span />').addClass('wikiEditor-template-dialog wikiEditor-noinclude').appendTo($templateName);},unwrapTemplate:function($wrapper){$wrapper.parent().replaceWith($wrapper);},bindTemplateEvents:function($wrapper){var $template=$wrapper.parent('.wikiEditor-template');$template.find('.wikiEditor-template-name').click(function(){$.wikiEditor.modules.templateEditor.fn.createDialog($wrapper);return false;}).mousedown(function(){return false;});$template.find('.wikiEditor-template-expand').click(function(){$.wikiEditor.modules.templateEditor.fn.toggleWikiTextEditor($wrapper);return false;}).mousedown(function(){return false;});$template.find('.wikiEditor-template-dialog').click(function(){$.wikiEditor.modules.templateEditor.fn.createDialog($wrapper);return false;}).mousedown(function(){return false;});},toggleWikiTextEditor:function($wrapper){var context=$wrapper.data('marker').context;var $template=$wrapper.parent('.wikiEditor-template');context.fn.purgeOffsets();$template.toggleClass('wikiEditor-template-expanded').toggleClass('wikiEditor-template-collapsed').find('.wikiEditor-template-text').toggleClass('wikiEditor-nodisplay');},createDialog:function($wrapper){var context=$wrapper.data('marker').context;var $template=$wrapper.parent('.wikiEditor-template');var dialog={'titleMsg':'wikieditor-template-editor-dialog-title','id':'wikiEditor-template-dialog','html':'\
	649	+var model=$.wikiEditor.modules.templateEditor.fn.updateModel($(node));if($(node).parent().hasClass('wikiEditor-template')){var $label=$(node).parent().find('.wikiEditor-template-label');if($label.text()!=model.getName()){$label.text(model.getName());}}
	650	+if($(node).parent().hasClass('wikiEditor-template')&&!model.isCollapsible()){$.wikiEditor.modules.templateEditor.fn.unwrapTemplate($(node));}else if(!$(node).parent().hasClass('wikiEditor-template')&&model.isCollapsible()){$.wikiEditor.modules.templateEditor.fn.wrapTemplate($(node));$.wikiEditor.modules.templateEditor.fn.bindTemplateEvents($(node));}},getAnchor:function(ca1,ca2){return $(ca1.parentNode).is('span.wikiEditor-template-text')?ca1.parentNode:null;},context:context});}else{tokenArray[beginIndex].label='TEMPLATE_FALSE_BEGIN';tokenIndex=beginIndex;}}}},keydown:function(context,event){if(context.$iframe.data('ignoreKeypress'))context.$iframe.data('ignoreKeypress',false);var $evtElem=event.jQueryNode;if($evtElem.hasClass('wikiEditor-template-name')){if(event.ctrlKey\|\|event.metaKey)return true;switch(event.which){case 37:case 38:case 39:case 40:return true;default:context.$iframe.data('ignoreKeypress',true);return false;}}else if($evtElem.hasClass('wikiEditor-template-text')){switch(event.which){case 13:context.fn.encapsulateSelection({'pre':'\n','peri':'','post':''});return false;default:return true;}}},keyup:function(context,event){if(context.$iframe.data('ignoreKeypress'))context.$iframe.data('ignoreKeypress',false);return true;},keypress:function(context,event){return(context.$iframe.data('ignoreKeypress')?false:true);}},exp:[{'regex':/{{/,'label':"TEMPLATE_BEGIN"},{'regex':/}}/,'label':"TEMPLATE_END",'markAfter':true}],cfg:{},fn:{create:function(context,config){context.modules.templateEditor={};},wrapTemplate:function($wrapper){var model=$wrapper.data('model');var context=$wrapper.data('marker').context;var $template=$wrapper.wrap('<span class="wikiEditor-template"></span>').addClass('wikiEditor-template-text wikiEditor-nodisplay').parent().addClass('wikiEditor-template-collapsed').prepend($('<span class="wikiEditor-template-expand wikiEditor-noinclude"></span>'+'<span class="wikiEditor-template-name wikiEditor-noinclude">'+'<span class="wikiEditor-template-label wikiEditor-noinclude">'+model.getName()+'</span>'+'<span class="wikiEditor-template-dialog wikiEditor-noinclude"></span>'+'</span>'));},unwrapTemplate:function($wrapper){$wrapper.parent().replaceWith($wrapper);},bindTemplateEvents:function($wrapper){var $template=$wrapper.parent('.wikiEditor-template');$template.find('.wikiEditor-template-name').click(function(){$.wikiEditor.modules.templateEditor.fn.createDialog($wrapper);return false;}).mousedown(function(){return false;});$template.find('.wikiEditor-template-expand').click(function(){$.wikiEditor.modules.templateEditor.fn.toggleWikiTextEditor($wrapper);return false;}).mousedown(function(){return false;});},toggleWikiTextEditor:function($wrapper){var context=$wrapper.data('marker').context;var $template=$wrapper.parent('.wikiEditor-template');context.fn.purgeOffsets();$template.toggleClass('wikiEditor-template-expanded').toggleClass('wikiEditor-template-collapsed').find('.wikiEditor-template-text').toggleClass('wikiEditor-nodisplay');},createDialog:function($wrapper){var context=$wrapper.data('marker').context;var $template=$wrapper.parent('.wikiEditor-template');var dialog={'titleMsg':'wikieditor-template-editor-dialog-title','id':'wikiEditor-template-dialog','html':'\
651	651	<fieldset>\
652	652	<div class="wikiEditor-template-dialog-title" />\
653	653	<div class="wikiEditor-template-dialog-fields" />\

Follow-up revisions

Revision	Commit summary	Author	Date
r63786	Fixed regression caused by restructuring the capsule's HTML in r63784.	tparscal	22:53, 15 March 2010
r63823	Improved on the performance tweak in r63784 by using the raw HTML mode of jQu...	tparscal	18:47, 16 March 2010

Comments

#Comment by Catrope (talk | contribs) 16:02, 16 March 2010

+			.prepend( $(
+				'<span class="wikiEditor-template-expand wikiEditor-noinclude"></span>' +
+				'<span class="wikiEditor-template-name wikiEditor-noinclude">' +
+					'<span class="wikiEditor-template-label wikiEditor-noinclude">' + model.getName() + '</span>' +
+					'<span class="wikiEditor-template-dialog wikiEditor-noinclude"></span>' +
+				'</span>'
+			) );

You can actually strip the $() call here, prepend() will accept raw HTML as well. I have an inkling that might also be slightly faster.

Status & tagging log

16:04, 16 March 2010 Catrope (talk | contribs) changed the status of r63784 [removed: new added: ok]