2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 CKEDITOR.skins.add( 'kama', (function()
\r
8 var uiColorStylesheetId = 'cke_ui_color';
\r
11 editor : { css : [ 'editor.css' ] },
\r
12 dialog : { css : [ 'dialog.css' ] },
\r
13 richcombo : { canGroup: false },
\r
14 templates : { css : [ 'templates.css' ] },
\r
15 margins : [ 0, 0, 0, 0 ],
\r
16 init : function( editor )
\r
18 if ( editor.config.width && !isNaN( editor.config.width ) )
\r
19 editor.config.width -= 12;
\r
21 var uiColorMenus = [];
\r
22 var uiColorRegex = /\$color/g;
\r
23 var uiColorMenuCss = "/* UI Color Support */\
\r
24 .cke_skin_kama .cke_menuitem .cke_icon_wrapper\
\r
26 background-color: $color !important;\
\r
27 border-color: $color !important;\
\r
30 .cke_skin_kama .cke_menuitem a:hover .cke_icon_wrapper,\
\r
31 .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\
\r
32 .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\
\r
34 background-color: $color !important;\
\r
35 border-color: $color !important;\
\r
38 .cke_skin_kama .cke_menuitem a:hover .cke_label,\
\r
39 .cke_skin_kama .cke_menuitem a:focus .cke_label,\
\r
40 .cke_skin_kama .cke_menuitem a:active .cke_label\
\r
42 background-color: $color !important;\
\r
45 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\
\r
46 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\
\r
47 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\
\r
49 background-color: transparent !important;\
\r
52 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\
\r
53 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\
\r
54 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_icon_wrapper\
\r
56 background-color: $color !important;\
\r
57 border-color: $color !important;\
\r
60 .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\
\r
62 background-color: $color !important;\
\r
63 border-color: $color !important;\
\r
66 .cke_skin_kama .cke_menuseparator\
\r
68 background-color: $color !important;\
\r
71 .cke_skin_kama .cke_menuitem a:hover,\
\r
72 .cke_skin_kama .cke_menuitem a:focus,\
\r
73 .cke_skin_kama .cke_menuitem a:active\
\r
75 background-color: $color !important;\
\r
77 // We have to split CSS declarations for webkit.
\r
78 if ( CKEDITOR.env.webkit )
\r
80 uiColorMenuCss = uiColorMenuCss.split( '}' ).slice( 0, -1 );
\r
81 for ( var i = 0 ; i < uiColorMenuCss.length ; i++ )
\r
82 uiColorMenuCss[ i ] = uiColorMenuCss[ i ].split( '{' );
\r
85 function getStylesheet( document )
\r
87 var node = document.getById( uiColorStylesheetId );
\r
90 node = document.getHead().append( 'style' );
\r
91 node.setAttribute( "id", uiColorStylesheetId );
\r
92 node.setAttribute( "type", "text/css" );
\r
97 function updateStylesheets( styleNodes, styleContent, replace )
\r
100 for ( var id = 0 ; id < styleNodes.length ; id++ )
\r
102 if ( CKEDITOR.env.webkit )
\r
104 for ( i = 0 ; i < styleContent.length ; i++ )
\r
106 content = styleContent[ i ][ 1 ];
\r
107 for ( r = 0 ; r < replace.length ; r++ )
\r
108 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
\r
110 styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );
\r
115 content = styleContent;
\r
116 for ( r = 0 ; r < replace.length ; r++ )
\r
117 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
\r
119 if ( CKEDITOR.env.ie )
\r
120 styleNodes[ id ].$.styleSheet.cssText += content;
\r
122 styleNodes[ id ].$.innerHTML += content;
\r
127 var uiColorRegexp = /\$color/g;
\r
129 CKEDITOR.tools.extend( editor,
\r
133 getUiColor : function()
\r
135 return this.uiColor;
\r
138 setUiColor : function( color )
\r
141 uiStyle = getStylesheet( CKEDITOR.document ),
\r
142 cssId = '.' + editor.id;
\r
146 cssId + " .cke_wrapper",
\r
147 cssId + "_dialog .cke_dialog_contents",
\r
148 cssId + "_dialog a.cke_dialog_tab",
\r
149 cssId + "_dialog .cke_dialog_footer"
\r
151 var cssProperties = "background-color: $color !important;";
\r
153 if ( CKEDITOR.env.webkit )
\r
154 cssContent = [ [ cssSelectors, cssProperties ] ];
\r
156 cssContent = cssSelectors + '{' + cssProperties + '}';
\r
158 return ( this.setUiColor =
\r
161 var replace = [ [ uiColorRegexp, color ] ];
\r
162 editor.uiColor = color;
\r
164 // Update general style.
\r
165 updateStylesheets( [ uiStyle ], cssContent, replace );
\r
167 // Update menu styles.
\r
168 updateStylesheets( uiColorMenus, uiColorMenuCss, replace );
\r
173 editor.on( 'menuShow', function( event )
\r
175 var panel = event.data[ 0 ];
\r
176 var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();
\r
178 // Add stylesheet if missing.
\r
179 if ( !iframe.getById( 'cke_ui_color' ) )
\r
181 var node = getStylesheet( iframe );
\r
182 uiColorMenus.push( node );
\r
184 var color = editor.getUiColor();
\r
185 // Set uiColor for new menu.
\r
187 updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );
\r
191 // Apply UI color if specified in config.
\r
192 if ( editor.config.uiColor )
\r
193 editor.setUiColor( editor.config.uiColor );
\r
200 CKEDITOR.dialog ? dialogSetup() : CKEDITOR.on( 'dialogPluginReady', dialogSetup );
\r
202 function dialogSetup()
\r
204 CKEDITOR.dialog.on( 'resize', function( evt )
\r
206 var data = evt.data,
\r
207 width = data.width,
\r
208 height = data.height,
\r
209 dialog = data.dialog,
\r
210 contents = dialog.parts.contents;
\r
212 if ( data.skin != 'kama' )
\r
215 contents.setStyles(
\r
217 width : width + 'px',
\r
218 height : height + 'px'
\r
225 * The base user interface color to be used by the editor. Not all skins are
\r
226 * compatible with this setting.
\r
227 * @name CKEDITOR.config.uiColor
\r
229 * @default '' (empty)
\r
231 * // Using a color code.
\r
232 * config.uiColor = '#AADC6E';
\r
234 * // Using an HTML color name.
\r
235 * config.uiColor = 'Gold';
\r