8
0
Просмотр исходного кода

Extract color grid to separate class. Add simple focus tracking.

Mateusz Samsel 6 лет назад
Родитель
Сommit
44042fd1bd

+ 33 - 0
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import ColorTile from './colortile';
+
+export default class ColorGrid extends View {
+	constructor( locale, { colorsDefinition = [] } = {} ) {
+		super( locale );
+
+		this.items = this.createCollection();
+
+		colorsDefinition.forEach( item => {
+			const colorTile = new ColorTile();
+			colorTile.set( {
+				color: item.color,
+				hasBorder: item.options.hasBorder
+			} );
+			colorTile.delegate( 'execute' ).to( this );
+			this.items.add( colorTile );
+		} );
+
+		this.setTemplate( {
+			tag: 'div',
+			children: this.items,
+			attributes: {
+				class: 'ck-color-table__grid-container'
+			}
+		} );
+	}
+}

+ 51 - 41
packages/ckeditor5-font/src/ui/colortableview.js

@@ -4,20 +4,26 @@
  */
 
 import View from '@ckeditor/ckeditor5-ui/src/view';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import ColorTile from './colortile';
+import ColorGrid from './colorgrid';
 
 import removeButtonIcon from '../../theme/icons/eraser.svg';
 
 import '../../theme/fontcolor.css';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 export default class ColorTableView extends View {
 	constructor( locale, { colors } ) {
 		super( locale );
+		this.locale = locale;
+		this.items = this.createCollection();
 
 		this.colorsDefinition = colors;
+		this.focusTracker = new FocusTracker();
+		this.keystrokes = new KeystrokeHandler();
 
 		this.set( 'selectedColor' );
 		this.set( 'hoveredColor' );
@@ -27,27 +33,17 @@ export default class ColorTableView extends View {
 
 		this.initRecentCollection();
 
-		this.recentlyUsedColors.on( 'add', ( evt, item ) => {
-			const duplicates = this.recentlyUsedColors.filter( element => element.color === item.color, this );
-			if ( duplicates.length === 2 ) {
-				this.recentlyUsedColors.remove( duplicates[ 1 ] );
-			}
-			if ( this.recentlyUsedColors.length > this.colorColumns ) {
-				this.recentlyUsedColors.remove( this.recentlyUsedColors.length - 1 );
-			}
-		} );
-
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
 				class: [ 'ck-color-table' ]
 			},
-			children: [
-				this.removeColorButton(),
-				this.createColorTableTemplate(),
-				this.recentlyUsed()
-			]
+			children: this.items
 		} );
+
+		this.items.add( this.removeColorButton() );
+		this.items.add( this.createColorTableTemplate() );
+		this.items.add( this.recentlyUsed() );
 	}
 
 	removeColorButton() {
@@ -66,30 +62,15 @@ export default class ColorTableView extends View {
 	}
 
 	createColorTableTemplate() {
-		const colorCollection = this.createCollection();
-		this.colorsDefinition.forEach( item => {
-			const colorTile = new ColorTile();
-			colorTile.set( {
-				color: item.color,
-				hasBorder: item.options.hasBorder
-			} );
-			colorTile.delegate( 'execute' ).to( this );
-			colorCollection.add( colorTile );
-		} );
-
-		return new Template( {
-			tag: 'div',
-			children: colorCollection,
-			attributes: {
-				class: 'ck-color-table__grid-container'
-			}
-		} );
+		const colorGrid = new ColorGrid( this.locale, { colorsDefinition: this.colorsDefinition } );
+		colorGrid.delegate( 'execute' ).to( this );
+		return colorGrid;
 	}
 
 	recentlyUsed() {
-		this.recentlyUsedViews = this.createCollection();
+		const recentViews = new ColorGrid( this.locale );
 
-		this.recentlyUsedViews.bindTo( this.recentlyUsedColors ).using(
+		recentViews.items.bindTo( this.recentlyUsedColors ).using(
 			colorObj => {
 				const colorTile = new ColorTile();
 				colorTile.set( {
@@ -103,13 +84,19 @@ export default class ColorTableView extends View {
 				return colorTile;
 			}
 		);
-		return new Template( {
-			tag: 'div',
-			children: this.recentlyUsedViews,
-			attributes: {
-				class: [ 'ck-color-table__grid-container' ]
+
+		this.recentlyUsedColors.on( 'add', ( evt, item ) => {
+			const duplicates = this.recentlyUsedColors.filter( element => element.color === item.color, this );
+			if ( duplicates.length === 2 ) {
+				this.recentlyUsedColors.remove( duplicates[ 1 ] );
+			}
+			if ( this.recentlyUsedColors.length > this.colorColumns ) {
+				this.recentlyUsedColors.remove( this.recentlyUsedColors.length - 1 );
 			}
 		} );
+
+		recentViews.delegate( 'execute' ).to( this );
+		return recentViews;
 	}
 
 	initRecentCollection() {
@@ -120,4 +107,27 @@ export default class ColorTableView extends View {
 			} );
 		}
 	}
+
+	/**
+	 * @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 );
+	}
 }