_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                 function spacer()\r
  18                 {\r
  19                         return {\r
  20                                 type : 'html',\r
  21                                 html : '&nbsp;'\r
  22                         };\r
  23                 }\r
  24 \r
  25                 function clearSelected()\r
  26                 {\r
  27                         $doc.getById( selHiColorId ).removeStyle( 'background-color' );\r
  28                         dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );\r
  29                 }\r
  30 \r
  31                 function updateSelected( evt )\r
  32                 {\r
  33                         if ( ! (evt instanceof CKEDITOR.dom.event ) )\r
  34                                 evt = new CKEDITOR.dom.event( evt );\r
  35 \r
  36                         var target = evt.getTarget(),\r
  37                                         color;\r
  38 \r
  39                         if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )\r
  40                                 dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );\r
  41                 }\r
  42 \r
  43                 function updateHighlight( event )\r
  44                 {\r
  45                         if ( ! (event instanceof CKEDITOR.dom.event ) )\r
  46                                 event = event.data;\r
  47 \r
  48                         var target = event.getTarget(),\r
  49                                         color;\r
  50 \r
  51                         if ( target.getName() == 'a' && ( color = target.getChild( 0 ).getHtml() ) )\r
  52                         {\r
  53                                 $doc.getById( hicolorId ).setStyle( 'background-color', color );\r
  54                                 $doc.getById( hicolorTextId ).setHtml( color );\r
  55                         }\r
  56                 }\r
  57 \r
  58                 function clearHighlight()\r
  59                 {\r
  60                         $doc.getById( hicolorId ).removeStyle( 'background-color' );\r
  61                         $doc.getById( hicolorTextId ).setHtml( '&nbsp;' );\r
  62                 }\r
  63 \r
  64                 var onMouseout = $tools.addFunction( clearHighlight );\r
  65 \r
  66                 var onClick = updateSelected,\r
  67                                 onClickHandler = CKEDITOR.tools.addFunction( onClick );\r
  68 \r
  69                 var onFocus = updateHighlight,\r
  70                                 onBlur = clearHighlight;\r
  71 \r
  72                 var onKeydownHandler = CKEDITOR.tools.addFunction( function( ev )\r
  73                 {\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
  79 \r
  80                         switch ( keystroke )\r
  81                         {\r
  82                                 // UP-ARROW\r
  83                                 case 38 :\r
  84                                         // relative is TR\r
  85                                         if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
  86                                         {\r
  87                                                 nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );\r
  88                                                 nodeToMove.focus();\r
  89                                                 onBlur( ev, element );\r
  90                                                 onFocus( ev, nodeToMove );\r
  91                                         }\r
  92                                         ev.preventDefault();\r
  93                                         break;\r
  94                                 // DOWN-ARROW\r
  95                                 case 40 :\r
  96                                         // relative is TR\r
  97                                         if ( ( relative = element.getParent().getParent().getNext() ) )\r
  98                                         {\r
  99                                                 nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );\r
 100                                                 if ( nodeToMove && nodeToMove.type == 1 )\r
 101                                                 {\r
 102                                                         nodeToMove.focus();\r
 103                                                         onBlur( ev, element );\r
 104                                                         onFocus( ev, nodeToMove );\r
 105                                                 }\r
 106                                         }\r
 107                                         ev.preventDefault();\r
 108                                         break;\r
 109                                 // SPACE\r
 110                                 // ENTER is already handled as onClick\r
 111                                 case 32 :\r
 112                                         onClick( ev );\r
 113                                         ev.preventDefault();\r
 114                                         break;\r
 115 \r
 116                                 // RIGHT-ARROW\r
 117                                 case rtl ? 37 : 39 :\r
 118                                         // relative is TD\r
 119                                         if ( ( relative = element.getParent().getNext() ) )\r
 120                                         {\r
 121                                                 nodeToMove = relative.getChild( 0 );\r
 122                                                 if ( nodeToMove.type == 1 )\r
 123                                                 {\r
 124                                                         nodeToMove.focus();\r
 125                                                         onBlur( ev, element );\r
 126                                                         onFocus( ev, nodeToMove );\r
 127                                                         ev.preventDefault( true );\r
 128                                                 }\r
 129                                                 else\r
 130                                                         onBlur( null, element );\r
 131                                         }\r
 132                                         // relative is TR\r
 133                                         else if ( ( relative = element.getParent().getParent().getNext() ) )\r
 134                                         {\r
 135                                                 nodeToMove = relative.getChild( [ 0, 0 ] );\r
 136                                                 if ( nodeToMove && nodeToMove.type == 1 )\r
 137                                                 {\r
 138                                                         nodeToMove.focus();\r
 139                                                         onBlur( ev, element );\r
 140                                                         onFocus( ev, nodeToMove );\r
 141                                                         ev.preventDefault( true );\r
 142                                                 }\r
 143                                                 else\r
 144                                                         onBlur( null, element );\r
 145                                         }\r
 146                                         break;\r
 147 \r
 148                                 // LEFT-ARROW\r
 149                                 case rtl ? 39 : 37 :\r
 150                                         // relative is TD\r
 151                                         if ( ( relative = element.getParent().getPrevious() ) )\r
 152                                         {\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
 158                                         }\r
 159                                         // relative is TR\r
 160                                         else if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
 161                                         {\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
 167                                         }\r
 168                                         else\r
 169                                                 onBlur( null, element );\r
 170                                         break;\r
 171                                 default :\r
 172                                         // Do not stop not handled events.\r
 173                                         return;\r
 174                         }\r
 175                 });\r
 176 \r
 177                 function createColorTable()\r
 178                 {\r
 179                         // Create the base colors array.\r
 180                         var aColors = ['00','33','66','99','cc','ff'];\r
 181 \r
 182                         // This function combines two ranges of three values from the color array into a row.\r
 183                         function appendColorRow( rangeA, rangeB )\r
 184                         {\r
 185                                 for ( var i = rangeA ; i < rangeA + 3 ; i++ )\r
 186                                 {\r
 187                                         var row = table.$.insertRow(-1);\r
 188 \r
 189                                         for ( var j = rangeB ; j < rangeB + 3 ; j++ )\r
 190                                         {\r
 191                                                 for ( var n = 0 ; n < 6 ; n++ )\r
 192                                                 {\r
 193                                                         appendColorCell( row, '#' + aColors[j] + aColors[n] + aColors[i] );\r
 194                                                 }\r
 195                                         }\r
 196                                 }\r
 197                         }\r
 198 \r
 199                         // This function create a single color cell in the color table.\r
 200                         function appendColorCell( targetRow, color )\r
 201                         {\r
 202                                 var cell = new $el( targetRow.insertCell( -1 ) );\r
 203                                 cell.setAttribute( 'class', 'ColorCell' );\r
 204                                 cell.setStyle( 'background-color', color );\r
 205 \r
 206                                 cell.setStyle( 'width', '15px' );\r
 207                                 cell.setStyle( 'height', '15px' );\r
 208 \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>&nbsp;</a>', CKEDITOR.document ) );\r
 218                         }\r
 219 \r
 220                         appendColorRow( 0, 0 );\r
 221                         appendColorRow( 3, 0 );\r
 222                         appendColorRow( 0, 3 );\r
 223                         appendColorRow( 3, 3 );\r
 224 \r
 225                         // Create the last row.\r
 226                         var oRow = table.$.insertRow(-1) ;\r
 227 \r
 228                         // Create the gray scale colors cells.\r
 229                         for ( var n = 0 ; n < 6 ; n++ )\r
 230                         {\r
 231                                 appendColorCell( oRow, '#' + aColors[n] + aColors[n] + aColors[n] ) ;\r
 232                         }\r
 233 \r
 234                         // Fill the row with black cells.\r
 235                         for ( var i = 0 ; i < 12 ; i++ )\r
 236                         {\r
 237                                 appendColorCell( oRow, '#000000' ) ;\r
 238                         }\r
 239                 }\r
 240 \r
 241                 var table = new $el( 'table' );\r
 242                 createColorTable();\r
 243 \r
 244                 var numbering = function( id )\r
 245                         {\r
 246                                 return CKEDITOR.tools.getNextId() + '_' + id;\r
 247                         },\r
 248                         hicolorId = numbering( 'hicolor' ),\r
 249                         hicolorTextId = numbering( 'hicolortext' ),\r
 250                         selHiColorId = numbering( 'selhicolor' ),\r
 251                         tableLabelId = numbering( 'color_table_label' );\r
 252 \r
 253                 return {\r
 254                         title : lang.title,\r
 255                         minWidth : 360,\r
 256                         minHeight : 220,\r
 257                         onLoad : function()\r
 258                         {\r
 259                                 // Update reference.\r
 260                                 dialog = this;\r
 261                         },\r
 262                         contents : [\r
 263                                 {\r
 264                                         id : 'picker',\r
 265                                         label : lang.title,\r
 266                                         accessKey : 'I',\r
 267                                         elements :\r
 268                                         [\r
 269                                                 {\r
 270                                                         type : 'hbox',\r
 271                                                         padding : 0,\r
 272                                                         widths : [ '70%', '10%', '30%' ],\r
 273                                                         children :\r
 274                                                         [\r
 275                                                                 {\r
 276                                                                         type : 'html',\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
 280                                                                         {\r
 281                                                                                 var table = CKEDITOR.document.getById( this.domId );\r
 282                                                                                 table.on( 'mouseover', updateHighlight );\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