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