_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 menuHead;\r
  29                         function menuSetUiColor( color )\r
  30                         {\r
  31                                 if ( !menuHead )\r
  32                                         return null;\r
  33 \r
  34                                 var uiStyle = menuHead.append('style');\r
  35 \r
  36                                 var cssSrc = "/* UI Color Support */\\r
  37 .cke_skin_kama .cke_menuitem .cke_icon_wrapper\\r
  38 {\\r
  39         background-color: $color !important;\\r
  40         border-color: $color !important;\\r
  41 }\\r
  42 \\r
  43 .cke_skin_kama .cke_menuitem a:hover .cke_icon_wrapper,\\r
  44 .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\\r
  45 .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\\r
  46 {\\r
  47         background-color: $color !important;\\r
  48         border-color: $color !important;\\r
  49 }\\r
  50 \\r
  51 .cke_skin_kama .cke_menuitem a:hover .cke_label,\\r
  52 .cke_skin_kama .cke_menuitem a:focus .cke_label,\\r
  53 .cke_skin_kama .cke_menuitem a:active .cke_label\\r
  54 {\\r
  55         background-color: $color !important;\\r
  56 }\\r
  57 \\r
  58 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\\r
  59 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\\r
  60 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\\r
  61 {\\r
  62         background-color: transparent !important;\\r
  63 }\\r
  64 \\r
  65 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\\r
  66 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\\r
  67 .cke_skin_kama .cke_menuitem a.cke_disabled:active .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_menuitem a.cke_disabled .cke_icon_wrapper\\r
  74 {\\r
  75         background-color: $color !important;\\r
  76         border-color: $color !important;\\r
  77 }\\r
  78 \\r
  79 .cke_skin_kama .cke_menuseparator\\r
  80 {\\r
  81         background-color: $color !important;\\r
  82 }\\r
  83 \\r
  84 .cke_skin_kama .cke_menuitem a:hover,\\r
  85 .cke_skin_kama .cke_menuitem a:focus,\\r
  86 .cke_skin_kama .cke_menuitem a:active\\r
  87 {\\r
  88         background-color: $color !important;\\r
  89 }";\r
  90 \r
  91                                 uiStyle.setAttribute( "type", "text/css" );\r
  92                                 var regex = /\$color/g;\r
  93 \r
  94                                 // We have to split CSS declarations for webkit.\r
  95                                 if ( CKEDITOR.env.webkit )\r
  96                                 {\r
  97                                         cssSrc = cssSrc.split( '}' ).slice( 0, -1 );\r
  98                                         for ( var i in cssSrc )\r
  99                                                         cssSrc[ i ] = cssSrc[ i ].split( '{' );\r
 100                                 }\r
 101 \r
 102                                 return ( menuSetUiColor =\r
 103                                         function( color )\r
 104                                         {\r
 105                                                 if ( CKEDITOR.env.webkit )\r
 106                                                 {\r
 107                                                         for ( var i in cssSrc )\r
 108                                                                 uiStyle.$.sheet.addRule(\r
 109                                                                         cssSrc[ i ][ 0 ], cssSrc[ i ][ 1 ].replace( regex, color )\r
 110                                                                 );\r
 111                                                 }\r
 112                                                 else\r
 113                                                 {\r
 114                                                         var css = cssSrc.replace( regex, color );\r
 115 \r
 116                                                         if ( CKEDITOR.env.ie )\r
 117                                                                 uiStyle.$.styleSheet.cssText = css;\r
 118                                                         else\r
 119                                                                 uiStyle.setHtml( css );\r
 120                                                 }\r
 121                                         })( color );\r
 122                         }\r
 123 \r
 124                         CKEDITOR.tools.extend( editor,\r
 125                         {\r
 126                                 uiColor: null,\r
 127 \r
 128                                 getUiColor : function()\r
 129                                 {\r
 130                                         return this.uiColor;\r
 131                                 },\r
 132 \r
 133                                 setUiColor : function( color )\r
 134                                 {\r
 135                                         var uiStyle = CKEDITOR.document.getHead().append('style'),\r
 136                                                 cssId = '#cke_' + editor.name.replace('.', '\\.');\r
 137 \r
 138                                         var cssSelectors =\r
 139                                                 [\r
 140                                                         cssId + " .cke_wrapper",\r
 141                                                         cssId + "_dialog .cke_dialog_contents",\r
 142                                                         cssId + "_dialog a.cke_dialog_tab",\r
 143                                                         cssId + "_dialog .cke_dialog_footer"\r
 144                                                 ].join( ',' );\r
 145                                         var cssProperties = "background-color: $color !important;";\r
 146 \r
 147                                         uiStyle.setAttribute("type", "text/css");\r
 148 \r
 149                                         return ( this.setUiColor =\r
 150                                                 function( color )\r
 151                                                 {\r
 152                                                         var css = cssProperties.replace( '$color', color );\r
 153                                                         editor.uiColor = color;\r
 154 \r
 155                                                         if ( CKEDITOR.env.ie )\r
 156                                                                 uiStyle.$.styleSheet.cssText = cssSelectors + '{' + css + '}';\r
 157                                                         else if ( CKEDITOR.env.webkit )\r
 158                                                                 uiStyle.$.sheet.addRule( cssSelectors, css );\r
 159                                                         else\r
 160                                                                 uiStyle.setHtml( cssSelectors + '{' + css + '}' );\r
 161 \r
 162                                                         menuSetUiColor( color );\r
 163                                                 })( color );\r
 164                                 }\r
 165                         });\r
 166 \r
 167                         // If the "menu" plugin is loaded, register the listeners.\r
 168                         if ( CKEDITOR.menu )\r
 169                         {\r
 170                                 var old = CKEDITOR.menu.prototype.show;\r
 171 \r
 172                                 CKEDITOR.menu.prototype.show = function()\r
 173                                 {\r
 174                                         old.apply( this, arguments );\r
 175 \r
 176                                         if ( !menuHead && editor == this.editor )\r
 177                                         {\r
 178                                                 // Save reference.\r
 179                                                 menuHead = this._.element.getDocument().getHead();\r
 180                                                 menuSetUiColor( editor.getUiColor() );\r
 181                                         }\r
 182                                 };\r
 183                         }\r
 184 \r
 185                         // Apply UI color if specified in config.\r
 186                         if ( editor.config.uiColor )\r
 187                                 editor.setUiColor( editor.config.uiColor );\r
 188 \r
 189                         // Fix editor's width. HPadding and 100% width iframe issue.\r
 190 //                      if ( CKEDITOR.env.ie && CKEDITOR.env.quirks )\r
 191 //                      {\r
 192 //                              editor.on( 'mode', function( event )\r
 193 //                              {\r
 194 //                                      var container = editor.getResizable();\r
 195 //                                      editor.resize( container.$.offsetWidth-10, container.$.offsetHeight );\r
 196 //                                      event.removeListener();\r
 197 //                              });\r
 198 //                      }\r
 199 \r
 200 //                      if ( CKEDITOR.env.ie && ( CKEDITOR.env.quirks || CKEDITOR.env.version < 7 ) )\r
 201 //                      {\r
 202 //                              editor.on( 'themeLoaded', function( event )\r
 203 //                              {\r
 204 //                                      var toolbars = editor.container.getChild( [0, 0, 0, 0, 0, 0, 0] ).getChildren();\r
 205 //                                      for ( var i = 0 ; i < toolbars.count() ; i++ )\r
 206 //                                      {\r
 207 //                                              var toolbar = toolbars.getItem( i );\r
 208 \r
 209 //                                              var last = toolbar.getLast();\r
 210 //                                              if ( !last || !last.getPrevious().hasClass( 'cke_rcombo' ) )\r
 211 //                                                      continue;\r
 212 //\r
 213 //                                              last.addClass( 'cke_toolbar_end_last' );\r
 214 //                                      }\r
 215 //                              });\r
 216 //                      }\r
 217                 }\r
 218         };\r
 219 })() );\r
 220 \r
 221 if ( CKEDITOR.dialog )\r
 222 {\r
 223         CKEDITOR.dialog.on( 'resize', function( evt )\r
 224                 {\r
 225                         var data = evt.data,\r
 226                                 width = data.width,\r
 227                                 height = data.height,\r
 228                                 dialog = data.dialog,\r
 229                                 contents = dialog.parts.contents,\r
 230                                 standardsMode = !CKEDITOR.env.quirks;\r
 231 \r
 232                         if ( data.skin != 'kama' )\r
 233                                 return;\r
 234 \r
 235                         contents.setStyles(\r
 236                                 ( CKEDITOR.env.ie || ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 ) ) ?         // IE && FF2\r
 237                                         {\r
 238                                                 width : width + 'px',\r
 239                                                 height : height + 'px'\r
 240                                         }\r
 241                                 :\r
 242                                         {\r
 243                                                 // To avoid having scrollbars in the dialogs, we're\r
 244                                                 // (for now) using the "min-xxx" properties, for\r
 245                                                 // browsers which well support it (#3878).\r
 246                                                 'min-width' : width + 'px',\r
 247                                                 'min-height' : height + 'px'\r
 248                                         });\r
 249 \r
 250                         if ( !CKEDITOR.env.ie )\r
 251                                 return;\r
 252 \r
 253                         // Fix the size of the elements which have flexible lengths.\r
 254                         setTimeout( function()\r
 255                                 {\r
 256                                         var body = contents.getParent(),\r
 257                                                 innerDialog = body.getParent();\r
 258 \r
 259                                         // tc\r
 260                                         var el = innerDialog.getChild( 2 );\r
 261                                         el.setStyle( 'width', ( body.$.offsetWidth ) + 'px' );\r
 262 \r
 263                                         // bc\r
 264                                         el = innerDialog.getChild( 7 );\r
 265                                         el.setStyle( 'width', ( body.$.offsetWidth - 28 ) + 'px' );\r
 266 \r
 267                                         // ml\r
 268                                         el = innerDialog.getChild( 4 );\r
 269                                         el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );\r
 270 \r
 271                                         // mr\r
 272                                         el = innerDialog.getChild( 5 );\r
 273                                         el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );\r
 274                                 },\r
 275                                 100 );\r
 276                 });\r
 277 }\r
 278 \r
 279 /**\r
 280  * The base user interface color to be used by the editor. Not all skins are\r
 281  * compatible with this setting.\r
 282  * @name CKEDITOR.config.uiColor\r
 283  * @type String\r
 284  * @default '' (empty)\r
 285  * @example\r
 286  * // Using a color code.\r
 287  * config.uiColor = '#AADC6E';\r
 288  * @example\r
 289  * // Using an HTML color name.\r
 290  * config.uiColor = 'Gold';\r
 291  */\r