_source/skins/kama/skin.js

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