_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 preload = [],\r
   9                 uiColorStylesheetId = 'cke_ui_color';\r
  10 \r
  11         if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )\r
  12         {\r
  13                 // For IE6, we need to preload some images, otherwhise they will be\r
  14                 // downloaded several times (CSS background bug).\r
  15                 preload.push( 'icons.png', 'images/sprites_ie6.png', 'images/dialog_sides.gif' );\r
  16         }\r
  17 \r
  18         return {\r
  19                 preload         : preload,\r
  20                 editor          : { css : [ 'editor.css' ] },\r
  21                 dialog          : { css : [ 'dialog.css' ] },\r
  22                 templates       : { css : [ 'templates.css' ] },\r
  23                 margins         : [ 0, 0, 0, 0 ],\r
  24                 init : function( editor )\r
  25                 {\r
  26                         if ( editor.config.width && !isNaN( editor.config.width ) )\r
  27                                 editor.config.width -= 12;\r
  28 \r
  29                         var uiColorMenus = [];\r
  30                         var uiColorRegex = /\$color/g;\r
  31                         var uiColorMenuCss = "/* UI Color Support */\\r
  32 .cke_skin_kama .cke_menuitem .cke_icon_wrapper\\r
  33 {\\r
  34         background-color: $color !important;\\r
  35         border-color: $color !important;\\r
  36 }\\r
  37 \\r
  38 .cke_skin_kama .cke_menuitem a:hover .cke_icon_wrapper,\\r
  39 .cke_skin_kama .cke_menuitem a:focus .cke_icon_wrapper,\\r
  40 .cke_skin_kama .cke_menuitem a:active .cke_icon_wrapper\\r
  41 {\\r
  42         background-color: $color !important;\\r
  43         border-color: $color !important;\\r
  44 }\\r
  45 \\r
  46 .cke_skin_kama .cke_menuitem a:hover .cke_label,\\r
  47 .cke_skin_kama .cke_menuitem a:focus .cke_label,\\r
  48 .cke_skin_kama .cke_menuitem a:active .cke_label\\r
  49 {\\r
  50         background-color: $color !important;\\r
  51 }\\r
  52 \\r
  53 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_label,\\r
  54 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_label,\\r
  55 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_label\\r
  56 {\\r
  57         background-color: transparent !important;\\r
  58 }\\r
  59 \\r
  60 .cke_skin_kama .cke_menuitem a.cke_disabled:hover .cke_icon_wrapper,\\r
  61 .cke_skin_kama .cke_menuitem a.cke_disabled:focus .cke_icon_wrapper,\\r
  62 .cke_skin_kama .cke_menuitem a.cke_disabled:active .cke_icon_wrapper\\r
  63 {\\r
  64         background-color: $color !important;\\r
  65         border-color: $color !important;\\r
  66 }\\r
  67 \\r
  68 .cke_skin_kama .cke_menuitem a.cke_disabled .cke_icon_wrapper\\r
  69 {\\r
  70         background-color: $color !important;\\r
  71         border-color: $color !important;\\r
  72 }\\r
  73 \\r
  74 .cke_skin_kama .cke_menuseparator\\r
  75 {\\r
  76         background-color: $color !important;\\r
  77 }\\r
  78 \\r
  79 .cke_skin_kama .cke_menuitem a:hover,\\r
  80 .cke_skin_kama .cke_menuitem a:focus,\\r
  81 .cke_skin_kama .cke_menuitem a:active\\r
  82 {\\r
  83         background-color: $color !important;\\r
  84 }";\r
  85                         // We have to split CSS declarations for webkit.\r
  86                         if ( CKEDITOR.env.webkit )\r
  87                         {\r
  88                                 uiColorMenuCss = uiColorMenuCss.split( '}' ).slice( 0, -1 );\r
  89                                 for ( var i = 0 ; i < uiColorMenuCss.length ; i++ )\r
  90                                         uiColorMenuCss[ i ] = uiColorMenuCss[ i ].split( '{' );\r
  91                         }\r
  92 \r
  93                         function getStylesheet( document )\r
  94                         {\r
  95                                 var node = document.getById( uiColorStylesheetId );\r
  96                                 if( !node )\r
  97                                 {\r
  98                                         node = document.getHead().append( 'style' );\r
  99                                         node.setAttribute( "id", uiColorStylesheetId );\r
 100                                         node.setAttribute( "type", "text/css" );\r
 101                                 }\r
 102                                 return node;\r
 103                         }\r
 104 \r
 105                         function updateStylesheets( styleNodes, styleContent, replace )\r
 106                         {\r
 107                                 var r, i, content;\r
 108                                 for ( var id  = 0 ; id < styleNodes.length ; id++ )\r
 109                                 {\r
 110                                         if ( CKEDITOR.env.webkit )\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 ].$.innerHTML += 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 = getStylesheet( CKEDITOR.document ),\r
 150                                                 cssId = '.cke_editor_' + CKEDITOR.tools.escapeCssSelector( editor.name );\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 = getStylesheet( 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 (function()\r
 207 {\r
 208         CKEDITOR.dialog ? dialogSetup() : CKEDITOR.on( 'dialogPluginReady', dialogSetup );\r
 209 \r
 210         function dialogSetup()\r
 211         {\r
 212                 CKEDITOR.dialog.on( 'resize', function( evt )\r
 213                         {\r
 214                                 var data = evt.data,\r
 215                                         width = data.width,\r
 216                                         height = data.height,\r
 217                                         dialog = data.dialog,\r
 218                                         contents = dialog.parts.contents;\r
 219 \r
 220                                 if ( data.skin != 'kama' )\r
 221                                         return;\r
 222 \r
 223                                 contents.setStyles(\r
 224                                         {\r
 225                                                 width : width + 'px',\r
 226                                                 height : height + 'px'\r
 227                                         });\r
 228 \r
 229                                 // Fix the size of the elements which have flexible lengths.\r
 230                                 setTimeout( function()\r
 231                                         {\r
 232                                                 var innerDialog = dialog.parts.dialog.getChild( [ 0, 0, 0 ] ),\r
 233                                                         body = innerDialog.getChild( 0 );\r
 234 \r
 235                                                 // tc\r
 236                                                 var el = innerDialog.getChild( 2 );\r
 237                                                 el.setStyle( 'width', ( body.$.offsetWidth ) + 'px' );\r
 238 \r
 239                                                 // bc\r
 240                                                 el = innerDialog.getChild( 7 );\r
 241                                                 el.setStyle( 'width', ( body.$.offsetWidth - 28 ) + 'px' );\r
 242 \r
 243                                                 // ml\r
 244                                                 el = innerDialog.getChild( 4 );\r
 245                                                 el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );\r
 246 \r
 247                                                 // mr\r
 248                                                 el = innerDialog.getChild( 5 );\r
 249                                                 el.setStyle( 'height', ( body.$.offsetHeight - 31 - 14 ) + 'px' );\r
 250                                         },\r
 251                                         100 );\r
 252                         });\r
 253         }\r
 254 })();\r
 255 \r
 256 /**\r
 257  * The base user interface color to be used by the editor. Not all skins are\r
 258  * compatible with this setting.\r
 259  * @name CKEDITOR.config.uiColor\r
 260  * @type String\r
 261  * @default '' (empty)\r
 262  * @example\r
 263  * // Using a color code.\r
 264  * config.uiColor = '#AADC6E';\r
 265  * @example\r
 266  * // Using an HTML color name.\r
 267  * config.uiColor = 'Gold';\r
 268  */\r