X-Git-Url: https://git.immae.eu/?p=perso%2FImmae%2FProjets%2Fpackagist%2Fludivine-ckeditor-component.git;a=blobdiff_plain;f=sources%2Fplugins%2Fcolorbutton%2Fplugin.js;fp=sources%2Fplugins%2Fcolorbutton%2Fplugin.js;h=a293ba65a2517f562afa7073e34c17cf64fb0c2f;hp=538233316dec59230c85b252e349225445d2ee17;hb=1794320dcfdfcd19572fb1676294f9853a6bbc20;hpb=7183f6a6a21ad9124e70c997e0168459f377a9f2 diff --git a/sources/plugins/colorbutton/plugin.js b/sources/plugins/colorbutton/plugin.js index 5382333..a293ba6 100644 --- a/sources/plugins/colorbutton/plugin.js +++ b/sources/plugins/colorbutton/plugin.js @@ -11,7 +11,7 @@ CKEDITOR.plugins.add( 'colorbutton', { requires: 'panelbutton,floatpanel', // jscs:disable maximumLineLength - lang: 'af,ar,az,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,oc,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% + lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,es-mx,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,oc,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% // jscs:enable maximumLineLength icons: 'bgcolor,textcolor', // %REMOVE_LINE_CORE% hidpi: true, // %REMOVE_LINE_CORE% @@ -85,7 +85,8 @@ CKEDITOR.plugins.add( 'colorbutton', { function addButton( name, type, title, order, options ) { var style = new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ] ), - colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox'; + colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox', + panelBlock; options = options || {}; @@ -105,10 +106,12 @@ CKEDITOR.plugins.add( 'colorbutton', { }, onBlock: function( panel, block ) { + panelBlock = block; + block.autoSize = true; block.element.addClass( 'cke_colorblock' ); block.element.setHtml( renderColors( panel, type, colorBoxId ) ); - // The block should not have scrollbars (#5933, #6056) + // The block should not have scrollbars (http://dev.ckeditor.com/ticket/5933, http://dev.ckeditor.com/ticket/6056) block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' ); CKEDITOR.ui.fire( 'ready', this ); @@ -129,13 +132,13 @@ CKEDITOR.plugins.add( 'colorbutton', { this.setState( CKEDITOR.TRISTATE_DISABLED ); }, - // The automatic colorbox should represent the real color (#6010) + // The automatic colorbox should represent the real color (http://dev.ckeditor.com/ticket/6010) onOpen: function() { var selection = editor.getSelection(), block = selection && selection.getStartElement(), path = editor.elementPath( block ), - color; + automaticColor; if ( !path ) return; @@ -145,19 +148,46 @@ CKEDITOR.plugins.add( 'colorbutton', { // The background color might be transparent. In that case, look up the color in the DOM tree. do { - color = block && block.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) || 'transparent'; + automaticColor = block && block.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) || 'transparent'; } - while ( type == 'back' && color == 'transparent' && block && ( block = block.getParent() ) ); + while ( type == 'back' && automaticColor == 'transparent' && block && ( block = block.getParent() ) ); // The box should never be transparent. - if ( !color || color == 'transparent' ) - color = '#ffffff'; + if ( !automaticColor || automaticColor == 'transparent' ) + automaticColor = '#ffffff'; if ( config.colorButton_enableAutomatic !== false ) { - this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', color ); + this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', automaticColor ); } - return color; + var range = selection && selection.getRanges()[ 0 ]; + + if ( range ) { + var walker = new CKEDITOR.dom.walker( range ), + element = range.collapsed ? range.startContainer : walker.next(), + finalColor = '', + currentColor; + + while ( element ) { + if ( element.type === CKEDITOR.NODE_TEXT ) { + element = element.getParent(); + } + + currentColor = normalizeColor( element.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) ); + finalColor = finalColor || currentColor; + + if ( finalColor !== currentColor ) { + finalColor = ''; + break; + } + + element = walker.next(); + } + + selectColor( panelBlock, finalColor ); + } + + return automaticColor; } } ); } @@ -169,53 +199,44 @@ CKEDITOR.plugins.add( 'colorbutton', { // Tells if we should include "More Colors..." button. moreColorsEnabled = editor.plugins.colordialog && config.colorButton_enableMore !== false, // aria-setsize and aria-posinset attributes are used to indicate size of options, because - // screen readers doesn't play nice with table, based layouts (#12097). + // screen readers doesn't play nice with table, based layouts (http://dev.ckeditor.com/ticket/12097). total = colors.length + ( moreColorsEnabled ? 2 : 1 ); - var clickFn = CKEDITOR.tools.addFunction( function( color, type ) { - var applyColorStyle = arguments.callee; - function onColorDialogClose( evt ) { - this.removeListener( 'ok', onColorDialogClose ); - this.removeListener( 'cancel', onColorDialogClose ); + var clickFn = CKEDITOR.tools.addFunction( function applyColorStyle( color, type ) { - evt.name == 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type ); - } + editor.focus(); + editor.fire( 'saveSnapshot' ); if ( color == '?' ) { - editor.openDialog( 'colordialog', function() { - this.on( 'ok', onColorDialogClose ); - this.on( 'cancel', onColorDialogClose ); + editor.getColorFromDialog( function( color ) { + if ( color ) { + return applyColor( color ); + } } ); - - return; + } else { + return applyColor( color ); } - editor.focus(); - - panel.hide(); - - editor.fire( 'saveSnapshot' ); - - // Clean up any conflicting style within the range. - editor.removeStyle( new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ], { color: 'inherit' } ) ); - - if ( color ) { + function applyColor( color ) { + // Clean up any conflicting style within the range. + editor.removeStyle( new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ], { color: 'inherit' } ) ); var colorStyle = config[ 'colorButton_' + type + 'Style' ]; colorStyle.childRule = type == 'back' ? function( element ) { - // It's better to apply background color as the innermost style. (#3599) - // Except for "unstylable elements". (#6103) + // It's better to apply background color as the innermost style. (http://dev.ckeditor.com/ticket/3599) + // Except for "unstylable elements". (http://dev.ckeditor.com/ticket/6103) return isUnstylable( element ); } : function( element ) { - // Fore color style must be applied inside links instead of around it. (#4772,#6908) + // Fore color style must be applied inside links instead of around it. (http://dev.ckeditor.com/ticket/4772,http://dev.ckeditor.com/ticket/6908) return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element ); }; + editor.focus(); editor.applyStyle( new CKEDITOR.style( colorStyle, { color: color } ) ); + editor.fire( 'saveSnapshot' ); } - editor.fire( 'saveSnapshot' ); } ); if ( config.colorButton_enableAutomatic !== false ) { @@ -245,7 +266,7 @@ CKEDITOR.plugins.add( 'colorbutton', { // The data can be only a color code (without #) or colorName + color code // If only a color code is provided, then the colorName is the color with the hash - // Convert the color from RGB to RRGGBB for better compatibility with IE and . See #5676 + // Convert the color from RGB to RRGGBB for better compatibility with IE and . See http://dev.ckeditor.com/ticket/5676 if ( !parts[ 1 ] ) colorName = '#' + colorName.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' ); @@ -255,6 +276,7 @@ CKEDITOR.plugins.add( 'colorbutton', { ' title="', colorLabel, '"' + ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'', colorName, '\',\'', type, '\'); return false;"' + ' href="javascript:void(\'', colorLabel, '\')"' + + ' data-value="' + colorCode + '"' + ' role="option" aria-posinset="', ( i + 2 ), '" aria-setsize="', total, '">' + '' + '' + @@ -281,6 +303,40 @@ CKEDITOR.plugins.add( 'colorbutton', { function isUnstylable( ele ) { return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-nostyle' ); } + + /* + * Selects the specified color in the specified panel block. + * + * @private + * @member CKEDITOR.plugins.colorbutton + * @param {CKEDITOR.ui.panel.block} block + * @param {String} color + */ + function selectColor( block, color ) { + var items = block._.getItems(); + + for ( var i = 0; i < items.count(); i++ ) { + var item = items.getItem( i ); + + item.removeAttribute( 'aria-selected' ); + + if ( color && color == normalizeColor( item.getAttribute( 'data-value' ) ) ) { + item.setAttribute( 'aria-selected', true ); + } + } + } + + /* + * Converts a CSS color value to an easily comparable form. + * + * @private + * @member CKEDITOR.plugins.colorbutton + * @param {String} color + * @returns {String} + */ + function normalizeColor( color ) { + return CKEDITOR.tools.convertRgbToHex( color || '' ).replace( /#/, '' ).toLowerCase(); + } } } );