8
0
فهرست منبع

Add focus manager for color grid and tiles.

Mateusz Samsel 6 سال پیش
والد
کامیت
682c072711

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

@@ -5,12 +5,17 @@
 
 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';
 
 export default class ColorGrid extends View {
 	constructor( locale, { colorsDefinition = [] } = {} ) {
 		super( locale );
 
 		this.items = this.createCollection();
+		this.focusTracker = new FocusTracker();
+		this.keystrokes = new KeystrokeHandler();
 
 		colorsDefinition.forEach( item => {
 			const colorTile = new ColorTile();
@@ -29,5 +34,56 @@ 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',
+			}
+		} );
+	}
+
+	focus() {
+		if ( this.items.length ) {
+			this.items.first.focus();
+		}
+	}
+
+	focusLast() {
+		if ( this.items.length ) {
+			const lastChild = this.children.last;
+
+			if ( typeof lastChild.focusLast === 'function' ) {
+				lastChild.focusLast();
+			} else {
+				lastChild.focus();
+			}
+		}
+	}
+
+	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 );
 	}
 }

+ 25 - 3
packages/ckeditor5-font/src/ui/colortableview.js

@@ -13,6 +13,7 @@ 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 FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
 export default class ColorTableView extends View {
@@ -41,9 +42,22 @@ export default class ColorTableView extends View {
 			children: this.items
 		} );
 
-		this.items.add( this.removeColorButton() );
 		this.items.add( this.createColorTableTemplate() );
 		this.items.add( this.recentlyUsed() );
+		this.items.add( this.removeColorButton() );
+
+		this._focusCycler = new FocusCycler( {
+			focusables: this.items,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate list items backwards using the arrowup key.
+				focusPrevious: 'arrowup',
+
+				// Navigate toolbar items forwards using the arrowdown key.
+				focusNext: 'arrowdown',
+			}
+		} );
 	}
 
 	removeColorButton() {
@@ -127,7 +141,15 @@ export default class ColorTableView extends View {
 			this.focusTracker.remove( item.element );
 		} );
 
-		// // Start listening for the keystrokes coming from #element.
-		// this.keystrokes.listenTo( this.element );
+		// Start listening for the keystrokes coming from #element.
+		this.keystrokes.listenTo( this.element );
+	}
+
+	focus() {
+		this._focusCycler.focusFirst();
+	}
+
+	focusLast() {
+		this._focusCycler.focusLast();
 	}
 }

+ 3 - 7
packages/ckeditor5-font/src/ui/colortile.js

@@ -3,21 +3,17 @@
  * For licensing, see LICENSE.md.
  */
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
-
-export default class ColorTile extends View {
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+export default class ColorTile extends ButtonView {
 	constructor( locale ) {
 		super( locale );
 
 		const bind = this.bindTemplate;
 
 		this.set( 'color' );
-		this.set( 'label' );
 		this.set( 'hasBorder' );
-		this.set( 'isEnabled', true );
 
-		this.setTemplate( {
-			tag: 'span',
+		this.extendTemplate( {
 			attributes: {
 				style: {
 					backgroundColor: bind.to( 'color' )