_source/skins/kama/skin.js

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