Refactoring ComboDataView
This commit is contained in:
Julia Radzhabova
parent
645e5f8e4c
commit
08ccff10ab
|
|
@ -236,14 +236,14 @@ define([
|
|||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'big',
|
||||
delayRenderTips: true
|
||||
delayRenderTips: true,
|
||||
itemTemplate: _.template([
|
||||
'<div class="item-icon-box" id="<%= id %>">',
|
||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
|
||||
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>" ',
|
||||
'</div>'
|
||||
].join(''))
|
||||
});
|
||||
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
|
||||
'<div class="item-icon-box" id="<%= id %>">',
|
||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
|
||||
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>" ',
|
||||
'</div>'
|
||||
].join(''));
|
||||
this.cmbWrapType.render($('#chart-combo-wrap'));
|
||||
this.cmbWrapType.openButton.menu.cmpEl.css({
|
||||
'min-width': 178,
|
||||
|
|
|
|||
|
|
@ -140,14 +140,14 @@ define([
|
|||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: '-10, 0',
|
||||
delayRenderTips: true
|
||||
delayRenderTips: true,
|
||||
itemTemplate: _.template([
|
||||
'<div class="item-icon-box" id="<%= id %>" style="">',
|
||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
|
||||
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
|
||||
'</div>'
|
||||
].join(''))
|
||||
});
|
||||
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
|
||||
'<div class="item-icon-box" id="<%= id %>" style="">',
|
||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
|
||||
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
|
||||
'</div>'
|
||||
].join(''));
|
||||
this.cmbWrapType.render($('#image-combo-wrap'));
|
||||
this.cmbWrapType.openButton.menu.cmpEl.css({
|
||||
'min-width': 178,
|
||||
|
|
|
|||
|
|
@ -1265,23 +1265,25 @@ define([
|
|||
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
||||
this.fillControls.push(this.cmbFillSrc);
|
||||
|
||||
var itemWidth = 28,
|
||||
itemHeight = 28;
|
||||
this.cmbPattern = new Common.UI.ComboDataView({
|
||||
itemWidth: 28,
|
||||
itemHeight: 28,
|
||||
itemWidth: itemWidth,
|
||||
itemHeight: itemHeight,
|
||||
menuMaxHeight: 300,
|
||||
enableKeyEvents: true,
|
||||
cls: 'combo-pattern',
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'big'
|
||||
});
|
||||
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
|
||||
dataHintOffset: 'big',
|
||||
itemTemplate: _.template([
|
||||
'<div class="style" id="<%= id %>">',
|
||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
|
||||
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
|
||||
'width="' + itemWidth + '" height="' + itemHeight + '" ',
|
||||
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
|
||||
'</div>'
|
||||
].join(''));
|
||||
].join(''))
|
||||
});
|
||||
this.cmbPattern.render($('#shape-combo-pattern'));
|
||||
this.cmbPattern.openButton.menu.cmpEl.css({
|
||||
'min-width': 178,
|
||||
|
|
@ -1637,14 +1639,14 @@ define([
|
|||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: 'big',
|
||||
delayRenderTips: true
|
||||
delayRenderTips: true,
|
||||
itemTemplate: _.template([
|
||||
'<div class="item-icon-box" id="<%= id %>">',
|
||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
|
||||
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
|
||||
'</div>'
|
||||
].join(''))
|
||||
});
|
||||
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
|
||||
'<div class="item-icon-box" id="<%= id %>">',
|
||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" ' +
|
||||
'class="combo-wrap-item options__icon options__icon-huge <%= icon %>"',
|
||||
'</div>'
|
||||
].join(''));
|
||||
this.cmbWrapType.render($('#shape-combo-wrap'));
|
||||
this.cmbWrapType.openButton.menu.cmpEl.css({
|
||||
'min-width': 178,
|
||||
|
|
|
|||
|
|
@ -1303,16 +1303,23 @@ define([
|
|||
caption: me.textStyleMenuNew
|
||||
});
|
||||
|
||||
var itemWidth = 104,
|
||||
itemHeight = 40;
|
||||
this.listStyles = new Common.UI.ComboDataView({
|
||||
cls: 'combo-styles',
|
||||
itemWidth: 104,
|
||||
itemHeight: 40,
|
||||
itemWidth: itemWidth,
|
||||
itemHeight: itemHeight,
|
||||
// hint : this.tipParagraphStyle,
|
||||
dataHint: '1',
|
||||
dataHintDirection: 'bottom',
|
||||
dataHintOffset: '-16, -4',
|
||||
enableKeyEvents: true,
|
||||
additionalMenuItems: [this.listStylesAdditionalMenuItem],
|
||||
itemTemplate: _.template([
|
||||
'<div class="style" id="<%= id %>">',
|
||||
'<div style="background-image: url(<%= imageUrl %>); width: ' + itemWidth + 'px; height: ' + itemHeight + 'px;"></div>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
beforeOpenHandler: function (e) {
|
||||
var cmp = this,
|
||||
menu = cmp.openButton.menu,
|
||||
|
|
@ -1322,22 +1329,22 @@ define([
|
|||
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
|
||||
var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1;
|
||||
Common.Utils.applicationPixelRatio() > 1 && Common.Utils.applicationPixelRatio() < 2 && (itemMargin = -1 / Common.Utils.applicationPixelRatio());
|
||||
var itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) :
|
||||
var _width = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) :
|
||||
(cmp.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) +
|
||||
parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width')));
|
||||
|
||||
var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length,
|
||||
columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + itemWidth) + 0.5));
|
||||
columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + _width) + 0.5));
|
||||
|
||||
columnCount = columnCount < minCount ? minCount : columnCount;
|
||||
menu.menuAlignEl = cmp.cmpEl;
|
||||
|
||||
menu.menuAlign = 'tl-tl';
|
||||
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1;
|
||||
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + _width) - 1;
|
||||
menu.setOffset(Math.min(offset, 0));
|
||||
|
||||
menu.cmpEl.css({
|
||||
'width': columnCount * (itemWidth + itemMargin),
|
||||
'width': columnCount * (_width + itemMargin),
|
||||
'min-height': cmp.cmpEl.height()
|
||||
});
|
||||
}
|
||||
|
|
@ -1353,16 +1360,6 @@ define([
|
|||
}
|
||||
});
|
||||
|
||||
this.listStyles.fieldPicker.itemTemplate = _.template([
|
||||
'<div class="style" id="<%= id %>">',
|
||||
'<div style="background-image: url(<%= imageUrl %>); width: ' + this.listStyles.itemWidth + 'px; height: ' + this.listStyles.itemHeight + 'px;"></div>',
|
||||
'</div>'
|
||||
].join(''));
|
||||
this.listStyles.menuPicker.itemTemplate = _.template([
|
||||
'<div class="style" id="<%= id %>">',
|
||||
'<div style="background-image: url(<%= imageUrl %>); width: ' + this.listStyles.itemWidth + 'px; height: ' + this.listStyles.itemHeight + 'px;"></div>',
|
||||
'</div>'
|
||||
].join(''));
|
||||
this.paragraphControls.push(this.listStyles);
|
||||
this.textOnlyControls.push(this.listStyles);
|
||||
|
||||
|
|
|
|||
|
|
@ -133,10 +133,18 @@ define([
|
|||
{title: this.textZoom, imageUrl: "transition-zoom", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()}
|
||||
];
|
||||
|
||||
var itemWidth = 87,
|
||||
itemHeight = 40;
|
||||
this.listEffects = new Common.UI.ComboDataView({
|
||||
cls: 'combo-styles',
|
||||
itemWidth: 87,
|
||||
itemHeight: 40,
|
||||
itemWidth: itemWidth,
|
||||
itemHeight: itemHeight,
|
||||
itemTemplate: _.template([
|
||||
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
|
||||
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>',
|
||||
'<div class = "caption"><%= title %></div>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
enableKeyEvents: true,
|
||||
lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
|
||||
dataHint: '1',
|
||||
|
|
@ -169,14 +177,6 @@ define([
|
|||
this.lockedControls.push(this.listEffects);
|
||||
this.listEffects.menuPicker.store.add(this._arrEffectName);
|
||||
|
||||
this.listEffects.fieldPicker.itemTemplate = _.template([
|
||||
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + (this.listEffects.itemWidth) + 'px;height: ' + (this.listEffects.itemHeight) + 'px;">',
|
||||
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>',
|
||||
'<div class = "caption"><%= title %></div>',
|
||||
'</div>'
|
||||
].join(''));
|
||||
this.listEffects.menuPicker.itemTemplate = this.listEffects.fieldPicker.itemTemplate;
|
||||
|
||||
this.btnPreview = new Common.UI.Button({
|
||||
cls: 'btn-toolbar', // x-huge icon-top',
|
||||
caption: this.txtPreview,
|
||||
|
|
|
|||
Loading…
Reference in a new issue