2 Copyright (c) 2003-2010, 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
9 uiColorStylesheetId = 'cke_ui_color';
\r
11 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
\r
13 // For IE6, we need to preload some images, otherwhise they will be
\r
14 // downloaded several times (CSS background bug).
\r
15 preload.push( 'icons.png', 'images/sprites_ie6.png', 'images/dialog_sides.gif' );
\r
20 editor : { css : [ 'editor.css' ] },
\r
21 dialog : { css : [ 'dialog.css' ] },
\r
22 templates : { css : [ 'templates.css' ] },
\r
23 margins : [ 0, 0, 0, 0 ],
\r
24 init : function( editor )
\r
26 if ( editor.config.width && !isNaN( editor.config.width ) )
\r
27 editor.config.width -= 12;
\r
29 var uiColorMenus = [];
\r
30 var uiColorRegex = /\$color/g;
\r
31 var uiColorMenuCss = "/* UI Color Support */\
\r
32 .cke_skin_kama .cke_menuitem .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_icon_wrapper,\
\r
39 .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\
\r
40 .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\
\r
42 background-color: $color !important;\
\r
43 border-color: $color !important;\
\r
46 .cke_skin_kama .cke_menuitem a:hover .cke_label,\
\r
47 .cke_skin_kama .cke_menuitem a:focus .cke_label,\
\r
48 .cke_skin_kama .cke_menuitem a:active .cke_label\
\r
50 background-color: $color !important;\
\r
53 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\
\r
54 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\
\r
55 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\
\r
57 background-color: transparent !important;\
\r
60 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\
\r
61 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\
\r
62 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_icon_wrapper\
\r
64 background-color: $color !important;\
\r
65 border-color: $color !important;\
\r
68 .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\
\r
70 background-color: $color !important;\
\r
71 border-color: $color !important;\
\r
74 .cke_skin_kama .cke_menuseparator\
\r
76 background-color: $color !important;\
\r
79 .cke_skin_kama .cke_menuitem a:hover,\
\r
80 .cke_skin_kama .cke_menuitem a:focus,\
\r
81 .cke_skin_kama .cke_menuitem a:active\
\r
83 background-color: $color !important;\
\r
85 // We have to split CSS declarations for webkit.
\r
86 if ( CKEDITOR.env.webkit )
\r
88 uiColorMenuCss = uiColorMenuCss.split( '}' ).slice( 0, -1 );
\r
89 for ( var i = 0 ; i < uiColorMenuCss.length ; i++ )
\r
90 uiColorMenuCss[ i ] = uiColorMenuCss[ i ].split( '{' );
\r
93 function getStylesheet( document )
\r
95 var node = document.getById( uiColorStylesheetId );
\r
98 node = document.getHead().append( 'style' );
\r
99 node.setAttribute( "id", uiColorStylesheetId );
\r
100 node.setAttribute( "type", "text/css" );
\r
105 function updateStylesheets( styleNodes, styleContent, replace )
\r
108 for ( var id = 0 ; id < styleNodes.length ; id++ )
\r
110 if ( CKEDITOR.env.webkit )
\r
112 for ( i = 0 ; i < styleContent.length ; i++ )
\r
114 content = styleContent[ i ][ 1 ];
\r
115 for ( r = 0 ; r < replace.length ; r++ )
\r
116 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
\r
118 styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );
\r
123 content = styleContent;
\r
124 for ( r = 0 ; r < replace.length ; r++ )
\r
125 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
\r
127 if ( CKEDITOR.env.ie )
\r
128 styleNodes[ id ].$.styleSheet.cssText += content;
\r
130 styleNodes[ id ].$.innerHTML += content;
\r
135 var uiColorRegexp = /\$color/g;
\r
137 CKEDITOR.tools.extend( editor,
\r
141 getUiColor : function()
\r
143 return this.uiColor;
\r
146 setUiColor : function( color )
\r
149 uiStyle = getStylesheet( CKEDITOR.document ),
\r
150 cssId = '.cke_editor_' + CKEDITOR.tools.escapeCssSelector( editor.name );
\r
154 cssId + " .cke_wrapper",
\r
155 cssId + "_dialog .cke_dialog_contents",
\r
156 cssId + "_dialog a.cke_dialog_tab",
\r
157 cssId + "_dialog .cke_dialog_footer"
\r
159 var cssProperties = "background-color: $color !important;";
\r
161 if ( CKEDITOR.env.webkit )
\r
162 cssContent = [ [ cssSelectors, cssProperties ] ];
\r
164 cssContent = cssSelectors + '{' + cssProperties + '}';
\r
166 return ( this.setUiColor =
\r
169 var replace = [ [ uiColorRegexp, color ] ];
\r
170 editor.uiColor = color;
\r
172 // Update general style.
\r
173 updateStylesheets( [ uiStyle ], cssContent, replace );
\r
175 // Update menu styles.
\r
176 updateStylesheets( uiColorMenus, uiColorMenuCss, replace );
\r
181 editor.on( 'menuShow', function( event )
\r
183 var panel = event.data[ 0 ];
\r
184 var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();
\r
186 // Add stylesheet if missing.
\r
187 if ( !iframe.getById( 'cke_ui_color' ) )
\r
189 var node = getStylesheet( iframe );
\r
190 uiColorMenus.push( node );
\r
192 var color = editor.getUiColor();
\r
193 // Set uiColor for new menu.
\r
195 updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );
\r
199 // Apply UI color if specified in config.
\r
200 if ( editor.config.uiColor )
\r
201 editor.setUiColor( editor.config.uiColor );
\r
208 CKEDITOR.dialog ? dialogSetup() : CKEDITOR.on( 'dialogPluginReady', dialogSetup );
\r
210 function dialogSetup()
\r
212 CKEDITOR.dialog.on( 'resize', function( evt )
\r
214 var data = evt.data,
\r
215 width = data.width,
\r
216 height = data.height,
\r
217 dialog = data.dialog,
\r
218 contents = dialog.parts.contents;
\r
220 if ( data.skin != 'kama' )
\r
223 contents.setStyles(
\r
225 width : width + 'px',
\r
226 height : height + 'px'
\r
229 // Fix the size of the elements which have flexible lengths.
\r
230 setTimeout( function()
\r
232 var innerDialog = dialog.parts.dialog.getChild( [ 0, 0, 0 ] ),
\r
233 body = innerDialog.getChild( 0 );
\r
236 var el = innerDialog.getChild( 2 );
\r
237 el.setStyle( 'width', ( body.$.offsetWidth ) + 'px' );
\r
240 el = innerDialog.getChild( 7 );
\r
241 el.setStyle( 'width', ( body.$.offsetWidth - 28 ) + 'px' );
\r
244 el = innerDialog.getChild( 4 );
\r
245 el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );
\r
248 el = innerDialog.getChild( 5 );
\r
249 el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );
\r
257 * The base user interface color to be used by the editor. Not all skins are
\r
258 * compatible with this setting.
\r
259 * @name CKEDITOR.config.uiColor
\r
261 * @default '' (empty)
\r
263 * // Using a color code.
\r
264 * config.uiColor = '#AADC6E';
\r
266 * // Using an HTML color name.
\r
267 * config.uiColor = 'Gold';
\r