r51704 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r51703‎ | r51704 | r51705 >
Date:19:14, 10 June 2009
Author:tparscal
Status:deferred
Tags:
Comment:
Added basic framework for doing help section in toolbar - not finished yet though
Modified paths:
  • /trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.css (modified) (history)
  • /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)

Diff [purge]

Index: trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.css
——@@ -92,6 +92,50 @@
9393 body.rtl div#edittoolbar div.group > select {
9494 float: right;
9595 }
 96+div#edittoolbar div.index {
 97+ float: left;
 98+ width: 20%;
 99+ height: 150px;
 100+ overflow: auto;
 101+}
 102+div#edittoolbar div.index > div {
 103+ padding: 9px;
 104+ cursor: pointer;
 105+ color: #00528C;
 106+}
 107+div#edittoolbar div.index > div.current {
 108+ background-color: white;
 109+ color: #333333;
 110+}
 111+div#edittoolbar div.pages {
 112+ float: right;
 113+ width: 80%;
 114+ height: 150px;
 115+ overflow: auto;
 116+ background-color: white;
 117+}
 118+div#edittoolbar div.pages > div.page {
 119+ display: none;
 120+}
 121+div#edittoolbar div.pages > div.page:first-child {
 122+ display: block;
 123+}
 124+div#edittoolbar div.pages > div.page > table {
 125+ padding: 4px;
 126+}
 127+div#edittoolbar div.pages > div.page > table th {
 128+ color: #999999;
 129+ border-bottom: solid 1px #DDDDDD;
 130+}
 131+div#edittoolbar div.pages > div.page > table th,
 132+div#edittoolbar div.pages > div.page > table td {
 133+ text-align: left;
 134+ padding: 5px;
 135+ margin: 0px;
 136+}
 137+div#edittoolbar div.pages > div.page > table td.syntax {
 138+ font-family: monospace;
 139+}
96140 div#edittoolbar div.tabs > div.tab {
97141 float: left;
98142 line-height: 26px;
Index: trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.hooks.php
——@@ -91,6 +91,25 @@
9292 'edittoolbar-section-characters',
9393 /* Help Section */
9494 'edittoolbar-section-help',
 95+ 'edittoolbar-help-heading-description',
 96+ 'edittoolbar-help-heading-syntax',
 97+ 'edittoolbar-help-heading-result',
 98+ 'edittoolbar-help-page-format',
 99+ 'edittoolbar-help-page-link',
 100+ 'edittoolbar-help-page-heading',
 101+ 'edittoolbar-help-page-list',
 102+ 'edittoolbar-help-page-file',
 103+ 'edittoolbar-help-page-reference',
 104+ 'edittoolbar-help-page-discussion',
 105+ 'edittoolbar-help-content-bold-description',
 106+ 'edittoolbar-help-content-bold-syntax',
 107+ 'edittoolbar-help-content-bold-result',
 108+ 'edittoolbar-help-content-italic-description',
 109+ 'edittoolbar-help-content-italic-syntax',
 110+ 'edittoolbar-help-content-italic-result',
 111+ 'edittoolbar-help-content-bolditalic-description',
 112+ 'edittoolbar-help-content-bolditalic-syntax',
 113+ 'edittoolbar-help-content-bolditalic-result',
