2 Copyright (c) 2003-2011, 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 templates : { css : [ 'templates.css' ] },
\r
14 margins : [ 0, 0, 0, 0 ],
\r
15 init : function( editor )
\r
17 if ( editor.config.width && !isNaN( editor.config.width ) )
\r
18 editor.config.width -= 12;
\r
20 var uiColorMenus = [];
\r
21 var uiColorRegex = /\$color/g;
\r
22 var uiColorMenuCss = "/* UI Color Support */\
\r
23 .cke_skin_kama .cke_menuitem .cke_icon_wrapper\
\r
25 background-color: $color !important;\
\r
26 border-color: $color !important;\
\r
29 .cke_skin_kama .cke_menuitem a:hover .cke_icon_wrapper,\
\r
30 .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\
\r
31 .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\
\r
33 background-color: $color !important;\
\r
34 border-color: $color !important;\
\r
37 .cke_skin_kama .cke_menuitem a:hover .cke_label,\
\r
38 .cke_skin_kama .cke_menuitem a:focus .cke_label,\
\r
39 .cke_skin_kama .cke_menuitem a:active .cke_label\
\r
41 background-color: $color !important;\
\r
44 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\
\r
45 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\
\r
46 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\
\r
48 background-color: transparent !important;\
\r
51 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\
\r
52 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\
\r
53 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_icon_wrapper\
\r
55 background-color: $color !important;\
\r
56 border-color: $color !important;\
\r
59 .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\
\r
61 background-color: $color !important;\
\r
62 border-color: $color !important;\
\r
65 .cke_skin_kama .cke_menuseparator\
\r
67 background-color: $color !important;\
\r
70 .cke_skin_kama .cke_menuitem a:hover,\
\r
71 .cke_skin_kama .cke_menuitem a:focus,\
\r
72 .cke_skin_kama .cke_menuitem a:active\
\r
74 background-color: $color !important;\
\r
76 // We have to split CSS declarations for webkit.
\r
77 if ( CKEDITOR.env.webkit )
\r
79 uiColorMenuCss = uiColorMenuCss.split( '}' ).slice( 0, -1 );
\r
80 for ( var i = 0 ; i < uiColorMenuCss.length ; i++ )
\r
81 uiColorMenuCss[ i ] = uiColorMenuCss[ i ].split( '{' );
\r
84 function getStylesheet( document )
\r
86 var node = document.getById( uiColorStylesheetId );
\r
89 node = document.getHead().append( 'style' );
\r
90 node.setAttribute( "id", uiColorStylesheetId );
\r
91 node.setAttribute( "type", "text/css" );
\r
96 function updateStylesheets( styleNodes, styleContent, replace )
\r
99 for ( var id = 0 ; id < styleNodes.length ; id++ )
\r
101 if ( CKEDITOR.env.webkit )
\r
103 for ( i = 0 ; i < styleContent.length ; i++ )
\r
105 content = styleContent[ i ][ 1 ];
\r
106 for ( r = 0 ; r < replace.length ; r++ )
\r
107 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
\r
109 styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );
\r
114 content = styleContent;
\r
115 for ( r = 0 ; r < replace.length ; r++ )
\r
116 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
\r
118 if ( CKEDITOR.env.ie )
\r
119 styleNodes[ id ].$.styleSheet.cssText += content;
\r
121 styleNodes[ id ].$.innerHTML += content;
\r
126 var uiColorRegexp = /\$color/g;
\r
128 CKEDITOR.tools.extend( editor,
\r
132 getUiColor : function()
\r
134 return this.uiColor;
\r
137 setUiColor : function( color )
\r
140 uiStyle = getStylesheet( CKEDITOR.document ),
\r
141 cssId = '.' + editor.id;
\r
145 cssId + " .cke_wrapper",
\r
146 cssId + "_dialog .cke_dialog_contents",
\r
147 cssId + "_dialog a.cke_dialog_tab",
\r
148 cssId + "_dialog .cke_dialog_footer"
\r
150 var cssProperties = "background-color: $color !important;";
\r
152 if ( CKEDITOR.env.webkit )
\r
153 cssContent = [ [ cssSelectors, cssProperties ] ];
\r
155 cssContent = cssSelectors + '{' + cssProperties + '}';
\r
157 return ( this.setUiColor =
\r
160 var replace = [ [ uiColorRegexp, color ] ];
\r
161 editor.uiColor = color;
\r
163 // Update general style.
\r
164 updateStylesheets( [ uiStyle ], cssContent, replace );
\r
166 // Update menu styles.
\r
167 updateStylesheets( uiColorMenus, uiColorMenuCss, replace );
\r
172 editor.on( 'menuShow', function( event )
\r
174 var panel = event.data[ 0 ];
\r
175 var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();
\r
177 // Add stylesheet if missing.
\r
178 if ( !iframe.getById( 'cke_ui_color' ) )
\r
180 var node = getStylesheet( iframe );
\r
181 uiColorMenus.push( node );
\r
183 var color = editor.getUiColor();
\r
184 // Set uiColor for new menu.
\r
186 updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );
\r
190 // Apply UI color if specified in config.
\r
191 if ( editor.config.uiColor )
\r
192 editor.setUiColor( editor.config.uiColor );
\r
199 CKEDITOR.dialog ? dialogSetup() : CKEDITOR.on( 'dialogPluginReady', dialogSetup );
\r
201 function dialogSetup()
\r
203 CKEDITOR.dialog.on( 'resize', function( evt )
\r
205 var data = evt.data,
\r
206 width = data.width,
\r
207 height = data.height,
\r
208 dialog = data.dialog,
\r
209 contents = dialog.parts.contents;
\r
211 if ( data.skin != 'kama' )
\r
214 contents.setStyles(
\r
216 width : width + 'px',
\r
217 height : height + 'px'
\r
224 * The base user interface color to be used by the editor. Not all skins are
\r
225 * compatible with this setting.
\r
226 * @name CKEDITOR.config.uiColor
\r
228 * @default '' (empty)
\r
230 * // Using a color code.
\r
231 * config.uiColor = '#AADC6E';
\r
233 * // Using an HTML color name.
\r
234 * config.uiColor = 'Gold';
\r