Przeglądaj źródła

Code refactoring and documentation.

Aleksander Nowodzinski 6 lat temu
rodzic
commit
95d3e0d764

+ 6 - 6
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -14,7 +14,7 @@ import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 /**
- * A grid of {@link module:font/ui/colortile~ColorTile}.
+ * A grid of {@link module:font/ui/colortile~ColorTile color tiles}.
  *
  * @extends module:ui/view~View
  */
@@ -24,9 +24,9 @@ export default class ColorGrid extends View {
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
 	 * @param {Object} options Component configuration
-	 * @param {Array.<module:font/ui/colorgrid~ColorDefinition>} [options.colorsDefinition] Array with definitions
+	 * @param {Array.<module:font/ui/colorgrid~ColorDefinition>} [options.colorDefinitions] Array with definitions
 	 * required to create the {@link module:font/ui/colortile~ColorTile tiles}.
-	 * @param {Number} options.colorColumns A number of columns to display the tiles.
+	 * @param {Number} options.columns A number of columns to display the tiles.
 	 */
 	constructor( locale, options ) {
 		super( locale );
@@ -75,8 +75,8 @@ export default class ColorGrid extends View {
 			}
 		} );
 
-		if ( options.colorsDefinition ) {
-			options.colorsDefinition.forEach( item => {
+		if ( options.colorDefinitions ) {
+			options.colorDefinitions.forEach( item => {
 				const colorTile = new ColorTile();
 
 				colorTile.set( {
@@ -104,7 +104,7 @@ export default class ColorGrid extends View {
 			attributes: {
 				class: 'ck-color-table__grid-container',
 				style: {
-					gridTemplateColumns: `repeat( ${ options.colorColumns }, 1fr)`
+					gridTemplateColumns: `repeat( ${ options.columns }, 1fr)`
 				}
 			}
 		} );

+ 17 - 13
packages/ckeditor5-font/src/ui/colortableview.js

@@ -19,8 +19,11 @@ import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
 import '../../theme/fontcolor.css';
 
 /**
- * Class which represents a view with {@link module:font/ui/colorgrid~ColorGrid}
- * and remove color buttons.
+ * Class which represents a view with the following sub–components:
+ *
+ * * a remove color button,
+ * * a {@link module:font/ui/colorgrid~ColorGrid},
+ * * a grid of recently used colors.
  *
  * @extends module:ui/view~View
  */
@@ -30,12 +33,13 @@ export default class ColorTableView extends View {
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
 	 * @param {Object} config Configuration object
-	 * @param {Array.<Object>} config.colors Array with definitions of colors to be displayed in the table.
-	 * @param {Number} config.colorColumns Number of columns in the color grid.
+	 * @param {Array.<module:font/ui/colorgrid~ColorDefinition>} config.colors Array with definitions of colors to
+	 * be displayed in the table.
+	 * @param {Number} config.columns Number of columns in the color grid.
 	 * Also determines how many recent color will be displayed.
 	 * @param {String} config.removeButtonLabel A label of a button responsible for removing the color.
 	 */
-	constructor( locale, { colors, colorColumns, removeButtonLabel } ) {
+	constructor( locale, { colors, columns, removeButtonLabel } ) {
 		super( locale );
 
 		/**
@@ -49,9 +53,9 @@ export default class ColorTableView extends View {
 		/**
 		 * An array with objects representing colors to be displayed in the grid.
 		 *
-		 * @type {Arrray.<Object>}
+		 * @type {Arrray.<module:font/ui/colorgrid~ColorDefinition>}
 		 */
-		this.colorsDefinition = colors;
+		this.colorDefinitions = colors;
 
 		/**
 		 * Tracks information about DOM focus in the list.
@@ -88,7 +92,7 @@ export default class ColorTableView extends View {
 		 *
 		 * @type {Number}
 		 */
-		this.colorColumns = colorColumns;
+		this.columns = columns;
 
 		/**
 		 * A collection storing definitions of recently used colors.
@@ -162,8 +166,8 @@ export default class ColorTableView extends View {
 	 */
 	createStaticColorTable() {
 		const colorGrid = new ColorGrid( this.locale, {
-			colorsDefinition: this.colorsDefinition,
-			colorColumns: this.colorColumns
+			colorDefinitions: this.colorDefinitions,
+			columns: this.columns
 		} );
 
 		colorGrid.delegate( 'execute' ).to( this );
@@ -177,7 +181,7 @@ export default class ColorTableView extends View {
 	 * @private
 	 */
 	recentlyUsed() {
-		const recentViews = new ColorGrid( this.locale, { colorColumns: this.colorColumns } );
+		const recentViews = new ColorGrid( this.locale, { columns: this.columns } );
 
 		recentViews.items.bindTo( this.recentlyUsedColors ).using(
 			colorObj => {
@@ -218,7 +222,7 @@ export default class ColorTableView extends View {
 				this.recentlyUsedColors.remove( duplicates[ 1 ] );
 			}
 
-			if ( this.recentlyUsedColors.length > this.colorColumns ) {
+			if ( this.recentlyUsedColors.length > this.columns ) {
 				this.recentlyUsedColors.remove( this.recentlyUsedColors.length - 1 );
 			}
 		} );
@@ -235,7 +239,7 @@ export default class ColorTableView extends View {
 	 * @private
 	 */
 	initRecentCollection() {
-		for ( let i = 0; i < this.colorColumns; i++ ) {
+		for ( let i = 0; i < this.columns; i++ ) {
 			this.recentlyUsedColors.add( {
 				color: 'hsla(0, 0%, 0%, 0)',
 				isEnabled: false,

+ 4 - 4
packages/ckeditor5-font/src/ui/colorui.js

@@ -10,7 +10,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import {
-	addColorsToDropdown,
+	addColorTableToDropdown,
 	getLocalizedColorOptions
 } from '../utils';
 
@@ -64,7 +64,7 @@ export default class ColorUI extends Plugin {
 		 * Number of columns in color grid. Determines the number of recent colors to be displayed.
 		 * @type {Number}
 		 */
-		this.colorColumns = editor.config.get( `${ this.componentName }.columns` );
+		this.columns = editor.config.get( `${ this.componentName }.columns` );
 	}
 
 	/**
@@ -79,7 +79,7 @@ export default class ColorUI extends Plugin {
 		// Register UI component.
 		editor.ui.componentFactory.add( this.componentName, locale => {
 			const dropdownView = createDropdown( locale );
-			const colorTableView = addColorsToDropdown( {
+			const colorTableView = addColorTableToDropdown( {
 				dropdownView,
 				colors: options.map( option => ( {
 					label: option.label,
@@ -88,7 +88,7 @@ export default class ColorUI extends Plugin {
 						hasBorder: option.hasBorder
 					}
 				} ) ),
-				colorColumns: this.colorColumns,
+				columns: this.columns,
 				removeButtonLabel: t( 'Remove color' )
 			} );
 

+ 6 - 3
packages/ckeditor5-font/src/utils.js

@@ -90,14 +90,17 @@ export function normalizeOptions( colorRow ) {
 
 /**
  * Helper which add {@link module:font/ui/colortableview~ColorTableView} to dropdown with proper initial values.
+ *
  * @param {Object} config Configuration object
  * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView Dropdown view to which
  * will be added {@link module:font/ui/colortableview~ColorTableView}.
- * @param {Array.<Object>}  Array with objects representing color to be drawn in color grid.
+ * @param {Array.<module:font/ui/colorgrid~ColorDefinition>}  Array with definitions representing colors to be displayed
+ * in the color table.
+ * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
  */
-export function addColorsToDropdown( { dropdownView, colors, colorColumns, removeButtonLabel } ) {
+export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel } ) {
 	const locale = dropdownView.locale;
-	const colorTableView = new ColorTableView( locale, { colors, colorColumns, removeButtonLabel } );
+	const colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel } );
 
 	dropdownView.colorTableView = colorTableView;
 	dropdownView.panelView.children.add( colorTableView );

+ 1 - 1
packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -44,6 +44,6 @@ describe( 'FontBckgroundColorUI', () => {
 		expect( fontBackgroundColorUIPlugin.componentName ).to.equal( 'fontBackgroundColor' );
 		expect( fontBackgroundColorUIPlugin.icon ).to.equal( fontBackgroundColorIcon );
 		expect( fontBackgroundColorUIPlugin.dropdownLabel ).to.equal( 'Font Background Color' );
-		expect( fontBackgroundColorUIPlugin.colorColumns ).to.equal( 5 );
+		expect( fontBackgroundColorUIPlugin.columns ).to.equal( 5 );
 	} );
 } );

+ 1 - 1
packages/ckeditor5-font/tests/fontcolor/fontcolorui.js

@@ -44,6 +44,6 @@ describe( 'FontColorUI', () => {
 		expect( fontColorUIPlugin.componentName ).to.equal( 'fontColor' );
 		expect( fontColorUIPlugin.icon ).to.equal( fontColorIcon );
 		expect( fontColorUIPlugin.dropdownLabel ).to.equal( 'Font Color' );
-		expect( fontColorUIPlugin.colorColumns ).to.equal( 5 );
+		expect( fontColorUIPlugin.columns ).to.equal( 5 );
 	} );
 } );

+ 3 - 3
packages/ckeditor5-font/tests/ui/colorgrid.js

@@ -16,7 +16,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 describe( 'ColorGrid', () => {
 	let locale, colorGrid;
 
-	const colorsDefinition = [
+	const colorDefinitions = [
 		{
 			color: '#000',
 			label: 'Black',
@@ -42,7 +42,7 @@ describe( 'ColorGrid', () => {
 
 	beforeEach( () => {
 		locale = { t() {} };
-		colorGrid = new ColorGrid( locale, { colorsDefinition } );
+		colorGrid = new ColorGrid( locale, { colorDefinitions } );
 		colorGrid.render();
 	} );
 
@@ -69,7 +69,7 @@ describe( 'ColorGrid', () => {
 			it( 'has proper number of elements', () => {
 				expect( colorGrid.items.length ).to.equal( 3 );
 			} );
-			colorsDefinition.forEach( ( color, index ) => {
+			colorDefinitions.forEach( ( color, index ) => {
 				describe( 'child items has proper attributes', () => {
 					it( `for (index: ${ index }, color: ${ color.color }) child`, () => {
 						const colorTile = colorGrid.items.get( index );

+ 5 - 5
packages/ckeditor5-font/tests/ui/colortableview.js

@@ -17,7 +17,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 describe( 'ColorTableView', () => {
 	let locale, colorTableView;
 
-	const colorsDefinition = [
+	const colorDefinitions = [
 		{
 			color: '#000',
 			label: 'Black',
@@ -43,8 +43,8 @@ describe( 'ColorTableView', () => {
 	beforeEach( () => {
 		locale = { t() {} };
 		colorTableView = new ColorTableView( locale, {
-			colors: colorsDefinition,
-			colorColumns: 5,
+			colors: colorDefinitions,
+			columns: 5,
 			removeButtonLabel: 'Remove color'
 		} );
 		colorTableView.render();
@@ -78,7 +78,7 @@ describe( 'ColorTableView', () => {
 		} );
 
 		it( 'sets number of drawed columns', () => {
-			expect( colorTableView.colorColumns ).to.equal( 5 );
+			expect( colorTableView.columns ).to.equal( 5 );
 		} );
 
 		it( 'creaets collection of recently used colors', () => {
@@ -152,7 +152,7 @@ describe( 'ColorTableView', () => {
 			expect( staticColorTable.items.length ).to.equal( 3 );
 		} );
 
-		colorsDefinition.forEach( ( item, index ) => {
+		colorDefinitions.forEach( ( item, index ) => {
 			it( `dispatch event to parent element for color: ${ item.color }`, () => {
 				const spy = sinon.spy();
 				colorTableView.on( 'execute', spy );

+ 1 - 1
packages/ckeditor5-font/tests/ui/colorui.js

@@ -113,7 +113,7 @@ describe( 'ColorUI', () => {
 
 		it( 'has assigned proper amount of columns', () => {
 			// Value taken from editor's config above.
-			expect( testColorPlugin.colorColumns ).to.equal( 3 );
+			expect( testColorPlugin.columns ).to.equal( 3 );
 		} );
 	} );
 

+ 3 - 3
packages/ckeditor5-font/tests/utils.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-import { FONT_COLOR, FONT_BACKGROUND_COLOR, normalizeOptions, addColorsToDropdown } from './../src/utils';
+import { FONT_COLOR, FONT_BACKGROUND_COLOR, normalizeOptions, addColorTableToDropdown } from './../src/utils';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import ColorTableView from './../src/ui/colortableview';
 
@@ -103,7 +103,7 @@ describe( 'utils', () => {
 			const dropdown = createDropdown();
 			dropdown.render();
 
-			addColorsToDropdown( {
+			addColorTableToDropdown( {
 				dropdownView: dropdown,
 				colors: [
 					{
@@ -121,7 +121,7 @@ describe( 'utils', () => {
 						}
 					}
 				],
-				colorColumns: 2,
+				columns: 2,
 				removeButtonTooltip: 'Remove Color'
 			} );