diff options
Diffstat (limited to 'sources/skins/moono/skin.js')
-rw-r--r-- | sources/skins/moono/skin.js | 316 |
1 files changed, 0 insertions, 316 deletions
diff --git a/sources/skins/moono/skin.js b/sources/skins/moono/skin.js deleted file mode 100644 index 420b22e..0000000 --- a/sources/skins/moono/skin.js +++ /dev/null | |||
@@ -1,316 +0,0 @@ | |||
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 | /* | ||
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 = '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. | ||
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 | // 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% | ||