8
0
Mateusz Samsel 6 лет назад
Родитель
Сommit
a03db07363

+ 89 - 13
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -3,20 +3,75 @@
  * For licensing, see LICENSE.md.
  */
 
+/**
+ * @module font/ui/colorgrid
+ */
+
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import ColorTile from './colortile';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
+/**
+ * It keeps nicely collection of {@link module:font/ui/colortile~ColorTile}.
+ */
 export default class ColorGrid extends View {
+	/**
+	 * Construct instance of color grid used to display {@link module:font/ui/colortile~ColorTile} in drop down.
+	 *
+	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
+	 * @param {Object} config Configuration
+	 * @param {Array.<module:font/ui/colorgrid~colorsDefinition} colorsDefinition Array with definitions
+	 * required to build {@link module:font/ui/colortile~ColorTile}.
+	 */
 	constructor( locale, { colorsDefinition = [] } = {} ) {
 		super( locale );
 
+		/**
+		 * Collection of the child list views.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
 		this.items = this.createCollection();
+
+		/**
+		 * Tracks information about DOM focus in the list.
+		 *
+		 * @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();
 
+		/**
+		 * Helps cycling over focusable {@link #items} in the list.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this._focusCycler = new FocusCycler( {
+			focusables: this.items,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate list items backwards using the arrowup key.
+				focusPrevious: 'arrowleft',
+
+				// Navigate toolbar items forwards using the arrowdown key.
+				focusNext: 'arrowright',
+			}
+		} );
+
 		colorsDefinition.forEach( item => {
 			const colorTile = new ColorTile();
 			colorTile.set( {
@@ -42,27 +97,20 @@ export default class ColorGrid extends View {
 				class: 'ck-color-table__grid-container'
 			}
 		} );
-
-		this._focusCycler = new FocusCycler( {
-			focusables: this.items,
-			focusTracker: this.focusTracker,
-			keystrokeHandler: this.keystrokes,
-			actions: {
-				// Navigate list items backwards using the arrowup key.
-				focusPrevious: 'arrowleft',
-
-				// Navigate toolbar items forwards using the arrowdown key.
-				focusNext: 'arrowright',
-			}
-		} );
 	}
 
+	/**
+	 * 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 ) {
 			const lastChild = this.children.last;
@@ -75,6 +123,9 @@ export default class ColorGrid extends View {
 		}
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	render() {
 		super.render();
 
@@ -95,3 +146,28 @@ export default class ColorGrid extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 }
+
+/**
+ * Color definition used to build {@link module:font/ui/colortile~ColorTile}.
+ *
+ * 		{
+ * 			color: hsl(0, 0%, 75%),
+ * 			label: 'Light Grey',
+ * 			options: {
+ * 				hasBorder: true
+ * 			}
+ * 		}
+ *
+ * @typedef module:font/ui/colorgrid~colorsDefinition
+ * @type Object
+ *
+ * @property {String} color String representing inserted color.
+ * It's used as value of background-color style in {@link module:font/ui/colortile~ColorTile}.
+ *
+ * @property {String} label String used as label for {@link module:font/ui/colortile~ColorTile}.
+ *
+ * @property {Object} options Additional options passed to build {@link module:font/ui/colortile~ColorTile}.
+ *
+ * @property {Boolean} options.hasBorder Flag indicates if special CSS class should be added
+ * to {@link module:font/ui/colortile~ColorTile}, which draw border around it.
+ */

+ 20 - 1
packages/ckeditor5-font/src/ui/colortile.js

@@ -3,15 +3,34 @@
  * For licensing, see LICENSE.md.
  */
 
+/**
+ * @module font/ui/colortile
+ */
+
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
+/**
+ * Class represents single color tile possible to click in dropdown. Element was designed
+ * for being used in {@link module:font/ui/colorgrid~ColorGrid}.
+ *
+ * @extends module:ui/button/buttonview~ButtonView
+ */
 export default class ColorTile extends ButtonView {
 	constructor( locale ) {
 		super( locale );
-
 		const bind = this.bindTemplate;
 
+		/**
+		 * String representing color which will be shown as tile's background.
+		 * @type {String}
+		 */
 		this.set( 'color' );
+
+		/**
+		 * Parameter which trigger adding special CSS class to button.
+		 * This class is responsible for displaying border around button.
+		 * @type {Boolean}
+		 */
 		this.set( 'hasBorder' );
 
 		this.extendTemplate( {

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

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module font/fontcolor/fontcolorui
+ * @module font/ui/colorui
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
@@ -12,17 +12,47 @@ import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { normalizeOptions, addColorsToDropdown } from '../utils';
 
 /**
- * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
+ * The color UI plugin. It's template for creating the `'fontBackgroundColor'` and the `'fotnColor'` dropdown.
+ * Plugin separates common logic responsible for displaying dropdown with color grids.
  *
  * @extends module:core/plugin~Plugin
  */
 export default class ColorUI extends Plugin {
+	/**
+	 * Creates plugin which adds UI with {@link module:font/ui/colortableview~ColorTableView} with proper configuration.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor
+	 * @param {Object} config Configuration object
+	 * @param {String} config.commandName Name of command which will be execute after click into selected color tile.config.
+	 * @param {String} config.componentName Name of this component in {@link module:ui/componentfactory~ComponentFactory}
+	 * @param {String} config.icon SVG icon used in toolbar for displaying this UI element.
+	 * @param {String} config.dropdownLabel Label used for icon in toolbar for this element.
+	 */
 	constructor( editor, { commandName, icon, componentName, dropdownLabel } ) {
 		super( editor );
 
+		/**
+		 * Name of command which will be execute after click into selected color tile.config.
+		 * @type {String}
+		 */
 		this.commandName = commandName;
-		this.icon = icon;
+
+		/**
+		 * Name of this component in {@link module:ui/componentfactory~ComponentFactory}.
+		 * @type {String}
+		 */
 		this.componentName = componentName;
+
+		/**
+		 * SVG icon used in toolbar for displaying this UI element.
+		 * @type {String}
+		 */
+		this.icon = icon;
+
+		/**
+		 * Label used for icon in toolbar for this element.
+		 * @type {String}
+		 */
 		this.dropdownLabel = dropdownLabel;
 	}
 
@@ -80,9 +110,9 @@ export default class ColorUI extends Plugin {
 	}
 
 	/**
-	 * Returns options as defined in `config.fontColor.colors` but processed to account for
+	 * Returns options as defined in `config` but processed to account for
 	 * editor localization, i.e. to display {@link module:font/fontColor~FontColorOption}
-	 * in the correct language.
+	 * or {@link module:font/fontBackgroundColor~FontBackgroundColorOption} in the correct language.
 	 *
 	 * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
 	 * when the user configuration is defined because the editor does not exist yet.