vanilla ckeditor-3.2

[ckeditor.git] / _source / plugins / colorbutton / plugin.js

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