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