i/4992: Used the new Collection and View API to add multiple Views at a time

src/documentcolorcollection.js

@@ -13,8 +13,8 @@ import mix from '@ckeditor/ckeditor5-utils/src/mix';
  * @extends module:utils/collection~Collection
  */
 export default class DocumentColorCollection extends Collection {
-	constructor( options ) {
-		super( options );
+	constructor( ...args ) {
+		super( ...args );
 
 		/**
 		 * Indicates whether the document color collection is empty.
@@ -23,32 +23,43 @@ export default class DocumentColorCollection extends Collection {
 		 * @readonly
 		 * @member {Boolean} #isEmpty
 		 */
-		this.set( 'isEmpty', true );
+		this.set( 'isEmpty', !this.length );
 	}
 
 	/**
-	 * Adds a color to the document color collection.
+	 * Adds a color (or colors) to the document color collection.
 	 *
 	 * This method ensures that no color duplicates are inserted (compared using
 	 * the color value of the {@link module:ui/colorgrid/colorgrid~ColorDefinition}).
 	 *
 	 * If the item does not have an ID, it will be automatically generated and set on the item.
 	 *
 	 * @chainable
-	 * @param {module:ui/colorgrid/colorgrid~ColorDefinition} item
-	 * @param {Number} [index] The position of the item in the collection. The item
-	 * is pushed to the collection when `index` is not specified.
+	 * @param {...(module:ui/colorgrid/colorgrid~ColorDefinition)} items
+	 * @param {Number} [index] The position of the color (or colors) in the collection. Colors
+	 * are pushed to the collection when `index` is not specified.
 	 * @fires add
 	 */
-	add( item, index ) {
-		if ( this.find( element => element.color === item.color ) ) {
-			// No duplicates are allowed.
-			return;
+	add( ...args ) {
+		let items = args;
+
+		// No duplicates are allowed.
+		items = items.filter( ( item, index ) => {
+			// Don't filter out the add index (last argument).
+			if ( index === items.length - 1 && typeof item === 'number' ) {
+				return true;
+			}
+
+			return !this.find( element => element.color === item.color );
+		} );
+
+		if ( items.length ) {
+			super.add( ...items );
 		}
 
-		super.add( item, index );
+		this.set( 'isEmpty', !this.length );
 
-		this.set( 'isEmpty', false );
+		return this;
 	}
 
 	/**
@@ -57,9 +68,7 @@ export default class DocumentColorCollection extends Collection {
 	remove( subject ) {
 		const ret = super.remove( subject );
 
-		if ( this.length === 0 ) {
-			this.set( 'isEmpty', true );
-		}
+		this.set( 'isEmpty', !this.length );
 
 		return ret;
 	}

src/fontfamily/fontfamilyui.js

@@ -95,7 +95,7 @@ export default class FontFamilyUI extends Plugin {
 // @param {Array.<module:font/fontsize~FontSizeOption>} options
 // @param {module:font/fontsize/fontsizecommand~FontSizeCommand} command
 function _prepareListOptions( options, command ) {
-	const itemDefinitions = new Collection();
+	const itemDefinitions = [];
 
 	// Create dropdown items.
 	for ( const option of options ) {
@@ -116,7 +116,8 @@ function _prepareListOptions( options, command ) {
 			def.model.set( 'labelStyle', `font-family: ${ option.view.styles[ 'font-family' ] }` );
 		}
 
-		itemDefinitions.add( def );
+		itemDefinitions.push( def );
 	}
-	return itemDefinitions;
+
+	return new Collection( itemDefinitions );
 }

src/fontsize/fontsizeui.js

@@ -110,7 +110,7 @@ export default class FontSizeUI extends Plugin {
 // @param {Array.<module:font/fontsize~FontSizeOption>} options
 // @param {module:font/fontsize/fontsizecommand~FontSizeCommand} command
 function _prepareListOptions( options, command ) {
-	const itemDefinitions = new Collection();
+	const itemDefinitions = [];
 
 	for ( const option of options ) {
 		const def = {
@@ -135,8 +135,8 @@ function _prepareListOptions( options, command ) {
 		def.model.bind( 'isOn' ).to( command, 'value', value => value === option.model );
 
 		// Add the option to the collection.
-		itemDefinitions.add( def );
+		itemDefinitions.push( def );
 	}
 
-	return itemDefinitions;
+	return new Collection( itemDefinitions );
 }

src/ui/colortableview.js

@@ -163,8 +163,7 @@ export default class ColorTableView extends View {
 			children: this.items
 		} );
 
-		this.items.add( this._removeColorButton() );
-		this.items.add( this.staticColorsGrid );
+		this.items.add( this._removeColorButton(), this.staticColorsGrid );
 
 		if ( documentColorsCount ) {
 			// Create a label for document colors.
@@ -182,10 +181,8 @@ export default class ColorTableView extends View {
 				}
 			} );
 
-			this.items.add( label );
-
 			this.documentColorsGrid = this._createDocumentColorsGrid();
-			this.items.add( this.documentColorsGrid );
+			this.items.add( label, this.documentColorsGrid );
 		}
 	}
 

tests/documentcolorcollection.js

@@ -25,11 +25,7 @@ describe( 'DocumentColorCollection', () => {
 	];
 
 	beforeEach( () => {
-		documentColorCollection = new DocumentColorCollection();
-
-		colors.forEach( item => {
-			documentColorCollection.add( item );
-		} );
+		documentColorCollection = new DocumentColorCollection( colors );
 	} );
 
 	it( 'constructor()', () => {
@@ -58,4 +54,17 @@ describe( 'DocumentColorCollection', () => {
 		expect( documentColorCollection.hasColor( '111' ) ).to.be.true;
 		expect( documentColorCollection.hasColor( '555' ) ).to.be.false;
 	} );
+
+	describe( 'add()', () => {
+		it( 'supports adding multiple items at a time', () => {
+			documentColorCollection = new DocumentColorCollection();
+
+			documentColorCollection.add( colors[ 0 ] );
+			documentColorCollection.add( colors[ 1 ], colors[ 2 ], 0 );
+
+			expect( documentColorCollection.map( item => item.color ) ).to.have.ordered.members( [
+				'222', '333', '111'
+			] );
+		} );
+	} );
 } );