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

[rtl] Make dimension picker

Browse source
This commit is contained in:
JuliaSvinareva 2022-10-14 17:56:25 +03:00
parent 1d6544370f
commit bf4488af86
1 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -53,12 +53,13 @@ define([
minRows : 5,
minColumns : 5,
maxRows : 20,
maxColumns : 20
maxColumns : 20,
direction : undefined // 'left', 'right'
},
template:_.template([
'<div style="width: 100%; height: 100%;">',
'<div class="dimension-picker-status">0x0</div>',
'<div dir="ltr" class="dimension-picker-status">0x0</div>',
'<div class="dimension-picker-observecontainer">',
'<div class="dimension-picker-mousecatcher"></div>',
'<div class="dimension-picker-unhighlighted"></div>',
@ -84,12 +85,24 @@ define([
me.maxRows = me.options.maxRows;
me.maxColumns = me.options.maxColumns;
me.direction = me.options.direction;
if (Common.UI.isRTL() && !me.direction) {
me.direction = 'right';
}
me.curColumns = 0;
me.curRows = 0;
var onMouseMove = function(event){
var offsetX;
if (me.direction === 'right' && me.areaMouseCatcher) {
var width = me.areaMouseCatcher.width();
offsetX = event.offsetX === undefined ? (width - event.originalEvent.layerX) : (width - event.offsetX)*Common.Utils.zoom()
} else {
offsetX = event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom();
}
me.setTableSize(
Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom()) / me.itemSize),
Math.ceil(offsetX / me.itemSize),
Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY*Common.Utils.zoom()) / me.itemSize),
event
);
@ -104,27 +117,31 @@ define([
};
if (rootEl){
var areaMouseCatcher = rootEl.find('.dimension-picker-mousecatcher');
me.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');
me.areaMouseCatcher.css('z-index', 1);
me.areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em');
me.areaUnHighLighted.width(me.minColumns + 'em').height(me.minRows + 'em');
me.areaStatus.html(me.curColumns + ' x ' + me.curRows);
me.areaStatus.html(!Common.UI.isRTL() ? this.curColumns + ' x ' + this.curRows : this.curRows + ' x ' + this.curColumns);
me.areaStatus.width(me.areaUnHighLighted.width());
areaMouseCatcher.on('mousemove', onMouseMove);
me.areaMouseCatcher.on('mousemove', onMouseMove);
me.areaHighLighted.on('mousemove', onMouseMove);
me.areaUnHighLighted.on('mousemove', onMouseMove);
areaMouseCatcher.on('mouseleave', onMouseLeave);
me.areaMouseCatcher.on('mouseleave', onMouseLeave);
me.areaHighLighted.on('mouseleave', onMouseLeave);
me.areaUnHighLighted.on('mouseleave', onMouseLeave);
areaMouseCatcher.on('click', onHighLightedMouseClick);
me.areaMouseCatcher.on('click', onHighLightedMouseClick);
me.areaHighLighted.on('click', onHighLightedMouseClick);
me.areaUnHighLighted.on('click', onHighLightedMouseClick);
if (me.direction === 'right') {
me.areaHighLighted.css({left: 'auto', right: '0'});
}
}
},
@ -157,7 +174,7 @@ define([
);
this.cmpEl.width(this.areaUnHighLighted.width());
this.areaStatus.html(this.curColumns + ' x ' + this.curRows);
this.areaStatus.html(!Common.UI.isRTL() ? this.curColumns + ' x ' + this.curRows : this.curRows + ' x ' + this.curColumns);
this.areaStatus.width(this.areaUnHighLighted.width());
this.trigger('change', this, this.curColumns, this.curRows, event);