r58092 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r58091‎ | r58092 | r58093 >
Date:19:28, 24 October 2009
Author:catrope
Status:deferred
Tags:
Comment:
EditToolbar: New table dialog; adds checkbox for wikitable and sortable classes, and displays a preview of the table's styling (not of its dimensions)
Modified paths:
  • /trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.hooks.php (modified) (history)
  • /trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.i18n.php (modified) (history)
  • /trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.min.js (modified) (history)

Diff [purge]

Index: trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.hooks.php
——@@ -118,10 +118,12 @@
119119 'edittoolbar-tool-table-example',
120120 'edittoolbar-tool-table-example-header',
121121 'edittoolbar-tool-table-title',
122 - 'edittoolbar-tool-table-dimensions',
123122 'edittoolbar-tool-table-dimensions-rows',
124123 'edittoolbar-tool-table-dimensions-columns',
125124 'edittoolbar-tool-table-dimensions-header',
 125+ 'edittoolbar-tool-table-wikitable',
 126+ 'edittoolbar-tool-table-sortable',
 127+ 'edittoolbar-tool-table-preview',
126128 'edittoolbar-tool-table-insert',
127129 'edittoolbar-tool-table-cancel',
128130 'edittoolbar-tool-table-toomany',
Index: trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.js
——@@ -1132,25 +1132,104 @@
11331133 'insert-table': {
11341134 titleMsg: 'edittoolbar-tool-table-title',
11351135 id: 'edittoolbar-table-dialog',
 1136+ // FIXME: All kinds of uglinesses and styling issues
 1137+ // FIXME: Rows are identical so sorting has no effect
 1138+ // FIXME: Localize 'x'?
11361139 html: '\
1137 - <fieldset><legend rel="edittoolbar-tool-table-dimensions"></legend><table><tr>\
1138 - <td><input type="checkbox" id="edittoolbar-table-dimensions-header" value="1" /></td>\
1139 - <td class="label"><label for="edittoolbar-table-dimensions-header"\
1140 - rel="edittoolbar-tool-table-dimensions-header"></label></td>\
1141 - </tr></table><table><tr>\
1142 - <td class="label"><label for="edittoolbar-table-dimensions-columns"\
1143 - rel="edittoolbar-tool-table-dimensions-columns"></label></td>\
1144 - <td><input type="text" id="edittoolbar-table-dimensions-columns" size="4" /></td>\
1145 - <td class="label"><label for="edittoolbar-table-dimensions-rows"\
1146 - rel="edittoolbar-tool-table-dimensions-rows"></label></td>\
1147 - <td><input type="text" id="edittoolbar-table-dimensions-rows" size="4" /></td>\
1148 - </tr></table></fieldset>',
 1140+ <fieldset><table><tr><td colspan="3">\
 1141+ <input type="checkbox" id="edittoolbar-table-dimensions-header" checked />\
 1142+ <label for="edittoolbar-table-dimensions-header"\
 1143+ rel="edittoolbar-tool-table-dimensions-header"></label>\
 1144+ </td><td rowspan="4">\
 1145+ <span rel="edittoolbar-tool-table-preview"></span>\
 1146+ <table id="edittoolbar-table-preview" class="edittoolbar-table-preview wikitable">\
 1147+ <tr class="edittoolbar-table-preview-header">\
 1148+ <th rel="edittoolbar-tool-table-example-header"></th>\
 1149+ <th rel="edittoolbar-tool-table-example-header"></th>\
 1150+ <th rel="edittoolbar-tool-table-example-header"></th>\
 1151+ </tr><tr class="edittoolbar-table-preview-hidden" style="display: none;">\
 1152+ <td rel="edittoolbar-tool-table-example"></td>\
 1153+ <td rel="edittoolbar-tool-table-example"></td>\
 1154+ <td rel="edittoolbar-tool-table-example"></td>\
 1155+ </tr><tr>\
 1156+ <td rel="edittoolbar-tool-table-example"></td>\
 1157+ <td rel="edittoolbar-tool-table-example"></td>\
 1158+ <td rel="edittoolbar-tool-table-example"></td>\
 1159+ </tr><tr>\
 1160+ <td rel="edittoolbar-tool-table-example"></td>\
 1161+ <td rel="edittoolbar-tool-table-example"></td>\
 1162+ <td rel="edittoolbar-tool-table-example"></td>\
 1163+ </tr><tr>\
 1164+ <td rel="edittoolbar-tool-table-example"></td>\
 1165+ <td rel="edittoolbar-tool-table-example"></td>\
 1166+ <td rel="edittoolbar-tool-table-example"></td>\
 1167+ </tr>\
 1168+ </table>\
 1169+ </td></tr><tr><td colspan="3">\
 1170+ <input type="checkbox" id="edittoolbar-table-wikitable" checked />\
 1171+ <label for="edittoolbar-table-wikitable" rel="edittoolbar-tool-table-wikitable"></label>\
 1172+ </td></tr><tr><td colspan="3">\
 1173+ <input type="checkbox" id="edittoolbar-table-sortable" />\
 1174+ <label for="edittoolbar-table-sortable" rel="edittoolbar-tool-table-sortable"></label>\
 1175+ </td></tr><tr><td>\
 1176+ <label for="edittoolbar-table-dimensions-rows"\
 1177+ rel="edittoolbar-tool-table-dimensions-rows"></label><br />\
 1178+ <input type="text" id="edittoolbar-table-dimensions-rows" size="4" />\
 1179+ </td><td>\
 1180+ <br />x\
 1181+ </td><td>\
 1182+ <label for="edittoolbar-table-dimensions-columns"\
 1183+ rel="edittoolbar-tool-table-dimensions-columns"></label><br />\
 1184+ <input type="text" id="edittoolbar-table-dimensions-columns" size="4" />\
 1185+ </td></tr></table></fieldset>',
11491186 init: function() {
11501187 $j(this).find( '[rel]' ).each( function() {
11511188 $j(this).text( gM( $j(this).attr( 'rel' ) ) );
11521189 });
1153 - $j( '#edittoolbar-table-dimensions-rows' ).val( 2 );
1154 - $j( '#edittoolbar-table-dimensions-columns' ).val( 2 );
 1190+ $j( '#edittoolbar-table-dimensions-rows' ).val( 4 );
 1191+ $j( '#edittoolbar-table-dimensions-columns' ).val( 3 );
 1192+ $j( '#edittoolbar-table-wikitable' ).click( function() {
 1193+ $j( '.edittoolbar-table-preview' ).toggleClass( 'wikitable' );
 1194+ });
 1195+
 1196+ // Hack for sortable preview: dynamically adding
 1197+ // sortable class doesn't work, so we use a clone
 1198+ // FIXME: Relies on sortable table internals
 1199+ $j( '#edittoolbar-table-preview' )
 1200+ .clone()
 1201+ .attr( 'id', 'edittoolbar-table-preview2' )
 1202+ .addClass( 'sortable' )
 1203+ .insertAfter( $j( '#edittoolbar-table-preview' ) )
 1204+ .hide();
 1205+ if ( typeof ts_makeSortable == 'function' )
 1206+ ts_makeSortable( $j( '#edittoolbar-table-preview2' ).get( 0 ) );
 1207+ $j( '#edittoolbar-table-sortable' ).click( function() {
 1208+ // Swap the currently shown one clone with the other one
 1209+ $j( '#edittoolbar-table-preview' )
 1210+ .hide()
 1211+ .attr( 'id', 'edittoolbar-table-preview3' );
 1212+ $j( '#edittoolbar-table-preview2' )
 1213+ .attr( 'id', 'edittoolbar-table-preview' )
 1214+ .show();
 1215+ $j( '#edittoolbar-table-preview3' ).attr( 'id', 'edittoolbar-table-preview2' );
 1216+ });
 1217+
 1218+ $j( '#edittoolbar-table-dimensions-header' ).click( function() {
 1219+ // Instead of show/hiding, switch the HTML around
 1220+ // We do this because the sortable tables script styles the first row,
 1221+ // visible or not
 1222+ var headerHTML = $j( '.edittoolbar-table-preview-header' ).html();
 1223+ var hiddenHTML = $j( '.edittoolbar-table-preview-hidden' ).html();
 1224+ $j( '.edittoolbar-table-preview-header' ).html( hiddenHTML );
 1225+ $j( '.edittoolbar-table-preview-hidden' ).html( headerHTML );
 1226+ if ( typeof ts_makeSortable == 'function' )
 1227+ ts_makeSortable(
 1228+ $j( '#edittoolbar-table-preview, #edittoolbar-table-preview2' )
 1229+ .filter( '.sortable' )
 1230+ .get( 0 )
 1231+ );
 1232+ });
 1233+
11551234 },
11561235 dialog: {
11571236 buttons: {
——@@ -1172,6 +1251,8 @@
11731252 alert( gM( 'edittoolbar-tool-table-toomany', 1000 ) );
11741253 return;
11751254 }
 1255+ var headerText = gM( 'edittoolbar-tool-table-example-header' );
 1256+ var normalText = gM( 'edittoolbar-tool-table-example' );
11761257 var table = "";
11771258 for ( var r = 0; r < rows + header; r++ ) {
11781259 table += "|-\n";
——@@ -1181,23 +1262,26 @@
11821263 if ( c > 0 ) {
11831264 delim += delim;
11841265 }
1185 - table += delim + ' ' + gM(
1186 - isHeader ? 'edittoolbar-tool-table-example-header' : 'edittoolbar-tool-table-example',
1187 - [ r + 1, c + 1 ]
1188 - ) + ' ';
 1266+ table += delim + ' ' + ( isHeader ? headerText : normalText ) + ' ';
11891267 }
11901268 // Replace trailing space by newline
11911269 // table[table.length - 1] is read-only
11921270 table = table.substr( 0, table.length - 1 ) + "\n";
11931271 }
 1272+ var classes = [];
 1273+ if ( $j( '#edittoolbar-table-wikitable' ).is( ':checked' ) )
 1274+ classes.push( 'wikitable' );
 1275+ if ( $j( '#edittoolbar-table-sortable' ).is( ':checked' ) )
 1276+ classes.push( 'sortable' );
 1277+ var classStr = classes.length > 0 ? ' class="' + classes.join( ' ' ) + '"' : '';
11941278 $j.wikiEditor.modules.toolbar.fn.doAction(
11951279 $j(this).data( 'context' ),
11961280 {
11971281 type: 'replace',
11981282 options: {
1199 - pre: "{| class=\"wikitable\"\n",
 1283+ pre: '{|' + classStr + "\n",
12001284 peri: table,
1201 - post: "|}",
 1285+ post: '|}',
12021286 ownline: true
12031287 }
12041288 },
——@@ -1210,7 +1294,7 @@
12111295 }
12121296 },
12131297 open: function() {
1214 - $j( '#edittoolbar-table-dimensions-columns' ).focus();
 1298+ $j( '#edittoolbar-table-dimensions-rows' ).focus();
12151299 if ( !( $j(this).data( 'dialogkeypressset' ) ) ) {
12161300 $j(this).data( 'dialogkeypressset', true );
12171301 // Execute the action associated with the first button
Index: trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.min.js
——@@ -61,24 +61,62 @@
6262 $j('#edittoolbar-link-int-target').val(target).change();if(typeof type!='undefined')
6363 $j('#edittoolbar-link-'+type).attr('checked','checked');}
6464 $j('#edittoolbar-link-int-text').data('untouched',$j('#edittoolbar-link-int-text').val()==$j('#edittoolbar-link-int-target').val());$j('#edittoolbar-link-int-target').suggestions();if(!($j(this).data('dialogkeypressset'))){$j(this).data('dialogkeypressset',true);$j(this).closest('.ui-dialog').keypress(function(e){if((e.keyCode||e.which)==13){$j(this).find('button:first').click();e.preventDefault();}});}}}},'insert-table':{titleMsg:'edittoolbar-tool-table-title',id:'edittoolbar-table-dialog',html:'\
65 - <fieldset><legend rel="edittoolbar-tool-table-dimensions"></legend><table><tr>\
66 - <td><input type="checkbox" id="edittoolbar-table-dimensions-header" value="1" /></td>\
67 - <td class="label"><label for="edittoolbar-table-dimensions-header"\
68 - rel="edittoolbar-tool-table-dimensions-header"></label></td>\
69 - </tr></table><table><tr>\
70 - <td class="label"><label for="edittoolbar-table-dimensions-columns"\
71 - rel="edittoolbar-tool-table-dimensions-columns"></label></td>\
72 - <td><input type="text" id="edittoolbar-table-dimensions-columns" size="4" /></td>\
73 - <td class="label"><label for="edittoolbar-table-dimensions-rows"\
74 - rel="edittoolbar-tool-table-dimensions-rows"></label></td>\
75 - <td><input type="text" id="edittoolbar-table-dimensions-rows" size="4" /></td>\
76 - </tr></table></fieldset>',init:function(){$j(this).find('[rel]').each(function(){$j(this).text(gM($j(this).attr('rel')));});$j('#edittoolbar-table-dimensions-rows').val(2);$j('#edittoolbar-table-dimensions-columns').val(2);},dialog:{buttons:{'edittoolbar-tool-table-insert':function(){var rowsVal=$j('#edittoolbar-table-dimensions-rows').val();var colsVal=$j('#edittoolbar-table-dimensions-columns').val();var rows=parseInt(rowsVal,10);var cols=parseInt(colsVal,10);var header=Math.min(1,$j('#edittoolbar-table-dimensions-header:checked').size());if(isNaN(rows)||isNaN(cols)||rows!=rowsVal||cols!=colsVal){alert(gM('edittoolbar-tool-table-invalidnumber'));return;}
 65+ <fieldset><table><tr><td colspan="3">\
 66+ <input type="checkbox" id="edittoolbar-table-dimensions-header" checked />\
 67+ <label for="edittoolbar-table-dimensions-header"\
 68+ rel="edittoolbar-tool-table-dimensions-header"></label>\
 69+ </td><td rowspan="4">\
 70+ <span rel="edittoolbar-tool-table-preview"></span>\
 71+ <table id="edittoolbar-table-preview" class="edittoolbar-table-preview wikitable">\
 72+ <tr class="edittoolbar-table-preview-header">\
 73+ <th rel="edittoolbar-tool-table-example-header"></th>\
 74+ <th rel="edittoolbar-tool-table-example-header"></th>\
 75+ <th rel="edittoolbar-tool-table-example-header"></th>\
 76+ </tr><tr class="edittoolbar-table-preview-hidden" style="display: none;">\
 77+ <td rel="edittoolbar-tool-table-example"></td>\
 78+ <td rel="edittoolbar-tool-table-example"></td>\
 79+ <td rel="edittoolbar-tool-table-example"></td>\
 80+ </tr><tr>\
 81+ <td rel="edittoolbar-tool-table-example"></td>\
 82+ <td rel="edittoolbar-tool-table-example"></td>\
 83+ <td rel="edittoolbar-tool-table-example"></td>\
 84+ </tr><tr>\
 85+ <td rel="edittoolbar-tool-table-example"></td>\
 86+ <td rel="edittoolbar-tool-table-example"></td>\
 87+ <td rel="edittoolbar-tool-table-example"></td>\
 88+ </tr><tr>\
 89+ <td rel="edittoolbar-tool-table-example"></td>\
 90+ <td rel="edittoolbar-tool-table-example"></td>\
 91+ <td rel="edittoolbar-tool-table-example"></td>\
 92+ </tr>\
 93+ </table>\
 94+ </td></tr><tr><td colspan="3">\
 95+ <input type="checkbox" id="edittoolbar-table-wikitable" checked />\
 96+ <label for="edittoolbar-table-wikitable" rel="edittoolbar-tool-table-wikitable"></label>\
 97+ </td></tr><tr><td colspan="3">\
 98+ <input type="checkbox" id="edittoolbar-table-sortable" />\
 99+ <label for="edittoolbar-table-sortable" rel="edittoolbar-tool-table-sortable"></label>\
 100+ </td></tr><tr><td>\
 101+ <label for="edittoolbar-table-dimensions-rows"\
 102+ rel="edittoolbar-tool-table-dimensions-rows"></label><br />\
 103+ <input type="text" id="edittoolbar-table-dimensions-rows" size="4" />\
 104+ </td><td>\
 105+ <br />x\
 106+ </td><td>\
 107+ <label for="edittoolbar-table-dimensions-columns"\
 108+ rel="edittoolbar-tool-table-dimensions-columns"></label><br />\
 109+ <input type="text" id="edittoolbar-table-dimensions-columns" size="4" />\
 110+ </td></tr></table></fieldset>',init:function(){$j(this).find('[rel]').each(function(){$j(this).text(gM($j(this).attr('rel')));});$j('#edittoolbar-table-dimensions-rows').val(4);$j('#edittoolbar-table-dimensions-columns').val(3);$j('#edittoolbar-table-wikitable').click(function(){$j('.edittoolbar-table-preview').toggleClass('wikitable');});$j('#edittoolbar-table-preview').clone().attr('id','edittoolbar-table-preview2').addClass('sortable').insertAfter($j('#edittoolbar-table-preview')).hide();if(typeof ts_makeSortable=='function')
 111+ts_makeSortable($j('#edittoolbar-table-preview2').get(0));$j('#edittoolbar-table-sortable').click(function(){$j('#edittoolbar-table-preview').hide().attr('id','edittoolbar-table-preview3');$j('#edittoolbar-table-preview2').attr('id','edittoolbar-table-preview').show();$j('#edittoolbar-table-preview3').attr('id','edittoolbar-table-preview2');});$j('#edittoolbar-table-dimensions-header').click(function(){var headerHTML=$j('.edittoolbar-table-preview-header').html();var hiddenHTML=$j('.edittoolbar-table-preview-hidden').html();$j('.edittoolbar-table-preview-header').html(hiddenHTML);$j('.edittoolbar-table-preview-hidden').html(headerHTML);if(typeof ts_makeSortable=='function')
 112+ts_makeSortable($j('#edittoolbar-table-preview, #edittoolbar-table-preview2').filter('.sortable').get(0));});},dialog:{buttons:{'edittoolbar-tool-table-insert':function(){var rowsVal=$j('#edittoolbar-table-dimensions-rows').val();var colsVal=$j('#edittoolbar-table-dimensions-columns').val();var rows=parseInt(rowsVal,10);var cols=parseInt(colsVal,10);var header=Math.min(1,$j('#edittoolbar-table-dimensions-header:checked').size());if(isNaN(rows)||isNaN(cols)||rows!=rowsVal||cols!=colsVal){alert(gM('edittoolbar-tool-table-invalidnumber'));return;}
77113 if(rows+header==0||cols==0){alert(gM('edittoolbar-tool-table-zero'));return;}
78114 if(rows*cols>1000){alert(gM('edittoolbar-tool-table-toomany',1000));return;}
79 -var table="";for(var r=0;r<rows+header;r++){table+="|-\n";for(var c=0;c<cols;c++){var isHeader=(r+1==header);var delim=isHeader?'!':'|';if(c>0){delim+=delim;}
80 -table+=delim+' '+gM(isHeader?'edittoolbar-tool-table-example-header':'edittoolbar-tool-table-example',[r+1,c+1])+' ';}
 115+var headerText=gM('edittoolbar-tool-table-example-header');var normalText=gM('edittoolbar-tool-table-example');var table="";for(var r=0;r<rows+header;r++){table+="|-\n";for(var c=0;c<cols;c++){var isHeader=(r+1==header);var delim=isHeader?'!':'|';if(c>0){delim+=delim;}
 116+table+=delim+' '+(isHeader?headerText:normalText)+' ';}
81117 table=table.substr(0,table.length-1)+"\n";}
82 -$j.wikiEditor.modules.toolbar.fn.doAction($j(this).data('context'),{type:'replace',options:{pre:"{| class=\"wikitable\"\n",peri:table,post:"|}",ownline:true}},$j(this));$j(this).dialog('close');},'edittoolbar-tool-table-cancel':function(){$j(this).dialog('close');}},open:function(){$j('#edittoolbar-table-dimensions-columns').focus();if(!($j(this).data('dialogkeypressset'))){$j(this).data('dialogkeypressset',true);$j(this).closest('.ui-dialog').keypress(function(e){if((e.keyCode||e.which)==13){$j(this).find('button:first').click();e.preventDefault();}});}}}},'search-and-replace':{titleMsg:'edittoolbar-tool-replace-title',id:'edittoolbar-replace-dialog',html:'\
 118+var classes=[];if($j('#edittoolbar-table-wikitable').is(':checked'))
 119+classes.push('wikitable');if($j('#edittoolbar-table-sortable').is(':checked'))
 120+classes.push('sortable');var classStr=classes.length>0?' class="'+classes.join(' ')+'"':'';$j.wikiEditor.modules.toolbar.fn.doAction($j(this).data('context'),{type:'replace',options:{pre:'{|'+classStr+"\n",peri:table,post:'|}',ownline:true}},$j(this));$j(this).dialog('close');},'edittoolbar-tool-table-cancel':function(){$j(this).dialog('close');}},open:function(){$j('#edittoolbar-table-dimensions-rows').focus();if(!($j(this).data('dialogkeypressset'))){$j(this).data('dialogkeypressset',true);$j(this).closest('.ui-dialog').keypress(function(e){if((e.keyCode||e.which)==13){$j(this).find('button:first').click();e.preventDefault();}});}}}},'search-and-replace':{titleMsg:'edittoolbar-tool-replace-title',id:'edittoolbar-replace-dialog',html:'\
83121 <div id="edittoolbar-replace-message">\
84122 <div id="edittoolbar-replace-nomatch" rel="edittoolbar-tool-replace-nomatch"></div>\
85123 <div id="edittoolbar-replace-success"></div>\
Index: trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.i18n.php
——@@ -92,13 +92,15 @@
9393 | row 2, cell 1
9494 | row 2, cell 2
9595 | row 2, cell 3",
96 - 'edittoolbar-tool-table-example' => 'Row $1, cell $2',
97 - 'edittoolbar-tool-table-example-header' => 'Row $1, cell $2 (header)',
 96+ 'edittoolbar-tool-table-example' => 'Cell text',
 97+ 'edittoolbar-tool-table-example-header' => 'Header text',
9898 'edittoolbar-tool-table-title' => 'Insert table',
99 - 'edittoolbar-tool-table-dimensions' => 'Dimensions',
10099 'edittoolbar-tool-table-dimensions-rows' => 'Rows',
101100 'edittoolbar-tool-table-dimensions-columns' => 'Columns',
102101 'edittoolbar-tool-table-dimensions-header' => 'Include header row',
 102+ 'edittoolbar-tool-table-wikitable' => 'Style with borders',
 103+ 'edittoolbar-tool-table-sortable' => 'Make table sortable',
 104+ 'edittoolbar-tool-table-preview' => 'Preview',
103105 'edittoolbar-tool-table-insert' => 'Insert',
104106 'edittoolbar-tool-table-cancel' => 'Cancel',
105107 'edittoolbar-tool-table-toomany' => 'Inserting a table with more than $1 cells is not possible with this dialog.',

Status & tagging log