Auto change width for an integer number of elements for ComboDataView
This commit is contained in:
Alexei Koshelev
parent
832641ec5f
commit
6e5de0c8c1
|
|
@ -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();
|
||||
|
|
@ -265,7 +283,32 @@ define([
|
|||
if (!this.isSuspendEvents)
|
||||
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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>',
|
||||
|
|
|
|||
|
|
@ -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>',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue