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