2 Copyright (c) 2003-2009, 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
10 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
\r
12 // For IE6, we need to preload some images, otherwhise they will be
\r
13 // downloaded several times (CSS background bug).
\r
14 preload.push( 'icons.png', 'images/sprites_ie6.png', 'images/dialog_sides.gif' );
\r
19 editor : { css : [ 'editor.css' ] },
\r
20 dialog : { css : [ 'dialog.css' ] },
\r
21 templates : { css : [ 'templates.css' ] },
\r
22 margins : [ 0, 0, 0, 0 ],
\r
23 init : function( editor )
\r
25 if ( editor.config.width && !isNaN( editor.config.width ) )
\r
26 editor.config.width -= 12;
\r
29 function menuSetUiColor( color )
\r
34 var uiStyle = menuHead.append('style');
\r
36 var cssSrc = "/* UI Color Support */\
\r
37 .cke_skin_kama .cke_menuitem .cke_icon_wrapper\
\r
39 background-color: $color !important;\
\r
40 border-color: $color !important;\
\r
43 .cke_skin_kama .cke_menuitem a:hover .cke_icon_wrapper,\
\r
44 .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\
\r
45 .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\
\r
47 background-color: $color !important;\
\r
48 border-color: $color !important;\
\r
51 .cke_skin_kama .cke_menuitem a:hover .cke_label,\
\r
52 .cke_skin_kama .cke_menuitem a:focus .cke_label,\
\r
53 .cke_skin_kama .cke_menuitem a:active .cke_label\
\r
55 background-color: $color !important;\
\r
58 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\
\r
59 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\
\r
60 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\
\r
62 background-color: transparent !important;\
\r
65 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\
\r
66 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\
\r
67 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_icon_wrapper\
\r
69 background-color: $color !important;\
\r
70 border-color: $color !important;\
\r
73 .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\
\r
75 background-color: $color !important;\
\r
76 border-color: $color !important;\
\r
79 .cke_skin_kama .cke_menuseparator\
\r
81 background-color: $color !important;\
\r
84 .cke_skin_kama .cke_menuitem a:hover,\
\r
85 .cke_skin_kama .cke_menuitem a:focus,\
\r
86 .cke_skin_kama .cke_menuitem a:active\
\r
88 background-color: $color !important;\
\r
91 uiStyle.setAttribute( "type", "text/css" );
\r
92 var regex = /\$color/g;
\r
94 // We have to split CSS declarations for webkit.
\r
95 if ( CKEDITOR.env.webkit )
\r
97 cssSrc = cssSrc.split( '}' ).slice( 0, -1 );
\r
98 for ( var i in cssSrc )
\r
99 cssSrc[ i ] = cssSrc[ i ].split( '{' );
\r
102 return ( menuSetUiColor =
\r
105 if ( CKEDITOR.env.webkit )
\r
107 for ( var i in cssSrc )
\r
108 uiStyle.$.sheet.addRule(
\r
109 cssSrc[ i ][ 0 ], cssSrc[ i ][ 1 ].replace( regex, color )
\r
114 var css = cssSrc.replace( regex, color );
\r
116 if ( CKEDITOR.env.ie )
\r
117 uiStyle.$.styleSheet.cssText = css;
\r
119 uiStyle.setHtml( css );
\r
124 CKEDITOR.tools.extend( editor,
\r
128 getUiColor : function()
\r
130 return this.uiColor;
\r
133 setUiColor : function( color )
\r
135 var uiStyle = CKEDITOR.document.getHead().append('style'),
\r
136 cssId = '#cke_' + editor.name.replace('.', '\\.');
\r
140 cssId + " .cke_wrapper",
\r
141 cssId + "_dialog .cke_dialog_contents",
\r
142 cssId + "_dialog a.cke_dialog_tab",
\r
143 cssId + "_dialog .cke_dialog_footer"
\r
145 var cssProperties = "background-color: $color !important;";
\r
147 uiStyle.setAttribute("type", "text/css");
\r
149 return ( this.setUiColor =
\r
152 var css = cssProperties.replace( '$color', color );
\r
153 editor.uiColor = color;
\r
155 if ( CKEDITOR.env.ie )
\r
156 uiStyle.$.styleSheet.cssText = cssSelectors + '{' + css + '}';
\r
157 else if ( CKEDITOR.env.webkit )
\r
158 uiStyle.$.sheet.addRule( cssSelectors, css );
\r
160 uiStyle.setHtml( cssSelectors + '{' + css + '}' );
\r
162 menuSetUiColor( color );
\r
167 // If the "menu" plugin is loaded, register the listeners.
\r
168 if ( CKEDITOR.menu )
\r
170 var old = CKEDITOR.menu.prototype.show;
\r
172 CKEDITOR.menu.prototype.show = function()
\r
174 old.apply( this, arguments );
\r
176 if ( !menuHead && editor == this.editor )
\r
179 menuHead = this._.element.getDocument().getHead();
\r
180 menuSetUiColor( editor.getUiColor() );
\r
185 // Apply UI color if specified in config.
\r
186 if ( editor.config.uiColor )
\r
187 editor.setUiColor( editor.config.uiColor );
\r
189 // Fix editor's width. HPadding and 100% width iframe issue.
\r
190 // if ( CKEDITOR.env.ie && CKEDITOR.env.quirks )
\r
192 // editor.on( 'mode', function( event )
\r
194 // var container = editor.getResizable();
\r
195 // editor.resize( container.$.offsetWidth-10, container.$.offsetHeight );
\r
196 // event.removeListener();
\r
200 // if ( CKEDITOR.env.ie && ( CKEDITOR.env.quirks || CKEDITOR.env.version < 7 ) )
\r
202 // editor.on( 'themeLoaded', function( event )
\r
204 // var toolbars = editor.container.getChild( [0, 0, 0, 0, 0, 0, 0] ).getChildren();
\r
205 // for ( var i = 0 ; i < toolbars.count() ; i++ )
\r
207 // var toolbar = toolbars.getItem( i );
\r
209 // var last = toolbar.getLast();
\r
210 // if ( !last || !last.getPrevious().hasClass( 'cke_rcombo' ) )
\r
213 // last.addClass( 'cke_toolbar_end_last' );
\r
221 if ( CKEDITOR.dialog )
\r
223 CKEDITOR.dialog.on( 'resize', function( evt )
\r
225 var data = evt.data,
\r
226 width = data.width,
\r
227 height = data.height,
\r
228 dialog = data.dialog,
\r
229 contents = dialog.parts.contents,
\r
230 standardsMode = !CKEDITOR.env.quirks;
\r
232 if ( data.skin != 'kama' )
\r
235 contents.setStyles(
\r
236 ( CKEDITOR.env.ie || ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 ) ) ? // IE && FF2
\r
238 width : width + 'px',
\r
239 height : height + 'px'
\r
243 // To avoid having scrollbars in the dialogs, we're
\r
244 // (for now) using the "min-xxx" properties, for
\r
245 // browsers which well support it (#3878).
\r
246 'min-width' : width + 'px',
\r
247 'min-height' : height + 'px'
\r
250 if ( !CKEDITOR.env.ie )
\r
253 // Fix the size of the elements which have flexible lengths.
\r
254 setTimeout( function()
\r
256 var body = contents.getParent(),
\r
257 innerDialog = body.getParent();
\r
260 var el = innerDialog.getChild( 2 );
\r
261 el.setStyle( 'width', ( body.$.offsetWidth ) + 'px' );
\r
264 el = innerDialog.getChild( 7 );
\r
265 el.setStyle( 'width', ( body.$.offsetWidth - 28 ) + 'px' );
\r
268 el = innerDialog.getChild( 4 );
\r
269 el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );
\r
272 el = innerDialog.getChild( 5 );
\r
273 el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );
\r
280 * The base user interface color to be used by the editor. Not all skins are
\r
281 * compatible with this setting.
\r
282 * @name CKEDITOR.config.uiColor
\r
284 * @default '' (empty)
\r
286 * // Using a color code.
\r
287 * config.uiColor = '#AADC6E';
\r
289 * // Using an HTML color name.
\r
290 * config.uiColor = 'Gold';
\r