[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, 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 preload = [],
   9          uiColorStylesheetId = 'cke_ui_color';
  10  
  11      if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
  12      {
  13          // For IE6, we need to preload some images, otherwhise they will be

  14          // downloaded several times (CSS background bug).

  15          preload.push( 'icons.png', 'images/sprites_ie6.png', 'images/dialog_sides.gif' );
  16      }
  17  
  18      return {
  19          preload        : preload,
  20          editor        : { css : [ 'editor.css' ] },
  21          dialog        : { css : [ 'dialog.css' ] },
  22          templates    : { css : [ 'templates.css' ] },
  23          margins        : [ 0, 0, 0, 0 ],
  24          init : function( editor )
  25          {
  26              if ( editor.config.width && !isNaN( editor.config.width ) )
  27                  editor.config.width -= 12;
  28  
  29              var uiColorMenus = [];
  30              var uiColorRegex = /\$color/g;
  31              var uiColorMenuCss = "/* UI Color Support */\
  32  .cke_skin_kama .cke_menuitem .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_icon_wrapper,\
  39  .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\
  40  .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\
  41  {\
  42      background-color: $color !important;\
  43      border-color: $color !important;\
  44  }\
  45  \
  46  .cke_skin_kama .cke_menuitem a:hover .cke_label,\
  47  .cke_skin_kama .cke_menuitem a:focus .cke_label,\
  48  .cke_skin_kama .cke_menuitem a:active .cke_label\
  49  {\
  50      background-color: $color !important;\
  51  }\
  52  \
  53  .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\
  54  .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\
  55  .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\
  56  {\
  57      background-color: transparent !important;\
  58  }\
  59  \
  60  .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\
  61  .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\
  62  .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_icon_wrapper\
  63  {\
  64      background-color: $color !important;\
  65      border-color: $color !important;\
  66  }\
  67  \
  68  .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\
  69  {\
  70      background-color: $color !important;\
  71      border-color: $color !important;\
  72  }\
  73  \
  74  .cke_skin_kama .cke_menuseparator\
  75  {\
  76      background-color: $color !important;\
  77  }\
  78  \
  79  .cke_skin_kama .cke_menuitem a:hover,\
  80  .cke_skin_kama .cke_menuitem a:focus,\
  81  .cke_skin_kama .cke_menuitem a:active\
  82  {\
  83      background-color: $color !important;\
  84  }";
  85              // We have to split CSS declarations for webkit.

  86              if ( CKEDITOR.env.webkit )
  87              {
  88                  uiColorMenuCss = uiColorMenuCss.split( '}' ).slice( 0, -1 );
  89                  for ( var i = 0 ; i < uiColorMenuCss.length ; i++ )
  90                      uiColorMenuCss[ i ] = uiColorMenuCss[ i ].split( '{' );
  91              }
  92  
  93  			function getStylesheet( document )
  94              {
  95                  var node = document.getById( uiColorStylesheetId );
  96                  if ( !node )
  97                  {
  98                      node = document.getHead().append( 'style' );
  99                      node.setAttribute( "id", uiColorStylesheetId );
 100                      node.setAttribute( "type", "text/css" );
 101                  }
 102                  return node;
 103              }
 104  
 105  			function updateStylesheets( styleNodes, styleContent, replace )
 106              {
 107                  var r, i, content;
 108                  for ( var id  = 0 ; id < styleNodes.length ; id++ )
 109                  {
 110                      if ( CKEDITOR.env.webkit )
 111                      {
 112                          for ( i = 0 ; i < styleContent.length ; i++ )
 113                          {
 114                              content = styleContent[ i ][ 1 ];
 115                              for ( r  = 0 ; r < replace.length ; r++ )
 116                                  content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
 117  
 118                              styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );
 119                          }
 120                      }
 121                      else
 122                      {
 123                          content = styleContent;
 124                          for ( r  = 0 ; r < replace.length ; r++ )
 125                              content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
 126  
 127                          if ( CKEDITOR.env.ie )
 128                              styleNodes[ id ].$.styleSheet.cssText += content;
 129                          else
 130                              styleNodes[ id ].$.innerHTML += content;
 131                      }
 132                  }
 133              }
 134  
 135              var uiColorRegexp = /\$color/g;
 136  
 137              CKEDITOR.tools.extend( editor,
 138              {
 139                  uiColor: null,
 140  
 141                  getUiColor : function()
 142                  {
 143                      return this.uiColor;
 144                  },
 145  
 146                  setUiColor : function( color )
 147                  {
 148                      var cssContent,
 149                          uiStyle = getStylesheet( CKEDITOR.document ),
 150                          cssId = '.cke_editor_' + CKEDITOR.tools.escapeCssSelector( editor.name );
 151  
 152                      var cssSelectors =
 153                          [
 154                              cssId + " .cke_wrapper",
 155                              cssId + "_dialog .cke_dialog_contents",
 156                              cssId + "_dialog a.cke_dialog_tab",
 157                              cssId + "_dialog .cke_dialog_footer"
 158                          ].join( ',' );
 159                      var cssProperties = "background-color: $color !important;";
 160  
 161                      if ( CKEDITOR.env.webkit )
 162                          cssContent = [ [ cssSelectors, cssProperties ] ];
 163                      else
 164                          cssContent = cssSelectors + '{' + cssProperties + '}';
 165  
 166                      return ( this.setUiColor =
 167                          function( color )
 168                          {
 169                              var replace = [ [ uiColorRegexp, color ] ];
 170                              editor.uiColor = color;
 171  
 172                              // Update general style.

 173                              updateStylesheets( [ uiStyle ], cssContent, replace );
 174  
 175                              // Update menu styles.

 176                              updateStylesheets( uiColorMenus, uiColorMenuCss, replace );
 177                          })( color );
 178                  }
 179              });
 180  
 181              editor.on( 'menuShow', function( event )
 182              {
 183                  var panel = event.data[ 0 ];
 184                  var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();
 185  
 186                  // Add stylesheet if missing.

 187                  if ( !iframe.getById( 'cke_ui_color' ) )
 188                  {
 189                      var node = getStylesheet( iframe );
 190                      uiColorMenus.push( node );
 191  
 192                      var color = editor.getUiColor();
 193                      // Set uiColor for new menu.

 194                      if ( color )
 195                          updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );
 196                  }
 197              });
 198  
 199              // Apply UI color if specified in config.

 200              if ( editor.config.uiColor )
 201                  editor.setUiColor( editor.config.uiColor );
 202          }
 203      };
 204  })() );
 205  
 206  (function()
 207  {
 208      CKEDITOR.dialog ? dialogSetup() : CKEDITOR.on( 'dialogPluginReady', dialogSetup );
 209  
 210  	function dialogSetup()
 211      {
 212          CKEDITOR.dialog.on( 'resize', function( evt )
 213              {
 214                  var data = evt.data,
 215                      width = data.width,
 216                      height = data.height,
 217                      dialog = data.dialog,
 218                      contents = dialog.parts.contents;
 219  
 220                  if ( data.skin != 'kama' )
 221                      return;
 222  
 223                  contents.setStyles(
 224                      {
 225                          width : width + 'px',
 226                          height : height + 'px'
 227                      });
 228  
 229                  // Fix the size of the elements which have flexible lengths.

 230                  setTimeout( function()
 231                      {
 232                          var innerDialog = dialog.parts.dialog.getChild( [ 0, 0, 0 ] ),
 233                              body = innerDialog.getChild( 0 );
 234  
 235                          // tc

 236                          var el = innerDialog.getChild( 2 );
 237                          el.setStyle( 'width', ( body.$.offsetWidth ) + 'px' );
 238  
 239                          // bc

 240                          el = innerDialog.getChild( 7 );
 241                          el.setStyle( 'width', ( body.$.offsetWidth - 28 ) + 'px' );
 242  
 243                          // ml

 244                          el = innerDialog.getChild( 4 );
 245                          el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );
 246  
 247                          // mr

 248                          el = innerDialog.getChild( 5 );
 249                          el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );
 250                      },
 251                      100 );
 252              });
 253      }
 254  })();
 255  
 256  /**

 257   * The base user interface color to be used by the editor. Not all skins are

 258   * compatible with this setting.

 259   * @name CKEDITOR.config.uiColor

 260   * @type String

 261   * @default '' (empty)

 262   * @example

 263   * // Using a color code.

 264   * config.uiColor = '#AADC6E';

 265   * @example

 266   * // Using an HTML color name.

 267   * config.uiColor = 'Gold';

 268   */