From 12bc2e3443f5a49a5ad74d4d0a8adc014d550d44 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Wed, 19 Feb 2020 10:34:13 +0100 Subject: [PATCH 1/5] Internal: Table grid entries are initialized all at once. --- src/ui/inserttableview.js | 54 +++++++++++++++++++++++++-------------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/src/ui/inserttableview.js b/src/ui/inserttableview.js index 20f60e6a..477630d9 100644 --- a/src/ui/inserttableview.js +++ b/src/ui/inserttableview.js @@ -34,7 +34,13 @@ export default class InsertTableView extends View { * @readonly * @member {module:ui/viewcollection~ViewCollection} */ - this.items = this.createCollection(); + + /** + * Creates an array of box views. + * + * @private + */ + this.items = this.createCollection( this._createGridCollection() ); /** * The currently selected number of rows of the new table. @@ -99,24 +105,6 @@ export default class InsertTableView extends View { } } ); - // 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 ); - this.set( 'columns', column + 1 ); - } ); - - this.items.add( boxView ); - } - this.on( 'change:columns', () => { this._highlightGridBoxes(); } ); @@ -162,6 +150,34 @@ export default class InsertTableView extends View { boxView.set( 'isOn', isOn ); } ); } + + /** + * @private + * @returns {module:table/ui/inserttableview~TableSizeGridBoxView[]} An array of boxes to be placed in table grid. + */ + _createGridCollection() { + const returnValue = []; + + // 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 ); + this.set( 'columns', column + 1 ); + } ); + + returnValue.push( boxView ); + } + + return returnValue; + } } /** From 8e8a16b9d577c14bed7f9d976cfe5fe8108f4f93 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Wed, 19 Feb 2020 15:14:06 +0100 Subject: [PATCH 2/5] Internal: ViewCollection now supports iterables, so Set can be used here. --- src/ui/inserttableview.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/inserttableview.js b/src/ui/inserttableview.js index 477630d9..088eb44c 100644 --- a/src/ui/inserttableview.js +++ b/src/ui/inserttableview.js @@ -153,10 +153,10 @@ export default class InsertTableView extends View { /** * @private - * @returns {module:table/ui/inserttableview~TableSizeGridBoxView[]} An array of boxes to be placed in table grid. + * @returns {Set.} An array of boxes to be placed in table grid. */ _createGridCollection() { - const returnValue = []; + const returnValue = new Set(); // Add grid boxes to table selection view. for ( let index = 0; index < 100; index++ ) { @@ -173,7 +173,7 @@ export default class InsertTableView extends View { this.set( 'columns', column + 1 ); } ); - returnValue.push( boxView ); + returnValue.add( boxView ); } return returnValue; From d6798c7aff65347c521ed4463a624cf26548f2ac Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Mon, 24 Feb 2020 17:14:59 +0100 Subject: [PATCH 3/5] Internal: Minor code adjustments. --- src/ui/inserttableview.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/ui/inserttableview.js b/src/ui/inserttableview.js index 088eb44c..8ab6675d 100644 --- a/src/ui/inserttableview.js +++ b/src/ui/inserttableview.js @@ -34,13 +34,7 @@ export default class InsertTableView extends View { * @readonly * @member {module:ui/viewcollection~ViewCollection} */ - - /** - * Creates an array of box views. - * - * @private - */ - this.items = this.createCollection( this._createGridCollection() ); + this.items = this._createGridCollection(); /** * The currently selected number of rows of the new table. @@ -153,10 +147,10 @@ export default class InsertTableView extends View { /** * @private - * @returns {Set.} An array of boxes to be placed in table grid. + * @returns {module:ui/viewcollection~ViewCollection} A view collection containing boxes to be placed in a table grid. */ _createGridCollection() { - const returnValue = new Set(); + const boxes = new Set(); // Add grid boxes to table selection view. for ( let index = 0; index < 100; index++ ) { @@ -173,10 +167,10 @@ export default class InsertTableView extends View { this.set( 'columns', column + 1 ); } ); - returnValue.add( boxView ); + boxes.add( boxView ); } - return returnValue; + return this.createCollection( boxes ); } } From 216efcbb6bea613d5b3d2f827aa0535f397dd659 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 6 Apr 2020 16:13:56 +0200 Subject: [PATCH 4/5] Code refactoring. --- src/ui/inserttableview.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/ui/inserttableview.js b/src/ui/inserttableview.js index 8ab6675d..40a0bbf3 100644 --- a/src/ui/inserttableview.js +++ b/src/ui/inserttableview.js @@ -163,8 +163,10 @@ export default class InsertTableView extends View { const column = index % 10; // As row & column indexes are zero-based transform it to number of selected rows & columns. - this.set( 'rows', row + 1 ); - this.set( 'columns', column + 1 ); + this.set( { + rows: row + 1, + columns: column + 1 + } ); } ); boxes.add( boxView ); From f42e727d05bc7b6ac3bb7d1d5b3919ec53d67a7c Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 6 Apr 2020 16:42:56 +0200 Subject: [PATCH 5/5] We most certainly do not need 100 mouseover listeners... --- src/ui/inserttableview.js | 48 +++++++++++++++++++++---------------- tests/ui/inserttableview.js | 19 +++------------ 2 files changed, 30 insertions(+), 37 deletions(-) diff --git a/src/ui/inserttableview.js b/src/ui/inserttableview.js index 40a0bbf3..fbef39cc 100644 --- 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 index e060ff5c..0732e21e 100644 --- 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 ); - } ); - } ); } ); } ); } );