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
