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