library/custom_template/ckeditor/_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                 templates       : { css : [ 'templates.css' ] },
  14                 margins         : [ 0, 0, 0, 0 ],
  15                 init : function( editor )
  16                 {
  17                         if ( editor.config.width && !isNaN( editor.config.width ) )
  18                                 editor.config.width -= 12;
  19
  20                         var uiColorMenus = [];
  21                         var uiColorRegex = /\$color/g;
  22                         var uiColorMenuCss = "/* UI Color Support */\
  23 .cke_skin_kama .cke_menuitem .cke_icon_wrapper\
  24 {\
  25         background-color: $color !important;\
  26         border-color: $color !important;\
  27 }\
  28 \
  29 .cke_skin_kama .cke_menuitem a:hover .cke_icon_wrapper,\
  30 .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\
  31 .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\
  32 {\
  33         background-color: $color !important;\
  34         border-color: $color !important;\
  35 }\
  36 \
  37 .cke_skin_kama .cke_menuitem a:hover .cke_label,\
  38 .cke_skin_kama .cke_menuitem a:focus .cke_label,\
  39 .cke_skin_kama .cke_menuitem a:active .cke_label\
  40 {\
  41         background-color: $color !important;\
  42 }\
  43 \
  44 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\
  45 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\
  46 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\
  47 {\
  48         background-color: transparent !important;\
  49 }\
  50 \
  51 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\
  52 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\
  53 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_icon_wrapper\
  54 {\
  55         background-color: $color !important;\
  56         border-color: $color !important;\
  57 }\
  58 \
  59 .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\
  60 {\
  61         background-color: $color !important;\
  62         border-color: $color !important;\
  63 }\
  64 \
  65 .cke_skin_kama .cke_menuseparator\
  66 {\
  67         background-color: $color !important;\
  68 }\
  69 \
  70 .cke_skin_kama .cke_menuitem a:hover,\
  71 .cke_skin_kama .cke_menuitem a:focus,\
  72 .cke_skin_kama .cke_menuitem a:active\
  73 {\
  74         background-color: $color !important;\
  75 }";
  76                         // We have to split CSS declarations for webkit.
  77                         if ( CKEDITOR.env.webkit )
  78                         {
  79                                 uiColorMenuCss = uiColorMenuCss.split( '}' ).slice( 0, -1 );
  80                                 for ( var i = 0 ; i < uiColorMenuCss.length ; i++ )
  81                                         uiColorMenuCss[ i ] = uiColorMenuCss[ i ].split( '{' );
  82                         }
  83
  84                         function getStylesheet( document )
  85                         {
  86                                 var node = document.getById( uiColorStylesheetId );
  87                                 if ( !node )
  88                                 {
  89                                         node = document.getHead().append( 'style' );
  90                                         node.setAttribute( "id", uiColorStylesheetId );
  91                                         node.setAttribute( "type", "text/css" );
  92                                 }
  93                                 return node;
  94                         }
  95
  96                         function updateStylesheets( styleNodes, styleContent, replace )
  97                         {
  98                                 var r, i, content;
  99                                 for ( var id  = 0 ; id < styleNodes.length ; id++ )
 100                                 {
 101                                         if ( CKEDITOR.env.webkit )
 102                                         {
 103                                                 for ( i = 0 ; i < styleContent.length ; i++ )
 104                                                 {
 105                                                         content = styleContent[ i ][ 1 ];
 106                                                         for ( r  = 0 ; r < replace.length ; r++ )
 107                                                                 content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
 108
 109                                                         styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );
 110                                                 }
 111                                         }
 112                                         else
 113                                         {
 114                                                 content = styleContent;
 115                                                 for ( r  = 0 ; r < replace.length ; r++ )
 116                                                         content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );
 117
 118                                                 if ( CKEDITOR.env.ie )
 119                                                         styleNodes[ id ].$.styleSheet.cssText += content;
 120                                                 else
 121                                                         styleNodes[ id ].$.innerHTML += content;
 122                                         }
 123                                 }
 124                         }
 125
 126                         var uiColorRegexp = /\$color/g;
 127
 128                         CKEDITOR.tools.extend( editor,
 129                         {
 130                                 uiColor: null,
 131
 132                                 getUiColor : function()
 133                                 {
 134                                         return this.uiColor;
 135                                 },
 136
 137                                 setUiColor : function( color )
 138                                 {
 139                                         var cssContent,
 140                                                 uiStyle = getStylesheet( CKEDITOR.document ),
 141                                                 cssId = '.' + editor.id;
 142
 143                                         var cssSelectors =
 144                                                 [
 145                                                         cssId + " .cke_wrapper",
 146                                                         cssId + "_dialog .cke_dialog_contents",
 147                                                         cssId + "_dialog a.cke_dialog_tab",
 148                                                         cssId + "_dialog .cke_dialog_footer"
 149                                                 ].join( ',' );
 150                                         var cssProperties = "background-color: $color !important;";
 151
 152                                         if ( CKEDITOR.env.webkit )
 153                                                 cssContent = [ [ cssSelectors, cssProperties ] ];
 154                                         else
 155                                                 cssContent = cssSelectors + '{' + cssProperties + '}';
 156
 157                                         return ( this.setUiColor =
 158                                                 function( color )
 159                                                 {
 160                                                         var replace = [ [ uiColorRegexp, color ] ];
 161                                                         editor.uiColor = color;
 162
 163                                                         // Update general style.
 164                                                         updateStylesheets( [ uiStyle ], cssContent, replace );
 165
 166                                                         // Update menu styles.
 167                                                         updateStylesheets( uiColorMenus, uiColorMenuCss, replace );
 168                                                 })( color );
 169                                 }
 170                         });
 171
 172                         editor.on( 'menuShow', function( event )
 173                         {
 174                                 var panel = event.data[ 0 ];
 175                                 var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();
 176
 177                                 // Add stylesheet if missing.
 178                                 if ( !iframe.getById( 'cke_ui_color' ) )
 179                                 {
 180                                         var node = getStylesheet( iframe );
 181                                         uiColorMenus.push( node );
 182
 183                                         var color = editor.getUiColor();
 184                                         // Set uiColor for new menu.
 185                                         if ( color )
 186                                                 updateStylesheets( [ node ], uiColorMenuCss, [ [ uiColorRegexp, color ] ] );
 187                                 }
 188                         });
 189
 190                         // Apply UI color if specified in config.
 191                         if ( editor.config.uiColor )
 192                                 editor.setUiColor( editor.config.uiColor );
 193                 }
 194         };
 195 })() );
 196
 197 (function()
 198 {
 199         CKEDITOR.dialog ? dialogSetup() : CKEDITOR.on( 'dialogPluginReady', dialogSetup );
 200
 201         function dialogSetup()
 202         {
 203                 CKEDITOR.dialog.on( 'resize', function( evt )
 204                         {
 205                                 var data = evt.data,
 206                                         width = data.width,
 207                                         height = data.height,
 208                                         dialog = data.dialog,
 209                                         contents = dialog.parts.contents;
 210
 211                                 if ( data.skin != 'kama' )
 212                                         return;
 213
 214                                 contents.setStyles(
 215                                         {
 216                                                 width : width + 'px',
 217                                                 height : height + 'px'
 218                                         });
 219                         });
 220         }
 221 })();
 222
 223 /**
 224  * The base user interface color to be used by the editor. Not all skins are
 225  * compatible with this setting.
 226  * @name CKEDITOR.config.uiColor
 227  * @type String
 228  * @default '' (empty)
 229  * @example
 230  * // Using a color code.
 231  * config.uiColor = '#AADC6E';
 232  * @example
 233  * // Using an HTML color name.
 234  * config.uiColor = 'Gold';
 235  */