1 /*
  2 Copyright (c) 2003-2012, 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  */
237