Refactoring ComboDataView

This commit is contained in:
Julia Radzhabova 2021-12-11 19:16:03 +03:00
parent 08ccff10ab
commit 72d4d76172
7 changed files with 65 additions and 59 deletions

View file

@ -1171,23 +1171,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,

View file

@ -702,23 +702,25 @@ define([
createDelayedControls: function() {
var me = this;
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'
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''))
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.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 + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
this.cmbPattern.render($('#slide-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,

View file

@ -1102,23 +1102,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.lockedControls.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($('#textart-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,

View file

@ -1017,6 +1017,11 @@ define([
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-16, -4',
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>',
'</div>'
].join('')),
beforeOpenHandler: function (e) {
var cmp = this,
menu = cmp.openButton.menu,
@ -1055,17 +1060,6 @@ define([
}
});
me.listTheme.fieldPicker.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>',
'</div>'
].join(''));
me.listTheme.menuPicker.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>',
'</div>'
].join(''));
this.cmbInsertShape = new Common.UI.ComboDataViewShape({
cls: 'combo-styles shapes',
itemWidth: 20,

View file

@ -320,23 +320,25 @@ define([
});
this.fillControls.push(this.sldrGradient);
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'
dataHintOffset: 'big',
itemTemplate: _.template([
'<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
'width="' + itemWidth + '" height="' + itemHeight + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''))
});
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.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 + '" ',
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>'
].join(''));
this.cmbPattern.render($('#cell-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,

View file

@ -1188,23 +1188,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,

View file

@ -1106,23 +1106,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.lockedControls.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($('#textart-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178,