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