922bf19f8ee56e9942acf1b0599b03fede3d8c8f
[ckeditor.git] / _source / skins / kama / skin.js
1 /*
2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
4 */
5
6 CKEDITOR.skins.add( 'kama', (function()
7 {
8 var uiColorStylesheetId = 'cke_ui_color';
9
10 return {
11 editor : { css : [ 'editor.css' ] },
12 dialog : { css : [ 'dialog.css' ] },
13 richcombo : { canGroup: false },
14 templates : { css : [ 'templates.css' ] },
15 margins : [ 0, 0, 0, 0 ],
16 init : function( editor )
17 {
18 if ( editor.config.width && !isNaN( editor.config.width ) )
19 editor.config.width -= 12;
20
21 var uiColorMenus = [];
22 var uiColorRegex = /\$color/g;
23 var uiColorMenuCss = "/* UI Color Support */\
24 .cke_skin_kama .cke_menuitem .cke_icon_wrapper\
25 {\
26 background-color: $color !important;\
27 border-color: $color !important;\
28 }\
29 \
30 .cke_skin_kama .cke_menuitem a:hover .cke_icon_wrapper,\
31 .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\
32 .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\
33 {\
34 background-color: $color !important;\
35 border-color: $color !important;\
36 }\
37 \
38 .cke_skin_kama .cke_menuitem a:hover .cke_label,\
39 .cke_skin_kama .cke_menuitem a:focus .cke_label,\
40 .cke_skin_kama .cke_menuitem a:active .cke_label\
41 {\
42 background-color: $color !important;\
43 }\
44 \
45 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\
46 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\
47 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\
48 {\
49 background-color: transparent !important;\
50 }\
51 \
52 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\
53 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\
54 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_icon_wrapper\
55 {\
56 background-color: $color !important;\
57 border-color: $color !important;\
58 }\
59 \
60 .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\
61 {\
62 background-color: $color !important;\
63 border-color: $color !important;\
64 }\
65 \
66 .cke_skin_kama .cke_menuseparator\
67 {\
68 background-color: $color !important;\
69 }\
70 \
71 .cke_skin_kama .cke_menuitem a:hover,\
72 .cke_skin_kama .cke_menuitem a:focus,\
73 .cke_skin_kama .cke_menuitem a:active\
74 {\
75 background-color: $color !important;\
76 }";
77 // We have to split CSS declarations for webkit.
78 if ( CKEDITOR.env.webkit )
79 {
80 uiColorMenuCss = uiColorMenuCss.split( '}' ).slice( 0, -1 );
81 for ( var i = 0 ; i < uiColorMenuCss.length ; i++ )
82 uiColorMenuCss[ i ] = uiColorMenuCss[ i ].split( '{' );
83 }
84
85 function getStylesheet( document )
86 {
87 var node = document.getById( uiColorStylesheetId );
88 if ( !node )
89 {
90 node = document.getHead().append( 'style' );
91 node.setAttribute( "id", uiColorStylesheetId );
92 node.setAttribute( "type", "text/css" );
93 }
94 return node;
95 }
96
97 function updateStylesheets( styleNodes, styleContent, replace )
98 {
99 var r, i, content;
100 for ( var id = 0 ; id < styleNodes.length ; id++ )
101 {
102 if ( CKEDITOR.env.webkit )
103 {
104 for ( i = 0 ; i < styleContent.length ; i++ )
105 {
106 content = styleContent[ i ][ 1 ];
107 for ( r = 0 ; r < replace.length ; r++ )
108 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
109
110 styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );
111 }
112 }
113 else
114 {
115 content = styleContent;
116 for ( r = 0 ; r < replace.length ; r++ )
117 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
118
119 if ( CKEDITOR.env.ie )
120 styleNodes[ id ].$.styleSheet.cssText += content;
121 else
122 styleNodes[ id ].$.innerHTML += content;
123 }
124 }
125 }
126
127 var uiColorRegexp = /\$color/g;
128
129 CKEDITOR.tools.extend( editor,
130 {
131 uiColor: null,
132
133 getUiColor : function()
134 {
135 return this.uiColor;
136 },
137
138 setUiColor : function( color )
139 {
140 var cssContent,
141 uiStyle = getStylesheet( CKEDITOR.document ),
142 cssId = '.' + editor.id;
143
144 var cssSelectors =
145 [
146 cssId + " .cke_wrapper",
147 cssId + "_dialog .cke_dialog_contents",
148 cssId + "_dialog a.cke_dialog_tab",
149 cssId + "_dialog .cke_dialog_footer"
150 ].join( ',' );
151 var cssProperties = "background-color: $color !important;";
152
153 if ( CKEDITOR.env.webkit )
154 cssContent = [ [ cssSelectors, cssProperties ] ];
155 else
156 cssContent = cssSelectors + '{' + cssProperties + '}';
157
158 return ( this.setUiColor =
159 function( color )
160 {
161 var replace = [ [ uiColorRegexp, color ] ];
162 editor.uiColor = color;
163
164 // Update general style.
165 updateStylesheets( [ uiStyle ], cssContent, replace );
166
167 // Update menu styles.
168 updateStylesheets( uiColorMenus, uiColorMenuCss, replace );
169 })( color );
170 }
171 });
172
173 editor.on( 'menuShow', function( event )
174 {
175 var panel = event.data[ 0 ];
176 var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();
177
178 // Add stylesheet if missing.
179 if ( !iframe.getById( 'cke_ui_color' ) )
180 {
181 var node = getStylesheet( iframe );
182 uiColorMenus.push( node );
183
184 var color = editor.getUiColor();
185 // Set uiColor for new menu.
186 if ( color )
187 updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );
188 }
189 });
190
191 // Apply UI color if specified in config.
192 if ( editor.config.uiColor )
193 editor.setUiColor( editor.config.uiColor );
194 }
195 };
196 })() );
197
198 (function()
199 {
200 CKEDITOR.dialog ? dialogSetup() : CKEDITOR.on( 'dialogPluginReady', dialogSetup );
201
202 function dialogSetup()
203 {
204 CKEDITOR.dialog.on( 'resize', function( evt )
205 {
206 var data = evt.data,
207 width = data.width,
208 height = data.height,
209 dialog = data.dialog,
210 contents = dialog.parts.contents;
211
212 if ( data.skin != 'kama' )
213 return;
214
215 contents.setStyles(
216 {
217 width : width + 'px',
218 height : height + 'px'
219 });
220 });
221 }
222 })();
223
224 /**
225 * The base user interface color to be used by the editor. Not all skins are
226 * compatible with this setting.
227 * @name CKEDITOR.config.uiColor
228 * @type String
229 * @default '' (empty)
230 * @example
231 * // Using a color code.
232 * config.uiColor = '#AADC6E';
233 * @example
234 * // Using an HTML color name.
235 * config.uiColor = 'Gold';
236 */