2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 CKEDITOR.dialog.add( 'uicolor', function( editor )
\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
13 function setNewPickerColor( color )
\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
23 function setNewUiColor( color, force )
\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
35 id : 'yuiColorPicker',
\r
37 html : "<div id='" + pickerId + "' class='cke_uicolor_picker' style='width: 360px; height: 200px; position: relative;'></div>",
\r
38 onLoad : function( event )
\r
40 var url = CKEDITOR.getUrl(
\r
41 '_source/' + // @Packager.RemoveLine
\r
42 'plugins/uicolor/yui/'
\r
45 // Create new color picker widget.
\r
46 picker = new window.YAHOO.widget.ColorPicker( pickerId,
\r
48 showhsvcontrols : true,
\r
49 showhexcontrols : true,
\r
52 PICKER_THUMB : url + "assets/picker_thumb.png",
\r
53 HUE_THUMB : url + "assets/hue_thumb.png"
\r
57 // Set actual UI color to the picker.
\r
59 setNewPickerColor( uiColor );
\r
61 // Subscribe to the rgbChange event.
\r
62 picker.on( "rgbChange", function()
\r
64 // Reset predefined box.
\r
65 dialog._.contents.tab1.predefined.setValue( '' );
\r
66 setNewUiColor( '#' + picker.get( 'hex' ) );
\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
76 var skipPreviewChange = true;
\r
79 title : editor.lang.uicolor.title,
\r
85 this.setupContent();
\r
88 if ( CKEDITOR.env.ie7Compat )
\r
89 dialog.parts.contents.setStyle( 'overflow', 'hidden' );
\r
108 label : editor.lang.uicolor.preview,
\r
110 onLoad : function()
\r
112 skipPreviewChange = true;
\r
114 onChange : function()
\r
116 if ( skipPreviewChange )
\r
118 var on = this.getValue(),
\r
119 color = on ? '#' + picker.get( 'hex' ) : uiColor;
\r
120 setNewUiColor( color, true );
\r
131 label : editor.lang.uicolor.predefined,
\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
156 onChange : function()
\r
158 var color = this.getValue();
\r
161 setNewPickerColor( color );
\r
162 setNewUiColor( color );
\r
163 // Refresh predefined preview box.
\r
164 CKEDITOR.document.getById( 'predefinedPreview' ).setStyle( 'background', color );
\r
167 CKEDITOR.document.getById( 'predefinedPreview' ).setStyle( 'background', '' );
\r
169 onShow : function()
\r
171 var color = editor.getUiColor();
\r
173 this.setValue( color );
\r
177 id : 'predefinedPreview',
\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;"> </div>' +
\r
188 label : editor.lang.uicolor.config,
\r
189 onShow : function()
\r
191 var color = editor.getUiColor();
\r
194 'config.uiColor = "' + color + '"'
\r
203 buttons : [ CKEDITOR.dialog.okButton ]
\r