JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
07c7bc4cde24e857bd7fa045fb4ccfe9242fd08c
[ckeditor.git] / _source / skins / kama / skin.js
1 /*\r
2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
4 */\r
5 \r
6 CKEDITOR.skins.add( 'kama', (function()\r
7 {\r
8         var uiColorStylesheetId = 'cke_ui_color';\r
9 \r
10         return {\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
16                 {\r
17                         if ( editor.config.width && !isNaN( editor.config.width ) )\r
18                                 editor.config.width -= 12;\r
19 \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
24 {\\r
25         background-color: $color !important;\\r
26         border-color: $color !important;\\r
27 }\\r
28 \\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
32 {\\r
33         background-color: $color !important;\\r
34         border-color: $color !important;\\r
35 }\\r
36 \\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
40 {\\r
41         background-color: $color !important;\\r
42 }\\r
43 \\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
47 {\\r
48         background-color: transparent !important;\\r
49 }\\r
50 \\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
54 {\\r
55         background-color: $color !important;\\r
56         border-color: $color !important;\\r
57 }\\r
58 \\r
59 .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\\r
60 {\\r
61         background-color: $color !important;\\r
62         border-color: $color !important;\\r
63 }\\r
64 \\r
65 .cke_skin_kama .cke_menuseparator\\r
66 {\\r
67         background-color: $color !important;\\r
68 }\\r
69 \\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
73 {\\r
74         background-color: $color !important;\\r
75 }";\r
76                         // We have to split CSS declarations for webkit.\r
77                         if ( CKEDITOR.env.webkit )\r
78                         {\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
82                         }\r
83 \r
84                         function getStylesheet( document )\r
85                         {\r
86                                 var node = document.getById( uiColorStylesheetId );\r
87                                 if ( !node )\r
88                                 {\r
89                                         node = document.getHead().append( 'style' );\r
90                                         node.setAttribute( "id", uiColorStylesheetId );\r
91                                         node.setAttribute( "type", "text/css" );\r
92                                 }\r
93                                 return node;\r
94                         }\r
95 \r
96                         function updateStylesheets( styleNodes, styleContent, replace )\r
97                         {\r
98                                 var r, i, content;\r
99                                 for ( var id  = 0 ; id < styleNodes.length ; id++ )\r
100                                 {\r
101                                         if ( CKEDITOR.env.webkit )\r
102                                         {\r
103                                                 for ( i = 0 ; i < styleContent.length ; i++ )\r
104                                                 {\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
108 \r
109                                                         styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );\r
110                                                 }\r
111                                         }\r
112                                         else\r
113                                         {\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
117 \r
118                                                 if ( CKEDITOR.env.ie )\r
119                                                         styleNodes[ id ].$.styleSheet.cssText += content;\r
120                                                 else\r
121                                                         styleNodes[ id ].$.innerHTML += content;\r
122                                         }\r
123                                 }\r
124                         }\r
125 \r
126                         var uiColorRegexp = /\$color/g;\r
127 \r
128                         CKEDITOR.tools.extend( editor,\r
129                         {\r
130                                 uiColor: null,\r
131 \r
132                                 getUiColor : function()\r
133                                 {\r
134                                         return this.uiColor;\r
135                                 },\r
136 \r
137                                 setUiColor : function( color )\r
138                                 {\r
139                                         var cssContent,\r
140                                                 uiStyle = getStylesheet( CKEDITOR.document ),\r
141                                                 cssId = '.' + editor.id;\r
142 \r
143                                         var cssSelectors =\r
144                                                 [\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
149                                                 ].join( ',' );\r
150                                         var cssProperties = "background-color: $color !important;";\r
151 \r
152                                         if ( CKEDITOR.env.webkit )\r
153                                                 cssContent = [ [ cssSelectors, cssProperties ] ];\r
154                                         else\r
155                                                 cssContent = cssSelectors + '{' + cssProperties + '}';\r
156 \r
157                                         return ( this.setUiColor =\r
158                                                 function( color )\r
159                                                 {\r
160                                                         var replace = [ [ uiColorRegexp, color ] ];\r
161                                                         editor.uiColor = color;\r
162 \r
163                                                         // Update general style.\r
164                                                         updateStylesheets( [ uiStyle ], cssContent, replace );\r
165 \r
166                                                         // Update menu styles.\r
167                                                         updateStylesheets( uiColorMenus, uiColorMenuCss, replace );\r
168                                                 })( color );\r
169                                 }\r
170                         });\r
171 \r
172                         editor.on( 'menuShow', function( event )\r
173                         {\r
174                                 var panel = event.data[ 0 ];\r
175                                 var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();\r
176 \r
177                                 // Add stylesheet if missing.\r
178                                 if ( !iframe.getById( 'cke_ui_color' ) )\r
179                                 {\r
180                                         var node = getStylesheet( iframe );\r
181                                         uiColorMenus.push( node );\r
182 \r
183                                         var color = editor.getUiColor();\r
184                                         // Set uiColor for new menu.\r
185                                         if ( color )\r
186                                                 updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );\r
187                                 }\r
188                         });\r
189 \r
190                         // Apply UI color if specified in config.\r
191                         if ( editor.config.uiColor )\r
192                                 editor.setUiColor( editor.config.uiColor );\r
193                 }\r
194         };\r
195 })() );\r
196 \r
197 (function()\r
198 {\r
199         CKEDITOR.dialog ? dialogSetup() : CKEDITOR.on( 'dialogPluginReady', dialogSetup );\r
200 \r
201         function dialogSetup()\r
202         {\r
203                 CKEDITOR.dialog.on( 'resize', function( evt )\r
204                         {\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
210 \r
211                                 if ( data.skin != 'kama' )\r
212                                         return;\r
213 \r
214                                 contents.setStyles(\r
215                                         {\r
216                                                 width : width + 'px',\r
217                                                 height : height + 'px'\r
218                                         });\r
219                         });\r
220         }\r
221 })();\r
222 \r
223 /**\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
227  * @type String\r
228  * @default '' (empty)\r
229  * @example\r
230  * // Using a color code.\r
231  * config.uiColor = '#AADC6E';\r
232  * @example\r
233  * // Using an HTML color name.\r
234  * config.uiColor = 'Gold';\r
235  */\r