2 Copyright (c) 2003-2009, 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
12 function setNewPickerColor( color )
\r
14 // Convert HEX representation to RGB, stripping # char.
\r
15 if ( /^#/.test( color ) )
\r
16 color = window.YAHOO.util.Color.hex2rgb( color.substr( 1 ) );
\r
17 picker.setValue( color, true );
\r
18 // Refresh picker UI.
\r
19 picker.refresh( 'cke_uicolor_picker' );
\r
22 function setNewUiColor( color, force )
\r
24 if ( force || dialog._.contents.tab1.livePeview.getValue() )
\r
25 editor.setUiColor( color );
\r
26 // Write new config string into textbox.
\r
27 dialog._.contents.tab1.configBox.setValue(
\r
28 'config.uiColor = "#' + picker.get( "hex" ) + '"'
\r
34 id : 'yuiColorPicker',
\r
36 html : "<div id='cke_uicolor_picker' style='width: 360px; height: 200px; position: relative;'></div>",
\r
37 onLoad : function( event )
\r
39 var url = CKEDITOR.getUrl(
\r
40 '_source/' + // @Packager.RemoveLine
\r
41 'plugins/uicolor/yui/'
\r
44 // Create new color picker widget.
\r
45 picker = new window.YAHOO.widget.ColorPicker( "cke_uicolor_picker",
\r
47 showhsvcontrols : true,
\r
48 showhexcontrols : true,
\r
51 PICKER_THUMB : url + "assets/picker_thumb.png",
\r
52 HUE_THUMB : url + "assets/hue_thumb.png"
\r
56 // Set actual UI color to the picker.
\r
58 setNewPickerColor( uiColor );
\r
60 // Subscribe to the rgbChange event.
\r
61 picker.on( "rgbChange", function()
\r
63 // Reset predefined box.
\r
64 dialog._.contents.tab1.predefined.setValue( '' );
\r
65 setNewUiColor( '#' + picker.get( 'hex' ) );
\r
68 // Fix input class names.
\r
69 var inputs = new CKEDITOR.dom.nodeList( picker.getElementsByTagName( 'input' ) );
\r
70 for ( var i = 0; i < inputs.count() ; i++ )
\r
71 inputs.getItem( i ).addClass( 'cke_dialog_ui_input_text' );
\r
75 var skipPreviewChange = true;
\r
78 title : editor.lang.uicolor.title,
\r
84 this.setupContent();
\r
87 if ( CKEDITOR.env.ie7Compat )
\r
88 dialog.parts.contents.setStyle( 'overflow', 'hidden' );
\r
107 label : editor.lang.uicolor.preview,
\r
109 onLoad : function()
\r
111 skipPreviewChange = true;
\r
113 onChange : function()
\r
115 if ( skipPreviewChange )
\r
117 var on = this.getValue(),
\r
118 color = on ? '#' + picker.get( 'hex' ) : uiColor;
\r
119 setNewUiColor( color, true );
\r
130 label : editor.lang.uicolor.predefined,
\r
134 [ 'Light blue', '#9AB8F3' ],
\r
135 [ 'Sand', '#D2B48C' ],
\r
136 [ 'Metallic', '#949AAA' ],
\r
137 [ 'Purple', '#C2A3C7' ],
\r
138 [ 'Olive', '#A2C980' ],
\r
139 [ 'Happy green', '#9BD446' ],
\r
140 [ 'Jezebel Blue', '#14B8C4' ],
\r
141 [ 'Burn', '#FF893A' ],
\r
142 [ 'Easy red', '#FF6969' ],
\r
143 [ 'Pisces 3', '#48B4F2' ],
\r
144 [ 'Aquarius 5', '#487ED4' ],
\r
145 [ 'Absinthe', '#A8CF76' ],
\r
146 [ 'Scrambled Egg', '#C7A622' ],
\r
147 [ 'Hello monday', '#8E8D80' ],
\r
148 [ 'Lovely sunshine', '#F1E8B1' ],
\r
149 [ 'Recycled air', '#B3C593' ],
\r
150 [ 'Down', '#BCBCA4' ],
\r
151 [ 'Mark Twain', '#CFE91D' ],
\r
152 [ 'Specks of dust', '#D1B596' ],
\r
153 [ 'Lollipop', '#F6CE23' ]
\r
155 onChange : function()
\r
157 var color = this.getValue();
\r
160 setNewPickerColor( color );
\r
161 setNewUiColor( color );
\r
162 // Refresh predefined preview box.
\r
163 CKEDITOR.document.getById( 'predefinedPreview' ).setStyle( 'background', color );
\r
166 CKEDITOR.document.getById( 'predefinedPreview' ).setStyle( 'background', '' );
\r
168 onShow : function()
\r
170 var color = editor.getUiColor();
\r
172 this.setValue( color );
\r
176 id : 'predefinedPreview',
\r
178 html : '<div id="cke_uicolor_preview" style="border: 1px solid black; padding: 3px; width: 30px;">' +
\r
179 '<div id="predefinedPreview" style="width: 30px; height: 30px;"> </div>' +
\r
187 label : editor.lang.uicolor.config,
\r
188 onShow : function()
\r
190 var color = editor.getUiColor();
\r
193 'config.uiColor = "' + color + '"'
\r
202 buttons : [ CKEDITOR.dialog.okButton ]
\r