1 /*
  2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
  3 For licensing, see LICENSE.html or http://ckeditor.com/license
  4 */
  5 
  6 (function()
  7 {
  8 	function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition )
  9 	{
 10 		var config = editor.config;
 11 
 12 		// Gets the list of fonts from the settings.
 13 		var names = entries.split( ';' ),
 14 			values = [];
 15 
 16 		// Create style objects for all fonts.
 17 		var styles = {};
 18 		for ( var i = 0 ; i < names.length ; i++ )
 19 		{
 20 			var parts = names[ i ];
 21 
 22 			if ( parts )
 23 			{
 24 				parts = parts.split( '/' );
 25 
 26 				var vars = {},
 27 					name = names[ i ] = parts[ 0 ];
 28 
 29 				vars[ styleType ] = values[ i ] = parts[ 1 ] || name;
 30 
 31 				styles[ name ] = new CKEDITOR.style( styleDefinition, vars );
 32 				styles[ name ]._.definition.name = name;
 33 			}
 34 			else
 35 				names.splice( i--, 1 );
 36 		}
 37 
 38 		editor.ui.addRichCombo( comboName,
 39 			{
 40 				label : lang.label,
 41 				title : lang.panelTitle,
 42 				className : 'cke_' + ( styleType == 'size' ? 'fontSize' : 'font' ),
 43 				panel :
 44 				{
 45 					css : editor.skin.editor.css.concat( config.contentsCss ),
 46 					multiSelect : false,
 47 					attributes : { 'aria-label' : lang.panelTitle }
 48 				},
 49 
 50 				init : function()
 51 				{
 52 					this.startGroup( lang.panelTitle );
 53 
 54 					for ( var i = 0 ; i < names.length ; i++ )
 55 					{
 56 						var name = names[ i ];
 57 
 58 						// Add the tag entry to the panel list.
 59 						this.add( name, styles[ name ].buildPreview(), name );
 60 					}
 61 				},
 62 
 63 				onClick : function( value )
 64 				{
 65 					editor.focus();
 66 					editor.fire( 'saveSnapshot' );
 67 
 68 					var style = styles[ value ];
 69 
 70 					if ( this.getValue() == value )
 71 						style.remove( editor.document );
 72 					else
 73 						style.apply( editor.document );
 74 
 75 					editor.fire( 'saveSnapshot' );
 76 				},
 77 
 78 				onRender : function()
 79 				{
 80 					editor.on( 'selectionChange', function( ev )
 81 						{
 82 							var currentValue = this.getValue();
 83 
 84 							var elementPath = ev.data.path,
 85 								elements = elementPath.elements;
 86 
 87 							// For each element into the elements path.
 88 							for ( var i = 0, element ; i < elements.length ; i++ )
 89 							{
 90 								element = elements[i];
 91 
 92 								// Check if the element is removable by any of
 93 								// the styles.
 94 								for ( var value in styles )
 95 								{
 96 									if ( styles[ value ].checkElementMatch( element, true ) )
 97 									{
 98 										if ( value != currentValue )
 99 											this.setValue( value );
100 										return;
101 									}
102 								}
103 							}
104 
105 							// If no styles match, just empty it.
106 							this.setValue( '', defaultLabel );
107 						},
108 						this);
109 				}
110 			});
111 	}
112 
113 	CKEDITOR.plugins.add( 'font',
114 	{
115 		requires : [ 'richcombo', 'styles' ],
116 
117 		init : function( editor )
118 		{
119 			var config = editor.config;
120 
121 			addCombo( editor, 'Font', 'family', editor.lang.font, config.font_names, config.font_defaultLabel, config.font_style );
122 			addCombo( editor, 'FontSize', 'size', editor.lang.fontSize, config.fontSize_sizes, config.fontSize_defaultLabel, config.fontSize_style );
123 		}
124 	});
125 })();
126 
127 /**
128  * The list of fonts names to be displayed in the Font combo in the toolbar.
129  * Entries are separated by semi-colons (;), while it's possible to have more
130  * than one font for each entry, in the HTML way (separated by comma).
131  *
132  * A display name may be optionally defined by prefixing the entries with the
133  * name and the slash character. For example, "Arial/Arial, Helvetica, sans-serif"
134  * will be displayed as "Arial" in the list, but will be outputted as
135  * "Arial, Helvetica, sans-serif".
136  * @type String
137  * @example
138  * config.font_names =
139  *     'Arial/Arial, Helvetica, sans-serif;' +
140  *     'Times New Roman/Times New Roman, Times, serif;' +
141  *     'Verdana';
142  * @example
143  * config.font_names = 'Arial;Times New Roman;Verdana';
144  */
145 CKEDITOR.config.font_names =
146 	'Arial/Arial, Helvetica, sans-serif;' +
147 	'Comic Sans MS/Comic Sans MS, cursive;' +
148 	'Courier New/Courier New, Courier, monospace;' +
149 	'Georgia/Georgia, serif;' +
150 	'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
151 	'Tahoma/Tahoma, Geneva, sans-serif;' +
152 	'Times New Roman/Times New Roman, Times, serif;' +
153 	'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
154 	'Verdana/Verdana, Geneva, sans-serif';
155 
156 /**
157  * The text to be displayed in the Font combo is none of the available values
158  * matches the current cursor position or text selection.
159  * @type String
160  * @example
161  * // If the default site font is Arial, we may making it more explicit to the end user.
162  * config.font_defaultLabel = 'Arial';
163  */
164 CKEDITOR.config.font_defaultLabel = '';
165 
166 /**
167  * The style definition to be used to apply the font in the text.
168  * @type Object
169  * @example
170  * // This is actually the default value for it.
171  * config.font_style =
172  *     {
173  *         element		: 'span',
174  *         styles		: { 'font-family' : '#(family)' },
175  *         overrides	: [ { element : 'font', attributes : { 'face' : null } } ]
176  *     };
177  */
178 CKEDITOR.config.font_style =
179 	{
180 		element		: 'span',
181 		styles		: { 'font-family' : '#(family)' },
182 		overrides	: [ { element : 'font', attributes : { 'face' : null } } ]
183 	};
184 
185 /**
186  * The list of fonts size to be displayed in the Font Size combo in the
187  * toolbar. Entries are separated by semi-colons (;).
188  *
189  * Any kind of "CSS like" size can be used, like "12px", "2.3em", "130%",
190  * "larger" or "x-small".
191  *
192  * A display name may be optionally defined by prefixing the entries with the
193  * name and the slash character. For example, "Bigger Font/14px" will be
194  * displayed as "Bigger Font" in the list, but will be outputted as "14px".
195  * @type String
196  * @default '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'
197  * @example
198  * config.fontSize_sizes = '16/16px;24/24px;48/48px;';
199  * @example
200  * config.fontSize_sizes = '12px;2.3em;130%;larger;x-small';
201  * @example
202  * config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';
203  */
204 CKEDITOR.config.fontSize_sizes =
205 	'8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px';
206 
207 /**
208  * The text to be displayed in the Font Size combo is none of the available
209  * values matches the current cursor position or text selection.
210  * @type String
211  * @example
212  * // If the default site font size is 12px, we may making it more explicit to the end user.
213  * config.fontSize_defaultLabel = '12px';
214  */
215 CKEDITOR.config.fontSize_defaultLabel = '';
216 
217 /**
218  * The style definition to be used to apply the font size in the text.
219  * @type Object
220  * @example
221  * // This is actually the default value for it.
222  * config.fontSize_style =
223  *     {
224  *         element		: 'span',
225  *         styles		: { 'font-size' : '#(size)' },
226  *         overrides	: [ { element : 'font', attributes : { 'size' : null } } ]
227  *     };
228  */
229 CKEDITOR.config.fontSize_style =
230 	{
231 		element		: 'span',
232 		styles		: { 'font-size' : '#(size)' },
233 		overrides	: [ { element : 'font', attributes : { 'size' : null } } ]
234 	};
235