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