Sfoglia il codice sorgente

Provide mechanism to have only one checkmark in color dropdown. Unit test for this change.

Mateusz Samsel 6 anni fa
parent
commit
21cf1e3033

+ 1 - 3
packages/ckeditor5-font/src/ui/colortableview.js

@@ -224,7 +224,6 @@ export default class ColorTableView extends View {
 		} );
 
 		colorGrid.delegate( 'execute' ).to( this );
-		colorGrid.bind( 'selectedColor' ).to( this );
 
 		return colorGrid;
 	}
@@ -238,11 +237,10 @@ export default class ColorTableView extends View {
 	_createDocumentColorsGrid() {
 		const documentColors = new ColorGridView( this.locale, {
 			columns: this.columns,
-			gridLabel: this.documentColorsLabel
+			label: this.documentColorsLabel
 		} );
 
 		documentColors.delegate( 'execute' ).to( this );
-		documentColors.bind( 'selectedColor' ).to( this );
 
 		documentColors.items.bindTo( this.documentColors ).using(
 			colorObj => {

+ 34 - 5
packages/ckeditor5-font/src/ui/colorui.js

@@ -131,13 +131,14 @@ export default class ColorUI extends Plugin {
 				editor.editing.view.focus();
 			} );
 
-			if ( documentColorsCount !== 0 ) {
-				dropdownView.on( 'change:isOpen', ( evt, name, val ) => {
-					if ( val ) {
+			dropdownView.on( 'change:isOpen', ( evt, name, val ) => {
+				if ( val ) {
+					if ( documentColorsCount !== 0 ) {
 						this._updateDocumentColors();
 					}
-				} );
-			}
+					this._updateSelectedColors();
+				}
+			} );
 
 			return dropdownView;
 		} );
@@ -199,4 +200,32 @@ export default class ColorUI extends Plugin {
 			}
 		}
 	}
+
+	/**
+	 * Method refresh state of `selectedColor` in single or both {@link module:ui/colorgrid/colorgridview~ColorGridView}
+	 * available in {@link module:font/ui/colortableview~ColorTableView}. It guarantees that selection will occur only in one of them.
+	 *
+	 * @private
+	 */
+	_updateSelectedColors() {
+		const staticColorsGrid = this.colorTableView.items.get( 1 );
+		const documentColorGrid = this.colorTableView.items.get( 2 );
+		const selectedColor = this.colorTableView.selectedColor;
+
+		if ( documentColorGrid ) {
+			if ( isInDocumentColors( documentColorGrid.items, selectedColor ) ) {
+				documentColorGrid.selectedColor = selectedColor;
+				staticColorsGrid.selectedColor = null;
+			} else {
+				documentColorGrid.selectedColor = null;
+				staticColorsGrid.selectedColor = selectedColor;
+			}
+		} else {
+			staticColorsGrid.selectedColor = selectedColor;
+		}
+	}
+}
+
+function isInDocumentColors( collection, color ) {
+	return !!collection.find( item => item.color === color );
 }

+ 0 - 8
packages/ckeditor5-font/tests/ui/colortableview.js

@@ -178,14 +178,6 @@ describe( 'ColorTableView', () => {
 			expect( staticColorTable.items.length ).to.equal( 3 );
 		} );
 
