_source/plugins/uicolor/dialogs/uicolor.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.dialog.add( 'uicolor', function( editor )\r
   7 {\r
   8         var dialog, picker, pickerContents,\r
   9                 // Actual UI color value.\r
  10                 uiColor = editor.getUiColor();\r
  11 \r
  12         function setNewPickerColor( color )\r
  13         {\r
  14                 // Convert HEX representation to RGB, stripping # char.\r
  15                 if ( /^#/.test( color ) )\r
  16                         color = window.YAHOO.util.Color.hex2rgb( color.substr( 1 ) );\r
  17                 picker.setValue( color, true );\r
  18                 // Refresh picker UI.\r
  19                 picker.refresh( 'cke_uicolor_picker' );\r
  20         }\r
  21 \r
  22         function setNewUiColor( color, force )\r
  23         {\r
  24                 if ( force || dialog._.contents.tab1.livePeview.getValue() )\r
  25                         editor.setUiColor( color );\r
  26                 // Write new config string into textbox.\r
  27                 dialog._.contents.tab1.configBox.setValue(\r
  28                         'config.uiColor = "#' + picker.get( "hex" ) + '"'\r
  29                 );\r
  30         }\r
  31 \r
  32         pickerContents =\r
  33         {\r
  34                 id : 'yuiColorPicker',\r
  35                 type : 'html',\r
  36                 html : "<div id='cke_uicolor_picker' style='width: 360px; height: 200px; position: relative;'></div>",\r
  37                 onLoad : function( event )\r
  38                 {\r
  39                         var url = CKEDITOR.getUrl(\r
  40                                         'plugins/uicolor/yui/'\r
  41                                 );\r
  42 \r
  43                         // Create new color picker widget.\r
  44                         picker = new window.YAHOO.widget.ColorPicker( "cke_uicolor_picker",\r
  45                                 {\r
  46                                         showhsvcontrols : true,\r
  47                                         showhexcontrols : true,\r
  48                                         images :\r
  49                                         {\r
  50                                                 PICKER_THUMB : url + "assets/picker_thumb.png",\r
  51                                                 HUE_THUMB : url + "assets/hue_thumb.png"\r
  52                                         }\r
  53                                 });\r
  54 \r
  55                         // Set actual UI color to the picker.\r
  56                         if ( uiColor )\r
  57                                 setNewPickerColor( uiColor );\r
  58 \r
  59                         // Subscribe to the rgbChange event.\r
  60                         picker.on( "rgbChange", function()\r
  61                                 {\r
  62                                         // Reset predefined box.\r
  63                                         dialog._.contents.tab1.predefined.setValue( '' );\r
  64                                         setNewUiColor( '#' + picker.get( 'hex' ) );\r
  65                                 });\r
  66 \r
  67                         // Fix input class names.\r
  68                         var inputs = new CKEDITOR.dom.nodeList( picker.getElementsByTagName( 'input' ) );\r
  69                         for ( var i = 0; i < inputs.count() ; i++ )\r
  70                                 inputs.getItem( i ).addClass( 'cke_dialog_ui_input_text' );\r
  71                 }\r
  72         };\r
  73 \r
  74         var skipPreviewChange = true;\r
  75 \r
  76         return {\r
  77                 title : editor.lang.uicolor.title,\r
  78                 minWidth : 360,\r
  79                 minHeight : 320,\r
  80                 onLoad : function()\r
  81                 {\r
  82                         dialog = this;\r
  83                         this.setupContent();\r
  84 \r
  85                         // #3808\r
  86                         if ( CKEDITOR.env.ie7Compat )\r
  87                                 dialog.parts.contents.setStyle( 'overflow', 'hidden' );\r
  88                 },\r
  89                 contents : [\r
  90                         {\r
  91                                 id : 'tab1',\r
  92                                 label : '',\r
  93                                 title : '',\r
  94                                 expand : true,\r
  95                                 padding : 0,\r
  96                                 elements : [\r
  97                                                 pickerContents,\r
  98                                                 {\r
  99                                                         id : 'tab1',\r
 100                                                         type : 'vbox',\r
 101                                                         children :\r
 102                                                         [\r
 103                                                                 {\r
 104                                                                         id : 'livePeview',\r
 105                                                                         type : 'checkbox',\r
 106                                                                         label : editor.lang.uicolor.preview,\r
 107                                                                         'default' : 1,\r
 108                                                                         onLoad : function()\r
 109                                                                         {\r
 110                                                                                 skipPreviewChange = true;\r
 111                                                                         },\r
 112                                                                         onChange : function()\r
 113                                                                         {\r
 114                                                                                 if ( skipPreviewChange )\r
 115                                                                                         return;\r
 116                                                                                 var on = this.getValue(),\r
 117                                                                                         color = on ? '#' + picker.get( 'hex' ) : uiColor;\r
 118                                                                                 setNewUiColor( color, true );\r
 119                                                                         }\r
 120                                                                 },\r
 121                                                                 {\r
 122                                                                         type : 'hbox',\r
 123                                                                         children :\r
 124                                                                         [\r
 125                                                                                 {\r
 126                                                                                         id : 'predefined',\r
 127                                                                                         type : 'select',\r
 128                                                                                         'default' : '',\r
 129                                                                                         label : editor.lang.uicolor.predefined,\r
 130                                                                                         items :\r
 131                                                                                         [\r
 132                                                                                                 [ '' ],\r
 133                                                                                                 [ 'Light blue', '#9AB8F3' ],\r
 134                                                                                                 [ 'Sand', '#D2B48C' ],\r
 135                                                                                                 [ 'Metallic', '#949AAA' ],\r
 136                                                                                                 [ 'Purple', '#C2A3C7' ],\r
 137                                                                                                 [ 'Olive', '#A2C980' ],\r
 138                                                                                                 [ 'Happy green', '#9BD446' ],\r
 139                                                                                                 [ 'Jezebel Blue', '#14B8C4' ],\r
 140                                                                                                 [ 'Burn', '#FF893A' ],\r
 141                                                                                                 [ 'Easy red', '#FF6969' ],\r
 142                                                                                                 [ 'Pisces 3', '#48B4F2' ],\r
 143                                                                                                 [ 'Aquarius 5', '#487ED4' ],\r
 144                                                                                                 [ 'Absinthe', '#A8CF76' ],\r
 145                                                                                                 [ 'Scrambled Egg', '#C7A622' ],\r
 146                                                                                                 [ 'Hello monday', '#8E8D80' ],\r
 147                                                                                                 [ 'Lovely sunshine', '#F1E8B1' ],\r
 148                                                                                                 [ 'Recycled air', '#B3C593' ],\r
 149                                                                                                 [ 'Down', '#BCBCA4' ],\r
 150                                                                                                 [ 'Mark Twain', '#CFE91D' ],\r
 151                                                                                                 [ 'Specks of dust', '#D1B596' ],\r
 152                                                                                                 [ 'Lollipop', '#F6CE23' ]\r
 153                                                                                         ],\r
 154                                                                                         onChange : function()\r
 155                                                                                         {\r
 156                                                                                                 var color = this.getValue();\r
 157                                                                                                 if ( color )\r
 158                                                                                                 {\r
 159                                                                                                         setNewPickerColor( color );\r
 160                                                                                                         setNewUiColor( color );\r
 161                                                                                                         // Refresh predefined preview box.\r
 162                                                                                                         CKEDITOR.document.getById( 'predefinedPreview' ).setStyle( 'background', color );\r
 163                                                                                                 }\r
 164                                                                                                 else\r
 165                                                                                                         CKEDITOR.document.getById( 'predefinedPreview' ).setStyle( 'background', '' );\r
 166                                                                                         },\r
 167                                                                                         onShow : function()\r
 168                                                                                         {\r
 169                                                                                                 var color = editor.getUiColor();\r
 170                                                                                                 if ( color )\r
 171                                                                                                         this.setValue( color );\r
 172                                                                                         }\r
 173                                                                                 },\r
 174                                                                                 {\r
 175                                                                                         id : 'predefinedPreview',\r
 176                                                                                         type : 'html',\r
 177                                                                                         html : '<div id="cke_uicolor_preview" style="border: 1px solid black; padding: 3px; width: 30px;">' +\r
 178                                                                                                         '<div id="predefinedPreview" style="width: 30px; height: 30px;">&nbsp;</div>' +\r
 179                                                                                                 '</div>'\r
 180                                                                                 }\r
 181                                                                         ]\r
 182                                                                 },\r
 183                                                                 {\r
 184                                                                         id : 'configBox',\r
 185                                                                         type : 'text',\r
 186                                                                         label : editor.lang.uicolor.config,\r
 187                                                                         onShow : function()\r
 188                                                                         {\r
 189                                                                                 var color = editor.getUiColor();\r
 190                                                                                 if ( color )\r
 191                                                                                         this.setValue(\r
 192                                                                                                 'config.uiColor = "' + color + '"'\r
 193                                                                                         );\r
 194                                                                         }\r
 195                                                                 }\r
 196                                                         ]\r
 197                                                 }\r
 198                                         ]\r
 199                         }\r
 200                 ],\r
 201                 buttons : [ CKEDITOR.dialog.okButton ]\r
 202         };\r
 203 } );\r