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.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.fillControls.push(this.cmbFillSrc); this.fillControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({ this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28, itemWidth: itemWidth,
itemHeight: 28, itemHeight: itemHeight,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern', cls: 'combo-pattern',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
}); itemTemplate: _.template([
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ', '<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;"/>', 'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>' '</div>'
].join('')); ].join(''))
});
this.cmbPattern.render($('#shape-combo-pattern')); this.cmbPattern.render($('#shape-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({ this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178, 'min-width': 178,

View file

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

View file

@ -1102,23 +1102,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.lockedControls.push(this.cmbFillSrc); this.lockedControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({ this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28, itemWidth: itemWidth,
itemHeight: 28, itemHeight: itemHeight,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern', cls: 'combo-pattern',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
}); itemTemplate: _.template([
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ', '<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;"/>', 'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>' '</div>'
].join('')); ].join(''))
});
this.cmbPattern.render($('#textart-combo-pattern')); this.cmbPattern.render($('#textart-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({ this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178, 'min-width': 178,

View file

@ -1017,6 +1017,11 @@ define([
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-16, -4', 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) { beforeOpenHandler: function (e) {
var cmp = this, var cmp = this,
menu = cmp.openButton.menu, 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({ this.cmbInsertShape = new Common.UI.ComboDataViewShape({
cls: 'combo-styles shapes', cls: 'combo-styles shapes',
itemWidth: 20, itemWidth: 20,

View file

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

View file

@ -1188,23 +1188,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.fillControls.push(this.cmbFillSrc); this.fillControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({ this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28, itemWidth: itemWidth,
itemHeight: 28, itemHeight: itemHeight,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern', cls: 'combo-pattern',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
}); itemTemplate: _.template([
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ', '<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;"/>', 'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>' '</div>'
].join('')); ].join(''))
});
this.cmbPattern.render($('#shape-combo-pattern')); this.cmbPattern.render($('#shape-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({ this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178, 'min-width': 178,

View file

@ -1106,23 +1106,25 @@ define([
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
this.lockedControls.push(this.cmbFillSrc); this.lockedControls.push(this.cmbFillSrc);
var itemWidth = 28,
itemHeight = 28;
this.cmbPattern = new Common.UI.ComboDataView({ this.cmbPattern = new Common.UI.ComboDataView({
itemWidth: 28, itemWidth: itemWidth,
itemHeight: 28, itemHeight: itemHeight,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern', cls: 'combo-pattern',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: 'big' dataHintOffset: 'big',
}); itemTemplate: _.template([
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ', '<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;"/>', 'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
'</div>' '</div>'
].join('')); ].join(''))
});
this.cmbPattern.render($('#textart-combo-pattern')); this.cmbPattern.render($('#textart-combo-pattern'));
this.cmbPattern.openButton.menu.cmpEl.css({ this.cmbPattern.openButton.menu.cmpEl.css({
'min-width': 178, 'min-width': 178,