[PE] Delay rendering controls on the right panel (shape, textart settings) + init shape settings in the right panel before first opening..
This commit is contained in:
Julia Radzhabova
parent
a4acc71b13
commit
3e5fff37e8
|
|
@ -655,14 +655,15 @@ define([
|
||||||
|
|
||||||
documentHolderController.getView('DocumentHolder').createDelayedElements();
|
documentHolderController.getView('DocumentHolder').createDelayedElements();
|
||||||
|
|
||||||
rightmenuController.createDelayedElements();
|
|
||||||
|
|
||||||
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onFocusObject, me));
|
|
||||||
me.api.asc_registerCallback('asc_onUpdateLayout', _.bind(me.fillLayoutsStore, me)); // slide layouts loading
|
me.api.asc_registerCallback('asc_onUpdateLayout', _.bind(me.fillLayoutsStore, me)); // slide layouts loading
|
||||||
me.updateThemeColors();
|
me.updateThemeColors();
|
||||||
var shapes = me.api.asc_getPropertyEditorShapes();
|
var shapes = me.api.asc_getPropertyEditorShapes();
|
||||||
if (shapes)
|
if (shapes)
|
||||||
me.fillAutoShapes(shapes[0], shapes[1]);
|
me.fillAutoShapes(shapes[0], shapes[1]);
|
||||||
|
rightmenuController.createDelayedElements();
|
||||||
|
|
||||||
|
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onFocusObject, me));
|
||||||
|
|
||||||
me.fillTextArt(me.api.asc_getTextArtPreviews());
|
me.fillTextArt(me.api.asc_getTextArtPreviews());
|
||||||
toolbarController.activateControls();
|
toolbarController.activateControls();
|
||||||
if (me.needToUpdateVersion)
|
if (me.needToUpdateVersion)
|
||||||
|
|
|
||||||
|
|
@ -245,6 +245,7 @@ define([
|
||||||
if (this.editMode && this.api) {
|
if (this.editMode && this.api) {
|
||||||
this.api.asc_registerCallback('asc_doubleClickOnObject', _.bind(this.onDoubleClickOnObject, this));
|
this.api.asc_registerCallback('asc_doubleClickOnObject', _.bind(this.onDoubleClickOnObject, this));
|
||||||
|
|
||||||
|
this.rightmenu.shapeSettings.createDelayedElements();
|
||||||
var selectedElements = this.api.getSelectedElements();
|
var selectedElements = this.api.getSelectedElements();
|
||||||
if (selectedElements.length>0) {
|
if (selectedElements.length>0) {
|
||||||
var open = Common.localStorage.getItem("pe-hide-right-settings");
|
var open = Common.localStorage.getItem("pe-hide-right-settings");
|
||||||
|
|
|
||||||
|
|
@ -100,10 +100,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings) {
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
|
|
@ -310,6 +308,7 @@ define([
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
this.createDelayedControls();
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
setEditData: function() {
|
setEditData: function() {
|
||||||
|
|
|
||||||
|
|
@ -144,13 +144,12 @@ define([
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
this.createDelayedControls();
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings) {
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -168,10 +168,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
ChangeSettings: function(prop) {
|
ChangeSettings: function(prop) {
|
||||||
if (this._initSettings) {
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
|
|
@ -321,6 +319,7 @@ define([
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
this.createDelayedControls();
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
openAdvancedSettings: function(e) {
|
openAdvancedSettings: function(e) {
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
this._originalProps = null;
|
this._originalProps = null;
|
||||||
this._noApply = true;
|
this._noApply = true;
|
||||||
|
|
@ -123,349 +122,6 @@ define([
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this._arrFillSrc = [
|
|
||||||
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
|
||||||
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
|
||||||
{displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP},
|
|
||||||
{displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
|
|
||||||
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbFillSrc = new Common.UI.ComboBox({
|
|
||||||
el: $('#shape-combo-fill-src'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
style: 'width: 100%;',
|
|
||||||
menuStyle: 'min-width: 190px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrFillSrc
|
|
||||||
});
|
|
||||||
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
|
||||||
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
|
||||||
this.fillControls.push(this.cmbFillSrc);
|
|
||||||
|
|
||||||
this.btnBackColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBackColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBack = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-back-color-menu'),
|
|
||||||
value: 'transparent',
|
|
||||||
transparent: true
|
|
||||||
});
|
|
||||||
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBackColor.render( $('#shape-back-color-btn'));
|
|
||||||
this.btnBackColor.setColor('transparent');
|
|
||||||
$(this.el).on('click', '#shape-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
|
||||||
this.fillControls.push(this.btnBackColor);
|
|
||||||
|
|
||||||
this.cmbPattern = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 28,
|
|
||||||
itemHeight: 28,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
cls: 'combo-pattern'
|
|
||||||
});
|
|
||||||
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($('#shape-combo-pattern'));
|
|
||||||
this.cmbPattern.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 178,
|
|
||||||
'max-width': 178
|
|
||||||
});
|
|
||||||
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
|
|
||||||
this.cmbPattern.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
this.fillControls.push(this.cmbPattern);
|
|
||||||
|
|
||||||
this.btnFGColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-foreground-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnFGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsFG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-foreground-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsFG.on('select', _.bind(me.onColorsFGSelect, me));
|
|
||||||
});
|
|
||||||
this.btnFGColor.render( $('#shape-foreground-color-btn'));
|
|
||||||
this.btnFGColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#shape-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
|
||||||
this.fillControls.push(this.btnFGColor);
|
|
||||||
|
|
||||||
this.btnBGColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-background-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-background-color-menu'),
|
|
||||||
value: 'ffffff'
|
|
||||||
});
|
|
||||||
me.colorsBG.on('select', _.bind(me.onColorsBGSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBGColor.render( $('#shape-background-color-btn'));
|
|
||||||
this.btnBGColor.setColor('ffffff');
|
|
||||||
$(this.el).on('click', '#shape-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
|
||||||
this.fillControls.push(this.btnBGColor);
|
|
||||||
|
|
||||||
this.btnInsertFromFile = new Common.UI.Button({
|
|
||||||
el: $('#shape-button-from-file')
|
|
||||||
});
|
|
||||||
this.fillControls.push(this.btnInsertFromFile);
|
|
||||||
|
|
||||||
this.btnInsertFromUrl = new Common.UI.Button({
|
|
||||||
el: $('#shape-button-from-url')
|
|
||||||
});
|
|
||||||
this.fillControls.push(this.btnInsertFromUrl);
|
|
||||||
|
|
||||||
this.btnInsertFromFile.on('click', _.bind(function(btn){
|
|
||||||
if (this.api) this.api.ChangeShapeImageFromFile();
|
|
||||||
this.fireEvent('editcomplete', this);
|
|
||||||
}, this));
|
|
||||||
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
|
|
||||||
|
|
||||||
this._arrFillType = [
|
|
||||||
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
|
|
||||||
{displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbFillType = new Common.UI.ComboBox({
|
|
||||||
el: $('#shape-combo-fill-type'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 90px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrFillType
|
|
||||||
});
|
|
||||||
this.cmbFillType.setValue(this._arrFillType[0].value);
|
|
||||||
this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this));
|
|
||||||
this.fillControls.push(this.cmbFillType);
|
|
||||||
|
|
||||||
this.btnTexture = new Common.UI.ComboBox({
|
|
||||||
el: $('#shape-combo-fill-texture'),
|
|
||||||
template: _.template([
|
|
||||||
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
|
||||||
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
|
||||||
'<div style="display: table-cell;"></div>',
|
|
||||||
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
|
||||||
'</div>'
|
|
||||||
].join(''))
|
|
||||||
});
|
|
||||||
this.textureMenu = new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-shape-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
this.textureMenu.render($('#shape-combo-fill-texture'));
|
|
||||||
this.fillControls.push(this.btnTexture);
|
|
||||||
|
|
||||||
this.numTransparency = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#shape-spin-transparency'),
|
|
||||||
step: 1,
|
|
||||||
width: 62,
|
|
||||||
value: '100 %',
|
|
||||||
defaultUnit : "%",
|
|
||||||
maxValue: 100,
|
|
||||||
minValue: 0
|
|
||||||
});
|
|
||||||
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
|
||||||
this.fillControls.push(this.numTransparency);
|
|
||||||
|
|
||||||
this.sldrTransparency = new Common.UI.SingleSlider({
|
|
||||||
el: $('#shape-slider-transparency'),
|
|
||||||
width: 75,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 100,
|
|
||||||
value: 100
|
|
||||||
});
|
|
||||||
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
|
||||||
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
|
||||||
this.fillControls.push(this.sldrTransparency);
|
|
||||||
|
|
||||||
this.lblTransparencyStart = $(this.el).find('#shape-lbl-transparency-start');
|
|
||||||
this.lblTransparencyEnd = $(this.el).find('#shape-lbl-transparency-end');
|
|
||||||
|
|
||||||
this._arrGradType = [
|
|
||||||
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
|
||||||
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbGradType = new Common.UI.ComboBox({
|
|
||||||
el: $('#shape-combo-grad-type'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 90px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrGradType
|
|
||||||
});
|
|
||||||
this.cmbGradType.setValue(this._arrGradType[0].value);
|
|
||||||
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
|
||||||
this.fillControls.push(this.cmbGradType);
|
|
||||||
|
|
||||||
this._viewDataLinear = [
|
|
||||||
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
|
||||||
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
|
||||||
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
|
||||||
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
|
||||||
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
|
||||||
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
|
||||||
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
|
||||||
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
|
||||||
];
|
|
||||||
|
|
||||||
this._viewDataRadial = [
|
|
||||||
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.btnDirection = new Common.UI.Button({
|
|
||||||
cls : 'btn-large-dataview',
|
|
||||||
iconCls : 'item-gradient gradient-left',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
style: 'min-width: 60px;',
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-shape-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnDirection.on('render:after', function(btn) {
|
|
||||||
me.mnuDirectionPicker = new Common.UI.DataView({
|
|
||||||
el: $('#id-shape-menu-direction'),
|
|
||||||
parentMenu: btn.menu,
|
|
||||||
restoreHeight: 174,
|
|
||||||
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
|
||||||
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.btnDirection.render($('#shape-button-direction'));
|
|
||||||
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
|
||||||
this.fillControls.push(this.btnDirection);
|
|
||||||
|
|
||||||
this.btnGradColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-gradient-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnGradColor.on('render:after', function(btn) {
|
|
||||||
me.colorsGrad = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-gradient-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me));
|
|
||||||
});
|
|
||||||
this.btnGradColor.render( $('#shape-gradient-color-btn'));
|
|
||||||
this.btnGradColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#shape-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
|
||||||
this.fillControls.push(this.btnGradColor);
|
|
||||||
|
|
||||||
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
|
||||||
el: $('#shape-slider-gradient'),
|
|
||||||
width: 125,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 100,
|
|
||||||
values: [0, 100]
|
|
||||||
});
|
|
||||||
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
|
||||||
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
|
||||||
this.sldrGradient.on('thumbclick', function(cmp, index){
|
|
||||||
me.GradColor.currentIdx = index;
|
|
||||||
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
|
||||||
me.btnGradColor.setColor(color);
|
|
||||||
me.colorsGrad.select(color,false);
|
|
||||||
});
|
|
||||||
this.sldrGradient.on('thumbdblclick', function(cmp){
|
|
||||||
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
|
||||||
});
|
|
||||||
this.fillControls.push(this.sldrGradient);
|
|
||||||
|
|
||||||
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
|
||||||
el: $('#shape-combo-border-size'),
|
|
||||||
style: "width: 93px;",
|
|
||||||
txtNoBorders: this.txtNoBorders
|
|
||||||
})
|
|
||||||
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
|
||||||
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
|
||||||
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
|
||||||
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
||||||
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
|
||||||
this.cmbBorderSize.setValue(this.BorderSize);
|
|
||||||
this.lockedControls.push(this.cmbBorderSize);
|
|
||||||
|
|
||||||
this.btnBorderColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBorderColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBorder = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-border-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBorderColor.render( $('#shape-border-color-btn'));
|
|
||||||
this.btnBorderColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#shape-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
|
||||||
this.lockedControls.push(this.btnBorderColor);
|
|
||||||
|
|
||||||
this.cmbBorderType = new Common.UI.ComboBorderType({
|
|
||||||
el: $('#shape-combo-border-type'),
|
|
||||||
style: "width: 93px;",
|
|
||||||
menuStyle: 'min-width: 93px;'
|
|
||||||
}).on('selected', _.bind(this.onBorderTypeSelect, this))
|
|
||||||
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
||||||
this.BorderType = Asc.c_oDashType.solid;
|
|
||||||
this.cmbBorderType.setValue(this.BorderType);
|
|
||||||
this.lockedControls.push(this.cmbBorderType);
|
|
||||||
|
|
||||||
this.btnChangeShape = new Common.UI.Button({
|
|
||||||
cls: 'btn-icon-default',
|
|
||||||
iconCls: 'btn-change-shape',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
cls: 'menu-shapes',
|
|
||||||
items: []
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnChangeShape.render( $('#shape-btn-change')) ;
|
|
||||||
this.lockedControls.push(this.btnChangeShape);
|
|
||||||
|
|
||||||
$(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
|
|
||||||
|
|
||||||
this.FillColorContainer = $('#shape-panel-color-fill');
|
this.FillColorContainer = $('#shape-panel-color-fill');
|
||||||
this.FillImageContainer = $('#shape-panel-image-fill');
|
this.FillImageContainer = $('#shape-panel-image-fill');
|
||||||
this.FillPatternContainer = $('#shape-panel-pattern-fill');
|
this.FillPatternContainer = $('#shape-panel-pattern-fill');
|
||||||
|
|
@ -480,8 +136,6 @@ define([
|
||||||
el.html(this.template({
|
el.html(this.template({
|
||||||
scope: this
|
scope: this
|
||||||
}));
|
}));
|
||||||
|
|
||||||
this.linkAdvanced = $('#shape-advanced-link');
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setApi: function(api) {
|
setApi: function(api) {
|
||||||
|
|
@ -1024,7 +678,6 @@ define([
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings)
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
|
|
||||||
if (props)
|
if (props)
|
||||||
{
|
{
|
||||||
|
|
@ -1402,7 +1055,229 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
this._arrFillSrc = [
|
||||||
|
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
||||||
|
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
||||||
|
{displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP},
|
||||||
|
{displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
|
||||||
|
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbFillSrc = new Common.UI.ComboBox({
|
||||||
|
el: $('#shape-combo-fill-src'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
style: 'width: 100%;',
|
||||||
|
menuStyle: 'min-width: 190px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrFillSrc
|
||||||
|
});
|
||||||
|
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
||||||
|
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
||||||
|
this.fillControls.push(this.cmbFillSrc);
|
||||||
|
|
||||||
|
this.cmbPattern = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 28,
|
||||||
|
itemHeight: 28,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
cls: 'combo-pattern'
|
||||||
|
});
|
||||||
|
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($('#shape-combo-pattern'));
|
||||||
|
this.cmbPattern.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
|
||||||
|
this.cmbPattern.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
this.fillControls.push(this.cmbPattern);
|
||||||
|
|
||||||
|
this.btnInsertFromFile = new Common.UI.Button({
|
||||||
|
el: $('#shape-button-from-file')
|
||||||
|
});
|
||||||
|
this.fillControls.push(this.btnInsertFromFile);
|
||||||
|
|
||||||
|
this.btnInsertFromUrl = new Common.UI.Button({
|
||||||
|
el: $('#shape-button-from-url')
|
||||||
|
});
|
||||||
|
this.fillControls.push(this.btnInsertFromUrl);
|
||||||
|
|
||||||
|
this.btnInsertFromFile.on('click', _.bind(function(btn){
|
||||||
|
if (this.api) this.api.ChangeShapeImageFromFile();
|
||||||
|
this.fireEvent('editcomplete', this);
|
||||||
|
}, this));
|
||||||
|
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
|
||||||
|
|
||||||
|
this._arrFillType = [
|
||||||
|
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
|
||||||
|
{displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbFillType = new Common.UI.ComboBox({
|
||||||
|
el: $('#shape-combo-fill-type'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 90px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrFillType
|
||||||
|
});
|
||||||
|
this.cmbFillType.setValue(this._arrFillType[0].value);
|
||||||
|
this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this));
|
||||||
|
this.fillControls.push(this.cmbFillType);
|
||||||
|
|
||||||
|
this.numTransparency = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#shape-spin-transparency'),
|
||||||
|
step: 1,
|
||||||
|
width: 62,
|
||||||
|
value: '100 %',
|
||||||
|
defaultUnit : "%",
|
||||||
|
maxValue: 100,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
||||||
|
this.fillControls.push(this.numTransparency);
|
||||||
|
|
||||||
|
this.sldrTransparency = new Common.UI.SingleSlider({
|
||||||
|
el: $('#shape-slider-transparency'),
|
||||||
|
width: 75,
|
||||||
|
minValue: 0,
|
||||||
|
maxValue: 100,
|
||||||
|
value: 100
|
||||||
|
});
|
||||||
|
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
||||||
|
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
||||||
|
this.fillControls.push(this.sldrTransparency);
|
||||||
|
|
||||||
|
this.lblTransparencyStart = $(this.el).find('#shape-lbl-transparency-start');
|
||||||
|
this.lblTransparencyEnd = $(this.el).find('#shape-lbl-transparency-end');
|
||||||
|
|
||||||
|
this._arrGradType = [
|
||||||
|
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
||||||
|
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbGradType = new Common.UI.ComboBox({
|
||||||
|
el: $('#shape-combo-grad-type'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 90px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrGradType
|
||||||
|
});
|
||||||
|
this.cmbGradType.setValue(this._arrGradType[0].value);
|
||||||
|
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
||||||
|
this.fillControls.push(this.cmbGradType);
|
||||||
|
|
||||||
|
this._viewDataLinear = [
|
||||||
|
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
||||||
|
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
||||||
|
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
||||||
|
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
||||||
|
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
||||||
|
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
||||||
|
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
||||||
|
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
||||||
|
];
|
||||||
|
|
||||||
|
this._viewDataRadial = [
|
||||||
|
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.btnDirection = new Common.UI.Button({
|
||||||
|
cls : 'btn-large-dataview',
|
||||||
|
iconCls : 'item-gradient gradient-left',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
style: 'min-width: 60px;',
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-shape-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnDirection.on('render:after', function(btn) {
|
||||||
|
me.mnuDirectionPicker = new Common.UI.DataView({
|
||||||
|
el: $('#id-shape-menu-direction'),
|
||||||
|
parentMenu: btn.menu,
|
||||||
|
restoreHeight: 174,
|
||||||
|
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
||||||
|
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.btnDirection.render($('#shape-button-direction'));
|
||||||
|
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
||||||
|
this.fillControls.push(this.btnDirection);
|
||||||
|
|
||||||
|
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
||||||
|
el: $('#shape-slider-gradient'),
|
||||||
|
width: 125,
|
||||||
|
minValue: 0,
|
||||||
|
maxValue: 100,
|
||||||
|
values: [0, 100]
|
||||||
|
});
|
||||||
|
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
||||||
|
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
||||||
|
this.sldrGradient.on('thumbclick', function(cmp, index){
|
||||||
|
me.GradColor.currentIdx = index;
|
||||||
|
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
||||||
|
me.btnGradColor.setColor(color);
|
||||||
|
me.colorsGrad.select(color,false);
|
||||||
|
});
|
||||||
|
this.sldrGradient.on('thumbdblclick', function(cmp){
|
||||||
|
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
||||||
|
});
|
||||||
|
this.fillControls.push(this.sldrGradient);
|
||||||
|
|
||||||
|
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
||||||
|
el: $('#shape-combo-border-size'),
|
||||||
|
style: "width: 93px;",
|
||||||
|
txtNoBorders: this.txtNoBorders
|
||||||
|
})
|
||||||
|
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
||||||
|
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
||||||
|
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
||||||
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
||||||
|
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
||||||
|
this.cmbBorderSize.setValue(this.BorderSize);
|
||||||
|
this.lockedControls.push(this.cmbBorderSize);
|
||||||
|
|
||||||
|
this.cmbBorderType = new Common.UI.ComboBorderType({
|
||||||
|
el: $('#shape-combo-border-type'),
|
||||||
|
style: "width: 93px;",
|
||||||
|
menuStyle: 'min-width: 93px;'
|
||||||
|
}).on('selected', _.bind(this.onBorderTypeSelect, this))
|
||||||
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
||||||
|
this.BorderType = Asc.c_oDashType.solid;
|
||||||
|
this.cmbBorderType.setValue(this.BorderType);
|
||||||
|
this.lockedControls.push(this.cmbBorderType);
|
||||||
|
|
||||||
|
this.btnChangeShape = new Common.UI.Button({
|
||||||
|
cls: 'btn-icon-default',
|
||||||
|
iconCls: 'btn-change-shape',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
cls: 'menu-shapes',
|
||||||
|
items: []
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnChangeShape.render( $('#shape-btn-change')) ;
|
||||||
|
this.lockedControls.push(this.btnChangeShape);
|
||||||
|
|
||||||
|
this.linkAdvanced = $('#shape-advanced-link');
|
||||||
|
$(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||||
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
|
|
||||||
var global_hatch_menu_map = [
|
var global_hatch_menu_map = [
|
||||||
0,1,3,2,4,
|
0,1,3,2,4,
|
||||||
53,5,6,7,8,
|
53,5,6,7,8,
|
||||||
|
|
@ -1434,14 +1309,33 @@ define([
|
||||||
this.PatternFillType = this.patternViewData[0].type;
|
this.PatternFillType = this.patternViewData[0].type;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
this.fillAutoShapes();
|
this.fillAutoShapes();
|
||||||
this.UpdateThemeColors();
|
this.UpdateThemeColors();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
onInitStandartTextures: function(texture) {
|
onInitStandartTextures: function(texture) {
|
||||||
var me = this;
|
var me = this;
|
||||||
if (texture && texture.length>0){
|
if (texture && texture.length>0){
|
||||||
|
if (!this.btnTexture) {
|
||||||
|
this.btnTexture = new Common.UI.ComboBox({
|
||||||
|
el: $('#shape-combo-fill-texture'),
|
||||||
|
template: _.template([
|
||||||
|
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
||||||
|
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
||||||
|
'<div style="display: table-cell;"></div>',
|
||||||
|
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
||||||
|
'</div>'
|
||||||
|
].join(''))
|
||||||
|
});
|
||||||
|
this.textureMenu = new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-shape-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
this.textureMenu.render($('#shape-combo-fill-texture'));
|
||||||
|
this.fillControls.push(this.btnTexture);
|
||||||
|
}
|
||||||
var texturearray = [];
|
var texturearray = [];
|
||||||
_.each(texture, function(item){
|
_.each(texture, function(item){
|
||||||
texturearray.push({
|
texturearray.push({
|
||||||
|
|
@ -1521,6 +1415,104 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
UpdateThemeColors: function() {
|
UpdateThemeColors: function() {
|
||||||
|
if (!this.btnBackColor) {
|
||||||
|
this.btnBackColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBackColor.render( $('#shape-back-color-btn'));
|
||||||
|
this.btnBackColor.setColor('transparent');
|
||||||
|
this.fillControls.push(this.btnBackColor);
|
||||||
|
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-back-color-menu'),
|
||||||
|
value: 'transparent',
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||||
|
|
||||||
|
this.btnFGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnFGColor.render( $('#shape-foreground-color-btn'));
|
||||||
|
this.btnFGColor.setColor('000000');
|
||||||
|
this.fillControls.push(this.btnFGColor);
|
||||||
|
this.colorsFG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-foreground-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
||||||
|
|
||||||
|
this.btnBGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBGColor.render( $('#shape-background-color-btn'));
|
||||||
|
this.btnBGColor.setColor('ffffff');
|
||||||
|
this.fillControls.push(this.btnBGColor);
|
||||||
|
this.colorsBG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-background-color-menu'),
|
||||||
|
value: 'ffffff'
|
||||||
|
});
|
||||||
|
this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
||||||
|
|
||||||
|
this.btnGradColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnGradColor.render( $('#shape-gradient-color-btn'));
|
||||||
|
this.btnGradColor.setColor('000000');
|
||||||
|
this.fillControls.push(this.btnGradColor);
|
||||||
|
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-gradient-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
||||||
|
|
||||||
|
this.btnBorderColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBorderColor.render( $('#shape-border-color-btn'));
|
||||||
|
this.btnBorderColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnBorderColor);
|
||||||
|
this.colorsBorder = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-border-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
||||||
|
}
|
||||||
|
|
||||||
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
|
|
@ -1560,6 +1552,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable, disableFill) {
|
disableControls: function(disable, disableFill) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
this.disableFillPanels(disable || disableFill);
|
this.disableFillPanels(disable || disableFill);
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
|
|
|
||||||
|
|
@ -895,6 +895,7 @@ define([
|
||||||
}
|
}
|
||||||
|
|
||||||
this.UpdateThemeColors();
|
this.UpdateThemeColors();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
onInitStandartTextures: function(texture) {
|
onInitStandartTextures: function(texture) {
|
||||||
|
|
@ -1076,7 +1077,6 @@ define([
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings)
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
|
|
||||||
if (props)
|
if (props)
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -356,8 +356,7 @@ define([
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings)
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
if (props )
|
if (props )
|
||||||
|
|
@ -530,6 +529,7 @@ define([
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
this.createDelayedControls();
|
this.createDelayedControls();
|
||||||
this.UpdateThemeColors();
|
this.UpdateThemeColors();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
UpdateThemeColors: function() {
|
UpdateThemeColors: function() {
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
this._noApply = true;
|
this._noApply = true;
|
||||||
this.shapeprops = null;
|
this.shapeprops = null;
|
||||||
|
|
@ -118,373 +117,6 @@ define([
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this.cmbTextArt = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 50,
|
|
||||||
itemHeight: 50,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
showLast: false,
|
|
||||||
cls: 'combo-textart'
|
|
||||||
});
|
|
||||||
this.cmbTextArt.render($('#textart-combo-template'));
|
|
||||||
this.cmbTextArt.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 178,
|
|
||||||
'max-width': 178
|
|
||||||
});
|
|
||||||
this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this));
|
|
||||||
this.cmbTextArt.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.cmbTextArt);
|
|
||||||
|
|
||||||
this._arrFillSrc = [
|
|
||||||
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
|
||||||
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
|
||||||
{displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP},
|
|
||||||
{displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
|
|
||||||
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbFillSrc = new Common.UI.ComboBox({
|
|
||||||
el: $('#textart-combo-fill-src'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
style: 'width: 100%;',
|
|
||||||
menuStyle: 'min-width: 190px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrFillSrc
|
|
||||||
});
|
|
||||||
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
|
||||||
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
|
||||||
this.lockedControls.push(this.cmbFillSrc);
|
|
||||||
|
|
||||||
this.btnBackColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBackColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBack = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-back-color-menu'),
|
|
||||||
value: 'transparent',
|
|
||||||
transparent: true
|
|
||||||
});
|
|
||||||
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBackColor.render( $('#textart-back-color-btn'));
|
|
||||||
this.btnBackColor.setColor('transparent');
|
|
||||||
$(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
|
||||||
this.lockedControls.push(this.btnBackColor);
|
|
||||||
|
|
||||||
this.cmbPattern = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 28,
|
|
||||||
itemHeight: 28,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
cls: 'combo-pattern'
|
|
||||||
});
|
|
||||||
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($('#textart-combo-pattern'));
|
|
||||||
this.cmbPattern.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 178,
|
|
||||||
'max-width': 178
|
|
||||||
});
|
|
||||||
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
|
|
||||||
this.cmbPattern.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
|
|
||||||
this.lockedControls.push(this.cmbPattern);
|
|
||||||
|
|
||||||
this.btnFGColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-foreground-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnFGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsFG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-foreground-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsFG.on('select', _.bind(me.onColorsFGSelect, me));
|
|
||||||
});
|
|
||||||
this.btnFGColor.render( $('#textart-foreground-color-btn'));
|
|
||||||
this.btnFGColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#textart-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
|
||||||
this.lockedControls.push(this.btnFGColor);
|
|
||||||
|
|
||||||
this.btnBGColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-background-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-background-color-menu'),
|
|
||||||
value: 'ffffff'
|
|
||||||
});
|
|
||||||
me.colorsBG.on('select', _.bind(me.onColorsBGSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBGColor.render( $('#textart-background-color-btn'));
|
|
||||||
this.btnBGColor.setColor('ffffff');
|
|
||||||
$(this.el).on('click', '#textart-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
|
||||||
this.lockedControls.push(this.btnBGColor);
|
|
||||||
|
|
||||||
this.btnInsertFromFile = new Common.UI.Button({
|
|
||||||
el: $('#textart-button-from-file')
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.btnInsertFromFile);
|
|
||||||
|
|
||||||
this.btnInsertFromUrl = new Common.UI.Button({
|
|
||||||
el: $('#textart-button-from-url')
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.btnInsertFromUrl);
|
|
||||||
|
|
||||||
this.btnInsertFromFile.on('click', _.bind(function(btn){
|
|
||||||
if (this.api) this.api.ChangeArtImageFromFile();
|
|
||||||
this.fireEvent('editcomplete', this);
|
|
||||||
}, this));
|
|
||||||
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
|
|
||||||
|
|
||||||
this._arrFillType = [
|
|
||||||
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
|
|
||||||
{displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbFillType = new Common.UI.ComboBox({
|
|
||||||
el: $('#textart-combo-fill-type'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 90px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrFillType
|
|
||||||
});
|
|
||||||
this.cmbFillType.setValue(this._arrFillType[0].value);
|
|
||||||
this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this));
|
|
||||||
this.lockedControls.push(this.cmbFillType);
|
|
||||||
|
|
||||||
this.btnTexture = new Common.UI.ComboBox({
|
|
||||||
el: $('#textart-combo-fill-texture'),
|
|
||||||
template: _.template([
|
|
||||||
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
|
||||||
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
|
||||||
'<div style="display: table-cell;"></div>',
|
|
||||||
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
|
||||||
'</div>'
|
|
||||||
].join(''))
|
|
||||||
});
|
|
||||||
this.textureMenu = new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-textart-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
this.textureMenu.render($('#textart-combo-fill-texture'));
|
|
||||||
this.lockedControls.push(this.btnTexture);
|
|
||||||
|
|
||||||
this.numTransparency = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#textart-spin-transparency'),
|
|
||||||
step: 1,
|
|
||||||
width: 62,
|
|
||||||
value: '100 %',
|
|
||||||
defaultUnit : "%",
|
|
||||||
maxValue: 100,
|
|
||||||
minValue: 0
|
|
||||||
});
|
|
||||||
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
|
||||||
this.lockedControls.push(this.numTransparency);
|
|
||||||
|
|
||||||
this.sldrTransparency = new Common.UI.SingleSlider({
|
|
||||||
el: $('#textart-slider-transparency'),
|
|
||||||
width: 75,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 100,
|
|
||||||
value: 100
|
|
||||||
});
|
|
||||||
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
|
||||||
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
|
||||||
this.lockedControls.push(this.sldrTransparency);
|
|
||||||
|
|
||||||
this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start');
|
|
||||||
this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end');
|
|
||||||
|
|
||||||
this._arrGradType = [
|
|
||||||
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
|
||||||
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbGradType = new Common.UI.ComboBox({
|
|
||||||
el: $('#textart-combo-grad-type'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 90px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrGradType
|
|
||||||
});
|
|
||||||
this.cmbGradType.setValue(this._arrGradType[0].value);
|
|
||||||
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
|
||||||
this.lockedControls.push(this.cmbGradType);
|
|
||||||
|
|
||||||
this._viewDataLinear = [
|
|
||||||
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
|
||||||
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
|
||||||
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
|
||||||
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
|
||||||
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
|
||||||
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
|
||||||
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
|
||||||
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
|
||||||
];
|
|
||||||
|
|
||||||
this._viewDataRadial = [
|
|
||||||
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.btnDirection = new Common.UI.Button({
|
|
||||||
cls : 'btn-large-dataview',
|
|
||||||
iconCls : 'item-gradient gradient-left',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
style: 'min-width: 60px;',
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-textart-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnDirection.on('render:after', function(btn) {
|
|
||||||
me.mnuDirectionPicker = new Common.UI.DataView({
|
|
||||||
el: $('#id-textart-menu-direction'),
|
|
||||||
parentMenu: btn.menu,
|
|
||||||
restoreHeight: 174,
|
|
||||||
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
|
||||||
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.btnDirection.render($('#textart-button-direction'));
|
|
||||||
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
|
||||||
this.lockedControls.push(this.btnDirection);
|
|
||||||
|
|
||||||
this.btnGradColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnGradColor.on('render:after', function(btn) {
|
|
||||||
me.colorsGrad = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-gradient-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me));
|
|
||||||
});
|
|
||||||
this.btnGradColor.render( $('#textart-gradient-color-btn'));
|
|
||||||
this.btnGradColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
|
||||||
this.lockedControls.push(this.btnGradColor);
|
|
||||||
|
|
||||||
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
|
||||||
el: $('#textart-slider-gradient'),
|
|
||||||
width: 125,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 100,
|
|
||||||
values: [0, 100]
|
|
||||||
});
|
|
||||||
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
|
||||||
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
|
||||||
this.sldrGradient.on('thumbclick', function(cmp, index){
|
|
||||||
me.GradColor.currentIdx = index;
|
|
||||||
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
|
||||||
me.btnGradColor.setColor(color);
|
|
||||||
me.colorsGrad.select(color,false);
|
|
||||||
});
|
|
||||||
this.sldrGradient.on('thumbdblclick', function(cmp){
|
|
||||||
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.sldrGradient);
|
|
||||||
|
|
||||||
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
|
||||||
el: $('#textart-combo-border-size'),
|
|
||||||
style: "width: 93px;",
|
|
||||||
txtNoBorders: this.txtNoBorders
|
|
||||||
})
|
|
||||||
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
|
||||||
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
|
||||||
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
|
||||||
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
||||||
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
|
||||||
this.cmbBorderSize.setValue(this.BorderSize);
|
|
||||||
this.lockedControls.push(this.cmbBorderSize);
|
|
||||||
|
|
||||||
this.btnBorderColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.btnBorderColor);
|
|
||||||
|
|
||||||
this.btnBorderColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBorder = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-border-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBorderColor.render( $('#textart-border-color-btn'));
|
|
||||||
this.btnBorderColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
|
||||||
|
|
||||||
this.cmbBorderType = new Common.UI.ComboBorderType({
|
|
||||||
el: $('#textart-combo-border-type'),
|
|
||||||
style: "width: 93px;",
|
|
||||||
menuStyle: 'min-width: 93px;'
|
|
||||||
}).on('selected', _.bind(this.onBorderTypeSelect, this))
|
|
||||||
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
||||||
this.BorderType = Asc.c_oDashType.solid;
|
|
||||||
this.cmbBorderType.setValue(this.BorderType);
|
|
||||||
this.lockedControls.push(this.cmbBorderType);
|
|
||||||
|
|
||||||
this.cmbTransform = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 50,
|
|
||||||
itemHeight: 50,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
cls: 'combo-textart'
|
|
||||||
});
|
|
||||||
this.cmbTransform.render($('#textart-combo-transform'));
|
|
||||||
this.cmbTransform.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 178,
|
|
||||||
'max-width': 178
|
|
||||||
});
|
|
||||||
this.cmbTransform.on('click', _.bind(this.onTransformSelect, this));
|
|
||||||
this.cmbTransform.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.cmbTransform);
|
|
||||||
|
|
||||||
this.FillColorContainer = $('#textart-panel-color-fill');
|
this.FillColorContainer = $('#textart-panel-color-fill');
|
||||||
this.FillImageContainer = $('#textart-panel-image-fill');
|
this.FillImageContainer = $('#textart-panel-image-fill');
|
||||||
this.FillPatternContainer = $('#textart-panel-pattern-fill');
|
this.FillPatternContainer = $('#textart-panel-pattern-fill');
|
||||||
|
|
@ -1029,7 +661,6 @@ define([
|
||||||
|
|
||||||
if (this._initSettings)
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
|
|
||||||
if (props && props.get_TextArtProperties())
|
if (props && props.get_TextArtProperties())
|
||||||
{
|
{
|
||||||
|
|
@ -1413,7 +1044,234 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
this._arrFillSrc = [
|
||||||
|
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
||||||
|
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
||||||
|
{displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP},
|
||||||
|
{displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
|
||||||
|
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbFillSrc = new Common.UI.ComboBox({
|
||||||
|
el: $('#textart-combo-fill-src'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
style: 'width: 100%;',
|
||||||
|
menuStyle: 'min-width: 190px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrFillSrc
|
||||||
|
});
|
||||||
|
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
||||||
|
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
||||||
|
this.lockedControls.push(this.cmbFillSrc);
|
||||||
|
|
||||||
|
this.cmbPattern = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 28,
|
||||||
|
itemHeight: 28,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
cls: 'combo-pattern'
|
||||||
|
});
|
||||||
|
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($('#textart-combo-pattern'));
|
||||||
|
this.cmbPattern.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
|
||||||
|
this.cmbPattern.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.lockedControls.push(this.cmbPattern);
|
||||||
|
|
||||||
|
this.btnInsertFromFile = new Common.UI.Button({
|
||||||
|
el: $('#textart-button-from-file')
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.btnInsertFromFile);
|
||||||
|
|
||||||
|
this.btnInsertFromUrl = new Common.UI.Button({
|
||||||
|
el: $('#textart-button-from-url')
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.btnInsertFromUrl);
|
||||||
|
|
||||||
|
this.btnInsertFromFile.on('click', _.bind(function(btn){
|
||||||
|
if (this.api) this.api.ChangeArtImageFromFile();
|
||||||
|
this.fireEvent('editcomplete', this);
|
||||||
|
}, this));
|
||||||
|
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
|
||||||
|
|
||||||
|
this._arrFillType = [
|
||||||
|
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
|
||||||
|
{displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbFillType = new Common.UI.ComboBox({
|
||||||
|
el: $('#textart-combo-fill-type'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 90px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrFillType
|
||||||
|
});
|
||||||
|
this.cmbFillType.setValue(this._arrFillType[0].value);
|
||||||
|
this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this));
|
||||||
|
this.lockedControls.push(this.cmbFillType);
|
||||||
|
|
||||||
|
this.numTransparency = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#textart-spin-transparency'),
|
||||||
|
step: 1,
|
||||||
|
width: 62,
|
||||||
|
value: '100 %',
|
||||||
|
defaultUnit : "%",
|
||||||
|
maxValue: 100,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
||||||
|
this.lockedControls.push(this.numTransparency);
|
||||||
|
|
||||||
|
this.sldrTransparency = new Common.UI.SingleSlider({
|
||||||
|
el: $('#textart-slider-transparency'),
|
||||||
|
width: 75,
|
||||||
|
minValue: 0,
|
||||||
|
maxValue: 100,
|
||||||
|
value: 100
|
||||||
|
});
|
||||||
|
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
||||||
|
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
||||||
|
this.lockedControls.push(this.sldrTransparency);
|
||||||
|
|
||||||
|
this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start');
|
||||||
|
this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end');
|
||||||
|
|
||||||
|
this._arrGradType = [
|
||||||
|
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
||||||
|
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbGradType = new Common.UI.ComboBox({
|
||||||
|
el: $('#textart-combo-grad-type'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 90px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrGradType
|
||||||
|
});
|
||||||
|
this.cmbGradType.setValue(this._arrGradType[0].value);
|
||||||
|
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
||||||
|
this.lockedControls.push(this.cmbGradType);
|
||||||
|
|
||||||
|
this._viewDataLinear = [
|
||||||
|
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
||||||
|
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
||||||
|
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
||||||
|
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
||||||
|
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
||||||
|
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
||||||
|
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
||||||
|
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
||||||
|
];
|
||||||
|
|
||||||
|
this._viewDataRadial = [
|
||||||
|
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.btnDirection = new Common.UI.Button({
|
||||||
|
cls : 'btn-large-dataview',
|
||||||
|
iconCls : 'item-gradient gradient-left',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
style: 'min-width: 60px;',
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-textart-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnDirection.on('render:after', function(btn) {
|
||||||
|
me.mnuDirectionPicker = new Common.UI.DataView({
|
||||||
|
el: $('#id-textart-menu-direction'),
|
||||||
|
parentMenu: btn.menu,
|
||||||
|
restoreHeight: 174,
|
||||||
|
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
||||||
|
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.btnDirection.render($('#textart-button-direction'));
|
||||||
|
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
||||||
|
this.lockedControls.push(this.btnDirection);
|
||||||
|
|
||||||
|
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
||||||
|
el: $('#textart-slider-gradient'),
|
||||||
|
width: 125,
|
||||||
|
minValue: 0,
|
||||||
|
maxValue: 100,
|
||||||
|
values: [0, 100]
|
||||||
|
});
|
||||||
|
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
||||||
|
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
||||||
|
this.sldrGradient.on('thumbclick', function(cmp, index){
|
||||||
|
me.GradColor.currentIdx = index;
|
||||||
|
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
||||||
|
me.btnGradColor.setColor(color);
|
||||||
|
me.colorsGrad.select(color,false);
|
||||||
|
});
|
||||||
|
this.sldrGradient.on('thumbdblclick', function(cmp){
|
||||||
|
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.sldrGradient);
|
||||||
|
|
||||||
|
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
||||||
|
el: $('#textart-combo-border-size'),
|
||||||
|
style: "width: 93px;",
|
||||||
|
txtNoBorders: this.txtNoBorders
|
||||||
|
})
|
||||||
|
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
||||||
|
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
||||||
|
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
||||||
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
||||||
|
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
||||||
|
this.cmbBorderSize.setValue(this.BorderSize);
|
||||||
|
this.lockedControls.push(this.cmbBorderSize);
|
||||||
|
|
||||||
|
this.cmbBorderType = new Common.UI.ComboBorderType({
|
||||||
|
el: $('#textart-combo-border-type'),
|
||||||
|
style: "width: 93px;",
|
||||||
|
menuStyle: 'min-width: 93px;'
|
||||||
|
}).on('selected', _.bind(this.onBorderTypeSelect, this))
|
||||||
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
||||||
|
this.BorderType = Asc.c_oDashType.solid;
|
||||||
|
this.cmbBorderType.setValue(this.BorderType);
|
||||||
|
this.lockedControls.push(this.cmbBorderType);
|
||||||
|
|
||||||
|
this.cmbTransform = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 50,
|
||||||
|
itemHeight: 50,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
cls: 'combo-textart'
|
||||||
|
});
|
||||||
|
this.cmbTransform.render($('#textart-combo-transform'));
|
||||||
|
this.cmbTransform.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbTransform.on('click', _.bind(this.onTransformSelect, this));
|
||||||
|
this.cmbTransform.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.cmbTransform);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
|
|
||||||
var global_hatch_menu_map = [
|
var global_hatch_menu_map = [
|
||||||
0,1,3,2,4,
|
0,1,3,2,4,
|
||||||
53,5,6,7,8,
|
53,5,6,7,8,
|
||||||
|
|
@ -1446,11 +1304,31 @@ define([
|
||||||
}
|
}
|
||||||
this.UpdateThemeColors();
|
this.UpdateThemeColors();
|
||||||
this.fillTransform(this.api.asc_getPropertyEditorTextArts());
|
this.fillTransform(this.api.asc_getPropertyEditorTextArts());
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
onInitStandartTextures: function(texture) {
|
onInitStandartTextures: function(texture) {
|
||||||
var me = this;
|
var me = this;
|
||||||
if (texture && texture.length>0){
|
if (texture && texture.length>0){
|
||||||
|
if (!this.btnTexture) {
|
||||||
|
this.btnTexture = new Common.UI.ComboBox({
|
||||||
|
el: $('#textart-combo-fill-texture'),
|
||||||
|
template: _.template([
|
||||||
|
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
||||||
|
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
||||||
|
'<div style="display: table-cell;"></div>',
|
||||||
|
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
||||||
|
'</div>'
|
||||||
|
].join(''))
|
||||||
|
});
|
||||||
|
this.textureMenu = new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-textart-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
this.textureMenu.render($('#textart-combo-fill-texture'));
|
||||||
|
this.lockedControls.push(this.btnTexture);
|
||||||
|
}
|
||||||
var texturearray = [];
|
var texturearray = [];
|
||||||
_.each(texture, function(item){
|
_.each(texture, function(item){
|
||||||
texturearray.push({
|
texturearray.push({
|
||||||
|
|
@ -1493,8 +1371,29 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
fillTextArt: function() {
|
fillTextArt: function() {
|
||||||
var me = this,
|
var me = this;
|
||||||
models = this.application.getCollection('Common.Collections.TextArt').models,
|
if (!this.cmbTextArt) {
|
||||||
|
this.cmbTextArt = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 50,
|
||||||
|
itemHeight: 50,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
showLast: false,
|
||||||
|
cls: 'combo-textart'
|
||||||
|
});
|
||||||
|
this.cmbTextArt.render($('#textart-combo-template'));
|
||||||
|
this.cmbTextArt.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this));
|
||||||
|
this.cmbTextArt.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.cmbTextArt);
|
||||||
|
}
|
||||||
|
|
||||||
|
var models = this.application.getCollection('Common.Collections.TextArt').models,
|
||||||
count = this.cmbTextArt.menuPicker.store.length;
|
count = this.cmbTextArt.menuPicker.store.length;
|
||||||
if (count>0 && count==models.length) {
|
if (count>0 && count==models.length) {
|
||||||
var data = this.cmbTextArt.menuPicker.store.models;
|
var data = this.cmbTextArt.menuPicker.store.models;
|
||||||
|
|
@ -1552,6 +1451,104 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
UpdateThemeColors: function() {
|
UpdateThemeColors: function() {
|
||||||
|
if (!this.btnBackColor) {
|
||||||
|
this.btnBackColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBackColor.render( $('#textart-back-color-btn'));
|
||||||
|
this.btnBackColor.setColor('transparent');
|
||||||
|
this.lockedControls.push(this.btnBackColor);
|
||||||
|
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-back-color-menu'),
|
||||||
|
value: 'transparent',
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||||
|
|
||||||
|
this.btnFGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnFGColor.render( $('#textart-foreground-color-btn'));
|
||||||
|
this.btnFGColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnFGColor);
|
||||||
|
this.colorsFG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-foreground-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
||||||
|
|
||||||
|
this.btnBGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBGColor.render( $('#textart-background-color-btn'));
|
||||||
|
this.btnBGColor.setColor('ffffff');
|
||||||
|
this.lockedControls.push(this.btnBGColor);
|
||||||
|
this.colorsBG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-background-color-menu'),
|
||||||
|
value: 'ffffff'
|
||||||
|
});
|
||||||
|
this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
||||||
|
|
||||||
|
this.btnGradColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnGradColor.render( $('#textart-gradient-color-btn'));
|
||||||
|
this.btnGradColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnGradColor);
|
||||||
|
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-gradient-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
||||||
|
|
||||||
|
this.btnBorderColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBorderColor.render( $('#textart-border-color-btn'));
|
||||||
|
this.btnBorderColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnBorderColor);
|
||||||
|
this.colorsBorder = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-border-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
||||||
|
}
|
||||||
|
|
||||||
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
|
|
@ -1580,6 +1577,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue