--- /dev/null
+/**\r
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.\r
+ * For licensing, see LICENSE.md or http://ckeditor.com/license\r
+ */\r
+\r
+/*\r
+skin.js\r
+=========\r
+\r
+In this file we interact with the CKEditor JavaScript API to register the skin\r
+and enable additional skin related features.\r
+\r
+The level of complexity of this file depends on the features available in the\r
+skin. There is only one mandatory line of code to be included here, which is\r
+setting CKEDITOR.skin.name. All the rest is optional, but recommended to be\r
+implemented as they make higher quality skins.\r
+\r
+For this skin, the following tasks are achieved in this file:\r
+\r
+ 1. Register the skin.\r
+ 2. Register browser specific skin files.\r
+ 3. Define the "Chameleon" feature.\r
+ 4. Register the skin icons, to have them used on the development version of\r
+ the skin.\r
+*/\r
+\r
+// 1. Register the skin\r
+// ----------------------\r
+// The CKEDITOR.skin.name property must be set to the skin name. This is a\r
+// lower-cased name, which must match the skin folder name as well as the value\r
+// used on config.skin to tell the editor to use the skin.\r
+//\r
+// This is the only mandatory property to be defined in this file.\r
+CKEDITOR.skin.name = 'moonocolor';\r
+\r
+// 2. Register browser specific skin files\r
+// -----------------------------------------\r
+// (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Browser_Hacks)\r
+//\r
+// To help implementing browser specific "hacks" to the skin files and have it\r
+// easy to maintain, it is possible to have dedicated files for such browsers,\r
+// for both the main skin CSS files: editor.css and dialog.css.\r
+//\r
+// The browser files must be named after the main file names, appended by an\r
+// underscore and the browser name (e.g. editor_ie.css, dialog_ie8.css).\r
+//\r
+// The accepted browser names must match the CKEDITOR.env properties. The most\r
+// common names are: ie, webkit and gecko. Check the documentation for the complete\r
+// list:\r
+// http://docs.ckeditor.com/#!/api/CKEDITOR.env\r
+//\r
+// Internet explorer is an expection and the browser version is also accepted\r
+// (ie7, ie8, ie9, ie10), as well as a special name for IE in Quirks mode (iequirks).\r
+//\r
+// The available browser specific files must be set separately for editor.css\r
+// and dialog.css.\r
+CKEDITOR.skin.ua_editor = 'ie,iequirks,ie7,ie8,gecko';\r
+CKEDITOR.skin.ua_dialog = 'ie,iequirks,ie7,ie8';\r
+\r
+// 3. Define the "Chameleon" feature\r
+// -----------------------------------\r
+// (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Chameleon)\r
+//\r
+// "Chameleon" is a unique feature available in CKEditor. It makes it possible\r
+// to end users to specify which color to use as the basis for the editor UI.\r
+// It is enough to set config.uiColor to any color value and voila, the UI is\r
+// colored.\r
+//\r
+// The only detail here is that the skin itself must be compatible with the\r
+// Chameleon feature. That's because the skin CSS files are the responsible to\r
+// apply colors in the UI and each skin do that in different way and on\r
+// different places.\r
+//\r
+// Implementing the Chameleon feature requires a bit of JavaScript programming.\r
+// The CKEDITOR.skin.chameleon function must be defined. It must return the CSS\r
+// "template" to be used to change the color of a specific CKEditor instance\r
+// available in the page. When a color change is required, this template is\r
+// appended to the page holding the editor, overriding styles defined in the\r
+// skin files.\r
+//\r
+// The "$color" placeholder can be used in the returned string. It'll be\r
+// replaced with the desired color.\r
+CKEDITOR.skin.chameleon = ( function() {\r
+ // This method can be used to adjust colour brightness of various element.\r
+ // Colours are accepted in 7-byte hex format, for example: #00ff00.\r
+ // Brightness ratio must be a float number within [-1, 1],\r
+ // where -1 is black, 1 is white and 0 is the original colour.\r
+ var colorBrightness = ( function() {\r
+ function channelBrightness( channel, ratio ) {\r
+ var brighten = ratio < 0 ? (\r
+ 0 | channel * ( 1 + ratio )\r
+ ) : (\r
+ 0 | channel + ( 255 - channel ) * ratio\r
+ );\r
+\r
+ return ( '0' + brighten.toString( 16 ) ).slice( -2 );\r
+ }\r
+\r
+ return function( hexColor, ratio ) {\r
+ var channels = hexColor.match( /[^#]./g );\r
+\r
+ for ( var i = 0 ; i < 3 ; i++ )\r
+ channels[ i ] = channelBrightness( parseInt( channels[ i ], 16 ), ratio );\r
+\r
+ return '#' + channels.join( '' );\r
+ };\r
+ } )(),\r
+\r
+ // Use this function just to avoid having to repeat all these rules on\r
+ // several places of our template.\r
+ verticalGradient = ( function() {\r
+ var template = new CKEDITOR.template( 'background:#{to};' +\r
+ 'background-image:linear-gradient(to bottom,{from},{to});' +\r
+ 'filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=\'{from}\',endColorstr=\'{to}\');' );\r
+\r
+ return function( from, to ) {\r
+ return template.output( { from: from, to: to } );\r
+ };\r
+ } )(),\r
+\r
+ // Style templates for various user interface parts:\r
+ // * Default editor template.\r
+ // * Default panel template.\r
+ templates = {\r
+ editor: new CKEDITOR.template(\r
+ '{id}.cke_chrome [border-color:{defaultBorder};] ' +\r
+ '{id} .cke_top [ ' +\r
+ '{defaultGradient}' +\r
+ 'border-bottom-color:{defaultBorder};' +\r
+ '] ' +\r
+ '{id} .cke_bottom [' +\r
+ '{defaultGradient}' +\r
+ 'border-top-color:{defaultBorder};' +\r
+ '] ' +\r
+ '{id} .cke_resizer [border-right-color:{ckeResizer}] ' +\r
+\r
+ // Dialogs.\r
+ '{id} .cke_dialog_title [' +\r
+ '{defaultGradient}' +\r
+ 'border-bottom-color:{defaultBorder};' +\r
+ '] ' +\r
+ '{id} .cke_dialog_footer [' +\r
+ '{defaultGradient}' +\r
+ 'outline-color:{defaultBorder};' +\r
+ 'border-top-color:{defaultBorder};' + // IE7 doesn't use outline.\r
+ '] ' +\r
+ '{id} .cke_dialog_tab [' +\r
+ '{lightGradient}' +\r
+ 'border-color:{defaultBorder};' +\r
+ '] ' +\r
+ '{id} .cke_dialog_tab:hover [' +\r
+ '{mediumGradient}' +\r
+ '] ' +\r
+ '{id} .cke_dialog_contents [' +\r
+ 'border-top-color:{defaultBorder};' +\r
+ '] ' +\r
+ '{id} .cke_dialog_tab_selected, {id} .cke_dialog_tab_selected:hover [' +\r
+ 'background:{dialogTabSelected};' +\r
+ 'border-bottom-color:{dialogTabSelectedBorder};' +\r
+ '] ' +\r
+ '{id} .cke_dialog_body [' +\r
+ 'background:{dialogBody};' +\r
+ 'border-color:{defaultBorder};' +\r
+ '] ' +\r
+\r
+ // Toolbars, buttons.\r
+ '{id} .cke_toolgroup [' +\r
+ '{lightGradient}' +\r
+ 'border-color:{defaultBorder};' +\r
+ '] ' +\r
+ '{id} a.cke_button_off:hover, {id} a.cke_button_off:focus, {id} a.cke_button_off:active [' +\r
+ '{mediumGradient}' +\r
+ '] ' +\r
+ '{id} .cke_button_on [' +\r
+ '{ckeButtonOn}' +\r
+ '] ' +\r
+ '{id} .cke_toolbar_separator [' +\r
+ 'background-color: {ckeToolbarSeparator};' +\r
+ '] ' +\r
+\r
+ // Combo buttons.\r
+ '{id} .cke_combo_button [' +\r
+ 'border-color:{defaultBorder};' +\r
+ '{lightGradient}' +\r
+ '] ' +\r
+ '{id} a.cke_combo_button:hover, {id} a.cke_combo_button:focus, {id} .cke_combo_on a.cke_combo_button [' +\r
+ 'border-color:{defaultBorder};' +\r
+ '{mediumGradient}' +\r
+ '] ' +\r
+\r
+ // Elementspath.\r
+ '{id} .cke_path_item [' +\r
+ 'color:{elementsPathColor};' +\r
+ '] ' +\r
+ '{id} a.cke_path_item:hover, {id} a.cke_path_item:focus, {id} a.cke_path_item:active [' +\r
+ 'background-color:{elementsPathBg};' +\r
+ '] ' +\r
+\r
+ '{id}.cke_panel [' +\r
+ 'border-color:{defaultBorder};' +\r
+ '] '\r
+ ),\r
+ panel: new CKEDITOR.template(\r
+ // Panel drop-downs.\r
+ '.cke_panel_grouptitle [' +\r
+ '{lightGradient}' +\r
+ 'border-color:{defaultBorder};' +\r
+ '] ' +\r
+\r
+ // Context menus.\r
+ '.cke_menubutton_icon [' +\r
+ 'background-color:{menubuttonIcon};' +\r
+ '] ' +\r
+ '.cke_menubutton:hover .cke_menubutton_icon, .cke_menubutton:focus .cke_menubutton_icon, .cke_menubutton:active .cke_menubutton_icon [' +\r
+ 'background-color:{menubuttonIconHover};' +\r
+ '] ' +\r
+ '.cke_menuseparator [' +\r
+ 'background-color:{menubuttonIcon};' +\r
+ '] ' +\r
+\r
+ // Color boxes.\r
+ 'a:hover.cke_colorbox, a:focus.cke_colorbox, a:active.cke_colorbox [' +\r
+ 'border-color:{defaultBorder};' +\r
+ '] ' +\r
+ '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
+ 'background-color:{ckeColorauto};' +\r
+ 'border-color:{defaultBorder};' +\r
+ '] '\r
+ )\r
+ };\r
+\r
+ return function( editor, part ) {\r
+ var uiColor = editor.uiColor,\r
+ // The following are CSS styles used in templates.\r
+ // Styles are generated according to current editor.uiColor.\r
+ templateStyles = {\r
+ // CKEditor instances have a unique ID, which is used as class name into\r
+ // the outer container of the editor UI (e.g. ".cke_1").\r
+ //\r
+ // The Chameleon feature is available for each CKEditor instance,\r
+ // independently. Because of this, we need to prefix all CSS selectors with\r
+ // the unique class name of the instance.\r
+ id: '.' + editor.id,\r
+\r
+ // These styles are used by various UI elements.\r
+ defaultBorder: colorBrightness( uiColor, -0.1 ),\r
+ defaultGradient: verticalGradient( colorBrightness( uiColor, 0.9 ), uiColor ),\r
+ lightGradient: verticalGradient( colorBrightness( uiColor, 1 ), colorBrightness( uiColor, 0.7 ) ),\r
+ mediumGradient: verticalGradient( colorBrightness( uiColor, 0.8 ), colorBrightness( uiColor, 0.5 ) ),\r
+\r
+ // These are for specific UI elements.\r
+ ckeButtonOn: verticalGradient( colorBrightness( uiColor, 0.6 ), colorBrightness( uiColor, 0.7 ) ),\r
+ ckeResizer: colorBrightness( uiColor, -0.4 ),\r
+ ckeToolbarSeparator: colorBrightness( uiColor, 0.5 ),\r
+ ckeColorauto: colorBrightness( uiColor, 0.8 ),\r
+ dialogBody: colorBrightness( uiColor, 0.7 ),\r
+ // Use gradient instead of simple hex to avoid further filter resetting in IE.\r
+ dialogTabSelected: verticalGradient( '#FFFFFF', '#FFFFFF' ),\r
+ dialogTabSelectedBorder: '#FFF',\r
+ elementsPathColor: colorBrightness( uiColor, -0.6 ),\r
+ elementsPathBg: uiColor,\r
+ menubuttonIcon: colorBrightness( uiColor, 0.5 ),\r
+ menubuttonIconHover: colorBrightness( uiColor, 0.3 )\r
+ };\r
+\r
+ return templates[ part ]\r
+ .output( templateStyles )\r
+ .replace( /\[/g, '{' ) // Replace brackets with braces.\r
+ .replace( /\]/g, '}' );\r
+ };\r
+} )();\r
+\r
+// %REMOVE_START%\r
+\r
+// 4. Register the skin icons for development purposes only\r
+// ----------------------------------------------------------\r
+// (http://docs.cksource.com/CKEditor_4.x/Skin_SDK/Icons)\r
+//\r
+// Note: As "moono" is the default CKEditor skin, it provides no custom icons,\r
+// thus this code is commented out.\r
+//\r
+// This code is here just to make the skin work fully when using its "source"\r
+// version. Without this, the skin will still work, but its icons will not be\r
+// used (again, on source version only).\r
+//\r
+// This block of code is not necessary on the release version of the skin.\r
+// Because of this it is very important to include it inside the REMOVE_START\r
+// and REMOVE_END comment markers, so the skin builder will properly clean\r
+// things up.\r
+//\r
+// If a required icon is not available here, the plugin defined icon will be\r
+// used instead. This means that a skin is not required to provide all icons.\r
+// Actually, it is not required to provide icons at all.\r
+//\r
+// (function() {\r
+// // The available icons. This list must match the file names (without\r
+// // extension) available inside the "icons" folder.\r
+// var icons = ( 'about,anchor-rtl,anchor,bgcolor,bidiltr,bidirtl,blockquote,' +\r
+// 'bold,bulletedlist-rtl,bulletedlist,button,checkbox,copy-rtl,copy,' +\r
+// 'creatediv,cut-rtl,cut,docprops-rtl,docprops,find-rtl,find,flash,form,' +\r
+// 'hiddenfield,horizontalrule,icons,iframe,image,imagebutton,indent-rtl,' +\r
+// 'indent,italic,justifyblock,justifycenter,justifyleft,justifyright,' +\r
+// 'link,maximize,newpage-rtl,newpage,numberedlist-rtl,numberedlist,' +\r
+// 'outdent-rtl,outdent,pagebreak-rtl,pagebreak,paste-rtl,paste,' +\r
+// 'pastefromword-rtl,pastefromword,pastetext-rtl,pastetext,preview-rtl,' +\r
+// 'preview,print,radio,redo-rtl,redo,removeformat,replace,save,scayt,' +\r
+// 'select-rtl,select,selectall,showblocks-rtl,showblocks,smiley,' +\r
+// 'source-rtl,source,specialchar,spellchecker,strike,subscript,' +\r
+// 'superscript,table,templates-rtl,templates,textarea-rtl,textarea,' +\r
+// 'textcolor,textfield-rtl,textfield,uicolor,underline,undo-rtl,undo,unlink' ).split( ',' );\r
+//\r
+// var iconsFolder = CKEDITOR.getUrl( CKEDITOR.skin.path() + 'icons/' + ( CKEDITOR.env.hidpi ? 'hidpi/' : '' ) );\r
+//\r
+// for ( var i = 0; i < icons.length; i++ ) {\r
+// CKEDITOR.skin.addIcon( icons[ i ], iconsFolder + icons[ i ] + '.png' );\r
+// }\r
+// })();\r
+\r
+// %REMOVE_END%\r
projects / perso / Immae / Projets / packagist / ludivine-ckeditor-component.git / blobdiff