Skip to content

Commit

Permalink
Show current color in the Color Dialog (#2934)
Browse files Browse the repository at this point in the history 
Show current color in the Color Dialog
  • Loading branch information
@Comandeer
Comandeer authored Jun 14, 2019
2 parents fe24402 + 547c9bc commit b3f6b49
Show file tree
Hide file tree
Showing 9 changed files with 197 additions and 51 deletions.
1 change: 1 addition & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ New Features:

* [#2598](https://github.com/ckeditor/ckeditor-dev/issues/2598): [Page Break](https://ckeditor.com/cke4/addon/pagebreak) feature support for [Paste from Word](https://ckeditor.com/cke4/addon/pastefromword) plugin.
* [#2048](https://github.com/ckeditor/ckeditor-dev/issues/2048): [Enhanced Image](https://ckeditor.com/cke4/addon/image2) added config option [CKEDITOR.config.image2_maxSize](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-image2_maxSize) that allows setting a maximum size that image can be resized to with resizer.
* [#2639](https://github.com/ckeditor/ckeditor-dev/issues/2639): [Color Dialog](https://ckeditor.com/cke4/addon/colordialog) plugin now shows current selection's color when opened.
* [#1490](https://github.com/ckeditor/ckeditor-dev/issues/1490): Improved [Paste from Word](https://ckeditor.com/cke4/addon/pastefromword) plugin to retain table cell borders.
* [#2870](https://github.com/ckeditor/ckeditor-dev/issues/2870): Added support for preserving positive `margin-left` values in list items for lists pasted with [Paste from Word](https://ckeditor.com/cke4/addon/pastefromword) plugin.

Expand Down
24 changes: 18 additions & 6 deletions plugins/colorbutton/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ 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',
colorData = { type: type },
panelBlock;

options = options || {};
Expand All @@ -110,7 +111,7 @@ CKEDITOR.plugins.add( 'colorbutton', {

block.autoSize = true;
block.element.addClass( 'cke_colorblock' );
block.element.setHtml( renderColors( panel, type, colorBoxId ) );
block.element.setHtml( renderColors( panel, type, colorBoxId, colorData ) );
// The block should not have scrollbars (https://dev.ckeditor.com/ticket/5933, https://dev.ckeditor.com/ticket/6056)
block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );

Expand All @@ -128,8 +129,9 @@ CKEDITOR.plugins.add( 'colorbutton', {
},

refresh: function() {
if ( !editor.activeFilter.check( style ) )
if ( !editor.activeFilter.check( style ) ) {
this.setState( CKEDITOR.TRISTATE_DISABLED );
}
},

// The automatic colorbox should represent the real color (https://dev.ckeditor.com/ticket/6010)
Expand All @@ -140,8 +142,9 @@ CKEDITOR.plugins.add( 'colorbutton', {
path = editor.elementPath( block ),
automaticColor;

if ( !path )
if ( !path ) {
return;
}

// Find the closest block element.
block = path.block || path.blockLimit || editor.document.getBody();
Expand All @@ -153,8 +156,9 @@ CKEDITOR.plugins.add( 'colorbutton', {
while ( type == 'back' && automaticColor == 'transparent' && block && ( block = block.getParent() ) );

// The box should never be transparent.
if ( !automaticColor || automaticColor == 'transparent' )
if ( !automaticColor || automaticColor == 'transparent' ) {
automaticColor = '#ffffff';
}

if ( config.colorButton_enableAutomatic !== false ) {
this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', automaticColor );
Expand Down Expand Up @@ -185,6 +189,14 @@ CKEDITOR.plugins.add( 'colorbutton', {
element = walker.next();
}

if ( finalColor == 'transparent' ) {
finalColor = '';
}
if ( type == 'fore' ) {
colorData.automaticTextColor = '#' + normalizeColor( automaticColor );
}
colorData.selectionColor = finalColor ? '#' + finalColor : '';

selectColor( panelBlock, finalColor );
}

Expand All @@ -193,7 +205,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
} );
}

function renderColors( panel, type, colorBoxId ) {
function renderColors( panel, type, colorBoxId, colorData ) {
var output = [],
colors = config.colorButton_colors.split( ',' ),
colorsPerRow = config.colorButton_colorsPerRow || 6,
Expand All @@ -213,7 +225,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
if ( color ) {
return setColor( color );
}
} );
}, null, colorData );
} else {
return setColor( color && '#' + color );
}
Expand Down
43 changes: 34 additions & 9 deletions plugins/colordialog/dialogs/colordialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,12 +128,12 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) {
}

function onKeyStrokes( evt ) {
var domEvt = evt.data;

var element = domEvt.getTarget();
var relative, nodeToMove;
var keystroke = domEvt.getKeystroke(),
rtl = editor.lang.dir == 'rtl';
var domEvt = evt.data,
element = domEvt.getTarget(),
keystroke = domEvt.getKeystroke(),
rtl = editor.lang.dir == 'rtl',
relative,
nodeToMove;

switch ( keystroke ) {
// UP-ARROW
Expand All @@ -145,14 +145,15 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) {
}
domEvt.preventDefault();
break;

// DOWN-ARROW
case 40:
// relative is TR
if ( ( relative = element.getParent().getNext() ) ) {
nodeToMove = relative.getChild( [ element.getIndex() ] );
if ( nodeToMove && nodeToMove.type == 1 )
if ( nodeToMove && nodeToMove.type == 1 ) {
nodeToMove.focus();

}
}
domEvt.preventDefault();
break;
Expand Down Expand Up @@ -230,7 +231,7 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) {
}
}

// This function create a single color cell in the color table.
// This function creates a single color cell in the color table.
function appendColorCell( targetRow, color ) {
var cell = new $el( targetRow.insertCell( -1 ) );
cell.setAttribute( 'class', 'ColorCell ' + colorCellCls );
Expand Down Expand Up @@ -276,6 +277,30 @@ CKEDITOR.dialog.add( 'colordialog', function( editor ) {
title: lang.title,
minWidth: 360,
minHeight: 220,
onShow: function( evt ) {
if ( !evt.data.selectionColor ||
( evt.data.selectionColor == evt.data.automaticTextColor ) ||
( evt.data.selectionColor == '#rgba(0, 0, 0, 0)' && evt.data.type == 'back' ) ) {
// Fallback for IE.
clearSelected();
clearHighlight();
return;
}

var selectionColor = evt.data.selectionColor,
colorPalette = this.parts.contents.getElementsByTag( 'td' ).toArray(),
itemColor;

dialog.getContentElement( 'picker', 'selectedColor' ).setValue( selectionColor );

CKEDITOR.tools.array.forEach( colorPalette, function( paletteItem ) {
itemColor = CKEDITOR.tools.convertRgbToHex( paletteItem.getStyle( 'background-color' ) );
if ( selectionColor === itemColor ) {
paletteItem.focus();
focused = paletteItem;
}
} );
},
onLoad: function() {
// Update reference.
dialog = this;
Expand Down
25 changes: 17 additions & 8 deletions plugins/colordialog/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,9 @@ CKEDITOR.plugins.colordialog = {
* @param [scope] The scope in which the callback will be bound.
* @member CKEDITOR.editor
*/
editor.getColorFromDialog = function( callback, scope ) {
editor.getColorFromDialog = function( callback, scope, options ) {
var onClose,
onShow,
releaseHandlers,
bindToDialog;

Expand All @@ -38,24 +39,33 @@ CKEDITOR.plugins.colordialog = {
}
callback.call( scope, color );
};
onShow = function( evt ) {
if ( options ) {
evt.data = options;
}
};

releaseHandlers = function( dialog ) {
dialog.removeListener( 'ok', onClose );
dialog.removeListener( 'cancel', onClose );
dialog.removeListener( 'show', onShow );
};
bindToDialog = function( dialog ) {
dialog.on( 'ok', onClose );
dialog.on( 'cancel', onClose );
// Priority is set here to pass the data before actually displaying the dialog.
dialog.on( 'show', onShow, null, null, 5 );
};

editor.execCommand( 'colordialog' );

if ( editor._.storedDialogs && editor._.storedDialogs.colordialog )
if ( editor._.storedDialogs && editor._.storedDialogs.colordialog ) {
bindToDialog( editor._.storedDialogs.colordialog );
else {
} else {
CKEDITOR.on( 'dialogDefinition', function( e ) {
if ( e.data.name != 'colordialog' )
if ( e.data.name != 'colordialog' ) {
return;

}
var definition = e.data.definition;

e.removeListener();
Expand All @@ -64,15 +74,14 @@ CKEDITOR.plugins.colordialog = {
return function() {
bindToDialog( this );
definition.onLoad = orginal;
if ( typeof orginal == 'function' )
if ( typeof orginal == 'function' ) {
orginal.call( this );
}
};
} );
} );
}
};


}
};

Expand Down
8 changes: 4 additions & 4 deletions plugins/contextmenu/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,9 @@ CKEDITOR.plugins.add( 'contextmenu', {
// which make this property unreliable. (https://dev.ckeditor.com/ticket/4826)
( CKEDITOR.env.webkit ? holdCtrlKey : ( CKEDITOR.env.mac ? domEvent.$.metaKey : domEvent.$.ctrlKey ) );

if ( nativeContextMenuOnCtrl && isCtrlKeyDown )
if ( nativeContextMenuOnCtrl && isCtrlKeyDown ) {
return;
}

// Cancel the browser context menu.
domEvent.preventDefault();
Expand All @@ -79,8 +80,9 @@ CKEDITOR.plugins.add( 'contextmenu', {
}, true ); // Exclude editor's editable.

// Fake selection for non-editables only (to exclude nested editables).
if ( contentEditableParent && contentEditableParent.getAttribute( 'contenteditable' ) == 'false' )
if ( contentEditableParent && contentEditableParent.getAttribute( 'contenteditable' ) == 'false' ) {
editor.getSelection().fake( contentEditableParent );
}
}

var doc = domEvent.getTarget().getDocument(),
Expand All @@ -92,7 +94,6 @@ CKEDITOR.plugins.add( 'contextmenu', {

CKEDITOR.tools.setTimeout( function() {
this.open( offsetParent, null, offsetX, offsetY );

// IE needs a short while to allow selection change before opening menu. (https://dev.ckeditor.com/ticket/7908)
}, CKEDITOR.env.ie ? 200 : 0, this );
}, this );
Expand Down Expand Up @@ -147,7 +148,6 @@ CKEDITOR.plugins.add( 'contextmenu', {

// https://dev.ckeditor.com/ticket/9362: Force selection check to update commands' states in the new context.
this.editor.selectionChange( 1 );

this.show( offsetParent, corner, offsetX, offsetY );
}
}
Expand Down
40 changes: 40 additions & 0 deletions tests/plugins/colordialog/_helpers/tools.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/* exported assertColor, openDialogManually */

function assertColor( editor, inputColor, outputColor ) {
editor.once( 'dialogShow', function( evt ) {
var dialog = evt.data;
dialog.setValueOf( 'picker', 'selectedColor', inputColor );
dialog.getButton( 'ok' ).click();
} );

editor.getColorFromDialog( function( color ) {
resume( function() {
assert.areSame( outputColor, color );
} );
} );
wait();
}

function openDialogManually( editor, expectedColor, html, button ) {
var toolbarButton = editor.ui.get( button );
bender.tools.setHtmlWithSelection( editor, html );
editor.once( 'dialogShow', function( evt ) {
resume( function() {
var dialog = evt.data,
selectedColor = dialog.getValueOf( 'picker', 'selectedColor' );
dialog.getButton( 'ok' ).click();
assert.areSame( expectedColor, selectedColor );
} );
} );

toolbarButton.click( editor );
openColorDialog( toolbarButton );
}

function openColorDialog( button ) {
setTimeout( function() {
button._.panel.getBlock( button._.id ).element.findOne( '.cke_colormore' ).$.click();
}, 0 );
wait();
}

Loading

0 comments on commit b3f6b49

Please sign in to comment.