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