http://www.mediawiki.org/wiki/Special:Code/MediaWiki/54967
Revision: 54967 Author: tparscal Date: 2009-08-13 20:52:54 +0000 (Thu, 13 Aug 2009) Log Message: ----------- Finished the API for the toolbar module of wikiEditor. Now users can add and remove things from the toolbar in a nice and consistent (with how it's configured initially) way. Also, gernenalized some css rules to make them useful for people making their own tables. Modified Paths: -------------- trunk/extensions/UsabilityInitiative/css/wikiEditor.toolbar.css trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.toolbar.js trunk/extensions/UsabilityInitiative/js/tests/wikiEditor.toolbar.js Modified: trunk/extensions/UsabilityInitiative/css/wikiEditor.toolbar.css =================================================================== --- trunk/extensions/UsabilityInitiative/css/wikiEditor.toolbar.css 2009-08-13 20:42:19 UTC (rev 54966) +++ trunk/extensions/UsabilityInitiative/css/wikiEditor.toolbar.css 2009-08-13 20:52:54 UTC (rev 54967) @@ -1,20 +1,20 @@ /* wikiEditor toolbar module */ -.wikiEditor-ui .wikiEditor-ui-toolbar { +.wikiEditor-ui-toolbar { position: relative; width: 100%; } /* Expandable Sections */ -.wikiEditor-ui .wikiEditor-ui-toolbar .sections { +.wikiEditor-ui-toolbar .sections { float: left; width: 100%; clear: both; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .sections { +body.rtl .wikiEditor-ui-toolbar .sections { float: right; } -.wikiEditor-ui .wikiEditor-ui-toolbar .sections .section { +.wikiEditor-ui-toolbar .sections .section { display: none; float: left; width: 100%; @@ -24,20 +24,20 @@ border-top: solid 1px #DDDDDD; background-color: #F3F3F3; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .sections .section { +body.rtl .wikiEditor-ui-toolbar .sections .section { float: right; margin-left: auto; margin-right: -1px; } -.wikiEditor-ui .wikiEditor-ui-toolbar .sections .loading { +.wikiEditor-ui-toolbar .sections .loading { padding-top: 0.5em; padding-bottom: 0.5em; } /* Gets overridden when the section div is in class loading - see below */ -.wikiEditor-ui .wikiEditor-ui-toolbar .sections div .spinner { +.wikiEditor-ui-toolbar .sections div .spinner { display: none; } -.wikiEditor-ui .wikiEditor-ui-toolbar .sections .loading .spinner { +.wikiEditor-ui-toolbar .sections .loading .spinner { display: block; background-image: url(../images/wikiEditor/toolbar/loading.gif); background-position: left center; @@ -47,7 +47,7 @@ float: left; color: #666666; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .sections .loading .spinner { +body.rtl .wikiEditor-ui-toolbar .sections .loading .spinner { background-position: right center; padding-left: 0; padding-right: 32px; @@ -56,25 +56,25 @@ float: right; } /* Top Level Containers */ -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs, -.wikiEditor-ui .wikiEditor-ui-toolbar .section-main { +.wikiEditor-ui-toolbar .tabs, +.wikiEditor-ui-toolbar .section-main { position: relative; float: left; height: 26px; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .tabs, -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .section-main { +body.rtl .wikiEditor-ui-toolbar .tabs, +body.rtl .wikiEditor-ui-toolbar .section-main { float: right; } /* Groups */ -.wikiEditor-ui .wikiEditor-ui-toolbar .group { +.wikiEditor-ui-toolbar .group { float: left; height: 26px; padding-right: 6px; border-right: solid 1px #DDDDDD; margin: 3px; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .group { +body.rtl .wikiEditor-ui-toolbar .group { float: right; padding-right: 0; padding-left: 6px; @@ -82,25 +82,25 @@ border-left: solid 1px #DDDDDD; } /* Tabs */ -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs { +.wikiEditor-ui-toolbar .tabs { list-style: none; margin: 3px; } -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab { +.wikiEditor-ui-toolbar .tabs span.tab { display: inline-block; float: left; line-height: 26px; } /* IGNORED BY IE6 */ -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs > span.tab { +.wikiEditor-ui-toolbar .tabs > span.tab { display: block; } /* IGNORED BY IE6 */ -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .tabs > span.tab { +body.rtl .wikiEditor-ui-toolbar .tabs > span.tab { float: right; } -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a, -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a:visited { +.wikiEditor-ui-toolbar .tabs span.tab a, +.wikiEditor-ui-toolbar .tabs span.tab a:visited { display: inline-block; float: left; padding-left: 18px; @@ -112,32 +112,32 @@ background-position: left center; background-repeat: no-repeat; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a, -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a:visited { +body.rtl .wikiEditor-ui-toolbar .tabs span.tab a, +body.rtl .wikiEditor-ui-toolbar .tabs span.tab a:visited { padding-left: 12px; padding-right: 18px; background-image: url(../images/wikiEditor/toolbar/arrow-left.png); background-position: right center; } /* IGNORED BY IE6 */ -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .tabs > span.tab > a, -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .tabs > pan.tab > a:visited { +body.rtl .wikiEditor-ui-toolbar .tabs > span.tab > a, +body.rtl .wikiEditor-ui-toolbar .tabs > pan.tab > a:visited { float: right; } -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a.current, -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a.current:visited { +.wikiEditor-ui-toolbar .tabs span.tab a.current, +.wikiEditor-ui-toolbar .tabs span.tab a.current:visited { color: #333333; background-image: url(../images/wikiEditor/toolbar/arrow-down.png); } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a.current, -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a.current:visited { +body.rtl .wikiEditor-ui-toolbar .tabs span.tab a.current, +body.rtl .wikiEditor-ui-toolbar .tabs span.tab a.current:visited { background-image: url(../images/wikiEditor/toolbar/arrow-down.png); } -.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a.current:hover { +.wikiEditor-ui-toolbar .tabs span.tab a.current:hover { text-decoration: none; } /* Toolbar */ -.wikiEditor-ui .wikiEditor-ui-toolbar .group .label { +.wikiEditor-ui-toolbar .group .label { float: left; border: 0px; height: 22px; @@ -149,12 +149,12 @@ cursor: default; } /* IGNORED BY IE6 */ -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .group > .label { +body.rtl .wikiEditor-ui-toolbar .group > .label { float: right; margin-left: 8px; margin-right: 5px; } -.wikiEditor-ui .wikiEditor-ui-toolbar .group img.tool { +.wikiEditor-ui-toolbar .group img.tool { float: left; border: 0px; height: 22px; @@ -163,90 +163,90 @@ cursor: pointer; } /* IGNORED BY IE6 */ -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .group > img.tool { +body.rtl .wikiEditor-ui-toolbar .group > img.tool { float: right; } -.wikiEditor-ui .wikiEditor-ui-toolbar .group select { +.wikiEditor-ui-toolbar .group select { float: left; margin: 2px; height: 22px; cursor: pointer; } /* IGNORED BY IE6 */ -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .group > select { +body.rtl .wikiEditor-ui-toolbar .group > select { float: right; font-size: 0.9em; } /* Booklet */ -.wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index { +.wikiEditor-ui-toolbar .booklet .index { float: left; width: 20%; height: 125px; overflow: auto; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index { +body.rtl .wikiEditor-ui-toolbar .booklet .index { float: right; } -.wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index div { +.wikiEditor-ui-toolbar .booklet .index div { padding: 4px; padding-left: 6px; cursor: pointer; color: #0645ad; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index div { +body.rtl .wikiEditor-ui-toolbar .booklet .index div { padding-left: 4px; padding-right: 6px; } -.wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index .current { +.wikiEditor-ui-toolbar .booklet .index .current { background-color: #FAFAFA; color: #333333; cursor: default; } -.wikiEditor-ui .wikiEditor-ui-toolbar .booklet .pages { +.wikiEditor-ui-toolbar .booklet .pages { float: right; width: 80%; height: 125px; overflow: auto; background-color: #FAFAFA; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .booklet .pages { +body.rtl .wikiEditor-ui-toolbar .booklet .pages { float: left; } /* Help Pages */ -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table { +.wikiEditor-ui-toolbar .page-table table { padding-left: 5px; padding-right: 5px; background: none; } -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table th { +.wikiEditor-ui-toolbar .page-table th { color: #999999; } -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table td { +.wikiEditor-ui-toolbar .page-table td { color: black; border-top: solid 1px #EEEEEE; } -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table th, -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table td { +.wikiEditor-ui-toolbar .page-table th, +.wikiEditor-ui-toolbar .page-table td { text-align: left; padding: 5px; margin: 0px; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table th, -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table td { +body.rtl .wikiEditor-ui-toolbar .page-table th, +body.rtl .wikiEditor-ui-toolbar .page-table td { text-align: right; } -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table td.syntax { +.wikiEditor-ui-toolbar .section-help .page-table td.syntax { font-family: monospace; } -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table td.syntax, -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table td.result { +.wikiEditor-ui-toolbar .section-help .page-table td.syntax, +.wikiEditor-ui-toolbar .section-help .page-table td.result { width: 40%; } -.wikiEditor-ui .wikiEditor-ui-toolbar .section-help .page-table table td.description { +.wikiEditor-ui-toolbar .section-help .page-table td.description { width: 20%; } /* Characters Pages */ -.wikiEditor-ui .wikiEditor-ui-toolbar .section-characters .page-characters div a { +.wikiEditor-ui-toolbar .page-characters div a { border: solid 1px #DDDDDD; padding: 5px; padding-left: 8px; @@ -259,14 +259,14 @@ color: black; text-decoration: none; } -body.rtl .wikiEditor-ui .wikiEditor-ui-toolbar .section-characters .page-characters > div > a, -.wikiEditor-ui .wikiEditor-ui-toolbar .section-characters .page-characters div[dir=rtl] a { +body.rtl .wikiEditor-ui-toolbar .page-characters > div > a, +.wikiEditor-ui-toolbar .page-characters div[dir=rtl] a { direction: rtl; float: right; margin-left: 0; margin-right: 5px; } -.wikiEditor-ui .wikiEditor-ui-toolbar .section-characters .page-characters div a:hover { +.wikiEditor-ui-toolbar .page-characters div a:hover { background-color: white; text-decoration: none; border-color: #a8d7f9; Modified: trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.toolbar.js =================================================================== --- trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.toolbar.js 2009-08-13 20:42:19 UTC (rev 54966) +++ trunk/extensions/UsabilityInitiative/js/plugins/jquery.wikiEditor.toolbar.js 2009-08-13 20:52:54 UTC (rev 54967) @@ -14,11 +14,134 @@ */ api: { addToToolbar: function( context, data ) { - // + for ( type in data ) { + switch ( type ) { + case 'sections': + var $sections = + context.modules.$toolbar.find( 'div.sections' ); + var $tabs = context.modules.$toolbar.find( 'div.tabs' ); + for ( section in data[type] ) { + if ( section == 'main' ) { + // Section + context.modules.$toolbar.prepend( + $.wikiEditor.modules.toolbar.fn.buildSection( + context, section, data[type][section] + ) + ); + continue; + } + // Section + $sections.append( + $.wikiEditor.modules.toolbar.fn.buildSection( + context, section, data[type][section] + ) + ); + // Tab + $tabs.append( + $.wikiEditor.modules.toolbar.fn.buildTab( + context, section, data[type][section] + ) + ); + } + break; + case 'groups': + if ( !( 'section' in data ) ) { + continue; + } + var $section = context.modules.$toolbar.find( + 'div[rel=' + data.section + '].section' + ); + for ( group in data[type] ) { + // Group + $section.append( + $.wikiEditor.modules.toolbar.fn.buildGroup( + context, group, data[type][group] + ) + ); + } + break; + case 'tools': + if ( !( 'section' in data && 'group' in data ) ) { + continue; + } + var $group = context.modules.$toolbar.find( + 'div[rel=' + data.section + '].section ' + + 'div[rel=' + data.group + '].group' + ); + for ( tool in data[type] ) { + // Tool + $group.append( + $.wikiEditor.modules.toolbar.fn.buildTool( + context, tool, data[type][tool] + ) + ); + } + break; + case 'pages': + if ( !( 'section' in data ) ) { + continue; + } + var $pages = context.modules.$toolbar.find( + 'div[rel=' + data.section + '].section .pages' + ); + var $index = context.modules.$toolbar.find( + 'div[rel=' + data.section + '].section .index' + ); + for ( page in data[type] ) { + // Page + $pages.append( + $.wikiEditor.modules.toolbar.fn.buildPage( + context, page, data[type][page] + ) + ); + // Index + $index.append( + $.wikiEditor.modules.toolbar.fn.buildBookmark( + context, page, data[type][page] + ) + ); + } + $.wikiEditor.modules.toolbar.fn.updateBookletSelection( + context, page, $pages, $index + ); + break; + case 'rows': + if ( !( 'section' in data && 'page' in data ) ) { + continue; + } + var $table = context.modules.$toolbar.find( + 'div[rel=' + data.section + '].section ' + + 'div[rel=' + data.page + '].page table' + ) + for ( row in data[type] ) { + // Row + $table.append( + $.wikiEditor.modules.toolbar.fn.buildRow( + context, data[type][row] + ) + ); + } + break; + case 'characters': + if ( !( 'section' in data && 'page' in data ) ) { + continue; + } + $characters = context.modules.$toolbar.find( + 'div[rel=' + data.section + '].section ' + + 'div[rel=' + data.page + '].page div' + ); + for ( character in data[type] ) { + // Character + $characters.append( + $.wikiEditor.modules.toolbar.fn.buildCharacter( + context, data[type][character] + ) + ); + } + break; + } + } }, - modifyToolbar: function( context, data ) { - // - }, removeFromToolbar: function( context, data ) { if ( typeof data.section == 'string' ) { // Section @@ -44,6 +167,12 @@ } else { // Just a page, remove the index too! context.modules.$toolbar.find( index ).remove(); + $.wikiEditor.modules.toolbar.fn.updateBookletSelection( + context, + null, + context.modules.$toolbar.find( target ), + context.modules.$toolbar.find( index ) + ); } } else { // Just a section, remove the tab too! @@ -140,35 +269,6 @@ default: break; } }, - buildSection: function( context, id, section ) { - switch ( section.type ) { - case 'toolbar': - return $.wikiEditor.modules.toolbar.fn.buildToolbar( - context, id, section - ); - case 'booklet': - return $.wikiEditor.modules.toolbar.fn.buildBooklet( - context, id, section - ); - default: return null; - } - }, - buildToolbar: function( context, id, toolbar ) { - var $toolbar = $( '<div></div>' ).attr( { - 'class': 'toolbar section section-' + id, - 'rel': id - } ); - if ( 'groups' in toolbar ) { - for ( group in toolbar.groups ) { - $toolbar.append( - $.wikiEditor.modules.toolbar.fn.buildGroup( - context, group, toolbar.groups[group] - ) - ); - } - } - return $toolbar; - }, buildGroup: function( context, id, group ) { var $group = $( '<div></div>' ).attr( { 'class': 'group group-' + id, @@ -202,8 +302,15 @@ var label = $.wikiEditor.modules.toolbar.fn.autoMsg( tool, 'label' ); switch ( tool.type ) { case 'button': + var src = tool.icon; + if ( + src.indexOf( 'http://' ) !== 0 && + src.indexOf( 'https://' ) !== 0 + ) { + src = $.wikiEditor.modules.toolbar.imgPath + src; + } $button = $( '<img />' ).attr( { - 'src': $.wikiEditor.modules.toolbar.imgPath + tool.icon, + 'src': src, 'width': 22, 'height': 22, 'alt': label, @@ -263,42 +370,6 @@ default: return null; } }, - buildBooklet: function( context, id, booklet ) { - var selected = $.cookie( - 'wikiEditor-' + context.instance + '-booklet-' + id + '-page' - ); - var $booklet = $( '<div></div>' ).attr( { - 'class': 'booklet section section-' + id, - 'rel': id - } ); - var $pages = $( '<div></div>' ).attr( 'class', 'pages' ); - var $index = $( '<div></div>' ).attr( 'class', 'index' ); - if ( 'pages' in booklet ) { - if ( !( selected in booklet.pages ) ) { - selected = null; - } - for ( page in booklet.pages ) { - if ( selected === null ) { - selected = page; - } - var $page = $.wikiEditor.modules.toolbar.fn.buildPage( - context, page, booklet.pages[page] - ); - var $bookmark = $.wikiEditor.modules.toolbar.fn.buildBookmark( - context, page, booklet.pages[page] - ); - if ( selected == page ) { - $page.show(); - $bookmark.addClass( 'current' ); - } else { - $page.hide(); - } - $pages.append( $page ); - $index.append( $bookmark ); - } - } - return $booklet.append( $index ).append( $pages ); - }, buildBookmark: function( context, id, page ) { var label = $.wikiEditor.modules.toolbar.fn.autoMsg( page, 'label' ); return $( '<div></div>' ) @@ -342,36 +413,19 @@ 'class': 'table table-' + id } ); if ( 'headings' in page ) { - var $headings = $( '<tr></tr>' ); - for ( heading in page.headings ) { - var content = - $.wikiEditor.modules.toolbar.fn.autoMsg( - page.headings[heading], 'content' - ); - $headings.append( - $( '<th></th>' ).text( content ) - ); - } - $table.append( $headings ); + $table.append( + $.wikiEditor.modules.toolbar.fn.buildHeading( + context, page.headings + ) + ); } if ( 'rows' in page ) { for ( row in page.rows ) { - var $row = $( '<tr></tr>' ); - for ( cell in page.rows[row] ) { - var $cell = $( '<td></td>' ).attr( { - 'class': 'cell cell-' + cell, - 'valign': 'top' - } ); - var content = - $.wikiEditor.modules.toolbar.fn.autoMsg( - page.rows[row][cell], 'content' - ); - $cell.append( - $( '<span></span>' ).html( content ) - ); - $row.append( $cell ); - } - $table.append( $row ); + $table.append( + $.wikiEditor.modules.toolbar.fn.buildRow( + context, page.rows[row] + ) + ); } } $page.append( $table ); @@ -387,47 +441,198 @@ } if ( 'characters' in page ) { for ( character in page.characters ) { - var tool = page.characters[character]; - if ( typeof tool == 'string' ) { - tool = { - 'label': tool, - 'action': { - 'type': 'encapsulate', - 'options': { 'pre': tool } - } - }; - } else if ( 0 in tool && 1 in tool ) { - tool = { - 'label': tool[0], - 'action': { - 'type': 'encapsulate', - 'options': { 'pre': tool[1] } - } - }; - } - if ( 'action' in tool && 'label' in tool ) { - var $character = $( '<a></a>' ) - .attr( 'rel', tool.label ) - .attr( 'href', '#' ) - .text( tool.label ) - .data( 'context', context ) - .data( 'action', tool.action ) - .click( function() { - $.wikiEditor.modules.toolbar.fn.doAction( - $(this).data( 'context' ), - $(this).data( 'action' ) - ); - return false; - } ); - $characters.append( $character ); - } + $characters.append( + $.wikiEditor.modules.toolbar.fn.buildCharacter( + context, page.characters[character] + ) + ); } - $page.append( $characters ); } + $page.append( $characters ); break; } return $page; }, + buildHeading: function( context, headings ) { + var $headings = $( '<tr></tr>' ); + for ( heading in headings ) { + $headings.append( + $( '<th></th>' ).text( + $.wikiEditor.modules.toolbar.fn.autoMsg( + headings[heading], 'content' + ) + ) + ); + } + return $headings; + }, + buildRow: function( context, row ) { + var $row = $( '<tr></tr>' ); + for ( cell in row ) { + $row.append( + $( '<td></td>' ) + .attr( { + 'class': 'cell cell-' + cell, + 'valign': 'top' + } ) + .append( + $( '<span></span>' ).html( + $.wikiEditor.modules.toolbar.fn.autoMsg( + row[cell], 'content' + ) + ) + ) + ); + } + return $row; + }, + buildCharacter: function( context, character ) { + if ( typeof character == 'string' ) { + character = { + 'label': character, + 'action': { + 'type': 'encapsulate', + 'options': { 'pre': character } + } + }; + } else if ( 0 in character && 1 in character ) { + character = { + 'label': character[0], + 'action': { + 'type': 'encapsulate', + 'options': { 'pre': character[1] } + } + }; + } + if ( 'action' in character && 'label' in character ) { + return $( '<a></a>' ) + .attr( 'rel', character.label ) + .attr( 'href', '#' ) + .text( character.label ) + .data( 'context', context ) + .data( 'action', character.action ) + .click( function() { + $.wikiEditor.modules.toolbar.fn.doAction( + $(this).data( 'context' ), + $(this).data( 'action' ) + ); + return false; + } ); + } + }, + buildTab: function( context, id, section ) { + var selected = $.cookie( + 'wikiEditor-' + context.instance + '-toolbar-section' + ); + return $( '<span></span>' ) + .attr( { + 'class': 'tab tab-' + id, + 'rel': id + } ) + .append( + $( '<a></a>' ) + .addClass( selected == id ? 'current' : null ) + .attr( 'href', '#' ) + .text( + $.wikiEditor.modules.toolbar.fn.autoMsg( section, 'label' ) + ) + .data( 'context', context ) + .click( function() { + var $section = + $(this).data( 'context' ).$ui.find( + '.section-' + $(this).parent().attr( 'rel' ) + ); + $(this).blur(); + var show = $section.css( 'display' ) == 'none'; + $section.parent().children().hide(); + $(this) + .parent() + .parent() + .find( 'a' ) + .removeClass( 'current' ); + if ( show ) { + $section.show(); + $(this).addClass( 'current' ); + } + $.cookie( + 'wikiEditor-' + + $(this).data( 'context' ).instance + + '-toolbar-section', + show ? $section.attr( 'rel' ) : null + ); + return false; + } ) + ); + }, + buildSection: function( context, id, section ) { + var selected = $.cookie( + 'wikiEditor-' + context.instance + '-toolbar-section' + ); + var $section; + switch ( section.type ) { + case 'toolbar': + var $section = $( '<div></div>' ).attr( { + 'class': 'toolbar section section-' + id, + 'rel': id + } ); + if ( 'groups' in section ) { + for ( group in section.groups ) { + $section.append( + $.wikiEditor.modules.toolbar.fn.buildGroup( + context, group, section.groups[group] + ) + ); + } + } + break; + case 'booklet': + var $pages = $( '<div></div>' ).attr( 'class', 'pages' ); + var $index = $( '<div></div>' ).attr( 'class', 'index' ); + if ( 'pages' in section ) { + + for ( page in section.pages ) { + $pages.append( + $.wikiEditor.modules.toolbar.fn.buildPage( + context, page, section.pages[page] + ) + ); + $index.append( + $.wikiEditor.modules.toolbar.fn.buildBookmark( + context, page, section.pages[page] + ) + ); + } + } + $section = $( '<div></div>' ) + .attr( { + 'class': 'booklet section section-' + id, + 'rel': id + } ) + .append( $index ) + .append( $pages ); + $.wikiEditor.modules.toolbar.fn.updateBookletSelection( + context, page, $pages, $index + ); + break; + } + if ( $section !== null && id !== 'main' ) { + $section.css( 'display', selected == id ? 'block' : 'none' ); + } + return $section; + }, + updateBookletSelection: function( context, id, $pages, $index ) { + var cookie = + 'wikiEditor-' + context.instance + '-booklet-' + id + '-page'; + var selected = $.cookie( cookie ); + if ( $index.find( '*[rel=' + selected + ']' ).size() == 0 ) { + selected = $index.find( ':first' ).attr( 'rel' ); + $.cookie( cookie, selected ); + } + $pages.children().hide(); + $pages.find( '*[rel=' + selected + ']' ).show(); + $index.children().removeClass( 'current' ); + $index.find( '*[rel=' + selected + ']' ).addClass( 'current' ); + }, build: function( context, config ) { var $tabs = $( '<div></div>' ) .addClass( 'tabs' ) @@ -438,9 +643,6 @@ context.modules.$toolbar.append( $( '<div></div>' ).css( 'clear', 'both' ) ); - var selected = $.cookie( - 'wikiEditor-' + context.instance + '-toolbar-section' - ); var sectionQueue = []; for ( section in config ) { if ( section == 'main' ) { @@ -450,58 +652,16 @@ ) ); } else { - s = { + sectionQueue.push( { + '$sections': $sections, 'context': context, - '$sections': $sections, - '$tabs': $tabs, - 'section': section, - 'config': config[section], - 'selected': ( selected == section ) - }; - sectionQueue[sectionQueue.length] = s; - s.$tabs.append( - $( '<span></span>' ) - .attr( { - 'class': 'tab tab-' + s.section, - 'rel': s.section - } ) - .append( - $( '<a></a>' ) - .addClass( s.selected ? 'current' : null ) - .attr( 'href', '#' ) - .text( - $.wikiEditor.modules.toolbar.fn.autoMsg( - s.config, 'label' - ) - ) - .data( 'context', s.context ) - .click( function() { - var $section = - $(this).data( 'context' ).$ui.find( - '.section-' + - $(this).parent().attr( 'rel' ) - ); - $(this).blur(); - var show = $section.css( 'display' ) == 'none'; - $section.parent().children().hide(); - $(this) - .parent() - .parent() - .find( 'a' ) - .removeClass( 'current' ); - if ( show ) { - $section.show(); - $(this).addClass( 'current' ); - } - $.cookie( - 'wikiEditor-' + - $(this).data( 'context' ).instance + - '-toolbar-section', - show ? $section.attr( 'rel' ) : null - ); - return false; - } ) - ) + 'id': section, + 'config': config[section] + } ); + $tabs.append( + $.wikiEditor.modules.toolbar.fn.buildTab( + context, section, config[section] + ) ); } } @@ -516,11 +676,9 @@ 'loop': function( i, s ) { s.$sections.append( $.wikiEditor.modules.toolbar.fn.buildSection( - s.context, s.section, s.config + s.context, s.id, s.config ) - .css( 'display', s.selected ? 'block' : 'none' ) ); - } } ); } Modified: trunk/extensions/UsabilityInitiative/js/tests/wikiEditor.toolbar.js =================================================================== --- trunk/extensions/UsabilityInitiative/js/tests/wikiEditor.toolbar.js 2009-08-13 20:42:19 UTC (rev 54966) +++ trunk/extensions/UsabilityInitiative/js/tests/wikiEditor.toolbar.js 2009-08-13 20:52:54 UTC (rev 54967) @@ -3,36 +3,191 @@ */ var textareaId = '#wpTextbox1'; var wikiEditorTests = { - // Should remove Á from latin characters + // Add emoticons section + 'add_sections_toolbar': { + 'call': 'addToToolbar', + 'data': { + 'sections': { + 'emoticons': { + 'type': 'toolbar', + 'label': 'Emoticons' + } + } + }, + 'test': '*[rel=emoticons].section', + 'pre': 0, + 'post': 1 + }, + // Add faces group to emoticons section + 'add_groups': { + 'call': 'addToToolbar', + 'data': { + 'section': 'emoticons', + 'groups': { + 'faces': { + 'label': 'Faces' + } + } + }, + 'test': '*[rel=emoticons].section *[rel=faces].group', + 'pre': 0, + 'post': 1 + }, + // Add smile tool to faces group of emoticons section + 'add_tools': { + 'call': 'addToToolbar', + 'data': { + 'section': 'emoticons', + 'group': 'faces', + 'tools': { + 'smile': { + label: 'Smile!', + type: 'button', + icon: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Gnome-face-smile.svg/22px-Gnome-face-smile.svg.png', + action: { + type: 'encapsulate', + options: { + pre: ":)", + } + } + } + } + }, + 'test': '*[rel=emoticons].section *[rel=faces].group *[rel=smile].tool', + 'pre': 0, + 'post': 1 + }, + // Add info section + 'add_sections_booklet': { + 'call': 'addToToolbar', + 'data': { + 'sections': { + 'info': { + 'type': 'booklet', + 'label': 'Info' + } + } + }, + 'test': '*[rel=info].section', + 'pre': 0, + 'post': 1 + }, + // Add info section + 'add_pages_table': { + 'call': 'addToToolbar', + 'data': { + 'section': 'info', + 'pages': { + 'colors': { + 'layout': 'table', + 'label': 'Colors', + 'headings': [ + { content: 'Name' }, + { content: 'Temperature' }, + { content: 'Swatch' } + ] + } + } + }, + 'test': '*[rel=info].section *[rel=colors].page', + 'pre': 0, + 'post': 1 + }, + // Add colors rows + 'add_rows': { + 'call': 'addToToolbar', + 'data': { + 'section': 'info', + 'page': 'colors', + 'rows': [ + { + 'name': { content: 'Red' }, + 'temp': { content: 'Warm' }, + 'swatch': { content: '<div style="width:10px;height:10px;background-color:red;">' } + }, + { + 'name': { content: 'Blue' }, + 'temp': { content: 'Cold' }, + 'swatch': { content: '<div style="width:10px;height:10px;background-color:blue;">' } + }, + { + 'name': { content: 'Silver' }, + 'temp': { content: 'Neutral' }, + 'swatch': { content: '<div style="width:10px;height:10px;background-color:silver;">' } + } + ] + }, + 'test': '*[rel=info].section *[rel=colors].page tr td', + 'pre': 0, + 'post': 9 + }, + // Add + 'add_pages_characters': { + 'call': 'addToToolbar', + 'data': { + 'section': 'info', + 'pages': { + 'emoticons': { + 'layout': 'characters', + 'label': 'Emoticons' + }, + 'removeme': { + 'layout': 'characters', + 'label': 'Remove Me!' + } + } + }, + 'test': '*[rel=info].section *[rel=emoticons].page', + 'pre': 0, + 'post': 1 + }, + // Add + 'add_characters': { + 'call': 'addToToolbar', + 'data': { + 'section': 'info', + 'page': 'emoticons', + 'characters': [ ':)', ':))', ':(', '<3', ';)' ] + }, + 'test': '*[rel=info].section *[rel=emoticons].page *[rel=":)"]', + 'pre': 0, + 'post': 1 + }, + // Remove page + 'remove_page': { + 'call': 'removeFromToolbar', + 'data': { + 'section': 'info', + 'page': 'removeme' + }, + 'test': '*[rel=info].section *[rel=removeme].page', + 'pre': 1, + 'post': 0 + }, + // Remove :)) from emoticon characters 'remove_character': { 'call': 'removeFromToolbar', 'data': { - 'section': 'characters', - 'page': 'latin', - 'character': 'Á' + 'section': 'info', + 'page': 'emoticons', + 'character': ':))' }, - 'test': 'div[rel=characters].section div[rel=latin].page a[rel=Á]' + 'test': '*[rel=info].section *[rel=emoticons].page a[rel=":))"]', + 'pre': 1, + 'post': 0 }, - 'remove_table_row_0': { - // Should remove the first non-heading row of format help + // Remove row from colors table of info section + 'remove_row': { 'call': 'removeFromToolbar', 'data': { - 'section': 'help', - 'page': 'heading', + 'section': 'info', + 'page': 'colors', 'row': 0 }, - 'test': 'div[rel=help].section div[rel=format].page table tr td:eq(0):contains("1st level heading")' + 'test': '*[rel=info].section *[rel=colors].page tr td', + 'pre': 9, + 'post': 6 }, - 'remove_table_row_1': { - // Should remove the second non-heading row of link help - 'call': 'removeFromToolbar', - 'data': { - 'section': 'help', - 'page': 'heading', - 'row': 1 - }, - 'test': 'div[rel=help].section div[rel=format].page table tr td:eq(0):contains("3rd level heading")' - } }; js2AddOnloadHook( function() { var button = $j( '<button>Run wikiEditor Tests!</button>' ) @@ -42,6 +197,7 @@ 'right': 0, 'width': '100%', 'backgroundColor': '#333333', + 'opacity': 0.75, 'color': '#DDDDDD', 'padding': '0.5em', 'border': 'none', @@ -49,22 +205,26 @@ } ) .click( function() { if ( $j(this).attr( 'enabled' ) == 'false' ) { - $j(this).slideUp( 'slow' ); + $j(this).slideUp( 'fast' ); + return false; } var messages = [ 'Running tests for wikiEditor API' ]; - var target = $j( textareaId ); - var ui = target.data( 'context' ).$ui; + var $target = $j( textareaId ); + var $ui = $target.data( 'context' ).$ui; var passes = 0; var tests = 0; for ( test in wikiEditorTests ) { - target.wikiEditor( + var pre = $ui.find( wikiEditorTests[test].test ).size() == + wikiEditorTests[test].pre; + messages.push ( test + '-pre: ' + ( pre ? 'PASS' : 'FAIL' ) ); + $target.wikiEditor( wikiEditorTests[test].call, wikiEditorTests[test].data ); - var pass = ui.find( wikiEditorTests[test].test ).size() == 0; - messages.push ( - test + ':' + ( pass ? 'PASS' : 'FAIL' ) ); - if ( pass ) { + var post = $ui.find( wikiEditorTests[test].test ).size() == + wikiEditorTests[test].post; + messages.push ( test + '-post: ' + ( post ? 'PASS' : 'FAIL' ) ); + if ( pre && post ) { passes++; } tests++; @@ -76,11 +236,11 @@ } $j(this) .attr( 'title', messages.join( " | " ) ) - .text( tests + ' / ' + passes + ' were successful' ) + .text( passes + ' / ' + tests + ' were successful' ) .css( 'backgroundColor', passes < tests ? 'red' : 'green' ) .attr( 'enabled', 'false' ) .blur(); } ) .appendTo( $j( 'body' ) ); - button.slideDown( 'slow' ) + setTimeout( function() { button.slideDown( 'fast' ) }, 2000 ); } ); \ No newline at end of file _______________________________________________ MediaWiki-CVS mailing list MediaWiki-CVS@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs