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