sources/plugins/colordialog/dialogs/colordialog.js

   1 /**
   2  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 CKEDITOR.dialog.add( 'colordialog', function( editor ) {
   7         // Define some shorthands.
   8         var $el = CKEDITOR.dom.element,
   9                 $doc = CKEDITOR.document,
  10                 lang = editor.lang.colordialog;
  11
  12         // Reference the dialog.
  13         var dialog;
  14
  15         var spacer = {
  16                 type: 'html',
  17                 html: '&nbsp;'
  18         };
  19
  20         var selected;
  21
  22         function clearSelected() {
  23                 $doc.getById( selHiColorId ).removeStyle( 'background-color' );
  24                 dialog.getContentElement( 'picker', 'selectedColor' ).setValue( '' );
  25                 selected && selected.removeAttribute( 'aria-selected' );
  26                 selected = null;
  27         }
  28
  29         function updateSelected( evt ) {
  30                 var target = evt.data.getTarget(),
  31                         color;
  32
  33                 if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) ) {
  34                         selected = target;
  35                         selected.setAttribute( 'aria-selected', true );
  36                         dialog.getContentElement( 'picker', 'selectedColor' ).setValue( color );
  37                 }
  38         }
  39
  40         // Basing black-white decision off of luma scheme using the Rec. 709 version
  41         function whiteOrBlack( color ) {
  42                 color = color.replace( /^#/, '' );
  43                 for ( var i = 0, rgb = []; i <= 2; i++ )
  44                         rgb[ i ] = parseInt( color.substr( i * 2, 2 ), 16 );
  45                 var luma = ( 0.2126 * rgb[ 0 ] ) + ( 0.7152 * rgb[ 1 ] ) + ( 0.0722 * rgb[ 2 ] );
  46                 return '#' + ( luma >= 165 ? '000' : 'fff' );
  47         }
  48
  49         // Distinguish focused and hover states.
  50         var focused, hovered;
  51
  52         // Apply highlight style.
  53         function updateHighlight( event ) {
  54                 // Convert to event.
  55                 !event.name && ( event = new CKEDITOR.event( event ) );
  56
  57                 var isFocus = !( /mouse/ ).test( event.name ),
  58                         target = event.data.getTarget(),
  59                         color;
  60
  61                 if ( target.getName() == 'td' && ( color = target.getChild( 0 ).getHtml() ) ) {
  62                         removeHighlight( event );
  63
  64                         isFocus ? focused = target : hovered = target;
  65
  66                         // Apply outline style to show focus.
  67                         if ( isFocus ) {
  68                                 target.setStyle( 'border-color', whiteOrBlack( color ) );
  69                                 target.setStyle( 'border-style', 'dotted' );
  70                         }
  71
  72                         $doc.getById( hicolorId ).setStyle( 'background-color', color );
  73                         $doc.getById( hicolorTextId ).setHtml( color );
  74                 }
  75         }
  76
  77         function clearHighlight() {
  78                 var color = focused.getChild( 0 ).getHtml();
  79                 focused.setStyle( 'border-color', color );
  80                 focused.setStyle( 'border-style', 'solid' );
  81                 $doc.getById( hicolorId ).removeStyle( 'background-color' );
  82                 $doc.getById( hicolorTextId ).setHtml( '&nbsp;' );
  83                 focused = null;
  84         }
  85
  86         // Remove previously focused style.
  87         function removeHighlight( event ) {
  88                 var isFocus = !( /mouse/ ).test( event.name ),
  89                         target = isFocus && focused;
  90
  91                 if ( target ) {
  92                         var color = target.getChild( 0 ).getHtml();
  93                         target.setStyle( 'border-color', color );
  94                         target.setStyle( 'border-style', 'solid' );
  95                 }
  96
  97                 if ( !( focused || hovered ) ) {
  98                         $doc.getById( hicolorId ).removeStyle( 'background-color' );
  99                         $doc.getById( hicolorTextId ).setHtml( '&nbsp;' );
 100                 }
 101         }
 102
 103         function onKeyStrokes( evt ) {
 104                 var domEvt = evt.data;
 105
 106                 var element = domEvt.getTarget();
 107                 var relative, nodeToMove;
 108                 var keystroke = domEvt.getKeystroke(),
 109                         rtl = editor.lang.dir == 'rtl';
 110
 111                 switch ( keystroke ) {
 112                         // UP-ARROW
 113                         case 38:
 114                                 // relative is TR
 115                                 if ( ( relative = element.getParent().getPrevious() ) ) {
 116                                         nodeToMove = relative.getChild( [ element.getIndex() ] );
 117                                         nodeToMove.focus();
 118                                 }
 119                                 domEvt.preventDefault();
 120                                 break;
 121                                 // DOWN-ARROW
 122                         case 40:
 123                                 // relative is TR
 124                                 if ( ( relative = element.getParent().getNext() ) ) {
 125                                         nodeToMove = relative.getChild( [ element.getIndex() ] );
 126                                         if ( nodeToMove && nodeToMove.type == 1 )
 127                                                 nodeToMove.focus();
 128
 129                                 }
 130                                 domEvt.preventDefault();
 131                                 break;
 132
 133                                 // SPACE
 134                                 // ENTER
 135                         case 32:
 136                         case 13:
 137                                 updateSelected( evt );
 138                                 domEvt.preventDefault();
 139                                 break;
 140
 141                                 // RIGHT-ARROW
 142                         case rtl ? 37 : 39:
 143                                 // relative is TD
 144                                 if ( ( nodeToMove = element.getNext() ) ) {
 145                                         if ( nodeToMove.type == 1 ) {
 146                                                 nodeToMove.focus();
 147                                                 domEvt.preventDefault( true );
 148                                         }
 149                                 }
 150                                 // relative is TR
 151                                 else if ( ( relative = element.getParent().getNext() ) ) {
 152                                         nodeToMove = relative.getChild( [ 0 ] );
 153                                         if ( nodeToMove && nodeToMove.type == 1 ) {
 154                                                 nodeToMove.focus();
 155                                                 domEvt.preventDefault( true );
 156                                         }
 157                                 }
 158                                 break;
 159
 160                                 // LEFT-ARROW
 161                         case rtl ? 39 : 37:
 162                                 // relative is TD
 163                                 if ( ( nodeToMove = element.getPrevious() ) ) {
 164                                         nodeToMove.focus();
 165                                         domEvt.preventDefault( true );
 166                                 }
 167                                 // relative is TR
 168                                 else if ( ( relative = element.getParent().getPrevious() ) ) {
 169                                         nodeToMove = relative.getLast();
 170                                         nodeToMove.focus();
 171                                         domEvt.preventDefault( true );
 172                                 }
 173                                 break;
 174                         default:
 175                                 // Do not stop not handled events.
 176                                 return;
 177                 }
 178         }
 179
 180         function createColorTable() {
 181                 table = CKEDITOR.dom.element.createFromHtml( '<table tabIndex="-1" aria-label="' + lang.options + '"' +
 182                         ' role="grid" style="border-collapse:separate;" cellspacing="0">' +
 183                         '<caption class="cke_voice_label">' + lang.options + '</caption>' +
 184                         '<tbody role="presentation"></tbody></table>' );
 185
 186                 table.on( 'mouseover', updateHighlight );
 187                 table.on( 'mouseout', removeHighlight );
 188
 189                 // Create the base colors array.
 190                 var aColors = [ '00', '33', '66', '99', 'cc', 'ff' ];
 191
 192                 // This function combines two ranges of three values from the color array into a row.
 193                 function appendColorRow( rangeA, rangeB ) {
 194                         for ( var i = rangeA; i < rangeA + 3; i++ ) {
 195                                 var row = new $el( table.$.insertRow( -1 ) );
 196                                 row.setAttribute( 'role', 'row' );
 197
 198                                 for ( var j = rangeB; j < rangeB + 3; j++ ) {
 199                                         for ( var n = 0; n < 6; n++ ) {
 200                                                 appendColorCell( row.$, '#' + aColors[ j ] + aColors[ n ] + aColors[ i ] );
 201                                         }
 202                                 }
 203                         }
 204                 }
 205
 206                 // This function create a single color cell in the color table.
 207                 function appendColorCell( targetRow, color ) {
 208                         var cell = new $el( targetRow.insertCell( -1 ) );
 209                         cell.setAttribute( 'class', 'ColorCell' );
 210                         cell.setAttribute( 'tabIndex', -1 );
 211                         cell.setAttribute( 'role', 'gridcell' );
 212
 213                         cell.on( 'keydown', onKeyStrokes );
 214                         cell.on( 'click', updateSelected );
 215                         cell.on( 'focus', updateHighlight );
 216                         cell.on( 'blur', removeHighlight );
 217
 218                         cell.setStyle( 'background-color', color );
 219                         cell.setStyle( 'border', '1px solid ' + color );
 220
 221                         cell.setStyle( 'width', '14px' );
 222                         cell.setStyle( 'height', '14px' );
 223
 224                         var colorLabel = numbering( 'color_table_cell' );
 225                         cell.setAttribute( 'aria-labelledby', colorLabel );
 226                         cell.append( CKEDITOR.dom.element.createFromHtml( '<span id="' + colorLabel + '" class="cke_voice_label">' + color + '</span>', CKEDITOR.document ) );
 227                 }
 228
 229                 appendColorRow( 0, 0 );
 230                 appendColorRow( 3, 0 );
 231                 appendColorRow( 0, 3 );
 232                 appendColorRow( 3, 3 );
 233
 234                 // Create the last row.
 235                 var oRow = new $el( table.$.insertRow( -1 ) );
 236                 oRow.setAttribute( 'role', 'row' );
 237
 238                 // Create the gray scale colors cells.
 239                 appendColorCell( oRow.$, '#000000' );
 240                 for ( var n = 0; n < 16; n++  ) {
 241                         var c = n.toString( 16 );
 242                         appendColorCell( oRow.$, '#' + c + c + c + c + c + c );
 243                 }
 244                 appendColorCell( oRow.$, '#ffffff' );
 245         }
 246
 247         var numbering = function( id ) {
 248                         return CKEDITOR.tools.getNextId() + '_' + id;
 249                 },
 250                 hicolorId = numbering( 'hicolor' ),
 251                 hicolorTextId = numbering( 'hicolortext' ),
 252                 selHiColorId = numbering( 'selhicolor' ),
 253                 table;
 254
 255         createColorTable();
 256
 257         return {
 258                 title: lang.title,
 259                 minWidth: 360,
 260                 minHeight: 220,
 261                 onLoad: function() {
 262                         // Update reference.
 263                         dialog = this;
 264                 },
 265                 onHide: function() {
 266                         clearSelected();
 267                         clearHighlight();
 268                 },
 269                 contents: [ {
 270                         id: 'picker',
 271                         label: lang.title,
 272                         accessKey: 'I',
 273                         elements: [ {
 274                                 type: 'hbox',
 275                                 padding: 0,
 276                                 widths: [ '70%', '10%', '30%' ],
 277                                 children: [ {
 278                                         type: 'html',
 279                                         html: '<div></div>',
 280                                         onLoad: function() {
 281                                                 CKEDITOR.document.getById( this.domId ).append( table );
 282                                         },
 283                                         focus: function() {
 284                                                 // Restore the previously focused cell,
 285                                                 // otherwise put the initial focus on the first table cell.
 286                                                 ( focused || this.getElement().getElementsByTag( 'td' ).getItem( 0 ) ).focus();
 287                                         }
 288                                 },
 289                                 spacer,
 290                                 {
 291                                         type: 'vbox',
 292                                         padding: 0,
 293                                         widths: [ '70%', '5%', '25%' ],
 294                                         children: [ {
 295                                                 type: 'html',
 296                                                 html: '<span>' + lang.highlight + '</span>' +
 297                                                         '<div id="' + hicolorId + '" style="border: 1px solid; height: 74px; width: 74px;"></div>' +
 298                                                         '<div id="' + hicolorTextId + '">&nbsp;</div><span>' + lang.selected + '</span>' +
 299                                                         '<div id="' + selHiColorId + '" style="border: 1px solid; height: 20px; width: 74px;"></div>'
 300                                         },
 301                                         {
 302                                                 type: 'text',
 303                                                 label: lang.selected,
 304                                                 labelStyle: 'display:none',
 305                                                 id: 'selectedColor',
 306                                                 style: 'width: 76px;margin-top:4px',
 307                                                 onChange: function() {
 308                                                         // Try to update color preview with new value. If fails, then set it no none.
 309                                                         try {
 310                                                                 $doc.getById( selHiColorId ).setStyle( 'background-color', this.getValue() );
 311                                                         } catch ( e ) {
 312                                                                 clearSelected();
 313                                                         }
 314                                                 }
 315                                         },
 316                                         spacer,
 317                                         {
 318                                                 type: 'button',
 319                                                 id: 'clear',
 320                                                 label: lang.clear,
 321                                                 onClick: clearSelected
 322                                         } ]
 323                                 } ]
 324                         } ]
 325                 } ]
 326         };
 327 } );