sources/plugins/colordialog/dialogs/colordialog.js

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