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