2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 CKEDITOR.dialog.add( 'colordialog', function( editor )
\r
8 // Define some shorthands.
\r
9 var $el = CKEDITOR.dom.element,
\r
10 $doc = CKEDITOR.document,
\r
11 $tools = CKEDITOR.tools,
\r
12 lang = editor.lang.colordialog;
\r
14 // Reference the dialog.
\r
25 function clearSelected()
\r
27 $doc.getById( selHiColorId ).removeStyle( 'background-color' );
\r
28 dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );
\r
31 function updateSelected( evt )
\r
33 if ( ! (evt instanceof CKEDITOR.dom.event ) )
\r
34 evt = new CKEDITOR.dom.event( evt );
\r
36 var target = evt.getTarget(),
\r
39 if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
\r
40 dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );
\r
43 function updateHighlight( event )
\r
45 if ( ! (event instanceof CKEDITOR.dom.event ) )
\r
48 var target = event.getTarget(),
\r
51 if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )
\r
53 $doc.getById( hicolorId ).setStyle( 'background-color', color );
\r
54 $doc.getById( hicolorTextId ).setHtml( color );
\r
58 function clearHighlight()
\r
60 $doc.getById( hicolorId ).removeStyle( 'background-color' );
\r
61 $doc.getById( hicolorTextId ).setHtml( ' ' );
\r
64 var onMouseout = $tools.addFunction( clearHighlight );
\r
66 var onClick = updateSelected,
\r
67 onClickHandler = CKEDITOR.tools.addFunction( onClick );
\r
69 var onFocus = updateHighlight,
\r
70 onBlur = clearHighlight;
\r
72 var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev )
\r
74 ev = new CKEDITOR.dom.event( ev );
\r
75 var element = ev.getTarget();
\r
76 var relative, nodeToMove;
\r
77 var keystroke = ev.getKeystroke();
\r
78 var rtl = editor.lang.dir == 'rtl';
\r
80 switch ( keystroke )
\r
85 if ( ( relative = element.getParent().getParent().getPrevious() ) )
\r
87 nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
\r
89 onBlur( ev, element );
\r
90 onFocus( ev, nodeToMove );
\r
92 ev.preventDefault();
\r
97 if ( ( relative = element.getParent().getParent().getNext() ) )
\r
99 nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
\r
100 if ( nodeToMove && nodeToMove.type == 1 )
\r
102 nodeToMove.focus();
\r
103 onBlur( ev, element );
\r
104 onFocus( ev, nodeToMove );
\r
107 ev.preventDefault();
\r
110 // ENTER is already handled as onClick
\r
113 ev.preventDefault();
\r
117 case rtl ? 37 : 39 :
\r
119 if ( ( relative = element.getParent().getNext() ) )
\r
121 nodeToMove = relative.getChild( 0 );
\r
122 if ( nodeToMove.type == 1 )
\r
124 nodeToMove.focus();
\r
125 onBlur( ev, element );
\r
126 onFocus( ev, nodeToMove );
\r
127 ev.preventDefault( true );
\r
130 onBlur( null, element );
\r
133 else if ( ( relative = element.getParent().getParent().getNext() ) )
\r
135 nodeToMove = relative.getChild( [ 0, 0 ] );
\r
136 if ( nodeToMove && nodeToMove.type == 1 )
\r
138 nodeToMove.focus();
\r
139 onBlur( ev, element );
\r
140 onFocus( ev, nodeToMove );
\r
141 ev.preventDefault( true );
\r
144 onBlur( null, element );
\r
149 case rtl ? 39 : 37 :
\r
151 if ( ( relative = element.getParent().getPrevious() ) )
\r
153 nodeToMove = relative.getChild( 0 );
\r
154 nodeToMove.focus();
\r
155 onBlur( ev, element );
\r
156 onFocus( ev, nodeToMove );
\r
157 ev.preventDefault( true );
\r
160 else if ( ( relative = element.getParent().getParent().getPrevious() ) )
\r
162 nodeToMove = relative.getLast().getChild( 0 );
\r
163 nodeToMove.focus();
\r
164 onBlur( ev, element );
\r
165 onFocus( ev, nodeToMove );
\r
166 ev.preventDefault( true );
\r
169 onBlur( null, element );
\r
172 // Do not stop not handled events.
\r
177 function createColorTable()
\r
179 // Create the base colors array.
\r
180 var aColors = ['00','33','66','99','cc','ff'];
\r
182 // This function combines two ranges of three values from the color array into a row.
\r
183 function appendColorRow( rangeA, rangeB )
\r
185 for ( var i = rangeA ; i < rangeA + 3 ; i++ )
\r
187 var row = table.$.insertRow(-1);
\r
189 for ( var j = rangeB ; j < rangeB + 3 ; j++ )
\r
191 for ( var n = 0 ; n < 6 ; n++ )
\r
193 appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] );
\r
199 // This function create a single color cell in the color table.
\r
200 function appendColorCell( targetRow, color )
\r
202 var cell = new $el( targetRow.insertCell( -1 ) );
\r
203 cell.setAttribute( 'class', 'ColorCell' );
\r
204 cell.setStyle( 'background-color', color );
\r
206 cell.setStyle( 'width', '15px' );
\r
207 cell.setStyle( 'height', '15px' );
\r
209 var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex;
\r
210 cell.append( CKEDITOR.dom.element.createFromHtml(
\r
211 '<a href="javascript: void(0);" role="option"' +
\r
212 ' aria-posinset="' + index + '"' +
\r
213 ' aria-setsize="' + 13 * 18 + '"' +
\r
214 ' style="cursor: pointer;display:block;width:100%;height:100% " title="'+ CKEDITOR.tools.htmlEncode( color )+ '"' +
\r
215 ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydownHandler + ', event, this )"' +
\r
216 ' onclick="CKEDITOR.tools.callFunction(' + onClickHandler + ', event, this ); return false;"' +
\r
217 ' tabindex="-1"><span class="cke_voice_label">' + color + '</span> </a>', CKEDITOR.document ) );
\r
220 appendColorRow( 0, 0 );
\r
221 appendColorRow( 3, 0 );
\r
222 appendColorRow( 0, 3 );
\r
223 appendColorRow( 3, 3 );
\r
225 // Create the last row.
\r
226 var oRow = table.$.insertRow(-1) ;
\r
228 // Create the gray scale colors cells.
\r
229 for ( var n = 0 ; n < 6 ; n++ )
\r
231 appendColorCell( oRow, '#' + aColors[n] + aColors[n] + aColors[n] ) ;
\r
234 // Fill the row with black cells.
\r
235 for ( var i = 0 ; i < 12 ; i++ )
\r
237 appendColorCell( oRow, '#000000' ) ;
\r
241 var table = new $el( 'table' );
\r
242 createColorTable();
\r
244 var numbering = function( id )
\r
246 return CKEDITOR.tools.getNextId() + '_' + id;
\r
248 hicolorId = numbering( 'hicolor' ),
\r
249 hicolorTextId = numbering( 'hicolortext' ),
\r
250 selHiColorId = numbering( 'selhicolor' ),
\r
251 tableLabelId = numbering( 'color_table_label' );
\r
254 title : lang.title,
\r
257 onLoad : function()
\r
259 // Update reference.
\r
265 label : lang.title,
\r
272 widths : [ '70%', '10%', '30%' ],
\r
277 html : '<table role="listbox" aria-labelledby="' + tableLabelId + '" onmouseout="CKEDITOR.tools.callFunction( ' + onMouseout + ' );">' + table.getHtml() + '</table>' +
\r
278 '<span id="' + tableLabelId + '" class="cke_voice_label">' + lang.options +'</span>',
\r
279 onLoad : function()
\r
281 var table = CKEDITOR.document.getById( this.domId );
\r
282 table.on( 'mouseover', updateHighlight );
\r
286 var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 );
\r
287 firstColor.focus();
\r
294 widths : [ '70%', '5%', '25%' ],
\r
299 html : '<span>' + lang.highlight +'</span>\
\r
300 <div id="' + hicolorId + '" style="border: 1px solid; height: 74px; width: 74px;"></div>\
\r
301 <div id="' + hicolorTextId + '"> </div><span>' + lang.selected + '</span>\
\r
302 <div id="' + selHiColorId + '" style="border: 1px solid; height: 20px; width: 74px;"></div>'
\r
306 label : lang.selected,
\r
307 labelStyle: 'display:none',
\r
308 id : 'selectedColor',
\r
309 style : 'width: 74px',
\r
310 onChange : function()
\r
312 // Try to update color preview with new value. If fails, then set it no none.
\r
315 $doc.getById( selHiColorId ).setStyle( 'background-color', this.getValue() );
\r
327 style : 'margin-top: 5px',
\r
328 label : lang.clear,
\r
329 onClick : clearSelected
\r