wip

src/tableui.js

@@ -8,11 +8,12 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import { addListToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
+import InsertTableView from './ui/inserttableview';
+
 import tableIcon from './../theme/icons/table.svg';
 import tableColumnIcon from './../theme/icons/table-column.svg';
 import tableRowIcon from './../theme/icons/table-row.svg';
@@ -33,22 +34,35 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'insertTable', locale => {
 			const command = editor.commands.get( 'insertTable' );
-			const buttonView = new ButtonView( locale );
+			const dropdownView = createDropdown( locale );
 
-			buttonView.bind( 'isEnabled' ).to( command );
+			dropdownView.bind( 'isEnabled' ).to( command );
 
-			buttonView.set( {
+			dropdownView.buttonView.set( {
 				icon: tableIcon,
 				label: 'Insert table',
 				tooltip: true
 			} );
 
-			buttonView.on( 'execute', () => {
-				editor.execute( 'insertTable' );
+			const insertTableView = new InsertTableView( locale );
+
+			insertTableView.delegate( 'execute' ).to( dropdownView );
+
+			dropdownView.buttonView.on( 'open', () => {
+				// Reset the chooser before showing it to the user.
+				insertTableView.rows = 0;
+				insertTableView.columns = 0;
+			} );
+
+			dropdownView.on( 'execute', () => {
+				command.execute( { rows: insertTableView.rows, columns: insertTableView.columns } );
+
 				editor.editing.view.focus();
 			} );
 
-			return buttonView;
+			dropdownView.panelView.children.add( insertTableView );
+
+			return dropdownView;
 		} );
 
 		editor.ui.componentFactory.add( 'tableColumn', locale => {

src/ui/inserttableview.js

@@ -0,0 +1,188 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module table/ui/tablesizeview
+ */
+
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
+
+import './../../theme/inserttable.css';
+
+/**
+ * The table size view.
+ *
+ * It renders a 10x10 grid to choose inserted table size.
+ *
+ * @extends module:ui/view~View
+ */
+export default class TableSizeView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * Collection of the table size box items.
+		 *
+		 * @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();
+
+		/**
+		 * Helps cycling over focusable {@link #items} in the toolbar.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this._focusCycler = new FocusCycler( {
+			focusables: this.items,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate toolbar items backwards using the arrow[left,up] keys.
+				focusPrevious: [ 'arrowleft', 'arrowup' ],
+
+				// Navigate toolbar items forwards using the arrow[right,down] keys.
+				focusNext: [ 'arrowright', 'arrowdown' ]
+			}
+		} );
+
+		/**
+		 * Currently selected number of rows of a new table.
+		 *
+		 * @observable
+		 * @member {Number} #rows
+		 */
+		this.set( 'rows', 0 );
+
+		/**
+		 * Currently selected number of columns of a new table.
+		 *
+		 * @observable
+		 * @member {Number} #columns
+		 */
+		this.set( 'columns', 0 );
+
+		/**
+		 * The label text displayed under the boxes.
+		 *
+		 * @observable
+		 * @member {String} #label
+		 */
+		this.bind( 'label' )
+			.to( this, 'columns', this, 'rows', ( columns, rows ) => `${ rows } x ${ columns }` );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [ 'ck' ]
+			},
+
+			children: [
+				{
+					tag: 'div',
+					attributes: {
+						class: [ 'ck-table-size-choose-box-container' ]
+					},
+					children: this.items
+				},
+				{
+					tag: 'div',
+					attributes: {
+						class: [ 'ck-table-size-label' ]
+					},
+					children: [
+						{
+							text: bind.to( 'label' )
+						}
+					]
+				}
+			],
+
+			on: {
+				click: bind.to( () => {
+					this.fire( 'execute' );
+				} )
+			}
+		} );
+
+		for ( let i = 0; i < 100; i++ ) {
+			const view = new TableSizeChooser();
+
+			view.on( 'over', () => {
+				const row = parseInt( i / 10 );
+				const column = i % 10;
+
+				this.set( 'rows', row + 1 );
+				this.set( 'columns', column + 1 );
+			} );
+
+			this.items.add( view );
+		}
+
+		this.on( 'change:columns', () => {
+			this.updateItems();
+		} );
+
+		this.on( 'change:rows', () => {
+			this.updateItems();
+		} );
+	}
+
+	updateItems() {
+		const row = this.rows - 1;
+		const column = this.columns - 1;
+
+		this.items.map( ( item, index ) => {
+			const itemRow = parseInt( index / 10 );
+			const itemColumn = index % 10;
+
+			if ( itemRow <= row && itemColumn <= column ) {
+				item.set( 'isOn', true );
+			} else {
+				item.set( 'isOn', false );
+			}
+		} );
+	}
+}
+
+class TableSizeChooser extends View {
+	constructor( locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		this.set( 'isOn', false );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck-table-size-choose-box',
+					bind.if( 'isOn', 'ck-on' )
+				]
+			},
+			on: {
+				mouseover: bind.to( 'over' )
+			}
+		} );
+	}
+}

theme/inserttable.css

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/* TODO: does it need to be a variable? */
+	--ck-insert-table-box-height: 11px;
+	--ck-insert-table-box-width: 12px;
+	--ck-insert-table-box-margin: 1px;
+	--ck-insert-table-box-border: 1px;
+	--ck-insert-table-box-border-color: #aaa;
+	--ck-insert-table-box-border-color__active: #5fa6ff;
+	--ck-insert-table-box-background__active: #c9e9ff;
+	--ck-insert-table-padding: 10px;
+}
+
+.ck .ck-table-size-choose-box-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	/* The width of a container should match 10 items in a row so ther'll be a 10x10 grid. */
+	width: calc(var(--ck-insert-table-box-width) * 10 + var(--ck-insert-table-box-margin) * 20 + var(--ck-insert-table-padding) * 2);
+	padding: var(--ck-insert-table-padding) var(--ck-insert-table-padding) 0;
+}
+
+.ck .ck-table-size-choose-box {
+	width: var(--ck-insert-table-box-width);
+	height: var(--ck-insert-table-box-height);
+	margin: var(--ck-insert-table-box-margin);
+	border: var(--ck-insert-table-box-border) solid var(--ck-insert-table-box-border-color);
+	border-radius: 1px;
+
+	&.ck-on {
+		border-color: var(--ck-insert-table-box-border-color__active);
+		background: var(--ck-insert-table-box-background__active);
+	}
+}
+
+.ck .ck-table-size-label {
+	text-align: center;
+}