@ckeditor/ckeditor5-ui 35.2.1 → 35.3.0

package/src/colorgrid/colorgridview.js

@@ -2,216 +2,154 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module ui/colorgrid/colorgrid
  */
-
 import View from '../view';
 import ColorTileView from './colortileview';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import addKeyboardHandlingForGrid from '../bindings/addkeyboardhandlingforgrid';
-
 import '../../theme/components/colorgrid/colorgrid.css';
-
 /**
  * A grid of {@link module:ui/colorgrid/colortile~ColorTileView color tiles}.
  *
  * @extends module:ui/view~View
  */
 export default class ColorGridView extends View {
-	/**
-	 * Creates an instance of a color grid containing {@link module:ui/colorgrid/colortile~ColorTileView tiles}.
-	 *
-	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
-	 * @param {Object} options Component configuration
-	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} [options.colorDefinitions] Array with definitions
-	 * required to create the {@link module:ui/colorgrid/colortile~ColorTileView tiles}.
-	 * @param {Number} [options.columns=5] A number of columns to display the tiles.
-	 */
-	constructor( locale, options ) {
-		super( locale );
-
-		const colorDefinitions = options && options.colorDefinitions || [];
-		const viewStyleAttribute = {};
-
-		/**
-		 * A number of columns for the tiles grid.
-		 *
-		 * @readonly
-		 * @member {Number}
-		 */
-		this.columns = options && options.columns ? options.columns : 5;
-
-		viewStyleAttribute.gridTemplateColumns = `repeat( ${ this.columns }, 1fr)`;
-
-		/**
-		 * The color of the currently selected color tile in {@link #items}.
-		 *
-		 * @observable
-		 * @type {String}
-		 */
-		this.set( 'selectedColor' );
-
-		/**
-		 * Collection of the child tile views.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.items = this.createCollection();
-
-		/**
-		 * Tracks information about DOM focus in the grid.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker}
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-		 *
-		 * @readonly
-		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
-		 */
-		this.keystrokes = new KeystrokeHandler();
-
-		this.items.on( 'add', ( evt, colorTile ) => {
-			colorTile.isOn = colorTile.color === this.selectedColor;
-		} );
-
-		colorDefinitions.forEach( color => {
-			const colorTile = new ColorTileView();
-
-			colorTile.set( {
-				color: color.color,
-				label: color.label,
-				tooltip: true,
-				hasBorder: color.options.hasBorder
-			} );
-
-			colorTile.on( 'execute', () => {
-				this.fire( 'execute', {
-					value: color.color,
-					hasBorder: color.options.hasBorder,
-					label: color.label
-				} );
-			} );
-
-			this.items.add( colorTile );
-		} );
-
-		this.setTemplate( {
-			tag: 'div',
-			children: this.items,
-			attributes: {
-				class: [
-					'ck',
-					'ck-color-grid'
-				],
-				style: viewStyleAttribute
-			}
-		} );
-
-		this.on( 'change:selectedColor', ( evt, name, selectedColor ) => {
-			for ( const item of this.items ) {
-				item.isOn = item.color === selectedColor;
-			}
-		} );
-	}
-
-	/**
-	 * Focuses the first focusable in {@link #items}.
-	 */
-	focus() {
-		if ( this.items.length ) {
-			this.items.first.focus();
-		}
-	}
-
-	/**
-	 * Focuses the last focusable in {@link #items}.
-	 */
-	focusLast() {
-		if ( this.items.length ) {
-			this.items.last.focus();
-		}
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		// Items added before rendering should be known to the #focusTracker.
-		for ( const item of this.items ) {
-			this.focusTracker.add( item.element );
-		}
-
-		this.items.on( 'add', ( evt, item ) => {
-			this.focusTracker.add( item.element );
-		} );
-
-		this.items.on( 'remove', ( evt, item ) => {
-			this.focusTracker.remove( item.element );
-		} );
-
-		// Start listening for the keystrokes coming from #element.
-		this.keystrokes.listenTo( this.element );
-
-		addKeyboardHandlingForGrid( {
-			keystrokeHandler: this.keystrokes,
-			focusTracker: this.focusTracker,
-			gridItems: this.items,
-			numberOfColumns: this.columns
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	destroy() {
-		super.destroy();
-
-		this.focusTracker.destroy();
-		this.keystrokes.destroy();
-	}
-
-	/**
-	 * Fired when the `ColorTileView` for the picked item is executed.
-	 *
-	 * @event execute
-	 * @param {Object} data Additional information about the event.
-	 * @param {String} data.value The value of the selected color
-	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#color `color.color`}).
-	 * @param {Boolean} data.hasBorder The `hasBorder` property of the selected color
-	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#options `color.options.hasBorder`}).
-	 * @param {String} data.Label The label of the selected color
-	 * ({@link module:ui/colorgrid/colorgrid~ColorDefinition#label `color.label`})
-	 */
+    /**
+     * Creates an instance of a color grid containing {@link module:ui/colorgrid/colortile~ColorTileView tiles}.
+     *
+     * @param {module:utils/locale~Locale} [locale] The localization services instance.
+     * @param {Object} options Component configuration
+     * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} [options.colorDefinitions] Array with definitions
+     * required to create the {@link module:ui/colorgrid/colortile~ColorTileView tiles}.
+     * @param {Number} [options.columns=5] A number of columns to display the tiles.
+     */
+    constructor(locale, options) {
+        super(locale);
+        const colorDefinitions = options && options.colorDefinitions || [];
+        /**
+         * A number of columns for the tiles grid.
+         *
+         * @readonly
+         * @member {Number}
+         */
+        this.columns = options && options.columns ? options.columns : 5;
+        const viewStyleAttribute = {
+            gridTemplateColumns: `repeat( ${this.columns}, 1fr)`
+        };
+        /**
+         * The color of the currently selected color tile in {@link #items}.
+         *
+         * @observable
+         * @type {String}
+         */
+        this.set('selectedColor', undefined);
+        /**
+         * Collection of the child tile views.
+         *
+         * @readonly
+         * @member {module:ui/viewcollection~ViewCollection}
+         */
+        this.items = this.createCollection();
+        /**
+         * Tracks information about DOM focus in the grid.
+         *
+         * @readonly
+         * @member {module:utils/focustracker~FocusTracker}
+         */
+        this.focusTracker = new FocusTracker();
+        /**
+         * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+         *
+         * @readonly
+         * @member {module:utils/keystrokehandler~KeystrokeHandler}
+         */
+        this.keystrokes = new KeystrokeHandler();
+        this.items.on('add', (evt, colorTile) => {
+            colorTile.isOn = colorTile.color === this.selectedColor;
+        });
+        colorDefinitions.forEach(color => {
+            const colorTile = new ColorTileView();
+            colorTile.set({
+                color: color.color,
+                label: color.label,
+                tooltip: true,
+                hasBorder: color.options.hasBorder
+            });
+            colorTile.on('execute', () => {
+                this.fire('execute', {
+                    value: color.color,
+                    hasBorder: color.options.hasBorder,
+                    label: color.label
+                });
+            });
+            this.items.add(colorTile);
+        });
+        this.setTemplate({
+            tag: 'div',
+            children: this.items,
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-color-grid'
+                ],
+                style: viewStyleAttribute
+            }
+        });
+        this.on('change:selectedColor', (evt, name, selectedColor) => {
+            for (const item of this.items) {
+                item.isOn = item.color === selectedColor;
+            }
+        });
+    }
+    /**
+     * Focuses the first focusable in {@link #items}.
+     */
+    focus() {
+        if (this.items.length) {
+            this.items.first.focus();
+        }
+    }
+    /**
+     * Focuses the last focusable in {@link #items}.
+     */
+    focusLast() {
+        if (this.items.length) {
+            this.items.last.focus();
+        }
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Items added before rendering should be known to the #focusTracker.
+        for (const item of this.items) {
+            this.focusTracker.add(item.element);
+        }
+        this.items.on('add', (evt, item) => {
+            this.focusTracker.add(item.element);
+        });
+        this.items.on('remove', (evt, item) => {
+            this.focusTracker.remove(item.element);
+        });
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+        addKeyboardHandlingForGrid({
+            keystrokeHandler: this.keystrokes,
+            focusTracker: this.focusTracker,
+            gridItems: this.items,
+            numberOfColumns: this.columns
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
 }
-
-/**
- * A color definition used to create a {@link module:ui/colorgrid/colortile~ColorTileView}.
- *
- *		{
- *			color: 'hsl(0, 0%, 75%)',
- *			label: 'Light Grey',
- *			options: {
- *				hasBorder: true
- *			}
- *		}
- *
- * @typedef {Object} module:ui/colorgrid/colorgrid~ColorDefinition
- * @type Object
- *
- * @property {String} color String representing a color.
- * It is used as value of background-color style in {@link module:ui/colorgrid/colortile~ColorTileView}.
- * @property {String} label String used as label for {@link module:ui/colorgrid/colortile~ColorTileView}.
- * @property {Object} options Additional options passed to create a {@link module:ui/colorgrid/colortile~ColorTileView}.
- * @property {Boolean} options.hasBorder A flag that indicates if special a CSS class should be added
- * to {@link module:ui/colorgrid/colortile~ColorTileView}, which renders a border around it.
- */

package/src/colorgrid/colortileview.js

@@ -2,62 +2,52 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module ui/colorgrid/colortile
  */
-
 import ButtonView from '../button/buttonview';
 import checkIcon from '../../theme/icons/color-tile-check.svg';
-
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgrid~ColorGridView}.
  *
  * @extends module:ui/button/buttonview~ButtonView
  */
 export default class ColorTileView extends ButtonView {
-	constructor( locale ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * String representing a color shown as tile's background.
-		 *
-		 * @type {String}
-		 */
-		this.set( 'color' );
-
-		/**
-		 * A flag that toggles a special CSS class responsible for displaying
-		 * a border around the button.
-		 *
-		 * @type {Boolean}
-		 */
-		this.set( 'hasBorder' );
-
-		this.icon = checkIcon;
-
-		this.extendTemplate( {
-			attributes: {
-				style: {
-					backgroundColor: bind.to( 'color' )
-				},
-				class: [
-					'ck',
-					'ck-color-grid__tile',
-					bind.if( 'hasBorder', 'ck-color-table__color-tile_bordered' )
-				]
-			}
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this.iconView.fillColor = 'hsl(0, 0%, 100%)';
-	}
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        /**
+         * String representing a color shown as tile's background.
+         *
+         * @type {String}
+         */
+        this.set('color', undefined);
+        /**
+         * A flag that toggles a special CSS class responsible for displaying
+         * a border around the button.
+         *
+         * @type {Boolean}
+         */
+        this.set('hasBorder', false);
+        this.icon = checkIcon;
+        this.extendTemplate({
+            attributes: {
+                style: {
+                    backgroundColor: bind.to('color')
+                },
+                class: [
+                    'ck',
+                    'ck-color-grid__tile',
+                    bind.if('hasBorder', 'ck-color-table__color-tile_bordered')
+                ]
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.iconView.fillColor = 'hsl(0, 0%, 100%)';
+    }
 }

package/src/colorgrid/utils.js

@@ -2,11 +2,6 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
-/**
- * @module ui/colorgrid/utils
- */
-
 /**
  * Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` or
  * `editor.config.table.(tableProperties|tableCellProperties).(background|border).colors
@@ -19,37 +14,33 @@
  * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} options
  * @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}.
  */
-export function getLocalizedColorOptions( locale, options ) {
-	const t = locale.t;
-	const localizedColorNames = {
-		Black: t( 'Black' ),
-		'Dim grey': t( 'Dim grey' ),
-		Grey: t( 'Grey' ),
-		'Light grey': t( 'Light grey' ),
-		White: t( 'White' ),
-		Red: t( 'Red' ),
-		Orange: t( 'Orange' ),
-		Yellow: t( 'Yellow' ),
-		'Light green': t( 'Light green' ),
-		Green: t( 'Green' ),
-		Aquamarine: t( 'Aquamarine' ),
-		Turquoise: t( 'Turquoise' ),
-		'Light blue': t( 'Light blue' ),
-		Blue: t( 'Blue' ),
-		Purple: t( 'Purple' )
-	};
-
-	return options.map( colorOption => {
-		const label = localizedColorNames[ colorOption.label ];
-
-		if ( label && label != colorOption.label ) {
-			colorOption.label = label;
-		}
-
-		return colorOption;
-	} );
+export function getLocalizedColorOptions(locale, options) {
+    const t = locale.t;
+    const localizedColorNames = {
+        Black: t('Black'),
+        'Dim grey': t('Dim grey'),
+        Grey: t('Grey'),
+        'Light grey': t('Light grey'),
+        White: t('White'),
+        Red: t('Red'),
+        Orange: t('Orange'),
+        Yellow: t('Yellow'),
+        'Light green': t('Light green'),
+        Green: t('Green'),
+        Aquamarine: t('Aquamarine'),
+        Turquoise: t('Turquoise'),
+        'Light blue': t('Light blue'),
+        Blue: t('Blue'),
+        Purple: t('Purple')
+    };
+    return options.map(colorOption => {
+        const label = localizedColorNames[colorOption.label];
+        if (label && label != colorOption.label) {
+            colorOption.label = label;
+        }
+        return colorOption;
+    });
 }
-
 /**
  * Creates a unified color definition object from color configuration options.
  * The object contains the information necessary to both render the UI and initialize the conversion.
@@ -57,12 +48,11 @@ export function getLocalizedColorOptions( locale, options ) {
  * @param {module:ui/colorgrid/colorgrid~ColorDefinition} options
  * @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}
  */
-export function normalizeColorOptions( options ) {
-	return options
-		.map( normalizeSingleColorDefinition )
-		.filter( option => !!option );
+export function normalizeColorOptions(options) {
+    return options
+        .map(normalizeSingleColorDefinition)
+        .filter(option => !!option);
 }
-
 // Creates a normalized color definition from the user-defined configuration.
 // The "normalization" means it will create full
 // {@link module:ui/colorgrid/colorgrid~ColorDefinition `ColorDefinition-like`}
@@ -70,30 +60,31 @@ export function normalizeColorOptions( options ) {
 //
 // @param {String|module:ui/colorgrid/colorgrid~ColorDefinition}
 // @returns {module:ui/colorgrid/colorgrid~ColorDefinition}
-export function normalizeSingleColorDefinition( color ) {
-	if ( typeof color === 'string' ) {
-		return {
-			model: color,
-			label: color,
-			hasBorder: false,
-			view: {
-				name: 'span',
-				styles: {
-					color
-				}
-			}
-		};
-	} else {
-		return {
-			model: color.color,
-			label: color.label || color.color,
-			hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
-			view: {
-				name: 'span',
-				styles: {
-					color: `${ color.color }`
-				}
-			}
-		};
-	}
+export function normalizeSingleColorDefinition(color) {
+    if (typeof color === 'string') {
+        return {
+            model: color,
+            label: color,
+            hasBorder: false,
+            view: {
+                name: 'span',
+                styles: {
+                    color
+                }
+            }
+        };
+    }
+    else {
+        return {
+            model: color.color,
+            label: color.label || color.color,
+            hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
+            view: {
+                name: 'span',
+                styles: {
+                    color: `${color.color}`
+                }
+            }
+        };
+    }
 }