95114 )
96115 );
97116 // Continue
Index: trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.js
——@@ -84,92 +84,176 @@
8585 /**
8686 * Adds a toolbar section to a containing div
8787 * @param {Object} section Section data to build toolbar from
 88+ * @param {Object} textbox
8889 */
8990 addToolbarSection: function( section, textbox ) {
9091 // Path to images (THIS WILL HAVE TO CHANGE IF YOU MOVE THIS INTO CORE)
9192 var imagePath = wgScriptPath +
9293 '/extensions/UsabilityInitiative/EditToolbar/images/';
93 - // Check for groups
94 - if ( !( 'groups' in section ) ) {
95 - return;
 94+ function msgSet( object, property ) {
 95+ return property in object || property + 'Msg' in object;
9696 }
97 - // Loops over each main group
98 - for ( group in section.groups ) {
99 - // Appends group
100 - var groupDiv = $( '<div />' )
101 - .attr( 'class', 'group' )
102 - .appendTo( $(this) );
103 - // Checks if a there's a label for this group
104 - if ( 'label' in section.groups[group] || 'labelMsg' in section.groups[group] ) {
105 - groupDiv.append(
106 - $( '<div />' )
107 - .attr( 'class', 'label' )
108 - .text( section.groups[group].label || gM( section.groups[group].labelMsg ) )
109 - )
110 - }
111 - // Creates generic action
112 - var action = function() {
113 - $(this).useTool(
114 - $(this).data( 'context' ).tool,
115 - $(this).data( 'context' ).textbox
116 - );
117 - };
118 - // Loops over each tool
119 - for ( tool in section.groups[group].tools ) {
120 - // Filters are jQuery selectors which must select 1 or more
121 - // elements for this tool to apear. This is especailly
122 - // useful for restricting some tools to certain namespaces
123 - if ( 'filters' in section.groups[group].tools[tool] ) {
124 - var filters = section.groups[group].tools[tool].filters;
125 - var skip = false;
126 - for ( filter in filters ) {
127 - if ( $( filters[filter] ).size() == 0 ) {
128 - skip = true;
129 - }
130 - }
131 - if ( skip ) {
132 - continue;
133 - }
 97+ function msg( object, property ) {
 98+ return object[property] || gM( object[property + 'Msg'] );
 99+ }
 100+ switch ( section.type ) {
 101+ case 'toolbar':
 102+ // Check for groups
 103+ if ( !( 'groups' in section ) ) {
 104+ return;
134105 }
135 - // Creates context for use in action
136 - var context = { 'tool': section.groups[group].tools[tool], 'textbox': textbox };
137 - // Creates the label of the tool
138 - var label = ( section.groups[group].tools[tool].label || gM( section.groups[group].tools[tool].labelMsg ) );
139 - switch ( section.groups[group].tools[tool].type ) {
140 - case 'button':
141 - // Appends button
 106+ // Loops over each group
 107+ for ( group in section.groups ) {
 108+ // Appends group
 109+ var groupDiv = $( '<div />' )
 110+ .attr( 'class', 'group' )
 111+ .appendTo( $(this) );
 112+ // Checks if there's a label for this group
 113+ if ( msgSet( section.groups[group], 'label' ) ) {
142114 groupDiv.append(
143 - $( '<img />' )
144 - .attr( {
145 - src: imagePath + section.groups[group].tools[tool].icon,
146 - alt: label,
147 - title: label
148 - } )
149 - .data( 'context', context )
150 - .click( action )
 115+ $( '<div />' )
 116+ .attr( 'class', 'label' )
 117+ .text( msg( section.groups[group], 'label' ) )
 118+ )
 119+ }
 120+ // Creates generic action
 121+ var action = function() {
 122+ $(this).useTool(
 123+ $(this).data( 'context' ).tool,
 124+ $(this).data( 'context' ).textbox
151125 );
152 - break;
153 - case 'select':
154 - // Appends select
155 - var selectDiv = $( '<select />' )
156 - .data( 'context', context )
157 - .change( action )
158 - .append(
159 - $( '<option />' ) .text( label )
160 - )
161 - .appendTo( groupDiv );
162 - // Appends options
163 - for ( option in section.groups[group].tools[tool].list ) {
164 - selectDiv.append(
165 - $( '<option/>' )
166 - .text( ( section.groups[group].tools[tool].list[option].label || gM( section.groups[group].tools[tool].list[option].labelMsg ) ) )
167 - .attr( 'value', option )
168 - );
 126+ };
 127+ // Loops over each tool
 128+ for ( tool in section.groups[group].tools ) {
 129+ // Filters are jQuery selectors which must select 1 or more
 130+ // elements for this tool to apear. This is especailly
 131+ // useful for restricting some tools to certain namespaces
 132+ if ( 'filters' in section.groups[group].tools[tool] ) {
 133+ var filters = section.groups[group].tools[tool].filters;
 134+ var skip = false;
 135+ for ( filter in filters ) {
 136+ if ( $( filters[filter] ).size() == 0 ) {
 137+ skip = true;
 138+ }
 139+ }
 140+ if ( skip ) {
 141+ continue;
 142+ }
169143 }
170 - break;
171 - default: break;
 144+ // Creates context for use in action
 145+ var context = { 'tool': section.groups[group].tools[tool], 'textbox': textbox };
 146+ // Creates the label of the tool
 147+ var label = msg( section.groups[group].tools[tool], 'label' );
 148+ switch ( section.groups[group].tools[tool].type ) {
 149+ case 'button':
 150+ // Appends button
 151+ groupDiv.append(
 152+ $( '<img />' )
 153+ .attr( {
 154+ src: imagePath + section.groups[group].tools[tool].icon,
 155+ alt: label,
 156+ title: label
 157+ } )
 158+ .data( 'context', context )
 159+ .click( action )
 160+ );
 161+ break;
 162+ case 'select':
 163+ // Appends select
 164+ var selectDiv = $( '<select />' )
 165+ .data( 'context', context )
 166+ .change( action )
 167+ .append(
 168+ $( '<option />' ) .text( label )
 169+ )
 170+ .appendTo( groupDiv );
 171+ // Appends options
 172+ for ( option in section.groups[group].tools[tool].list ) {
 173+ selectDiv.append(
 174+ $( '<option/>' )
 175+ .text( msg( section.groups[group].tools[tool].list[option], 'label' ) )
 176+ .attr( 'value', option )
 177+ );
 178+ }
 179+ break;
 180+ default: break;
 181+ }
 182+ }
172183 }
173 - }
 184+ break;
 185+ case 'booklet':
 186+ // Check for pages
 187+ if ( !( 'pages' in section ) ) {
 188+ return;
 189+ }
 190+ // Appends index
 191+ var indexDiv = $( '<div />' )
 192+ .attr( 'class', 'index' )
 193+ .appendTo( $(this) );
 194+ // THIS SHOULD BE REPLACED WITH SOMETHING THAT USES A COOKIE
 195+ // TO DETECT THE STATE OF THE LAST VIEW
 196+ var first = true;
 197+ // Loops over each page
 198+ for ( page in section.pages ) {
 199+ // Appends index entry
 200+ indexDiv.append(
 201+ $( '<div />' )
 202+ .attr( 'class', first ? 'current' : null )
 203+ .text( msg( section.pages[page], 'label' ) )
 204+ .click( function() {
 205+ // switch the current item and visible page
 206+ } )
 207+ );
 208+ first = false;
 209+ }
 210+ var pagesDiv = $( '<div />' )
 211+ .attr( 'class', 'pages' )
 212+ .appendTo( $(this) );
 213+ // Loops over each page
 214+ for ( page in section.pages ) {
 215+ // Appends page
 216+ var pageDiv = $( '<div />' )
 217+ .attr( 'class', 'page' )
 218+ .appendTo( pagesDiv );
 219+ // Checks if there's content for this page
 220+ switch ( section.pages[page].layout ) {
 221+ case 'table':
 222+ // Appends table to page
 223+ var contentTable = $( '<table />' )
 224+ .attr( {
 225+ 'cellpadding': '5',
 226+ 'cellspacing': '0',
 227+ 'border': '0',
 228+ 'width': '100%'
 229+ } )
 230+ .appendTo( pageDiv );
 231+ // Appends headings to table
 232+ for ( heading in section.pages[page].headings ) {
 233+ contentTable.append(
 234+ $( '<th />' )
 235+ .text( msg( section.pages[page].headings[heading], 'content' ) )
 236+ );
 237+ }
 238+ // Appends rows to table
 239+ for ( row in section.pages[page].rows ) {
 240+ var contentRow = $( '<tr />' )
 241+ .appendTo( contentTable );
 242+ for ( cell in section.pages[page].rows[row] ) {
 243+ contentRow.append(
 244+ $( '<td />' )
 245+ .attr( 'class', cell )
 246+ .append(
 247+ $( '<span>' + msg( section.pages[page].rows[row][cell], 'content' ) + '</span>' )
 248+ )
 249+ );
 250+ }
 251+ }
 252+ break;
 253+ default: break;
 254+ }
 255+ }
 256+ break;
 257+ default: break;
174258 }
175259 },
176260 /**
——@@ -225,6 +309,7 @@
226310 var editToolbarConfiguration = {
227311 // Main section
228312 'main': {
 313+ type: 'toolbar',
229314 groups: {
230315 'format': {
231316 tools: {
——@@ -334,6 +419,7 @@
335420 // Format section
336421 'format': {
337422 labelMsg: 'edittoolbar-section-format',
 423+ type: 'toolbar',
338424 groups: {
339425 'heading': {
340426 tools: {
——@@ -498,6 +584,7 @@
499585 // Insert section
500586 'insert': {
501587 labelMsg: 'edittoolbar-section-insert',
 588+ type: 'toolbar',
502589 groups: {
503590 'media': {
504591 labelMsg: 'edittoolbar-group-insert-media',
——@@ -533,6 +620,67 @@
534621 }
535622 }
536623 }
537 -
 624+ },
 625+ 'help': {
 626+ labelMsg: 'edittoolbar-section-help',
 627+ type: 'booklet',
 628+ pages: {
 629+ 'format': {
 630+ labelMsg: 'edittoolbar-help-page-format',
 631+ layout: 'table',
 632+ headings: [
 633+ { contentMsg: 'edittoolbar-help-heading-description' },
 634+ { contentMsg: 'edittoolbar-help-heading-syntax' },
 635+ { contentMsg: 'edittoolbar-help-heading-result' }
 636+ ],
 637+ rows: [
 638+ {
 639+ 'description': { contentMsg: 'edittoolbar-help-content-bold-description' },
 640+ 'syntax': { contentMsg: 'edittoolbar-help-content-bold-syntax' },
 641+ 'result': { contentMsg: 'edittoolbar-help-content-bold-result' }
 642+ },
 643+ {
 644+ 'description': { contentMsg: 'edittoolbar-help-content-italic-description' },
 645+ 'syntax': { contentMsg: 'edittoolbar-help-content-italic-syntax' },
 646+ 'result': { contentMsg: 'edittoolbar-help-content-italic-result' }
 647+ },
 648+ {
 649+ 'description': { contentMsg: 'edittoolbar-help-content-bolditalic-description' },
 650+ 'syntax': { contentMsg: 'edittoolbar-help-content-bolditalic-syntax' },
 651+ 'result': { contentMsg: 'edittoolbar-help-content-bolditalic-result' }
 652+ }
 653+ ]
 654+ },
 655+ 'link': {
 656+ labelMsg: 'edittoolbar-help-page-link',
 657+ layout: 'table',
 658+ content: 'internal and external'
 659+ },
 660+ 'heading': {
 661+ labelMsg: 'edittoolbar-help-page-heading',
 662+ layout: 'table',
 663+ content: 'heading levels 1 - 5'
 664+ },
 665+ 'list': {
 666+ labelMsg: 'edittoolbar-help-page-list',
 667+ layout: 'table',
 668+ content: 'ordered and unordered'
 669+ },
 670+ 'file': {
 671+ labelMsg: 'edittoolbar-help-page-file',
 672+ layout: 'table',
 673+ content: 'file with some parameters'
 674+ },
 675+ 'reference': {
 676+ labelMsg: 'edittoolbar-help-page-reference',
 677+ layout: 'table',
 678+ content: 'ref use and reuse'
 679+ },
 680+ 'discussion': {
 681+ labelMsg: 'edittoolbar-help-page-discussion',
 682+ layout: 'table',
 683+ content: 'signature with and without timestamp and indent'
 684+ }
 685+ }
538686 }
539687 };
\ No newline at end of file
Index: trunk/extensions/UsabilityInitiative/EditToolbar/EditToolbar.i18n.php
——@@ -64,4 +64,23 @@
6565 'edittoolbar-section-characters' => 'Special Characters',
6666 /* Help Section */
6767 'edittoolbar-section-help' => 'Help',
 68+ 'edittoolbar-help-heading-description' => 'Description',
 69+ 'edittoolbar-help-heading-syntax' => 'What you type',
 70+ 'edittoolbar-help-heading-result' => 'What you get',
 71+ 'edittoolbar-help-page-format' => 'Formatting',
 72+ 'edittoolbar-help-page-link' => 'Links',
 73+ 'edittoolbar-help-page-heading' => 'Headings',
 74+ 'edittoolbar-help-page-list' => 'Lists',
 75+ 'edittoolbar-help-page-file' => 'Files',
 76+ 'edittoolbar-help-page-reference' => 'References',
 77+ 'edittoolbar-help-page-discussion' => 'Discussion',
 78+ 'edittoolbar-help-content-bold-description' => "Makes text bold",
 79+ 'edittoolbar-help-content-bold-syntax' => "'''Bold text'''",
 80+ 'edittoolbar-help-content-bold-result' => "<strong>Bold text</strong>",
 81+ 'edittoolbar-help-content-italic-description' => "Makes text italic",
 82+ 'edittoolbar-help-content-italic-syntax' => "'''Italic text'''",
 83+ 'edittoolbar-help-content-italic-result' => "<em>Italic text</em>",
 84+ 'edittoolbar-help-content-bolditalic-description' => "Makes text bold &amp; italic",
 85+ 'edittoolbar-help-content-bolditalic-syntax' => "'''Bold &amp; italic text'''",
 86+ 'edittoolbar-help-content-bolditalic-result' => "<strong><em>Bold &amp; italic text</em></strong>",
6887 );

Status & tagging log