_source/skins/kama/skin.js

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