sources/plugins/colorbutton/plugin.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 /**
   7  * @fileOverview The "colorbutton" plugin that makes it possible to assign
   8  *               text and background colors to editor contents.
   9  *
  10  */
  11 CKEDITOR.plugins.add( 'colorbutton', {
  12         requires: 'panelbutton,floatpanel',
  13         // jscs:disable maximumLineLength
  14         lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
  15         // jscs:enable maximumLineLength
  16         icons: 'bgcolor,textcolor', // %REMOVE_LINE_CORE%
  17         hidpi: true, // %REMOVE_LINE_CORE%
  18         init: function( editor ) {
  19                 var config = editor.config,
  20                         lang = editor.lang.colorbutton;
  21
  22                 if ( !CKEDITOR.env.hc ) {
  23                         addButton( 'TextColor', 'fore', lang.textColorTitle, 10 );
  24                         addButton( 'BGColor', 'back', lang.bgColorTitle, 20 );
  25                 }
  26
  27                 function addButton( name, type, title, order ) {
  28                         var style = new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ] ),
  29                                 colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox';
  30
  31                         editor.ui.add( name, CKEDITOR.UI_PANELBUTTON, {
  32                                 label: title,
  33                                 title: title,
  34                                 modes: { wysiwyg: 1 },
  35                                 editorFocus: 0,
  36                                 toolbar: 'colors,' + order,
  37                                 allowedContent: style,
  38                                 requiredContent: style,
  39
  40                                 panel: {
  41                                         css: CKEDITOR.skin.getPath( 'editor' ),
  42                                         attributes: { role: 'listbox', 'aria-label': lang.panelTitle }
  43                                 },
  44
  45                                 onBlock: function( panel, block ) {
  46                                         block.autoSize = true;
  47                                         block.element.addClass( 'cke_colorblock' );
  48                                         block.element.setHtml( renderColors( panel, type, colorBoxId ) );
  49                                         // The block should not have scrollbars (#5933, #6056)
  50                                         block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );
  51
  52                                         CKEDITOR.ui.fire( 'ready', this );
  53
  54                                         var keys = block.keys;
  55                                         var rtl = editor.lang.dir == 'rtl';
  56                                         keys[ rtl ? 37 : 39 ] = 'next'; // ARROW-RIGHT
  57                                         keys[ 40 ] = 'next'; // ARROW-DOWN
  58                                         keys[ 9 ] = 'next'; // TAB
  59                                         keys[ rtl ? 39 : 37 ] = 'prev'; // ARROW-LEFT
  60                                         keys[ 38 ] = 'prev'; // ARROW-UP
  61                                         keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB
  62                                         keys[ 32 ] = 'click'; // SPACE
  63                                 },
  64
  65                                 refresh: function() {
  66                                         if ( !editor.activeFilter.check( style ) )
  67                                                 this.setState( CKEDITOR.TRISTATE_DISABLED );
  68                                 },
  69
  70                                 // The automatic colorbox should represent the real color (#6010)
  71                                 onOpen: function() {
  72
  73                                         var selection = editor.getSelection(),
  74                                                 block = selection && selection.getStartElement(),
  75                                                 path = editor.elementPath( block ),
  76                                                 color;
  77
  78                                         if ( !path )
  79                                                 return;
  80
  81                                         // Find the closest block element.
  82                                         block = path.block || path.blockLimit || editor.document.getBody();
  83
  84                                         // The background color might be transparent. In that case, look up the color in the DOM tree.
  85                                         do {
  86                                                 color = block && block.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) || 'transparent';
  87                                         }
  88                                         while ( type == 'back' && color == 'transparent' && block && ( block = block.getParent() ) );
  89
  90                                         // The box should never be transparent.
  91                                         if ( !color || color == 'transparent' )
  92                                                 color = '#ffffff';
  93
  94                                         this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', color );
  95
  96                                         return color;
  97                                 }
  98                         } );
  99                 }
 100
 101                 function renderColors( panel, type, colorBoxId ) {
 102                         var output = [],
 103                                 colors = config.colorButton_colors.split( ',' ),
 104                                 // Tells if we should include "More Colors..." button.
 105                                 moreColorsEnabled = editor.plugins.colordialog && config.colorButton_enableMore !== false,
 106                                 // aria-setsize and aria-posinset attributes are used to indicate size of options, because
 107                                 // screen readers doesn't play nice with table, based layouts (#12097).
 108                                 total = colors.length + ( moreColorsEnabled ? 2 : 1 );
 109
 110                         var clickFn = CKEDITOR.tools.addFunction( function( color, type ) {
 111                                 var applyColorStyle = arguments.callee;
 112                                 function onColorDialogClose( evt ) {
 113                                         this.removeListener( 'ok', onColorDialogClose );
 114                                         this.removeListener( 'cancel', onColorDialogClose );
 115
 116                                         evt.name == 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type );
 117                                 }
 118
 119                                 if ( color == '?' ) {
 120                                         editor.openDialog( 'colordialog', function() {
 121                                                 this.on( 'ok', onColorDialogClose );
 122                                                 this.on( 'cancel', onColorDialogClose );
 123                                         } );
 124
 125                                         return;
 126                                 }
 127
 128                                 editor.focus();
 129
 130                                 panel.hide();
 131
 132                                 editor.fire( 'saveSnapshot' );
 133
 134                                 // Clean up any conflicting style within the range.
 135                                 editor.removeStyle( new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ], { color: 'inherit' } ) );
 136
 137                                 if ( color ) {
 138                                         var colorStyle = config[ 'colorButton_' + type + 'Style' ];
 139
 140                                         colorStyle.childRule = type == 'back' ?
 141                                         function( element ) {
 142                                                 // It's better to apply background color as the innermost style. (#3599)
 143                                                 // Except for "unstylable elements". (#6103)
 144                                                 return isUnstylable( element );
 145                                         } : function( element ) {
 146                                                 // Fore color style must be applied inside links instead of around it. (#4772,#6908)
 147                                                 return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element );
 148                                         };
 149
 150                                         editor.applyStyle( new CKEDITOR.style( colorStyle, { color: color } ) );
 151                                 }
 152
 153                                 editor.fire( 'saveSnapshot' );
 154                         } );
 155
 156                         // Render the "Automatic" button.
 157                         output.push( '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
 158                                 ' title="', lang.auto, '"' +
 159                                 ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +
 160                                 ' href="javascript:void(\'', lang.auto, '\')"' +
 161                                 ' role="option" aria-posinset="1" aria-setsize="', total, '">' +
 162                                 '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
 163                                         '<tr>' +
 164                                                 '<td>' +
 165                                                         '<span class="cke_colorbox" id="', colorBoxId, '"></span>' +
 166                                                 '</td>' +
 167                                                 '<td colspan=7 align=center>', lang.auto, '</td>' +
 168                                         '</tr>' +
 169                                 '</table>' +
 170                                 '</a>' +
 171                                 '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );
 172
 173                         // Render the color boxes.
 174                         for ( var i = 0; i < colors.length; i++ ) {
 175                                 if ( ( i % 8 ) === 0 )
 176                                         output.push( '</tr><tr>' );
 177
 178                                 var parts = colors[ i ].split( '/' ),
 179                                         colorName = parts[ 0 ],
 180                                         colorCode = parts[ 1 ] || colorName;
 181
 182                                 // The data can be only a color code (without #) or colorName + color code
 183                                 // If only a color code is provided, then the colorName is the color with the hash
 184                                 // Convert the color from RGB to RRGGBB for better compatibility with IE and <font>. See #5676
 185                                 if ( !parts[ 1 ] )
 186                                         colorName = '#' + colorName.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' );
 187
 188                                 var colorLabel = editor.lang.colorbutton.colors[ colorCode ] || colorCode;
 189                                 output.push( '<td>' +
 190                                         '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
 191                                                 ' title="', colorLabel, '"' +
 192                                                 ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'', colorName, '\',\'', type, '\'); return false;"' +
 193                                                 ' href="javascript:void(\'', colorLabel, '\')"' +
 194                                                 ' role="option" aria-posinset="', ( i + 2 ), '" aria-setsize="', total, '">' +
 195                                                 '<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +
 196                                         '</a>' +
 197                                         '</td>' );
 198                         }
 199
 200                         // Render the "More Colors" button.
 201                         if ( moreColorsEnabled ) {
 202                                 output.push( '</tr>' +
 203                                         '<tr>' +
 204                                                 '<td colspan=8 align=center>' +
 205                                                         '<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
 206                                                                 ' title="', lang.more, '"' +
 207                                                                 ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
 208                                                                 ' href="javascript:void(\'', lang.more, '\')"', ' role="option" aria-posinset="', total, '" aria-setsize="', total, '">', lang.more, '</a>' +
 209                                                 '</td>' ); // tr is later in the code.
 210                         }
 211
 212                         output.push( '</tr></table>' );
 213
 214                         return output.join( '' );
 215                 }
 216
 217                 function isUnstylable( ele ) {
 218                         return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-nostyle' );
 219                 }
 220         }
 221 } );
 222
 223 /**
 224  * Whether to enable the **More Colors*** button in the color selectors.
 225  *
 226  * Read more in the [documentation](#!/guide/dev_colorbutton)
 227  * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
 228  *
 229  *              config.colorButton_enableMore = false;
 230  *
 231  * @cfg {Boolean} [colorButton_enableMore=true]
 232  * @member CKEDITOR.config
 233  */
 234
 235 /**
 236  * Defines the colors to be displayed in the color selectors. This is a string
 237  * containing hexadecimal notation for HTML colors, without the `'#'` prefix.
 238  *
 239  * **Since 3.3:** A color name may optionally be defined by prefixing the entries with
 240  * a name and the slash character. For example, `'FontColor1/FF9900'` will be
 241  * displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.
 242  *
 243  * Read more in the [documentation](#!/guide/dev_colorbutton)
 244  * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
 245  *
 246  *              // Brazil colors only.
 247  *              config.colorButton_colors = '00923E,F8C100,28166F';
 248  *
 249  *              config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';
 250  *
 251  * @cfg {String} [colorButton_colors=see source]
 252  * @member CKEDITOR.config
 253  */
 254 CKEDITOR.config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
 255         'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
 256         'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
 257         'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
 258         'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
 259
 260 /**
 261  * Stores the style definition that applies the text foreground color.
 262  *
 263  * Read more in the [documentation](#!/guide/dev_colorbutton)
 264  * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
 265  *
 266  *              // This is actually the default value.
 267  *              config.colorButton_foreStyle = {
 268  *                      element: 'span',
 269  *                      styles: { color: '#(color)' }
 270  *              };
 271  *
 272  * @cfg [colorButton_foreStyle=see source]
 273  * @member CKEDITOR.config
 274  */
 275 CKEDITOR.config.colorButton_foreStyle = {
 276         element: 'span',
 277         styles: { 'color': '#(color)' },
 278         overrides: [ {
 279                 element: 'font', attributes: { 'color': null }
 280         } ]
 281 };
 282
 283 /**
 284  * Stores the style definition that applies the text background color.
 285  *
 286  * Read more in the [documentation](#!/guide/dev_colorbutton)
 287  * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
 288  *
 289  *              // This is actually the default value.
 290  *              config.colorButton_backStyle = {
 291  *                      element: 'span',
 292  *                      styles: { 'background-color': '#(color)' }
 293  *              };
 294  *
 295  * @cfg [colorButton_backStyle=see source]
 296  * @member CKEDITOR.config
 297  */
 298 CKEDITOR.config.colorButton_backStyle = {
 299         element: 'span',
 300         styles: { 'background-color': '#(color)' }
 301 };