skins/ckeditor/_source/plugins/uicolor/dialogs/uicolor.js

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