_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  */