1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5
6/*
7skin.js
8=========
9
10In this file we interact with the CKEditor JavaScript API to register the skin
11and enable additional skin related features.
12
13The level of complexity of this file depends on the features available in the
14skin. There is only one mandatory line of code to be included here, which is
15setting CKEDITOR.skin.name. All the rest is optional, but recommended to be
16implemented as they make higher quality skins.
17
18For 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.
34CKEDITOR.skin.name = 'moono';
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.
57CKEDITOR.skin.ua_editor = 'ie,iequirks,ie7,ie8,gecko';
58CKEDITOR.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.
83CKEDITOR.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// This code is here just to make the skin work fully when using its "source"
280// version. Without this, the skin will still work, but its icons will not be
281// used (again, on source version only).
282//
283// This block of code is not necessary on the release version of the skin.
284// Because of this it is very important to include it inside the REMOVE_START
285// and REMOVE_END comment markers, so the skin builder will properly clean
286// things up.
287//
288// If a required icon is not available here, the plugin defined icon will be
289// used instead. This means that a skin is not required to provide all icons.
290// Actually, it is not required to provide icons at all.
291
292( function() {
293	// The available icons. This list must match the file names (without
294	// extension) available inside the "icons" folder.
295	var icons = ( 'about,anchor-rtl,anchor,bgcolor,bidiltr,bidirtl,blockquote,' +
296		'bold,bulletedlist-rtl,bulletedlist,button,checkbox,copy-rtl,copy,copyformatting,' +
297		'creatediv,cut-rtl,cut,docprops-rtl,docprops,find-rtl,find,flash,form,' +
298		'hiddenfield,horizontalrule,icons,iframe,image,imagebutton,indent-rtl,' +
299		'indent,italic,justifyblock,justifycenter,justifyleft,justifyright,' +
300		'link,maximize,newpage-rtl,newpage,numberedlist-rtl,numberedlist,' +
301		'outdent-rtl,outdent,pagebreak-rtl,pagebreak,paste-rtl,paste,' +
302		'pastefromword-rtl,pastefromword,pastetext-rtl,pastetext,preview-rtl,' +
303		'preview,print,radio,redo-rtl,redo,removeformat,replace,save,scayt,' +
304		'select-rtl,select,selectall,showblocks-rtl,showblocks,smiley,' +
305		'source-rtl,source,specialchar,spellchecker,strike,subscript,' +
306		'superscript,table,templates-rtl,templates,textarea-rtl,textarea,' +
307		'textcolor,textfield-rtl,textfield,uicolor,underline,undo-rtl,undo,unlink' ).split( ',' );
308
309	var iconsFolder = CKEDITOR.getUrl( CKEDITOR.skin.path() + 'icons/' + ( CKEDITOR.env.hidpi ? 'hidpi/' : '' ) );
310
311	for ( var i = 0; i < icons.length; i++ ) {
312		CKEDITOR.skin.addIcon( icons[ i ], iconsFolder + icons[ i ] + '.png' );
313	}
314} )();
315
316// %REMOVE_END%
317