X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fcolorbutton%2Fplugin.js;h=c87d068c38d8ee74cb33d39b68b43c42caf244a7;hb=059b4c2fef02528bf1af189f7996e80652faddfb;hp=747716e753ef11b762419808e288a29e9471e4bb;hpb=ea7e3453c7b0f023b050aca6d9f83ab372860d91;p=ckeditor.git

diff --git a/_source/plugins/colorbutton/plugin.js b/_source/plugins/colorbutton/plugin.js
index 747716e..c87d068 100644
--- a/_source/plugins/colorbutton/plugin.js
+++ b/_source/plugins/colorbutton/plugin.js
@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
@@ -31,20 +31,22 @@ CKEDITOR.plugins.add( 'colorbutton',
 
 					panel :
 					{
-						css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ]
+						css : editor.skin.editor.css,
+						attributes : { role : 'listbox', 'aria-label' : lang.panelTitle }
 					},
 
-					onBlock : function( panel, blockName )
+					onBlock : function( panel, block )
 					{
-						var block = panel.addBlock( blockName );
 						block.autoSize = true;
 						block.element.addClass( 'cke_colorblock' );
 						block.element.setHtml( renderColors( panel, type ) );
 
 						var keys = block.keys;
 						keys[ 39 ]	= 'next';					// ARROW-RIGHT
+						keys[ 40 ]	= 'next';					// ARROW-DOWN
 						keys[ 9 ]	= 'next';					// TAB
 						keys[ 37 ]	= 'prev';					// ARROW-LEFT
+						keys[ 38 ]	= 'prev';					// ARROW-UP
 						keys[ CKEDITOR.SHIFT + 9 ]	= 'prev';	// SHIFT + TAB
 						keys[ 32 ]	= 'click';					// SPACE
 					}
@@ -55,14 +57,28 @@ CKEDITOR.plugins.add( 'colorbutton',
 		function renderColors( panel, type )
 		{
 			var output = [],
-				colors = config.colorButton_colors.split( ',' );
+				colors = config.colorButton_colors.split( ',' ),
+				total = colors.length + ( config.colorButton_enableMore ? 2 : 1 );
 
 			var clickFn = CKEDITOR.tools.addFunction( function( color, type )
 				{
 					if ( color == '?' )
 					{
-						// TODO : Implement the colors dialog.
-						// editor.openDialog( '' );
+						var applyColorStyle = arguments.callee;
+						function onColorDialogClose( evt )
+						{
+							this.removeListener( 'ok', onColorDialogClose );
+							this.removeListener( 'cancel', onColorDialogClose );
+
+							evt.name == 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type );
+						}
+
+						editor.openDialog( 'colordialog', function()
+						{
+							this.on( 'ok', onColorDialogClose );
+							this.on( 'cancel', onColorDialogClose );
+						} );
+
 						return;
 					}
 
@@ -85,8 +101,9 @@ CKEDITOR.plugins.add( 'colorbutton',
 				'<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
 					' title="', lang.auto, '"' +
 					' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +
-					' href="javascript:void(\'', lang.auto, '\')">' +
-					'<table cellspacing=0 cellpadding=0 width="100%">' +
+					' href="javascript:void(\'', lang.auto, '\')"' +
+					' role="option" aria-posinset="1" aria-setsize="', total, '">' +
+					'<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
 						'<tr>' +
 							'<td>' +
 								'<span class="cke_colorbox" style="background-color:#000"></span>' +
@@ -97,7 +114,7 @@ CKEDITOR.plugins.add( 'colorbutton',
 						'</tr>' +
 					'</table>' +
 				'</a>' +
-				'<table cellspacing=0 cellpadding=0 width="100%">' );
+				'<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );
 
 			// Render the color boxes.
 			for ( var i = 0 ; i < colors.length ; i++ )
@@ -112,7 +129,8 @@ CKEDITOR.plugins.add( 'colorbutton',
 						'<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
 							' title="', colorLabel, '"' +
 							' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'#', colorCode, '\',\'', type, '\'); return false;"' +
-							' href="javascript:void(\'', colorLabel, '\')">' +
+							' href="javascript:void(\'', colorLabel, '\')"' +
+							' role="option" aria-posinset="', ( i + 2 ), '" aria-setsize="', total, '">' +
 							'<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +
 						'</a>' +
 					'</td>' );
@@ -128,7 +146,8 @@ CKEDITOR.plugins.add( 'colorbutton',
 							'<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
 								' title="', lang.more, '"' +
 								' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
-								' href="javascript:void(\'', lang.more, '\')">',
+								' href="javascript:void(\'', lang.more, '\')"',
+								' role="option" aria-posinset="', total, '" aria-setsize="', total, '">',
 								lang.more,
 							'</a>' +
 						'</td>' );	// It is later in the code.
@@ -148,7 +167,7 @@ CKEDITOR.plugins.add( 'colorbutton',
  * @example
  * config.colorButton_enableMore = false;
  */
-CKEDITOR.config.colorButton_enableMore = false;
+CKEDITOR.config.colorButton_enableMore = true;
 
 /**
  * Defines the colors to be displayed in the color selectors. It's a string
@@ -181,7 +200,13 @@ CKEDITOR.config.colorButton_foreStyle =
 	{
 		element		: 'span',
 		styles		: { 'color' : '#(color)' },
-		overrides	: [ { element : 'font', attributes : { 'color' : null } } ]
+		overrides	: [ { element : 'font', attributes : { 'color' : null } } ],
+
+		// Fore color style must be applied inside links instead of around it.
+		childRule : function( element )
+		{
+			return element.getName() != 'a';
+		}
 	};
 
 /**