Auto change width for an integer number of elements for ComboDataView

This commit is contained in:
Alexei Koshelev 2022-09-14 14:37:40 +03:00
parent 832641ec5f
commit 6e5de0c8c1
5 changed files with 50 additions and 4 deletions

View file

@ -56,6 +56,7 @@ define([
itemWidth : 80,
itemHeight : 40,
menuMaxHeight : 300,
autoWidth : false,
enableKeyEvents : false,
beforeOpenHandler : null,
additionalMenuItems : null,
@ -87,11 +88,13 @@ define([
this.menuMaxHeight = this.options.menuMaxHeight;
this.beforeOpenHandler = this.options.beforeOpenHandler;
this.showLast = this.options.showLast;
this.wrapWidth = 0;
this.rootWidth = 0;
this.rootHeight = 0;
this.rendered = false;
this.needFillComboView = false;
this.minWidth = this.options.minWidth;
this.autoWidth = this.options.autoWidth;
this.delayRenderTips = this.options.delayRenderTips || false;
this.itemTemplate = this.options.itemTemplate || _.template([
'<div class="style" id="<%= id %>">',
@ -102,6 +105,11 @@ define([
'</div>'
].join(''));
if(this.autoWidth) {
this.style += ' position:absolute; top:50%; bottom:50%; margin: auto 0;';
}
this.fieldPicker = new Common.UI.DataView({
cls: 'field-picker',
allowScrollbar: false,
@ -223,6 +231,16 @@ define([
checkSize: function() {
if (this.cmpEl && this.cmpEl.is(':visible')) {
if(this.autoWidth) {
this.autoChangeWidth();
// var wrapWidth = this.$el.width();
// if(wrapWidth != this.wrapWidth){
// this.wrapWidth = wrapWidth;
// this.autoChangeWidth();
// console.log(wrapWidth);
// }
}
var me = this,
width = this.cmpEl.width(),
height = this.cmpEl.height();
@ -266,6 +284,31 @@ define([
this.trigger('resize', this);
},
autoChangeWidth: function() {
var self = this;
if(self.fieldPicker.dataViewItems[0]){
var wrapEl = self.$el;
var wrapWidth = parseFloat(wrapEl.css('width')) - parseFloat(wrapEl.css('padding-left'));
var itemEl = self.fieldPicker.dataViewItems[0].$el;
var itemWidth = parseFloat(itemEl.css('width'));
var itemBorder = parseFloat(itemEl.css('border-width'));
var fieldPickerPadding = parseFloat(self.fieldPicker.$el.css('padding-right'));
var itemsCount = Math.floor((wrapWidth - fieldPickerPadding) / itemWidth);
if(itemsCount > this.store.length)
itemsCount = this.store.length;
var widthCalc = itemsCount * itemWidth - (itemsCount-2) * itemBorder + fieldPickerPadding;
var maxWidth = self.cmpEl.css('max-width');
if(widthCalc > maxWidth)
widthCalc = maxWidth;
self.cmpEl.css('width', widthCalc);
}
},
onBeforeShowMenu: function(e) {
var me = this;

View file

@ -91,7 +91,7 @@
.view {
margin-right: -@combo-dataview-button-width;
padding-right: @combo-dataview-button-width;
padding-right: calc(@combo-dataview-button-width - @scaled-two-px-value);
.border-left-radius(0);

View file

@ -1483,7 +1483,7 @@ define([
_set.viewFormMode, _set.lostConnect, _set.disableOnStart],
itemWidth: itemWidth,
itemHeight: itemHeight,
style: 'min-width:150px;',
style: 'min-width:139px;',
// hint : this.tipParagraphStyle,
dataHint: '1',
dataHintDirection: 'bottom',
@ -1491,6 +1491,7 @@ define([
enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem],
delayRenderTips: true,
autoWidth: true,
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<div style="background-image: url(<%= imageUrl %>); width: ' + itemWidth + 'px; height: ' + itemHeight + 'px;"></div>',

View file

@ -1058,12 +1058,13 @@ define([
itemWidth: 88,
enableKeyEvents: true,
itemHeight: 40,
style: 'min-width:130px;',
style: 'min-width:123px;',
lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, -4',
delayRenderTips: true,
autoWidth: true,
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<div class="item-theme" style="' + '<% if (typeof imageUrl !== "undefined") { %>' + 'background-image: url(<%= imageUrl %>);' + '<% } %> background-position: 0 -<%= offsety %>px;"></div>',

View file

@ -1303,7 +1303,7 @@ define([
enableKeyEvents : true,
itemWidth : 100,
itemHeight : 20,
style: 'min-width:158px; max-width:663px;',
style: 'min-width:135px; max-width: 660px;',
groups: new Common.UI.DataViewGroupStore([
{id: 'menu-style-group-custom', caption: this.textCustom },
{id: 'menu-style-group-color', caption: this.textGoodBadAndNeutral },
@ -1319,6 +1319,7 @@ define([
dataHintDirection: 'bottom',
dataHintOffset : '-16, -4',
delayRenderTips: true,
autoWidth: true,
beforeOpenHandler: function(e) {
var cmp = this,
menu = cmp.openButton.menu;