From 499bc226a333e8e01285fff85f8f21c019306cf5 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 27 Nov 2019 11:17:15 +0300 Subject: [PATCH] Fix DimentionPicker component (bug for several components). Refactoring insert table dialog. --- .../main/lib/component/DimensionPicker.js | 128 +++++++++--------- .../common/main/lib/view/InsertTableDialog.js | 8 +- 2 files changed, 66 insertions(+), 70 deletions(-) diff --git a/apps/common/main/lib/component/DimensionPicker.js b/apps/common/main/lib/component/DimensionPicker.js index dab30a9d2..c508a90e9 100644 --- a/apps/common/main/lib/component/DimensionPicker.js +++ b/apps/common/main/lib/component/DimensionPicker.js @@ -47,31 +47,6 @@ define([ 'use strict'; Common.UI.DimensionPicker = Common.UI.BaseView.extend((function(){ - var me, - rootEl, - areaMouseCatcher, - areaUnHighLighted, - areaHighLighted, - areaStatus, - curColumns = 0, - curRows = 0; - - var onMouseMove = function(event){ - me.setTableSize( - Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom()) / me.itemSize), - Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY*Common.Utils.zoom()) / me.itemSize), - event - ); - }; - - var onMouseLeave = function(event){ - me.setTableSize(0, 0, event); - }; - - var onHighLightedMouseClick = function(e){ - me.trigger('select', me, curColumns, curRows, e); - }; - return { options: { itemSize : 18, @@ -95,9 +70,13 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - me = this; + var me = this; - rootEl = me.$el || $(this.el); + this.render(); + + this.cmpEl = me.$el || $(this.el); + + var rootEl = this.cmpEl; me.itemSize = me.options.itemSize; me.minRows = me.options.minRows; @@ -105,31 +84,48 @@ define([ me.maxRows = me.options.maxRows; me.maxColumns = me.options.maxColumns; - this.render(); + me.curColumns = 0; + me.curRows = 0; + + var onMouseMove = function(event){ + me.setTableSize( + Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom()) / me.itemSize), + Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY*Common.Utils.zoom()) / me.itemSize), + event + ); + }; + + var onMouseLeave = function(event){ + me.setTableSize(0, 0, event); + }; + + var onHighLightedMouseClick = function(e){ + me.trigger('select', me, me.curColumns, me.curRows, e); + }; if (rootEl){ - areaMouseCatcher = rootEl.find('.dimension-picker-mousecatcher'); - areaUnHighLighted = rootEl.find('.dimension-picker-unhighlighted'); - areaHighLighted = rootEl.find('.dimension-picker-highlighted'); - areaStatus = rootEl.find('.dimension-picker-status'); + var areaMouseCatcher = rootEl.find('.dimension-picker-mousecatcher'); + me.areaUnHighLighted = rootEl.find('.dimension-picker-unhighlighted'); + me.areaHighLighted = rootEl.find('.dimension-picker-highlighted'); + me.areaStatus = rootEl.find('.dimension-picker-status'); rootEl.css({width: me.minColumns + 'em'}); areaMouseCatcher.css('z-index', 1); areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em'); - areaUnHighLighted.width(me.minColumns + 'em').height(me.minRows + 'em'); - areaStatus.html(curColumns + ' x ' + curRows); - areaStatus.width(areaUnHighLighted.width()); - } + me.areaUnHighLighted.width(me.minColumns + 'em').height(me.minRows + 'em'); + me.areaStatus.html(me.curColumns + ' x ' + me.curRows); + me.areaStatus.width(me.areaUnHighLighted.width()); - areaMouseCatcher.on('mousemove', onMouseMove); - areaHighLighted.on('mousemove', onMouseMove); - areaUnHighLighted.on('mousemove', onMouseMove); - areaMouseCatcher.on('mouseleave', onMouseLeave); - areaHighLighted.on('mouseleave', onMouseLeave); - areaUnHighLighted.on('mouseleave', onMouseLeave); - areaMouseCatcher.on('click', onHighLightedMouseClick); - areaHighLighted.on('click', onHighLightedMouseClick); - areaUnHighLighted.on('click', onHighLightedMouseClick); + areaMouseCatcher.on('mousemove', onMouseMove); + me.areaHighLighted.on('mousemove', onMouseMove); + me.areaUnHighLighted.on('mousemove', onMouseMove); + areaMouseCatcher.on('mouseleave', onMouseLeave); + me.areaHighLighted.on('mouseleave', onMouseLeave); + me.areaUnHighLighted.on('mouseleave', onMouseLeave); + areaMouseCatcher.on('click', onHighLightedMouseClick); + me.areaHighLighted.on('click', onHighLightedMouseClick); + me.areaUnHighLighted.on('click', onHighLightedMouseClick); + } }, render: function() { @@ -142,38 +138,38 @@ define([ if (columns > this.maxColumns) columns = this.maxColumns; if (rows > this.maxRows) rows = this.maxRows; - if (curColumns != columns || curRows != rows){ - curColumns = columns; - curRows = rows; + if (this.curColumns != columns || this.curRows != rows){ + this.curColumns = columns; + this.curRows = rows; - areaHighLighted.width(curColumns + 'em').height(curRows + 'em'); - areaUnHighLighted.width( - ((curColumns < me.minColumns) - ? me.minColumns - : ((curColumns + 1 > me.maxColumns) - ? me.maxColumns - : curColumns + 1)) + 'em' - ).height(((curRows < me.minRows) - ? me.minRows - : ((curRows + 1 > me.maxRows) - ? me.maxRows - : curRows + 1)) + 'em' + this.areaHighLighted.width(this.curColumns + 'em').height(this.curRows + 'em'); + this.areaUnHighLighted.width( + ((this.curColumns < this.minColumns) + ? this.minColumns + : ((this.curColumns + 1 > this.maxColumns) + ? this.maxColumns + : this.curColumns + 1)) + 'em' + ).height(((this.curRows < this.minRows) + ? this.minRows + : ((this.curRows + 1 > this.maxRows) + ? this.maxRows + : this.curRows + 1)) + 'em' ); - rootEl.width(areaUnHighLighted.width()); - areaStatus.html(curColumns + ' x ' + curRows); - areaStatus.width(areaUnHighLighted.width()); + this.cmpEl.width(this.areaUnHighLighted.width()); + this.areaStatus.html(this.curColumns + ' x ' + this.curRows); + this.areaStatus.width(this.areaUnHighLighted.width()); - me.trigger('change', me, curColumns, curRows, event); + this.trigger('change', this, this.curColumns, this.curRows, event); } }, getColumnsCount: function() { - return curColumns; + return this.curColumns; }, getRowsCount: function() { - return curRows; + return this.curRows; } } })()) diff --git a/apps/common/main/lib/view/InsertTableDialog.js b/apps/common/main/lib/view/InsertTableDialog.js index b4b65d017..a9d1e8501 100644 --- a/apps/common/main/lib/view/InsertTableDialog.js +++ b/apps/common/main/lib/view/InsertTableDialog.js @@ -110,8 +110,8 @@ define([ onBtnClick: function(event) { if (this.options.handler) { this.options.handler.call(this, event.currentTarget.attributes['result'].value, { - columns : this.udColumns.getValue(), - rows : this.udRows.getValue() + columns : this.udColumns.getNumberValue(), + rows : this.udRows.getNumberValue() }); } @@ -121,8 +121,8 @@ define([ onPrimary: function() { if (this.options.handler) { this.options.handler.call(this, 'ok', { - columns : this.udColumns.getValue(), - rows : this.udRows.getValue() + columns : this.udColumns.getNumberValue(), + rows : this.udRows.getNumberValue() }); }