]>
Commit | Line | Data |
---|---|---|
1 | /**\r | |
2 | * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r | |
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license\r | |
4 | */\r | |
5 | \r | |
6 | /*\r | |
7 | skin.js\r | |
8 | =========\r | |
9 | \r | |
10 | In this file we interact with the CKEditor JavaScript API to register the skin\r | |
11 | and enable additional skin related features.\r | |
12 | \r | |
13 | The level of complexity of this file depends on the features available in the\r | |
14 | skin. There is only one mandatory line of code to be included here, which is\r | |
15 | setting CKEDITOR.skin.name. All the rest is optional, but recommended to be\r | |
16 | implemented as they make higher quality skins.\r | |
17 | \r | |
18 | For this skin, the following tasks are achieved in this file:\r | |
19 | \r | |
20 | 1. Register the skin.\r | |
21 | 2. Register browser specific skin files.\r | |
22 | 3. Define the "Chameleon" feature.\r | |
23 | 4. Register the skin icons, to have them used on the development version of\r | |
24 | the skin.\r | |
25 | */\r | |
26 | \r | |
27 | // 1. Register the skin\r | |
28 | // ----------------------\r | |
29 | // The CKEDITOR.skin.name property must be set to the skin name. This is a\r | |
30 | // lower-cased name, which must match the skin folder name as well as the value\r | |
31 | // used on config.skin to tell the editor to use the skin.\r | |
32 | //\r | |
33 | // This is the only mandatory property to be defined in this file.\r | |
34 | CKEDITOR.skin.name = 'moono';\r | |
35 | \r | |
36 | // 2. Register browser specific skin files\r | |
37 | // -----------------------------------------\r | |
38 | // (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Browser_Hacks)\r | |
39 | //\r | |
40 | // To help implementing browser specific "hacks" to the skin files and have it\r | |
41 | // easy to maintain, it is possible to have dedicated files for such browsers,\r | |
42 | // for both the main skin CSS files: editor.css and dialog.css.\r | |
43 | //\r | |
44 | // The browser files must be named after the main file names, appended by an\r | |
45 | // underscore and the browser name (e.g. editor_ie.css, dialog_ie8.css).\r | |
46 | //\r | |
47 | // The accepted browser names must match the CKEDITOR.env properties. The most\r | |
48 | // common names are: ie, webkit and gecko. Check the documentation for the complete\r | |
49 | // list:\r | |
50 | // http://docs.ckeditor.com/#!/api/CKEDITOR.env\r | |
51 | //\r | |
52 | // Internet explorer is an expection and the browser version is also accepted\r | |
53 | // (ie7, ie8, ie9, ie10), as well as a special name for IE in Quirks mode (iequirks).\r | |
54 | //\r | |
55 | // The available browser specific files must be set separately for editor.css\r | |
56 | // and dialog.css.\r | |
57 | CKEDITOR.skin.ua_editor = 'ie,iequirks,ie7,ie8,gecko';\r | |
58 | CKEDITOR.skin.ua_dialog = 'ie,iequirks,ie7,ie8';\r | |
59 | \r | |
60 | // 3. Define the "Chameleon" feature\r | |
61 | // -----------------------------------\r | |
62 | // (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Chameleon)\r | |
63 | //\r | |
64 | // "Chameleon" is a unique feature available in CKEditor. It makes it possible\r | |
65 | // to end users to specify which color to use as the basis for the editor UI.\r | |
66 | // It is enough to set config.uiColor to any color value and voila, the UI is\r | |
67 | // colored.\r | |
68 | //\r | |
69 | // The only detail here is that the skin itself must be compatible with the\r | |
70 | // Chameleon feature. That's because the skin CSS files are the responsible to\r | |
71 | // apply colors in the UI and each skin do that in different way and on\r | |
72 | // different places.\r | |
73 | //\r | |
74 | // Implementing the Chameleon feature requires a bit of JavaScript programming.\r | |
75 | // The CKEDITOR.skin.chameleon function must be defined. It must return the CSS\r | |
76 | // "template" to be used to change the color of a specific CKEditor instance\r | |
77 | // available in the page. When a color change is required, this template is\r | |
78 | // appended to the page holding the editor, overriding styles defined in the\r | |
79 | // skin files.\r | |
80 | //\r | |
81 | // The "$color" placeholder can be used in the returned string. It'll be\r | |
82 | // replaced with the desired color.\r | |
83 | CKEDITOR.skin.chameleon = ( function() {\r | |
84 | // This method can be used to adjust colour brightness of various element.\r | |
85 | // Colours are accepted in 7-byte hex format, for example: #00ff00.\r | |
86 | // Brightness ratio must be a float number within [-1, 1],\r | |
87 | // where -1 is black, 1 is white and 0 is the original colour.\r | |
88 | var colorBrightness = ( function() {\r | |
89 | function channelBrightness( channel, ratio ) {\r | |
90 | var brighten = ratio < 0 ? (\r | |
91 | 0 | channel * ( 1 + ratio )\r | |
92 | ) : (\r | |
93 | 0 | channel + ( 255 - channel ) * ratio\r | |
94 | );\r | |
95 | \r | |
96 | return ( '0' + brighten.toString( 16 ) ).slice( -2 );\r | |
97 | }\r | |
98 | \r | |
99 | return function( hexColor, ratio ) {\r | |
100 | var channels = hexColor.match( /[^#]./g );\r | |
101 | \r | |
102 | for ( var i = 0 ; i < 3 ; i++ )\r | |
103 | channels[ i ] = channelBrightness( parseInt( channels[ i ], 16 ), ratio );\r | |
104 | \r | |
105 | return '#' + channels.join( '' );\r | |
106 | };\r | |
107 | } )(),\r | |
108 | \r | |
109 | // Use this function just to avoid having to repeat all these rules on\r | |
110 | // several places of our template.\r | |
111 | verticalGradient = ( function() {\r | |
112 | var template = new CKEDITOR.template( 'background:#{to};' +\r | |
113 | 'background-image:linear-gradient(to bottom,{from},{to});' +\r | |
114 | 'filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=\'{from}\',endColorstr=\'{to}\');' );\r | |
115 | \r | |
116 | return function( from, to ) {\r | |
117 | return template.output( { from: from, to: to } );\r | |
118 | };\r | |
119 | } )(),\r | |
120 | \r | |
121 | // Style templates for various user interface parts:\r | |
122 | // * Default editor template.\r | |
123 | // * Default panel template.\r | |
124 | templates = {\r | |
125 | editor: new CKEDITOR.template(\r | |
126 | '{id}.cke_chrome [border-color:{defaultBorder};] ' +\r | |
127 | '{id} .cke_top [ ' +\r | |
128 | '{defaultGradient}' +\r | |
129 | 'border-bottom-color:{defaultBorder};' +\r | |
130 | '] ' +\r | |
131 | '{id} .cke_bottom [' +\r | |
132 | '{defaultGradient}' +\r | |
133 | 'border-top-color:{defaultBorder};' +\r | |
134 | '] ' +\r | |
135 | '{id} .cke_resizer [border-right-color:{ckeResizer}] ' +\r | |
136 | \r | |
137 | // Dialogs.\r | |
138 | '{id} .cke_dialog_title [' +\r | |
139 | '{defaultGradient}' +\r | |
140 | 'border-bottom-color:{defaultBorder};' +\r | |
141 | '] ' +\r | |
142 | '{id} .cke_dialog_footer [' +\r | |
143 | '{defaultGradient}' +\r | |
144 | 'outline-color:{defaultBorder};' +\r | |
145 | 'border-top-color:{defaultBorder};' + // IE7 doesn't use outline.\r | |
146 | '] ' +\r | |
147 | '{id} .cke_dialog_tab [' +\r | |
148 | '{lightGradient}' +\r | |
149 | 'border-color:{defaultBorder};' +\r | |
150 | '] ' +\r | |
151 | '{id} .cke_dialog_tab:hover [' +\r | |
152 | '{mediumGradient}' +\r | |
153 | '] ' +\r | |
154 | '{id} .cke_dialog_contents [' +\r | |
155 | 'border-top-color:{defaultBorder};' +\r | |
156 | '] ' +\r | |
157 | '{id} .cke_dialog_tab_selected, {id} .cke_dialog_tab_selected:hover [' +\r | |
158 | 'background:{dialogTabSelected};' +\r | |
159 | 'border-bottom-color:{dialogTabSelectedBorder};' +\r | |
160 | '] ' +\r | |
161 | '{id} .cke_dialog_body [' +\r | |
162 | 'background:{dialogBody};' +\r | |
163 | 'border-color:{defaultBorder};' +\r | |
164 | '] ' +\r | |
165 | \r | |
166 | // Toolbars, buttons.\r | |
167 | '{id} .cke_toolgroup [' +\r | |
168 | '{lightGradient}' +\r | |
169 | 'border-color:{defaultBorder};' +\r | |
170 | '] ' +\r | |
171 | '{id} a.cke_button_off:hover, {id} a.cke_button_off:focus, {id} a.cke_button_off:active [' +\r | |
172 | '{mediumGradient}' +\r | |
173 | '] ' +\r | |
174 | '{id} .cke_button_on [' +\r | |
175 | '{ckeButtonOn}' +\r | |
176 | '] ' +\r | |
177 | '{id} .cke_toolbar_separator [' +\r | |
178 | 'background-color: {ckeToolbarSeparator};' +\r | |
179 | '] ' +\r | |
180 | \r | |
181 | // Combo buttons.\r | |
182 | '{id} .cke_combo_button [' +\r | |
183 | 'border-color:{defaultBorder};' +\r | |
184 | '{lightGradient}' +\r | |
185 | '] ' +\r | |
186 | '{id} a.cke_combo_button:hover, {id} a.cke_combo_button:focus, {id} .cke_combo_on a.cke_combo_button [' +\r | |
187 | 'border-color:{defaultBorder};' +\r | |
188 | '{mediumGradient}' +\r | |
189 | '] ' +\r | |
190 | \r | |
191 | // Elementspath.\r | |
192 | '{id} .cke_path_item [' +\r | |
193 | 'color:{elementsPathColor};' +\r | |
194 | '] ' +\r | |
195 | '{id} a.cke_path_item:hover, {id} a.cke_path_item:focus, {id} a.cke_path_item:active [' +\r | |
196 | 'background-color:{elementsPathBg};' +\r | |
197 | '] ' +\r | |
198 | \r | |
199 | '{id}.cke_panel [' +\r | |
200 | 'border-color:{defaultBorder};' +\r | |
201 | '] '\r | |
202 | ),\r | |
203 | panel: new CKEDITOR.template(\r | |
204 | // Panel drop-downs.\r | |
205 | '.cke_panel_grouptitle [' +\r | |
206 | '{lightGradient}' +\r | |
207 | 'border-color:{defaultBorder};' +\r | |
208 | '] ' +\r | |
209 | \r | |
210 | // Context menus.\r | |
211 | '.cke_menubutton_icon [' +\r | |
212 | 'background-color:{menubuttonIcon};' +\r | |
213 | '] ' +\r | |
214 | '.cke_menubutton:hover .cke_menubutton_icon, .cke_menubutton:focus .cke_menubutton_icon, .cke_menubutton:active .cke_menubutton_icon [' +\r | |
215 | 'background-color:{menubuttonIconHover};' +\r | |
216 | '] ' +\r | |
217 | '.cke_menuseparator [' +\r | |
218 | 'background-color:{menubuttonIcon};' +\r | |
219 | '] ' +\r | |
220 | \r | |
221 | // Color boxes.\r | |
222 | 'a:hover.cke_colorbox, a:focus.cke_colorbox, a:active.cke_colorbox [' +\r | |
223 | 'border-color:{defaultBorder};' +\r | |
224 | '] ' +\r | |
225 | 'a:hover.cke_colorauto, a:hover.cke_colormore, a:focus.cke_colorauto, a:focus.cke_colormore, a:active.cke_colorauto, a:active.cke_colormore [' +\r | |
226 | 'background-color:{ckeColorauto};' +\r | |
227 | 'border-color:{defaultBorder};' +\r | |
228 | '] '\r | |
229 | )\r | |
230 | };\r | |
231 | \r | |
232 | return function( editor, part ) {\r | |
233 | var uiColor = editor.uiColor,\r | |
234 | // The following are CSS styles used in templates.\r | |
235 | // Styles are generated according to current editor.uiColor.\r | |
236 | templateStyles = {\r | |
237 | // CKEditor instances have a unique ID, which is used as class name into\r | |
238 | // the outer container of the editor UI (e.g. ".cke_1").\r | |
239 | //\r | |
240 | // The Chameleon feature is available for each CKEditor instance,\r | |
241 | // independently. Because of this, we need to prefix all CSS selectors with\r | |
242 | // the unique class name of the instance.\r | |
243 | id: '.' + editor.id,\r | |
244 | \r | |
245 | // These styles are used by various UI elements.\r | |
246 | defaultBorder: colorBrightness( uiColor, -0.1 ),\r | |
247 | defaultGradient: verticalGradient( colorBrightness( uiColor, 0.9 ), uiColor ),\r | |
248 | lightGradient: verticalGradient( colorBrightness( uiColor, 1 ), colorBrightness( uiColor, 0.7 ) ),\r | |
249 | mediumGradient: verticalGradient( colorBrightness( uiColor, 0.8 ), colorBrightness( uiColor, 0.5 ) ),\r | |
250 | \r | |
251 | // These are for specific UI elements.\r | |
252 | ckeButtonOn: verticalGradient( colorBrightness( uiColor, 0.6 ), colorBrightness( uiColor, 0.7 ) ),\r | |
253 | ckeResizer: colorBrightness( uiColor, -0.4 ),\r | |
254 | ckeToolbarSeparator: colorBrightness( uiColor, 0.5 ),\r | |
255 | ckeColorauto: colorBrightness( uiColor, 0.8 ),\r | |
256 | dialogBody: colorBrightness( uiColor, 0.7 ),\r | |
257 | // Use gradient instead of simple hex to avoid further filter resetting in IE.\r | |
258 | dialogTabSelected: verticalGradient( '#FFFFFF', '#FFFFFF' ),\r | |
259 | dialogTabSelectedBorder: '#FFF',\r | |
260 | elementsPathColor: colorBrightness( uiColor, -0.6 ),\r | |
261 | elementsPathBg: uiColor,\r | |
262 | menubuttonIcon: colorBrightness( uiColor, 0.5 ),\r | |
263 | menubuttonIconHover: colorBrightness( uiColor, 0.3 )\r | |
264 | };\r | |
265 | \r | |
266 | return templates[ part ]\r | |
267 | .output( templateStyles )\r | |
268 | .replace( /\[/g, '{' ) // Replace brackets with braces.\r | |
269 | .replace( /\]/g, '}' );\r | |
270 | };\r | |
271 | } )();\r | |
272 | \r | |
273 | // %REMOVE_START%\r | |
274 | \r | |
275 | // 4. Register the skin icons for development purposes only\r | |
276 | // ----------------------------------------------------------\r | |
277 | // (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Icons)\r | |
278 | //\r | |
279 | // Note: As "moono" is the default CKEditor skin, it provides no custom icons,\r | |
280 | // thus this code is commented out.\r | |
281 | //\r | |
282 | // This code is here just to make the skin work fully when using its "source"\r | |
283 | // version. Without this, the skin will still work, but its icons will not be\r | |
284 | // used (again, on source version only).\r | |
285 | //\r | |
286 | // This block of code is not necessary on the release version of the skin.\r | |
287 | // Because of this it is very important to include it inside the REMOVE_START\r | |
288 | // and REMOVE_END comment markers, so the skin builder will properly clean\r | |
289 | // things up.\r | |
290 | //\r | |
291 | // If a required icon is not available here, the plugin defined icon will be\r | |
292 | // used instead. This means that a skin is not required to provide all icons.\r | |
293 | // Actually, it is not required to provide icons at all.\r | |
294 | //\r | |
295 | // (function() {\r | |
296 | // // The available icons. This list must match the file names (without\r | |
297 | // // extension) available inside the "icons" folder.\r | |
298 | // var icons = ( 'about,anchor-rtl,anchor,bgcolor,bidiltr,bidirtl,blockquote,' +\r | |
299 | // 'bold,bulletedlist-rtl,bulletedlist,button,checkbox,copy-rtl,copy,' +\r | |
300 | // 'creatediv,cut-rtl,cut,docprops-rtl,docprops,find-rtl,find,flash,form,' +\r | |
301 | // 'hiddenfield,horizontalrule,icons,iframe,image,imagebutton,indent-rtl,' +\r | |
302 | // 'indent,italic,justifyblock,justifycenter,justifyleft,justifyright,' +\r | |
303 | // 'link,maximize,newpage-rtl,newpage,numberedlist-rtl,numberedlist,' +\r | |
304 | // 'outdent-rtl,outdent,pagebreak-rtl,pagebreak,paste-rtl,paste,' +\r | |
305 | // 'pastefromword-rtl,pastefromword,pastetext-rtl,pastetext,preview-rtl,' +\r | |
306 | // 'preview,print,radio,redo-rtl,redo,removeformat,replace,save,scayt,' +\r | |
307 | // 'select-rtl,select,selectall,showblocks-rtl,showblocks,smiley,' +\r | |
308 | // 'source-rtl,source,specialchar,spellchecker,strike,subscript,' +\r | |
309 | // 'superscript,table,templates-rtl,templates,textarea-rtl,textarea,' +\r | |
310 | // 'textcolor,textfield-rtl,textfield,uicolor,underline,undo-rtl,undo,unlink' ).split( ',' );\r | |
311 | //\r | |
312 | // var iconsFolder = CKEDITOR.getUrl( CKEDITOR.skin.path() + 'icons/' + ( CKEDITOR.env.hidpi ? 'hidpi/' : '' ) );\r | |
313 | //\r | |
314 | // for ( var i = 0; i < icons.length; i++ ) {\r | |
315 | // CKEDITOR.skin.addIcon( icons[ i ], iconsFolder + icons[ i ] + '.png' );\r | |
316 | // }\r | |
317 | // })();\r | |
318 | \r | |
319 | // %REMOVE_END%\r |