1 /* 2 Copyright (c) 2003-2012, 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;"> </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 } ); 206