      1 /*
      2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
      3 For licensing, see LICENSE.html or http://ckeditor.com/license
      4 */
      5
      6 CKEDITOR.plugins.add( 'colorbutton',
      7 {
      8 	requires : [ 'panelbutton', 'floatpanel', 'styles' ],
      9
     10 	init : function( editor )
     11 	{
     12 		var config = editor.config,
     13 			lang = editor.lang.colorButton;
     14
     15 		var clickFn;
     16
     17 		if ( !CKEDITOR.env.hc )
     18 		{
     19 			addButton( 'TextColor', 'fore', lang.textColorTitle );
     20 			addButton( 'BGColor', 'back', lang.bgColorTitle );
     21 		}
     22
     23 		function addButton( name, type, title )
     24 		{
     25 			editor.ui.add( name, CKEDITOR.UI_PANELBUTTON,
     26 				{
     27 					label : title,
     28 					title : title,
     29 					className : 'cke_button_' + name.toLowerCase(),
     30
     31 					panel :
     32 					{
     33 						css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ]
     34 					},
     35
     36 					onBlock : function( panel, blockName )
     37 					{
     38 						var block = panel.addBlock( blockName );
     39 						block.autoSize = true;
     40 						block.element.addClass( 'cke_colorblock' );
     41 						block.element.setHtml( renderColors( panel, type ) );
     42
     43 						var keys = block.keys;
     44 						keys[ 39 ]	= 'next';					// ARROW-RIGHT
     45 						keys[ 9 ]	= 'next';					// TAB
     46 						keys[ 37 ]	= 'prev';					// ARROW-LEFT
     47 						keys[ CKEDITOR.SHIFT + 9 ]	= 'prev';	// SHIFT + TAB
     48 						keys[ 32 ]	= 'click';					// SPACE
     49 					}
     50 				});
     51 		}
     52
     53
     54 		function renderColors( panel, type )
     55 		{
     56 			var output = [],
     57 				colors = CKEDITOR.config.colorButton_colors.split( ',' );
     58
     59 			var clickFn = CKEDITOR.tools.addFunction( function( color, type )
     60 				{
     61 					if ( color == '?' )
     62 					{
     63 						// TODO : Implement the colors dialog.
     64 						// editor.openDialog( '' );
     65 						return;
     66 					}
     67
     68 					editor.focus();
     69
     70 					panel.hide();
     71
     72 					var style = new CKEDITOR.style( config['colorButton_' + type + 'Style'], color && { color : color } );
     73
     74 					editor.fire( 'saveSnapshot' );
     75 					if ( color )
     76 						style.apply( editor.document );
     77 					else
     78 						style.remove( editor.document );
     79 				});
     80
     81 			// Render the "Automatic" button.
     82 			output.push(
     83 				'<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
     84 					' title="', lang.auto, '"' +
     85 					' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +
     86 					' href="javascript:void(\'', lang.auto, '\')">' +
     87 					'<table cellspacing=0 cellpadding=0 width="100%">' +
     88 						'<tr>' +
     89 							'<td>' +
     90 								'<span class="cke_colorbox" style="background-color:#000"></span>' +
     91 							'</td>' +
     92 							'<td colspan=7 align=center>',
     93 								lang.auto,
     94 							'</td>' +
     95 						'</tr>' +
     96 					'</table>' +
     97 				'</a>' +
     98 				'<table cellspacing=0 cellpadding=0 width="100%">' );
     99
    100 			// Render the color boxes.
    101 			for ( var i = 0 ; i < colors.length ; i++ )
    102 			{
    103 				if ( ( i % 8 ) === 0 )
    104 					output.push( '</tr><tr>' );
    105
    106 				var colorCode = colors[ i ];
    107 				var colorLabel = editor.lang.colors[ colorCode ] || colorCode;
    108 				output.push(
    109 					'<td>' +
    110 						'<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
    111 							' title="', colorLabel, '"' +
    112 							' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'#', colorCode, '\',\'', type, '\'); return false;"' +
    113 							' href="javascript:void(\'', colorLabel, '\')">' +
    114 							'<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +
    115 						'</a>' +
    116 					'</td>' );
    117 			}
    118
    119 			// Render the "More Colors" button.
    120 			if ( config.colorButton_enableMore )
    121 			{
    122 				output.push(
    123 					'</tr>' +
    124 					'<tr>' +
    125 						'<td colspan=8 align=center>' +
    126 							'<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
    127 								' title="', lang.more, '"' +
    128 								' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
    129 								' href="javascript:void(\'', lang.more, '\')">',
    130 								lang.more,
    131 							'</a>' +
    132 						'</td>' );	// It is later in the code.
    133 			}
    134
    135 			output.push( '</tr></table>' );
    136
    137 			return output.join( '' );
    138 		}
    139 	}
    140 });
    141
    142 CKEDITOR.config.colorButton_enableMore = false;
    143 CKEDITOR.config.colorButton_colors =
    144 	'000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
    145 	'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
    146 	'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
    147 	'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
    148 	'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
    149
    150 CKEDITOR.config.colorButton_foreStyle =
    151 	{
    152 		element		: 'span',
    153 		styles		: { 'color' : '#(color)' },
    154 		overrides	: [ { element : 'font', attributes : { 'color' : null } } ]
    155 	};
    156
    157 CKEDITOR.config.colorButton_backStyle =
    158 	{
    159 		element		: 'span',
    160 		styles		: { 'background-color' : '#(color)' }
    161 	};
    162