Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix DimentionPicker component (bug for several components). Refactoring insert table dialog.

Browse source
This commit is contained in:
Julia Radzhabova 2019-11-27 11:17:15 +03:00
parent 61ab8193fb
commit 499bc226a3
2 changed files with 66 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
apps/common/main/lib/component/DimensionPicker.js
View file

@ -47,31 +47,6 @@ define([
'use strict'; 'use strict';
Common.UI.DimensionPicker = Common.UI.BaseView.extend((function(){ 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 { return {
options: { options: {
itemSize : 18, itemSize : 18,
@ -95,9 +70,13 @@ define([
initialize : function(options) { initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, 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.itemSize = me.options.itemSize;
me.minRows = me.options.minRows; me.minRows = me.options.minRows;
@ -105,31 +84,48 @@ define([
me.maxRows = me.options.maxRows; me.maxRows = me.options.maxRows;
me.maxColumns = me.options.maxColumns; 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){ if (rootEl){
areaMouseCatcher = rootEl.find('.dimension-picker-mousecatcher'); var areaMouseCatcher = rootEl.find('.dimension-picker-mousecatcher');
areaUnHighLighted = rootEl.find('.dimension-picker-unhighlighted'); me.areaUnHighLighted = rootEl.find('.dimension-picker-unhighlighted');
areaHighLighted = rootEl.find('.dimension-picker-highlighted'); me.areaHighLighted = rootEl.find('.dimension-picker-highlighted');
areaStatus = rootEl.find('.dimension-picker-status'); me.areaStatus = rootEl.find('.dimension-picker-status');
rootEl.css({width: me.minColumns + 'em'}); rootEl.css({width: me.minColumns + 'em'});
areaMouseCatcher.css('z-index', 1); areaMouseCatcher.css('z-index', 1);
areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em'); areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em');
areaUnHighLighted.width(me.minColumns + 'em').height(me.minRows + 'em'); me.areaUnHighLighted.width(me.minColumns + 'em').height(me.minRows + 'em');
areaStatus.html(curColumns + ' x ' + curRows); me.areaStatus.html(me.curColumns + ' x ' + me.curRows);
areaStatus.width(areaUnHighLighted.width()); me.areaStatus.width(me.areaUnHighLighted.width());
}
areaMouseCatcher.on('mousemove', onMouseMove); areaMouseCatcher.on('mousemove', onMouseMove);
areaHighLighted.on('mousemove', onMouseMove); me.areaHighLighted.on('mousemove', onMouseMove);
areaUnHighLighted.on('mousemove', onMouseMove); me.areaUnHighLighted.on('mousemove', onMouseMove);
areaMouseCatcher.on('mouseleave', onMouseLeave); areaMouseCatcher.on('mouseleave', onMouseLeave);
areaHighLighted.on('mouseleave', onMouseLeave); me.areaHighLighted.on('mouseleave', onMouseLeave);
areaUnHighLighted.on('mouseleave', onMouseLeave); me.areaUnHighLighted.on('mouseleave', onMouseLeave);
areaMouseCatcher.on('click', onHighLightedMouseClick); areaMouseCatcher.on('click', onHighLightedMouseClick);
areaHighLighted.on('click', onHighLightedMouseClick); me.areaHighLighted.on('click', onHighLightedMouseClick);
areaUnHighLighted.on('click', onHighLightedMouseClick); me.areaUnHighLighted.on('click', onHighLightedMouseClick);
}
}, },
render: function() { render: function() {
@ -142,38 +138,38 @@ define([
if (columns > this.maxColumns) columns = this.maxColumns; if (columns > this.maxColumns) columns = this.maxColumns;
if (rows > this.maxRows) rows = this.maxRows; if (rows > this.maxRows) rows = this.maxRows;
if (curColumns != columns || curRows != rows){ if (this.curColumns != columns || this.curRows != rows){
curColumns = columns; this.curColumns = columns;
curRows = rows; this.curRows = rows;
areaHighLighted.width(curColumns + 'em').height(curRows + 'em'); this.areaHighLighted.width(this.curColumns + 'em').height(this.curRows + 'em');
areaUnHighLighted.width( this.areaUnHighLighted.width(
((curColumns < me.minColumns) ((this.curColumns < this.minColumns)
? me.minColumns ? this.minColumns
: ((curColumns + 1 > me.maxColumns) : ((this.curColumns + 1 > this.maxColumns)
? me.maxColumns ? this.maxColumns
: curColumns + 1)) + 'em' : this.curColumns + 1)) + 'em'
).height(((curRows < me.minRows) ).height(((this.curRows < this.minRows)
? me.minRows ? this.minRows
: ((curRows + 1 > me.maxRows) : ((this.curRows + 1 > this.maxRows)
? me.maxRows ? this.maxRows
: curRows + 1)) + 'em' : this.curRows + 1)) + 'em'
); );
rootEl.width(areaUnHighLighted.width()); this.cmpEl.width(this.areaUnHighLighted.width());
areaStatus.html(curColumns + ' x ' + curRows); this.areaStatus.html(this.curColumns + ' x ' + this.curRows);
areaStatus.width(areaUnHighLighted.width()); this.areaStatus.width(this.areaUnHighLighted.width());
me.trigger('change', me, curColumns, curRows, event); this.trigger('change', this, this.curColumns, this.curRows, event);
} }
}, },
getColumnsCount: function() { getColumnsCount: function() {
return curColumns; return this.curColumns;
}, },
getRowsCount: function() { getRowsCount: function() {
return curRows; return this.curRows;
} }
} }
})()) })())

8
apps/common/main/lib/view/InsertTableDialog.js
View file

@ -110,8 +110,8 @@ define([
onBtnClick: function(event) { onBtnClick: function(event) {
if (this.options.handler) { if (this.options.handler) {
this.options.handler.call(this, event.currentTarget.attributes['result'].value, { this.options.handler.call(this, event.currentTarget.attributes['result'].value, {
columns : this.udColumns.getValue(), columns : this.udColumns.getNumberValue(),
rows : this.udRows.getValue() rows : this.udRows.getNumberValue()
}); });
} }
@ -121,8 +121,8 @@ define([
onPrimary: function() { onPrimary: function() {
if (this.options.handler) { if (this.options.handler) {
this.options.handler.call(this, 'ok', { this.options.handler.call(this, 'ok', {
columns : this.udColumns.getValue(), columns : this.udColumns.getNumberValue(),
rows : this.udRows.getValue() rows : this.udRows.getNumberValue()
}); });
} }