_source/plugins/colordialog/dialogs/colordialog.js

   1 /*\r
   2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 CKEDITOR.dialog.add( 'colordialog', function( editor )\r
   7         {\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
  13 \r
  14                 // Reference the dialog.\r
  15                 var dialog;\r
  16 \r
  17                 var spacer =\r
  18                 {\r
  19                         type : 'html',\r
  20                         html : '&nbsp;'\r
  21                 };\r
  22 \r
  23                 function clearSelected()\r
  24                 {\r
  25                         $doc.getById( selHiColorId ).removeStyle( 'background-color' );\r
  26                         dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );\r
  27                 }\r
  28 \r
  29                 function updateSelected( evt )\r
  30                 {\r
  31                         if ( ! ( evt instanceof CKEDITOR.dom.event ) )\r
  32                                 evt = new CKEDITOR.dom.event( evt );\r
  33 \r
  34                         var target = evt.getTarget(),\r
  35                                 color;\r
  36 \r
  37                         if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )\r
  38                                 dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );\r
  39                 }\r
  40 \r
  41                 function updateHighlight( event )\r
  42                 {\r
  43                         if ( ! ( event instanceof CKEDITOR.dom.event ) )\r
  44                                 event = event.data;\r
  45 \r
  46                         var target = event.getTarget(),\r
  47                                         color;\r
  48 \r
  49                         if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )\r
  50                         {\r
  51                                 $doc.getById( hicolorId ).setStyle( 'background-color', color );\r
  52                                 $doc.getById( hicolorTextId ).setHtml( color );\r
  53                         }\r
  54                 }\r
  55 \r
  56                 function clearHighlight()\r
  57                 {\r
  58                         $doc.getById( hicolorId ).removeStyle( 'background-color' );\r
  59                         $doc.getById( hicolorTextId ).setHtml( '&nbsp;' );\r
  60                 }\r
  61 \r
  62                 var onMouseout = $tools.addFunction( clearHighlight ),\r
  63                         onClick = updateSelected,\r
  64                         onClickHandler = CKEDITOR.tools.addFunction( onClick ),\r
  65                         onFocus = updateHighlight,\r
  66                         onBlur = clearHighlight;\r
  67 \r
  68                 var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev )\r
  69                 {\r
  70                         ev = new CKEDITOR.dom.event( ev );\r
  71                         var element = ev.getTarget();\r
  72                         var relative, nodeToMove;\r
  73                         var keystroke = ev.getKeystroke(),\r
  74                                 rtl = editor.lang.dir == 'rtl';\r
  75 \r
  76                         switch ( keystroke )\r
  77                         {\r
  78                                 // UP-ARROW\r
  79                                 case 38 :\r
  80                                         // relative is TR\r
  81                                         if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
  82                                         {\r
  83                                                 nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );\r
  84                                                 nodeToMove.focus();\r
  85                                                 onBlur( ev, element );\r
  86                                                 onFocus( ev, nodeToMove );\r
  87                                         }\r
  88                                         ev.preventDefault();\r
  89                                         break;\r
  90                                 // DOWN-ARROW\r
  91                                 case 40 :\r
  92                                         // relative is TR\r
  93                                         if ( ( relative = element.getParent().getParent().getNext() ) )\r
  94                                         {\r
  95                                                 nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );\r
  96                                                 if ( nodeToMove && nodeToMove.type == 1 )\r
  97                                                 {\r
  98                                                         nodeToMove.focus();\r
  99                                                         onBlur( ev, element );\r
 100                                                         onFocus( ev, nodeToMove );\r
 101                                                 }\r
 102                                         }\r
 103                                         ev.preventDefault();\r
 104                                         break;\r
 105                                 // SPACE\r
 106                                 // ENTER is already handled as onClick\r
 107                                 case 32 :\r
 108                                         onClick( ev );\r
 109                                         ev.preventDefault();\r
 110                                         break;\r
 111 \r
 112                                 // RIGHT-ARROW\r
 113                                 case rtl ? 37 : 39 :\r
 114                                         // relative is TD\r
 115                                         if ( ( relative = element.getParent().getNext() ) )\r
 116                                         {\r
 117                                                 nodeToMove = relative.getChild( 0 );\r
 118                                                 if ( nodeToMove.type == 1 )\r
 119                                                 {\r
 120                                                         nodeToMove.focus();\r
 121                                                         onBlur( ev, element );\r
 122                                                         onFocus( ev, nodeToMove );\r
 123                                                         ev.preventDefault( true );\r
 124                                                 }\r
 125                                                 else\r
 126                                                         onBlur( null, element );\r
 127                                         }\r
 128                                         // relative is TR\r
 129                                         else if ( ( relative = element.getParent().getParent().getNext() ) )\r
 130                                         {\r
 131                                                 nodeToMove = relative.getChild( [ 0, 0 ] );\r
 132                                                 if ( nodeToMove && nodeToMove.type == 1 )\r
 133                                                 {\r
 134                                                         nodeToMove.focus();\r
 135                                                         onBlur( ev, element );\r
 136                                                         onFocus( ev, nodeToMove );\r
 137                                                         ev.preventDefault( true );\r
 138                                                 }\r
 139                                                 else\r
 140                                                         onBlur( null, element );\r
 141                                         }\r
 142                                         break;\r
 143 \r
 144                                 // LEFT-ARROW\r
 145                                 case rtl ? 39 : 37 :\r
 146                                         // relative is TD\r
 147                                         if ( ( relative = element.getParent().getPrevious() ) )\r
 148                                         {\r
 149                                                 nodeToMove = relative.getChild( 0 );\r
 150                                                 nodeToMove.focus();\r
 151                                                 onBlur( ev, element );\r
 152                                                 onFocus( ev, nodeToMove );\r
 153                                                 ev.preventDefault( true );\r
 154                                         }\r
 155                                         // relative is TR\r
 156                                         else if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
 157                                         {\r
 158                                                 nodeToMove = relative.getLast().getChild( 0 );\r
 159                                                 nodeToMove.focus();\r
 160                                                 onBlur( ev, element );\r
 161                                                 onFocus( ev, nodeToMove );\r
 162                                                 ev.preventDefault( true );\r
 163                                         }\r
 164                                         else\r
 165                                                 onBlur( null, element );\r
 166                                         break;\r
 167                                 default :\r
 168                                         // Do not stop not handled events.\r
 169                                         return;\r
 170                         }\r
 171                 });\r
 172 \r
 173                 function createColorTable()\r
 174                 {\r
 175                         // Create the base colors array.\r
 176                         var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ];\r
 177 \r
 178                         // This function combines two ranges of three values from the color array into a row.\r
 179                         function appendColorRow( rangeA, rangeB )\r
 180                         {\r
 181                                 for ( var i = rangeA ; i < rangeA + 3 ; i++ )\r
 182                                 {\r
 183                                         var row = table.$.insertRow( -1 );\r
 184 \r
 185                                         for ( var j = rangeB ; j < rangeB + 3 ; j++ )\r
 186                                         {\r
 187                                                 for ( var n = 0 ; n < 6 ; n++ )\r
 188                                                 {\r
 189                                                         appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] );\r
 190                                                 }\r
 191                                         }\r
 192                                 }\r
 193                         }\r
 194 \r
 195                         // This function create a single color cell in the color table.\r
 196                         function appendColorCell( targetRow, color )\r
 197                         {\r
 198                                 var cell = new $el( targetRow.insertCell( -1 ) );\r
 199                                 cell.setAttribute( 'class', 'ColorCell' );\r
 200                                 cell.setStyle( 'background-color', color );\r
 201 \r
 202                                 cell.setStyle( 'width', '15px' );\r
 203                                 cell.setStyle( 'height', '15px' );\r
 204 \r
 205                                 var index = cell.$.cellIndex + 1 + 18 * targetRow.rowIndex;\r
 206                                 cell.append( CKEDITOR.dom.element.createFromHtml(\r
 207                                                 '<a href="javascript: void(0);" role="option"' +\r
 208                                                 ' aria-posinset="' + index + '"' +\r
 209                                                 ' aria-setsize="' + 13 * 18 + '"' +\r
 210                                                 ' style="cursor: pointer;display:block;width:100%;height:100% " title="'+ CKEDITOR.tools.htmlEncode( color )+ '"' +\r
 211                                                 ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydownHandler + ', event, this )"' +\r
 212                                                 ' onclick="CKEDITOR.tools.callFunction(' + onClickHandler + ', event, this ); return false;"' +\r
 213                                                 ' tabindex="-1"><span class="cke_voice_label">' + color + '</span>&nbsp;</a>', CKEDITOR.document ) );\r
 214                         }\r
 215 \r
 216                         appendColorRow( 0, 0 );\r
 217                         appendColorRow( 3, 0 );\r
 218                         appendColorRow( 0, 3 );\r
 219                         appendColorRow( 3, 3 );\r
 220 \r
 221                         // Create the last row.\r
 222                         var oRow = table.$.insertRow(-1) ;\r
 223 \r
 224                         // Create the gray scale colors cells.\r
 225                         for ( var n = 0 ; n < 6 ; n++ )\r
 226                         {\r
 227                                 appendColorCell( oRow, '#' + aColors[n] + aColors[n] + aColors[n] ) ;\r
 228                         }\r
 229 \r
 230                         // Fill the row with black cells.\r
 231                         for ( var i = 0 ; i < 12 ; i++ )\r
 232                         {\r
 233                                 appendColorCell( oRow, '#000000' ) ;\r
 234                         }\r
 235                 }\r
 236 \r
 237                 var table = new $el( 'table' );\r
 238                 createColorTable();\r
 239                 var html = table.getHtml();\r
 240 \r
 241                 var numbering = function( id )\r
 242                         {\r
 243                                 return CKEDITOR.tools.getNextId() + '_' + id;\r
 244                         },\r
 245                         hicolorId = numbering( 'hicolor' ),\r
 246                         hicolorTextId = numbering( 'hicolortext' ),\r
 247                         selHiColorId = numbering( 'selhicolor' ),\r
 248                         tableLabelId = numbering( 'color_table_label' );\r
 249 \r
 250                 return {\r
 251                         title : lang.title,\r
 252                         minWidth : 360,\r
 253                         minHeight : 220,\r
 254                         onLoad : function()\r
 255                         {\r
 256                                 // Update reference.\r
 257                                 dialog = this;\r
 258                         },\r
 259                         contents : [\r
 260                                 {\r
 261                                         id : 'picker',\r
 262                                         label : lang.title,\r
 263                                         accessKey : 'I',\r
 264                                         elements :\r
 265                                         [\r
 266                                                 {\r
 267                                                         type : 'hbox',\r
 268                                                         padding : 0,\r
 269                                                         widths : [ '70%', '10%', '30%' ],\r
 270                                                         children :\r
 271                                                         [\r
 272                                                                 {\r
 273                                                                         type : 'html',\r
 274                                                                         html :  '<table role="listbox" aria-labelledby="' + tableLabelId + '" onmouseout="CKEDITOR.tools.callFunction( ' + onMouseout + ' );">' +\r
 275                                                                                         ( !CKEDITOR.env.webkit ? html : '' ) +\r
 276                                                                                 '</table><span id="' + tableLabelId + '" class="cke_voice_label">' + lang.options +'</span>',\r
 277                                                                         onLoad : function()\r
 278                                                                         {\r
 279                                                                                 var table = CKEDITOR.document.getById( this.domId );\r
 280                                                                                 table.on( 'mouseover', updateHighlight );\r
 281                                                                                 // In WebKit, the table content must be inserted after this event call (#6150)\r
 282                                                                                 CKEDITOR.env.webkit && table.setHtml( html );\r
 283                                                                         },\r
 284                                                                         focus: function()\r
 285                                                                         {\r
 286                                                                                 var firstColor = this.getElement().getElementsByTag( 'a' ).getItem( 0 );\r
 287                                                                                 firstColor.focus();\r
 288                                                                         }\r
 289                                                                 },\r
 290                                                                 spacer,\r
 291                                                                 {\r
 292                                                                         type : 'vbox',\r
 293                                                                         padding : 0,\r
 294                                                                         widths : [ '70%', '5%', '25%' ],\r
 295                                                                         children :\r
 296                                                                         [\r
 297                                                                                 {\r
 298                                                                                         type : 'html',\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 + '">&nbsp;</div><span>' + lang.selected + '</span>\\r
 302                                                                                                 <div id="' + selHiColorId + '" style="border: 1px solid; height: 20px; width: 74px;"></div>'\r
 303                                                                                 },\r
 304                                                                                 {\r
 305                                                                                         type : 'text',\r
 306                                                                                         label : lang.selected,\r
 307                                                                                         labelStyle: 'display:none',\r
 308                                                                                         id : 'selectedColor',\r
 309                                                                                         style : 'width: 74px',\r
 310                                                                                         onChange : function()\r
 311                                                                                         {\r
 312                                                                                                 // Try to update color preview with new value. If fails, then set it no none.\r
 313                                                                                                 try\r
 314                                                                                                 {\r
 315                                                                                                         $doc.getById( selHiColorId ).setStyle( 'background-color', this.getValue() );\r
 316                                                                                                 }\r
 317                                                                                                 catch ( e )\r
 318                                                                                                 {\r
 319                                                                                                         clearSelected();\r
 320                                                                                                 }\r
 321                                                                                         }\r
 322                                                                                 },\r
 323                                                                                 spacer,\r
 324                                                                                 {\r
 325                                                                                         type : 'button',\r
 326                                                                                         id : 'clear',\r
 327                                                                                         style : 'margin-top: 5px',\r
 328                                                                                         label : lang.clear,\r
 329                                                                                         onClick : clearSelected\r
 330                                                                                 }\r
 331                                                                         ]\r
 332                                                                 }\r
 333                                                         ]\r
 334                                                 }\r
 335                                         ]\r
 336                                 }\r
 337                         ]\r
 338                 };\r
 339         }\r
 340         );\r