We most certainly do not need 100 mouseover listeners...

ckeditor · Apr 6, 2020 · f42e727 · f42e727
1 parent 216efcb
commit f42e727
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 37 deletions.
diff --git a/src/ui/inserttableview.js b/src/ui/inserttableview.js
@@ -73,6 +73,9 @@ export default class InsertTableView extends View {
 					attributes: {
 						class: [ 'ck-insert-table-dropdown__grid' ]
 					},
+					on: {
+						'mouseover@.ck-insert-table-dropdown-grid-box': bind.to( 'boxover' )
+					},
 					children: this.items
 				},
 				{
@@ -99,6 +102,16 @@ export default class InsertTableView extends View {
 			}
 		} );
 
+		this.on( 'boxover', ( evt, domEvt ) => {
+			const { row, column } = domEvt.target.dataset;
+
+			// As row & column indexes are zero-based transform it to number of selected rows & columns.
+			this.set( {
+				rows: parseInt( row ),
+				columns: parseInt( column )
+			} );
+		} );
+
 		this.on( 'change:columns', () => {
 			this._highlightGridBoxes();
 		} );
@@ -150,30 +163,24 @@ export default class InsertTableView extends View {
 	 * @returns {module:ui/viewcollection~ViewCollection} A view collection containing boxes to be placed in a table grid.
 	 */
 	_createGridCollection() {
-		const boxes = new Set();
+		const boxes = [];
 
 		// Add grid boxes to table selection view.
 		for ( let index = 0; index < 100; index++ ) {
-			const boxView = new TableSizeGridBoxView();
-
-			// Listen to box view 'over' event which indicates that mouse is over this box.
-			boxView.on( 'over', () => {
-				// Translate box index to the row & column index.
-				const row = Math.floor( index / 10 );
-				const column = index % 10;
-
-				// As row & column indexes are zero-based transform it to number of selected rows & columns.
-				this.set( {
-					rows: row + 1,
-					columns: column + 1
-				} );
-			} );
+			const row = Math.floor( index / 10 );
+			const column = index % 10;
 
-			boxes.add( boxView );
+			boxes.push( new TableSizeGridBoxView( this.locale, row + 1, column + 1 ) );
 		}
 
 		return this.createCollection( boxes );
 	}
+
+	/**
+	 * Fired when the mouse hover over one of the {@link #items child grid boxes}.
+	 *
+	 * @event boxover
+	 */
 }
 
 /**
@@ -187,7 +194,7 @@ class TableSizeGridBoxView extends View {
 	/**
 	 * @inheritDoc
 	 */
-	constructor( locale ) {
+	constructor( locale, row, column ) {
 		super( locale );
 
 		const bind = this.bindTemplate;
@@ -206,10 +213,9 @@ class TableSizeGridBoxView extends View {
 				class: [
 					'ck-insert-table-dropdown-grid-box',
 					bind.if( 'isOn', 'ck-on' )
-				]
-			},
-			on: {
-				mouseover: bind.to( 'over' )
+				],
+				'data-row': row,
+				'data-column': column
 			}
 		} );
 	}

diff --git a/tests/ui/inserttableview.js b/tests/ui/inserttableview.js
@@ -60,12 +60,12 @@ describe( 'InsertTableView', () => {
 		} );
 
 		describe( 'view#items bindings', () => {
-			it( 'updates view#height & view#width on "over" event', () => {
+			it( 'updates view#height & view#width on DOM "mouseover" event', () => {
 				const boxView = view.items.get( 0 );
 
 				expect( boxView.isOn ).to.be.false;
 
-				boxView.fire( 'over' );
+				boxView.element.dispatchEvent( new Event( 'mouseover', { bubbles: true } ) );
 
 				expect( boxView.isOn ).to.be.true;
 
@@ -74,7 +74,7 @@ describe( 'InsertTableView', () => {
 
 				const boxViewB = view.items.get( 22 );
 
-				boxViewB.fire( 'over' );
+				boxViewB.element.dispatchEvent( new Event( 'mouseover', { bubbles: true } ) );
 
 				expect( view.rows ).to.equal( 3 );
 				expect( view.columns ).to.equal( 3 );
@@ -108,19 +108,6 @@ describe( 'InsertTableView', () => {
 
 					sinon.assert.calledOnce( spy );
 				} );
-
-				describe( 'view#items mousemove event', () => {
-					it( 'fires "over" event', () => {
-						const boxView = view.items.get( 0 );
-						const spy = sinon.spy();
-
-						boxView.on( 'over', spy );
-
-						dispatchEvent( boxView.element, 'mouseover' );
-
-						sinon.assert.calledOnce( spy );
-					} );
-				} );
 			} );
 		} );
 	} );