2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
6 CKEDITOR.dialog.add( 'colordialog', function( editor )
8 // Define some shorthands.
9 var $el = CKEDITOR.dom.element,
10 $doc = CKEDITOR.document,
11 $tools = CKEDITOR.tools,
12 lang = editor.lang.colordialog;
14 // Reference the dialog.
23 function clearSelected()
25 $doc.getById( selHiColorId ).removeStyle( 'background-color' );
26 dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );
29 function updateSelected( evt )
31 if ( ! ( evt instanceof CKEDITOR.dom.event ) )
32 evt = new CKEDITOR.dom.event( evt );
34 var target = evt.getTarget(),
37 if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
38 dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );
41 function updateHighlight( event )
43 if ( ! ( event instanceof CKEDITOR.dom.event ) )
46 var target = event.getTarget(),
49 if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
51 $doc.getById( hicolorId ).setStyle( 'background-color', color );
52 $doc.getById( hicolorTextId ).setHtml( color );
56 function clearHighlight()
58 $doc.getById( hicolorId ).removeStyle( 'background-color' );
59 $doc.getById( hicolorTextId ).setHtml( ' ' );
62 var onMouseout = $tools.addFunction( clearHighlight ),
63 onClick = updateSelected,
64 onClickHandler = CKEDITOR.tools.addFunction( onClick ),
65 onFocus = updateHighlight,
66 onBlur = clearHighlight;
68 var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev )
70 ev = new CKEDITOR.dom.event( ev );
71 var element = ev.getTarget();
72 var relative, nodeToMove;
73 var keystroke = ev.getKeystroke(),
74 rtl = editor.lang.dir == 'rtl';
81 if ( ( relative = element.getParent().getParent().getPrevious() ) )
83 nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
85 onBlur( ev, element );
86 onFocus( ev, nodeToMove );
93 if ( ( relative = element.getParent().getParent().getNext() ) )
95 nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
96 if ( nodeToMove && nodeToMove.type == 1 )
99 onBlur( ev, element );
100 onFocus( ev, nodeToMove );
106 // ENTER is already handled as onClick
115 if ( ( relative = element.getParent().getNext() ) )
117 nodeToMove = relative.getChild( 0 );
118 if ( nodeToMove.type == 1 )
121 onBlur( ev, element );
122 onFocus( ev, nodeToMove );
123 ev.preventDefault( true );
126 onBlur( null, element );
129 else if ( ( relative = element.getParent().getParent().getNext() ) )
131 nodeToMove = relative.getChild( [ 0, 0 ] );
132 if ( nodeToMove && nodeToMove.type == 1 )
135 onBlur( ev, element );
136 onFocus( ev, nodeToMove );
137 ev.preventDefault( true );
140 onBlur( null, element );
147 if ( ( relative = element.getParent().getPrevious() ) )
149 nodeToMove = relative.getChild( 0 );
151 onBlur( ev, element );
152 onFocus( ev, nodeToMove );
153 ev.preventDefault( true );
156 else if ( ( relative = element.getParent().getParent().getPrevious() ) )
158 nodeToMove = relative.getLast().getChild( 0 );
160 onBlur( ev, element );
161 onFocus( ev, nodeToMove );
162 ev.preventDefault( true );
165 onBlur( null, element );
168 // Do not stop not handled events.
173 function createColorTable()
175 // Create the base colors array.
176 var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ];
178 // This function combines two ranges of three values from the color array into a row.
179 function appendColorRow( rangeA, rangeB )
181 for ( var i = rangeA ; i < rangeA + 3 ; i++ )
183 var row = table.$.insertRow( -1 );
185 for ( var j = rangeB ; j < rangeB + 3 ; j++ )
187 for ( var n = 0 ; n < 6 ; n++ )
189 appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] );
195 // This function create a single color cell in the color table.
196 function appendColorCell( targetRow, color )
198 var cell = new $el( targetRow.insertCell( -1 ) );
199 cell.setAttribute( 'class', 'ColorCell' );
200 cell.setStyle( 'background-color', color );
202 cell.setStyle( 'width', '15px' );
203 cell.setStyle( 'height', '15px' );
205 var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex;
206 cell.append( CKEDITOR.dom.element.createFromHtml(
207 '<a href="javascript: void(0);" role="option"' +
208 ' aria-posinset="' + index + '"' +
209 ' aria-setsize="' + 13 * 18 + '"' +
210 ' style="cursor: pointer;display:block;width:100%;height:100% " title="'+ CKEDITOR.tools.htmlEncode( color )+ '"' +
211 ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydownHandler + ', event, this )"' +
212 ' onclick="CKEDITOR.tools.callFunction(' + onClickHandler + ', event, this ); return false;"' +
213 ' tabindex="-1"><span class="cke_voice_label">' + color + '</span> </a>', CKEDITOR.document ) );
216 appendColorRow( 0, 0 );
217 appendColorRow( 3, 0 );
218 appendColorRow( 0, 3 );
219 appendColorRow( 3, 3 );
221 // Create the last row.
222 var oRow = table.$.insertRow(-1) ;
224 // Create the gray scale colors cells.
225 for ( var n = 0 ; n < 6 ; n++ )
227 appendColorCell( oRow, '#' + aColors[n] + aColors[n] + aColors[n] ) ;
230 // Fill the row with black cells.
231 for ( var i = 0 ; i < 12 ; i++ )
233 appendColorCell( oRow, '#000000' ) ;
237 var table = new $el( 'table' );
239 var html = table.getHtml();
241 var numbering = function( id )
243 return CKEDITOR.tools.getNextId() + '_' + id;
245 hicolorId = numbering( 'hicolor' ),
246 hicolorTextId = numbering( 'hicolortext' ),
247 selHiColorId = numbering( 'selhicolor' ),
248 tableLabelId = numbering( 'color_table_label' );
269 widths : [ '70%', '10%', '30%' ],
274 html : '<table role="listbox" aria-labelledby="' + tableLabelId + '" onmouseout="CKEDITOR.tools.callFunction( ' + onMouseout + ' );">' +
275 ( !CKEDITOR.env.webkit ? html : '' ) +
276 '</table><span id="' + tableLabelId + '" class="cke_voice_label">' + lang.options +'</span>',
279 var table = CKEDITOR.document.getById( this.domId );
280 table.on( 'mouseover', updateHighlight );
281 // In WebKit, the table content must be inserted after this event call (#6150)
282 CKEDITOR.env.webkit && table.setHtml( html );
286 var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 );
294 widths : [ '70%', '5%', '25%' ],
299 html : '<span>' + lang.highlight +'</span>\
300 <div id="' + hicolorId + '" style="border: 1px solid; height: 74px; width: 74px;"></div>\
301 <div id="' + hicolorTextId + '"> </div><span>' + lang.selected + '</span>\
302 <div id="' + selHiColorId + '" style="border: 1px solid; height: 20px; width: 74px;"></div>'
306 label : lang.selected,
307 labelStyle: 'display:none',
308 id : 'selectedColor',
309 style : 'width: 74px',
310 onChange : function()
312 // Try to update color preview with new value. If fails, then set it no none.
315 $doc.getById( selHiColorId ).setStyle( 'background-color', this.getValue() );
327 style : 'margin-top: 5px',
329 onClick : clearSelected