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 saveRanges,
 16 			clickFn;
 17
 18 		addButton( 'TextColor', 'fore', lang.textColorTitle );
 19 		addButton( 'BGColor', 'back', lang.bgColorTitle );
 20
 21 		function addButton( name, type, title )
 22 		{
 23 			editor.ui.add( name, CKEDITOR.UI_PANELBUTTON,
 24 				{
 25 					label : lang.label,
 26 					title : title,
 27 					className : 'cke_button_' + name.toLowerCase(),
 28
 29 					panel :
 30 					{
 31 						css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ]
 32 					},
 33
 34 					onBlock : function( panel, blockName )
 35 					{
 36 						var block = panel.addBlock( blockName );
 37 						block.autoSize = true;
 38 						block.element.addClass( 'cke_colorblock' );
 39 						block.element.setHtml( renderColors( panel, type ) );
 40
 41 						var keys = block.keys;
 42 						keys[ 39 ]	= 'next';					// ARROW-RIGHT
 43 						keys[ 9 ]	= 'next';					// TAB
 44 						keys[ 37 ]	= 'prev';					// ARROW-LEFT
 45 						keys[ CKEDITOR.SHIFT + 9 ]	= 'prev';	// SHIFT + TAB
 46 						keys[ 32 ]	= 'click';					// SPACE
 47 					},
 48
 49 					onOpen : function()
 50 					{
 51 						if ( CKEDITOR.env.ie )
 52 						{
 53 							editor.focus();
 54 							saveRanges = editor.getSelection().getRanges();
 55 						}
 56 					},
 57
 58 					onClose : function()
 59 					{
 60 						saveRanges = null;
 61 					}
 62 				});
 63 		}
 64
 65
 66 		function renderColors( panel, type )
 67 		{
 68 			var output = [],
 69 				colors = CKEDITOR.config.colorButton_colors.split( ',' );
 70
 71 			if ( !clickFn )
 72 			{
 73 				clickFn = CKEDITOR.tools.addFunction( function( color, type )
 74 					{
 75 						if ( color == '?' )
 76 						{
 77 							// TODO : Implement the colors dialog.
 78 							// editor.openDialog( '' );
 79 							return;
 80 						}
 81
 82 						editor.focus();
 83
 84 						if ( saveRanges )
 85 						{
 86 							editor.getSelection().selectRanges( saveRanges );
 87 							saveRanges = false;
 88 						}
 89
 90 						panel.hide();
 91
 92 						var style = new CKEDITOR.style( config['colorButton_' + type + 'Style'], { color : color || '#000' } );
 93
 94 						if ( color )
 95 							style.apply( editor.document );
 96 						else
 97 							style.remove( editor.document );
 98 					});
 99 			}
100
101 			// Render the "Automatic" button.
102 			output.push(
103 				'<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
104 					' title="', lang.auto, '"' +
105 					' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');"' +
106 					' href="javascript:void(\'', lang.auto, '\')">' +
107 					'<table cellspacing=0 cellpadding=0 width="100%">' +
108 						'<tr>' +
109 							'<td>' +
110 								'<span class="cke_colorbox" style="background-color:#000"></span>' +
111 							'</td>' +
112 							'<td colspan=7 align=center>',
113 								lang.auto,
114 							'</td>' +
115 						'</tr>' +
116 					'</table>' +
117 				'</a>' +
118 				'<table cellspacing=0 cellpadding=0 width="100%">' );
119
120 			// Render the color boxes.
121 			for ( var i = 0 ; i < colors.length ; i++ )
122 			{
123 				if ( ( i % 8 ) == 0 )
124 					output.push( '</tr><tr>' );
125
126 				var color = colors[ i ];
127 				output.push(
128 					'<td>' +
129 						'<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
130 							' title="', color, '"' +
131 							' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'#', color, '\',\'', type, '\');"' +
132 							' href="javascript:void(\'', color, '\')">' +
133 							'<span class="cke_colorbox" style="background-color:#', color, '"></span>' +
134 						'</a>' +
135 					'</td>' );
136 			}
137
138 			// Render the "More Colors" button.
139 			if ( config.colorButton_enableMore )
140 			{
141 				output.push(
142 					'</tr>' +
143 					'<tr>' +
144 						'<td colspan=8 align=center>' +
145 							'<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
146 								' title="', lang.more, '"' +
147 								' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');"' +
148 								' href="javascript:void(\'', lang.more, '\')">',
149 								lang.more,
150 							'</a>' +
151 						'</td>' );	// It is later in the code.
152 			}
153
154 			output.push( '</tr></table>' );
155
156 			return output.join( '' );
157 		}
158 	}
159 });
160
161 CKEDITOR.config.colorButton_enableMore = false;
162 CKEDITOR.config.colorButton_colors =
163 	'000,930,330,030,036,000080,339,333,' +
164 	'800000,F60,808000,808080,008080,00F,669,808080,' +
165 	'F00,F90,9C0,396,3CC,36F,800080,999,' +
166 	'F0F,FC0,FF0,0F0,0FF,0CF,936,C0C0C0,' +
167 	'F9C,FC9,FF9,CFC,CFF,9CF,C9F,FFF';
168
169 CKEDITOR.config.colorButton_foreStyle =
170 	{
171 		element		: 'span',
172 		styles		: { 'color' : '#(color)' },
173 		overrides	: [ { element : 'font', attributes : { 'color' : null } } ]
174 	};
175
176 CKEDITOR.config.colorButton_backStyle =
177 	{
178 		element		: 'span',
179 		styles		: { 'background-color' : '#(color)' }
180 	};
181