-		it( 'binds #selectedColor to the table', () => {
-			colorTableView.selectedColor = 'foo';
-			expect( staticColorTable.selectedColor ).to.equal( 'foo' );
-
-			colorTableView.selectedColor = 'bar';
-			expect( staticColorTable.selectedColor ).to.equal( 'bar' );
-		} );
-
 		colorDefinitions.forEach( ( item, index ) => {
 			it( `dispatch event to parent element for color: ${ item.color }`, () => {
 				const spy = sinon.spy();

+ 102 - 4
packages/ckeditor5-font/tests/ui/colorui.js

@@ -192,6 +192,7 @@ describe( 'ColorUI', () => {
 				global.document.body.appendChild( dropdown.element );
 			} );
 			afterEach( () => {
+				dropdown.element.remove();
 				dropdown.destroy();
 			} );
 
@@ -390,8 +391,93 @@ describe( 'ColorUI', () => {
 		} );
 	} );
 
+	describe( '_updateSelectedColors() with document colors', () => {
+		let editor, element, dropdown;
+
+		beforeEach( () => {
+			element = document.createElement( 'div' );
+			document.body.appendChild( element );
+
+			return ClassicTestEditor
+				.create( element, {
+					plugins: [ Paragraph, TestColorPlugin ],
+					testColor: Object.assign( {
+						documentColors: 3
+					}, testColorConfig )
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+					model = editor.model;
+					testColorPlugin = newEditor.plugins.get( 'TestColorPlugin' );
+					dropdown = editor.ui.componentFactory.create( 'testColor' );
+
+					dropdown.render();
+					global.document.body.appendChild( dropdown.element );
+				} );
+		} );
+
+		afterEach( () => {
+			element.remove();
+			dropdown.element.remove();
+			dropdown.destroy();
+
+			return editor.destroy();
+		} );
+
+		it( 'checkmark in document colors', () => {
+			const colorTableView = dropdown.colorTableView;
+			const command = editor.commands.get( 'testColorCommand' );
+
+			setModelData( model,
+				'<paragraph><$text testColor="red">Foo</$text></paragraph>'
+			);
+			command.value = 'red';
+
+			dropdown.isOpen = true;
+
+			const staticColorsGrid = colorTableView.items.get( 1 );
+			const documentColorsGrid = colorTableView.items.get( 2 );
+
+			expect( staticColorsGrid.selectedColor ).to.be.null;
+			expect( documentColorsGrid.selectedColor ).to.equal( 'red' );
+
+			const redStaticColorTile = staticColorsGrid.items.find( tile => tile.color === 'red' );
+			const redDocumentColorTile = documentColorsGrid.items.get( 0 );
+
+			expect( redStaticColorTile.isOn ).to.be.false;
+			expect( redDocumentColorTile.isOn ).to.be.true;
+		} );
+
+		it( 'checkmark in static colors', () => {
+			const colorTableView = dropdown.colorTableView;
+			const command = editor.commands.get( 'testColorCommand' );
+
+			setModelData( model,
+				'<paragraph><$text testColor="gold">Bar</$text></paragraph>' +
+				'<paragraph><$text testColor="rgb(10,20,30)">Foo</$text></paragraph>' +
+				'<paragraph><$text testColor="#FFAACC">Baz</$text></paragraph>' +
+				'<paragraph><$text testColor="#00FF00">Test</$text></paragraph>'
+			);
+			command.value = '#00FF00';
+
+			dropdown.isOpen = true;
+
+			const staticColorsGrid = colorTableView.items.get( 1 );
+			const documentColorsGrid = colorTableView.items.get( 2 );
+
+			expect( staticColorsGrid.selectedColor ).to.equal( '#00FF00' );
+			expect( documentColorsGrid.selectedColor ).to.be.null;
+
+			const redStaticColorTile = staticColorsGrid.items.find( tile => tile.color === '#00FF00' );
+			const redDocumentColorTile = documentColorsGrid.items.get( 0 );
+
+			expect( redStaticColorTile.isOn ).to.be.true;
+			expect( redDocumentColorTile.isOn ).to.be.false;
+		} );
+	} );
+
 	describe( 'empty document colors', () => {
-		let editor, element;
+		let editor, element, dropdown;
 
 		beforeEach( () => {
 			element = document.createElement( 'div' );
@@ -408,21 +494,33 @@ describe( 'ColorUI', () => {
 					editor = newEditor;
 					model = editor.model;
 					testColorPlugin = newEditor.plugins.get( 'TestColorPlugin' );
+					dropdown = editor.ui.componentFactory.create( 'testColor' );
+
+					dropdown.render();
+					global.document.body.appendChild( dropdown.element );
 				} );
 		} );
 
 		afterEach( () => {
 			element.remove();
+			dropdown.element.remove();
+			dropdown.destroy();
 
 			return editor.destroy();
 		} );
 
 		it( 'document colors are not created', () => {
-			const dropdown = editor.ui.componentFactory.create( 'testColor' );
-			dropdown.render();
-
 			const colorTableView = dropdown.colorTableView;
 
+			setModelData( model,
+				'<paragraph><$text testColor="gold">Bar</$text></paragraph>' +
+				'<paragraph><$text testColor="rgb(10,20,30)">Foo</$text></paragraph>' +
+				'<paragraph><$text testColor="gold">New Foo</$text></paragraph>' +
+				'<paragraph><$text testColor="#FFAACC">Baz</$text></paragraph>'
+			);
+
+			dropdown.isOpen = true;
+
 			expect( colorTableView.documentColorsCount ).to.equal( 0 );
 			expect( colorTableView.documentColorsLabel ).to.be.undefined;
 		} );