commit
af7f225447
|
@ -218,7 +218,7 @@ define([
|
|||
style : me.style
|
||||
}));
|
||||
|
||||
if (me.menu && _.isFunction(me.menu.render))
|
||||
if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render))
|
||||
me.menu.render(me.cmpEl);
|
||||
|
||||
parentEl.html(me.cmpEl);
|
||||
|
@ -379,7 +379,7 @@ define([
|
|||
}
|
||||
|
||||
if (me.disabled) {
|
||||
me.setDisabled(me.disabled);
|
||||
me.setDisabled(!(me.disabled=false));
|
||||
}
|
||||
|
||||
me.trigger('render:after', me);
|
||||
|
@ -414,7 +414,7 @@ define([
|
|||
},
|
||||
|
||||
setDisabled: function(disabled) {
|
||||
if (this.rendered) {
|
||||
if (this.rendered && this.disabled != disabled) {
|
||||
var el = this.cmpEl,
|
||||
isGroup = el.hasClass('btn-group');
|
||||
|
||||
|
@ -489,6 +489,13 @@ define([
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setMenu: function (m) {
|
||||
if (m && _.isObject(m) && _.isFunction(m.render)){
|
||||
this.menu = m;
|
||||
this.menu.render(this.cmpEl);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
@ -188,13 +188,6 @@ define([
|
|||
|
||||
Common.NotificationCenter.on('menumanager:hideall', _.bind(me.closeMenu, me));
|
||||
|
||||
this.scroller = new Common.UI.Scroller({
|
||||
el: $('.dropdown-menu', me.cmpEl),
|
||||
minScrollbarLength : 40,
|
||||
scrollYMarginOffset: 30,
|
||||
includePadding : true
|
||||
});
|
||||
|
||||
// set default selection
|
||||
this.setDefaultSelection();
|
||||
|
||||
|
@ -232,6 +225,15 @@ define([
|
|||
},
|
||||
|
||||
onBeforeShowMenu: function(e) {
|
||||
if ( !this.scroller ) {
|
||||
this.scroller = new Common.UI.Scroller(_.extend({
|
||||
el: $('.dropdown-menu', this.cmpEl),
|
||||
minScrollbarLength: 40,
|
||||
scrollYMarginOffset: 30,
|
||||
includePadding: true
|
||||
}, this.options.scroller));
|
||||
}
|
||||
|
||||
Common.NotificationCenter.trigger('menu:show');
|
||||
this.trigger('show:before', this, e);
|
||||
if (this.options.hint) {
|
||||
|
@ -525,12 +527,12 @@ define([
|
|||
this.scroller.destroy();
|
||||
delete this.scroller;
|
||||
}
|
||||
this.scroller = new Common.UI.Scroller({
|
||||
this.scroller = new Common.UI.Scroller(_.extend({
|
||||
el: $('.dropdown-menu', this.cmpEl),
|
||||
minScrollbarLength : 40,
|
||||
scrollYMarginOffset: 30,
|
||||
includePadding : true
|
||||
});
|
||||
}, this.options.scroller));
|
||||
}
|
||||
}
|
||||
})());
|
||||
|
|
|
@ -85,11 +85,14 @@ define([
|
|||
|
||||
initialize : function(options) {
|
||||
Common.UI.ComboBox.prototype.initialize.call(this, _.extend(options, {
|
||||
displayField: 'name'
|
||||
displayField: 'name',
|
||||
scroller: {
|
||||
alwaysVisibleY: true,
|
||||
onChange: this.updateVisibleFontsTiles.bind(this)
|
||||
}
|
||||
}));
|
||||
|
||||
this.recent = _.isNumber(options.recent) ? options.recent : 3;
|
||||
this.bindUpdateVisibleFontsTiles = _.bind(this.updateVisibleFontsTiles, this);
|
||||
|
||||
Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this));
|
||||
Common.NotificationCenter.on('fonts:load', _.bind(this.fillFonts, this));
|
||||
|
@ -109,8 +112,6 @@ define([
|
|||
this._input.on('keyup', _.bind(this.onInputKeyUp, this));
|
||||
this._input.on('keydown', _.bind(this.onInputKeyDown, this));
|
||||
|
||||
this.scroller.update({alwaysVisibleY: true, onChange:this.bindUpdateVisibleFontsTiles});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
|
@ -851,7 +851,7 @@ define([
|
|||
if (window.styles_loaded) {
|
||||
clearInterval(timer_sl);
|
||||
|
||||
toolbarController.getView('Toolbar').createDelayedElements();
|
||||
toolbarController.createDelayedElements();
|
||||
|
||||
documentHolderController.getView('DocumentHolder').createDelayedElements();
|
||||
me.loadLanguages();
|
||||
|
|
|
@ -166,7 +166,7 @@ define([
|
|||
// Create toolbar view
|
||||
this.toolbar = this.createView('Toolbar');
|
||||
|
||||
this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this));
|
||||
// this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this));
|
||||
},
|
||||
|
||||
onToolbarAfterRender: function(toolbar) {
|
||||
|
@ -2627,6 +2627,11 @@ define([
|
|||
me._mailMergeDlg.show();
|
||||
},
|
||||
|
||||
createDelayedElements: function() {
|
||||
this.toolbar.createDelayedElements();
|
||||
this.onToolbarAfterRender(this.toolbar);
|
||||
},
|
||||
|
||||
textEmptyImgUrl : 'You need to specify image URL.',
|
||||
textWarning : 'Warning',
|
||||
textFontSizeErr : 'The entered value is incorrect.<br>Please enter a numeric value between 1 and 100',
|
||||
|
|
|
@ -63,7 +63,6 @@ define([
|
|||
},
|
||||
|
||||
initialize: function () {
|
||||
var me = this;
|
||||
this._initSettings = true;
|
||||
|
||||
this._state = {
|
||||
|
@ -85,133 +84,8 @@ define([
|
|||
|
||||
this.render();
|
||||
|
||||
var viewData = [
|
||||
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconCls:'wrap-inline', tip: this.txtInline, selected: true },
|
||||
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconCls:'wrap-square', tip: this.txtSquare },
|
||||
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconCls:'wrap-tight', tip: this.txtTight },
|
||||
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconCls:'wrap-through', tip: this.txtThrough },
|
||||
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconCls:'wrap-topAndBottom', tip: this.txtTopAndBottom },
|
||||
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconCls:'wrap-inFront', tip: this.txtInFront },
|
||||
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconCls:'wrap-behind', tip: this.txtBehind }
|
||||
];
|
||||
|
||||
this.btnWrapType = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-wrap wrap-inline',
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="id-chart-menu-wrap" style="width: 235px; margin: 0 5px;"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnWrapType.on('render:after', function(btn) {
|
||||
me.mnuWrapPicker = new Common.UI.DataView({
|
||||
el: $('#id-chart-menu-wrap'),
|
||||
parentMenu: btn.menu,
|
||||
store: new Common.UI.DataViewStore(viewData),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>')
|
||||
});
|
||||
});
|
||||
this.btnWrapType.render($('#chart-button-wrap'));
|
||||
this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType));
|
||||
this.lockedControls.push(this.btnWrapType);
|
||||
|
||||
this.btnChartType = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-chartlist bar-normal',
|
||||
menu : new Common.UI.Menu({
|
||||
style: 'width: 560px;',
|
||||
items: [
|
||||
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnChartType.on('render:after', function(btn) {
|
||||
me.mnuChartTypePicker = new Common.UI.DataView({
|
||||
el: $('#id-chart-menu-type'),
|
||||
parentMenu: btn.menu,
|
||||
restoreHeight: 411,
|
||||
groups: new Common.UI.DataViewGroupStore([
|
||||
{ id: 'menu-chart-group-bar', caption: me.textColumn },
|
||||
{ id: 'menu-chart-group-line', caption: me.textLine },
|
||||
{ id: 'menu-chart-group-pie', caption: me.textPie },
|
||||
{ id: 'menu-chart-group-hbar', caption: me.textBar },
|
||||
{ id: 'menu-chart-group-area', caption: me.textArea },
|
||||
{ id: 'menu-chart-group-scatter', caption: me.textPoint },
|
||||
{ id: 'menu-chart-group-stock', caption: me.textStock }
|
||||
]),
|
||||
store: new Common.UI.DataViewStore([
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'},
|
||||
{ group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'},
|
||||
{ group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'}
|
||||
]),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
|
||||
});
|
||||
});
|
||||
this.btnChartType.render($('#chart-button-type'));
|
||||
this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
|
||||
this.lockedControls.push(this.btnChartType);
|
||||
|
||||
this.btnChartStyle = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-wrap',
|
||||
menu : new Common.UI.Menu({
|
||||
menuAlign: 'tr-br',
|
||||
items: [
|
||||
{ template: _.template('<div id="id-chart-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnChartStyle.on('render:after', function(btn) {
|
||||
me.mnuChartStylePicker = new Common.UI.DataView({
|
||||
el: $('#id-chart-menu-style'),
|
||||
style: 'max-height: 411px;',
|
||||
parentMenu: btn.menu,
|
||||
store: new Common.UI.DataViewStore(),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
|
||||
});
|
||||
|
||||
if (me.btnChartStyle.menu) {
|
||||
me.btnChartStyle.menu.on('show:after', function () {
|
||||
me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true});
|
||||
});
|
||||
}
|
||||
});
|
||||
this.btnChartStyle.render($('#chart-button-style'));
|
||||
this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle));
|
||||
this.lockedControls.push(this.btnChartStyle);
|
||||
|
||||
this.labelWidth = $(this.el).find('#chart-label-width');
|
||||
this.labelHeight = $(this.el).find('#chart-label-height');
|
||||
|
||||
this.btnEditData = new Common.UI.Button({
|
||||
el: $('#chart-button-edit-data')
|
||||
});
|
||||
this.lockedControls.push(this.btnEditData);
|
||||
this.btnEditData.on('click', _.bind(this.setEditData, this));
|
||||
$(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
},
|
||||
|
||||
render: function () {
|
||||
|
@ -219,8 +93,6 @@ define([
|
|||
el.html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
|
||||
this.linkAdvanced = $('#chart-advanced-link');
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
|
@ -331,11 +203,114 @@ define([
|
|||
this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||
},
|
||||
|
||||
createDelayedControls: function() {
|
||||
var me = this,
|
||||
viewData = [
|
||||
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconCls:'wrap-inline', tip: this.txtInline, selected: true },
|
||||
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconCls:'wrap-square', tip: this.txtSquare },
|
||||
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconCls:'wrap-tight', tip: this.txtTight },
|
||||
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconCls:'wrap-through', tip: this.txtThrough },
|
||||
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconCls:'wrap-topAndBottom', tip: this.txtTopAndBottom },
|
||||
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconCls:'wrap-inFront', tip: this.txtInFront },
|
||||
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconCls:'wrap-behind', tip: this.txtBehind }
|
||||
];
|
||||
|
||||
this.btnWrapType = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-wrap wrap-inline',
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="id-chart-menu-wrap" style="width: 235px; margin: 0 5px;"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnWrapType.on('render:after', function(btn) {
|
||||
me.mnuWrapPicker = new Common.UI.DataView({
|
||||
el: $('#id-chart-menu-wrap'),
|
||||
parentMenu: btn.menu,
|
||||
store: new Common.UI.DataViewStore(viewData),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>')
|
||||
});
|
||||
});
|
||||
this.btnWrapType.render($('#chart-button-wrap'));
|
||||
this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType));
|
||||
this.lockedControls.push(this.btnWrapType);
|
||||
|
||||
this.btnChartType = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-chartlist bar-normal',
|
||||
menu : new Common.UI.Menu({
|
||||
style: 'width: 560px;',
|
||||
items: [
|
||||
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnChartType.on('render:after', function(btn) {
|
||||
me.mnuChartTypePicker = new Common.UI.DataView({
|
||||
el: $('#id-chart-menu-type'),
|
||||
parentMenu: btn.menu,
|
||||
restoreHeight: 411,
|
||||
groups: new Common.UI.DataViewGroupStore([
|
||||
{ id: 'menu-chart-group-bar', caption: me.textColumn },
|
||||
{ id: 'menu-chart-group-line', caption: me.textLine },
|
||||
{ id: 'menu-chart-group-pie', caption: me.textPie },
|
||||
{ id: 'menu-chart-group-hbar', caption: me.textBar },
|
||||
{ id: 'menu-chart-group-area', caption: me.textArea },
|
||||
{ id: 'menu-chart-group-scatter', caption: me.textPoint },
|
||||
{ id: 'menu-chart-group-stock', caption: me.textStock }
|
||||
]),
|
||||
store: new Common.UI.DataViewStore([
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'},
|
||||
{ group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'},
|
||||
{ group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'}
|
||||
]),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
|
||||
});
|
||||
});
|
||||
this.btnChartType.render($('#chart-button-type'));
|
||||
this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
|
||||
this.lockedControls.push(this.btnChartType);
|
||||
|
||||
this.btnEditData = new Common.UI.Button({
|
||||
el: $('#chart-button-edit-data')
|
||||
});
|
||||
this.lockedControls.push(this.btnEditData);
|
||||
this.btnEditData.on('click', _.bind(this.setEditData, this));
|
||||
|
||||
this.linkAdvanced = $('#chart-advanced-link');
|
||||
$(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
},
|
||||
|
||||
createDelayedElements: function() {
|
||||
this.createDelayedControls();
|
||||
this.updateMetricUnit();
|
||||
},
|
||||
|
||||
_ChartWrapStyleChanged: function(style) {
|
||||
if (!this.mnuWrapPicker) return;
|
||||
if (this._state.WrappingStyle!==style) {
|
||||
this._noApply = true;
|
||||
var record = this.mnuWrapPicker.store.findWhere({data: style});
|
||||
|
@ -507,6 +482,36 @@ define([
|
|||
|
||||
updateChartStyles: function(styles) {
|
||||
var me = this;
|
||||
|
||||
if (!this.btnChartStyle) {
|
||||
this.btnChartStyle = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-wrap',
|
||||
menu : new Common.UI.Menu({
|
||||
menuAlign: 'tr-br',
|
||||
items: [
|
||||
{ template: _.template('<div id="id-chart-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnChartStyle.render($('#chart-button-style'));
|
||||
this.lockedControls.push(this.btnChartStyle);
|
||||
this.mnuChartStylePicker = new Common.UI.DataView({
|
||||
el: $('#id-chart-menu-style'),
|
||||
style: 'max-height: 411px;',
|
||||
parentMenu: this.btnChartStyle.menu,
|
||||
store: new Common.UI.DataViewStore(),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
|
||||
});
|
||||
|
||||
if (this.btnChartStyle.menu) {
|
||||
this.btnChartStyle.menu.on('show:after', function () {
|
||||
me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true});
|
||||
});
|
||||
}
|
||||
this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle));
|
||||
}
|
||||
|
||||
if (styles && styles.length>0){
|
||||
var stylesStore = this.mnuChartStylePicker.store;
|
||||
if (stylesStore) {
|
||||
|
@ -542,6 +547,8 @@ define([
|
|||
},
|
||||
|
||||
disableControls: function(disable) {
|
||||
if (this._initSettings) return;
|
||||
|
||||
if (this._state.DisabledControls!==disable) {
|
||||
this._state.DisabledControls = disable;
|
||||
_.each(this.lockedControls, function(item) {
|
||||
|
|
|
@ -64,7 +64,6 @@ define([
|
|||
},
|
||||
|
||||
initialize: function () {
|
||||
var me = this;
|
||||
this._initSettings = true;
|
||||
|
||||
this._state = {
|
||||
|
@ -80,67 +79,6 @@ define([
|
|||
this._locked = false;
|
||||
|
||||
this.render();
|
||||
|
||||
var _arrPosition = [
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_LEFT, 'icon-right-panel btn-colontitul-tl', 'headerfooter-button-top-left', this.textTopLeft],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_CENTER, 'icon-right-panel btn-colontitul-tc', 'headerfooter-button-top-center', this.textTopCenter],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_RIGHT, 'icon-right-panel btn-colontitul-tr', 'headerfooter-button-top-right', this.textTopRight],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_LEFT, 'icon-right-panel btn-colontitul-bl', 'headerfooter-button-bottom-left', this.textBottomLeft],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_CENTER, 'icon-right-panel btn-colontitul-bc', 'headerfooter-button-bottom-center', this.textBottomCenter],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_RIGHT, 'icon-right-panel btn-colontitul-br', 'headerfooter-button-bottom-right', this.textBottomRight]
|
||||
];
|
||||
|
||||
this._btnsPosition = [];
|
||||
_.each(_arrPosition, function(item, index, list){
|
||||
var _btn = new Common.UI.Button({
|
||||
cls: 'btn-options huge',
|
||||
iconCls: item[2],
|
||||
posWhere:item[0],
|
||||
posAlign:item[1],
|
||||
hint: item[4]
|
||||
});
|
||||
_btn.render( $('#'+item[3])) ;
|
||||
_btn.on('click', _.bind(this.onBtnPositionClick, this));
|
||||
this._btnsPosition.push( _btn );
|
||||
this.lockedControls.push(_btn);
|
||||
}, this);
|
||||
|
||||
this.numPosition = new Common.UI.MetricSpinner({
|
||||
el: $('#headerfooter-spin-position'),
|
||||
step: .1,
|
||||
width: 85,
|
||||
value: '1.25 cm',
|
||||
defaultUnit : "cm",
|
||||
maxValue: 55.88,
|
||||
minValue: 0
|
||||
});
|
||||
this.spinners.push(this.numPosition);
|
||||
this.lockedControls.push(this.numPosition);
|
||||
|
||||
this.lblPosition = $(this.el).find('#headerfooter-label-position');
|
||||
|
||||
this.chDiffFirst = new Common.UI.CheckBox({
|
||||
el: $('#headerfooter-check-diff-first'),
|
||||
labelText: this.textDiffFirst
|
||||
});
|
||||
this.lockedControls.push(this.chDiffFirst);
|
||||
|
||||
this.chDiffOdd = new Common.UI.CheckBox({
|
||||
el: $('#headerfooter-check-diff-odd'),
|
||||
labelText: this.textDiffOdd
|
||||
});
|
||||
this.lockedControls.push(this.chDiffOdd);
|
||||
|
||||
this.chSameAs = new Common.UI.CheckBox({
|
||||
el: $('#headerfooter-check-same-as'),
|
||||
labelText: this.textSameAs
|
||||
});
|
||||
this.lockedControls.push(this.chSameAs);
|
||||
|
||||
this.numPosition.on('change', _.bind(this.onNumPositionChange, this));
|
||||
this.chDiffFirst.on('change', _.bind(this.onDiffFirstChange, this));
|
||||
this.chDiffOdd.on('change', _.bind(this.onDiffOddChange, this));
|
||||
this.chSameAs.on('change', _.bind(this.onSameAsChange, this));
|
||||
},
|
||||
|
||||
render: function () {
|
||||
|
@ -240,7 +178,71 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
createDelayedControls: function() {
|
||||
var _arrPosition = [
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_LEFT, 'icon-right-panel btn-colontitul-tl', 'headerfooter-button-top-left', this.textTopLeft],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_CENTER, 'icon-right-panel btn-colontitul-tc', 'headerfooter-button-top-center', this.textTopCenter],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_RIGHT, 'icon-right-panel btn-colontitul-tr', 'headerfooter-button-top-right', this.textTopRight],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_LEFT, 'icon-right-panel btn-colontitul-bl', 'headerfooter-button-bottom-left', this.textBottomLeft],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_CENTER, 'icon-right-panel btn-colontitul-bc', 'headerfooter-button-bottom-center', this.textBottomCenter],
|
||||
[c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_RIGHT, 'icon-right-panel btn-colontitul-br', 'headerfooter-button-bottom-right', this.textBottomRight]
|
||||
];
|
||||
|
||||
this._btnsPosition = [];
|
||||
_.each(_arrPosition, function(item, index, list){
|
||||
var _btn = new Common.UI.Button({
|
||||
cls: 'btn-options huge',
|
||||
iconCls: item[2],
|
||||
posWhere:item[0],
|
||||
posAlign:item[1],
|
||||
hint: item[4]
|
||||
});
|
||||
_btn.render( $('#'+item[3])) ;
|
||||
_btn.on('click', _.bind(this.onBtnPositionClick, this));
|
||||
this._btnsPosition.push( _btn );
|
||||
this.lockedControls.push(_btn);
|
||||
}, this);
|
||||
|
||||
this.numPosition = new Common.UI.MetricSpinner({
|
||||
el: $('#headerfooter-spin-position'),
|
||||
step: .1,
|
||||
width: 85,
|
||||
value: '1.25 cm',
|
||||
defaultUnit : "cm",
|
||||
maxValue: 55.88,
|
||||
minValue: 0
|
||||
});
|
||||
this.spinners.push(this.numPosition);
|
||||
this.lockedControls.push(this.numPosition);
|
||||
|
||||
this.lblPosition = $(this.el).find('#headerfooter-label-position');
|
||||
|
||||
this.chDiffFirst = new Common.UI.CheckBox({
|
||||
el: $('#headerfooter-check-diff-first'),
|
||||
labelText: this.textDiffFirst
|
||||
});
|
||||
this.lockedControls.push(this.chDiffFirst);
|
||||
|
||||
this.chDiffOdd = new Common.UI.CheckBox({
|
||||
el: $('#headerfooter-check-diff-odd'),
|
||||
labelText: this.textDiffOdd
|
||||
});
|
||||
this.lockedControls.push(this.chDiffOdd);
|
||||
|
||||
this.chSameAs = new Common.UI.CheckBox({
|
||||
el: $('#headerfooter-check-same-as'),
|
||||
labelText: this.textSameAs
|
||||
});
|
||||
this.lockedControls.push(this.chSameAs);
|
||||
|
||||
this.numPosition.on('change', _.bind(this.onNumPositionChange, this));
|
||||
this.chDiffFirst.on('change', _.bind(this.onDiffFirstChange, this));
|
||||
this.chDiffOdd.on('change', _.bind(this.onDiffOddChange, this));
|
||||
this.chSameAs.on('change', _.bind(this.onSameAsChange, this));
|
||||
},
|
||||
|
||||
createDelayedElements: function() {
|
||||
this.createDelayedControls();
|
||||
this.updateMetricUnit();
|
||||
},
|
||||
|
||||
|
@ -249,6 +251,8 @@ define([
|
|||
},
|
||||
|
||||
disableControls: function(disable) {
|
||||
if (this._initSettings) return;
|
||||
|
||||
if (this._state.DisabledControls!==disable) {
|
||||
this._state.DisabledControls = disable;
|
||||
_.each(this.lockedControls, function(item) {
|
||||
|
|
|
@ -64,7 +64,6 @@ define([
|
|||
},
|
||||
|
||||
initialize: function () {
|
||||
var me = this;
|
||||
this._initSettings = true;
|
||||
|
||||
this._state = {
|
||||
|
@ -84,7 +83,35 @@ define([
|
|||
|
||||
this.render();
|
||||
|
||||
var viewData = [
|
||||
this.labelWidth = $(this.el).find('#image-label-width');
|
||||
this.labelHeight = $(this.el).find('#image-label-height');
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var el = $(this.el);
|
||||
el.html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
if (this.api)
|
||||
this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this));
|
||||
return this;
|
||||
},
|
||||
|
||||
updateMetricUnit: function() {
|
||||
var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
|
||||
this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||
|
||||
value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
|
||||
this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||
},
|
||||
|
||||
createDelayedControls: function() {
|
||||
var me = this,
|
||||
viewData = [
|
||||
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true },
|
||||
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare },
|
||||
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight },
|
||||
|
@ -116,9 +143,6 @@ define([
|
|||
this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType));
|
||||
this.lockedControls.push(this.btnWrapType);
|
||||
|
||||
this.labelWidth = $(this.el).find('#image-label-width');
|
||||
this.labelHeight = $(this.el).find('#image-label-height');
|
||||
|
||||
this.btnOriginalSize = new Common.UI.Button({
|
||||
el: $('#image-button-original-size')
|
||||
});
|
||||
|
@ -149,35 +173,14 @@ define([
|
|||
if (this.api) this.api.asc_pluginRun(this._originalProps.asc_getPluginGuid(), 0, this._originalProps.asc_getPluginData());
|
||||
this.fireEvent('editcomplete', this);
|
||||
}, this));
|
||||
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var el = $(this.el);
|
||||
el.html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
|
||||
this.linkAdvanced = $('#image-advanced-link');
|
||||
this.lblReplace = $('#image-lbl-replace');
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
if (this.api)
|
||||
this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this));
|
||||
return this;
|
||||
},
|
||||
|
||||
updateMetricUnit: function() {
|
||||
var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
|
||||
this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||
|
||||
value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
|
||||
this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
},
|
||||
|
||||
createDelayedElements: function() {
|
||||
this.createDelayedControls();
|
||||
this.updateMetricUnit();
|
||||
},
|
||||
|
||||
|
@ -248,6 +251,7 @@ define([
|
|||
},
|
||||
|
||||
_ImgWrapStyleChanged: function(style) {
|
||||
if (!this.mnuWrapPicker) return;
|
||||
if (this._state.WrappingStyle!==style) {
|
||||
this._noApply = true;
|
||||
var record = this.mnuWrapPicker.store.findWhere({data: style});
|
||||
|
@ -387,6 +391,8 @@ define([
|
|||
},
|
||||
|
||||
disableControls: function(disable) {
|
||||
if (this._initSettings) return;
|
||||
|
||||
if (this._state.DisabledControls!==disable) {
|
||||
this._state.DisabledControls = disable;
|
||||
_.each(this.lockedControls, function(item) {
|
||||
|
|
|
@ -72,7 +72,9 @@ define([
|
|||
},
|
||||
|
||||
initialize: function () {
|
||||
var me = this;
|
||||
var me = this,
|
||||
_set = DE.enumLockMM;
|
||||
|
||||
this._initSettings = true;
|
||||
|
||||
this._state = {
|
||||
|
@ -88,18 +90,8 @@ define([
|
|||
this.emailAddresses = undefined;
|
||||
this.mergeMailData = undefined;
|
||||
|
||||
var _set = DE.enumLockMM;
|
||||
|
||||
this.render();
|
||||
|
||||
this.btnEditData = new Common.UI.Button({
|
||||
el: me.$el.find('#mmerge-button-edit-data'),
|
||||
lock: [_set.preview, _set.lostConnect]
|
||||
});
|
||||
this.btnEditData.on('click', _.bind(this.onEditData, this));
|
||||
|
||||
this.lblAddRecipients = $('#mmerge-lbl-add-recipients');
|
||||
|
||||
this.btnInsField = new Common.UI.Button({
|
||||
cls: 'btn-text-menu-default',
|
||||
caption: this.textInsertField,
|
||||
|
@ -120,19 +112,6 @@ define([
|
|||
});
|
||||
this.btnInsField.render( $('#mmerge-btn-ins-field',me.$el)) ;
|
||||
|
||||
this.chHighlight = new Common.UI.Switcher({
|
||||
el: me.$el.find('#mmerge-switcher-highlight'),
|
||||
lock: [_set.noFields, _set.lostConnect]
|
||||
});
|
||||
this.chHighlight.on('change', _.bind(this.onCheckHighlightChange, this));
|
||||
|
||||
this.chPreview = new Common.UI.Switcher({
|
||||
el: me.$el.find('#mmerge-switcher-preview'),
|
||||
lock: [_set.noRecipients, _set.lostConnect]
|
||||
});
|
||||
this.chPreview.on('change', _.bind(this.onCheckPreviewChange, this));
|
||||
this.emptyDBControls.push(this.chPreview);
|
||||
|
||||
this.txtFieldNum = new Common.UI.InputField({
|
||||
el : $('#mmerge-field-num', me.$el),
|
||||
allowBlank : true,
|
||||
|
@ -161,6 +140,52 @@ define([
|
|||
}
|
||||
});
|
||||
this.emptyDBControls.push(this.txtFieldNum);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
if (this.api) {
|
||||
this.api.asc_registerCallback('asc_onPreviewMailMergeResult', _.bind(this.onPreviewMailMergeResult, this));
|
||||
this.api.asc_registerCallback('asc_onEndPreviewMailMergeResult', _.bind(this.onEndPreviewMailMergeResult, this));
|
||||
this.api.asc_registerCallback('asc_onStartMailMerge', _.bind(this.onStartMailMerge, this));
|
||||
this.api.asc_registerCallback('asc_onSaveMailMerge', _.bind(this.onSaveMailMerge, this));
|
||||
this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this));
|
||||
Common.Gateway.on('setemailaddresses', _.bind(this.onSetEmailAddresses, this));
|
||||
Common.Gateway.on('processmailmerge', _.bind(this.onProcessMailMerge, this));
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
createDelayedControls: function() {
|
||||
var me = this,
|
||||
_set = DE.enumLockMM;
|
||||
|
||||
this.btnEditData = new Common.UI.Button({
|
||||
el: me.$el.find('#mmerge-button-edit-data'),
|
||||
lock: [_set.preview, _set.lostConnect]
|
||||
});
|
||||
this.btnEditData.on('click', _.bind(this.onEditData, this));
|
||||
|
||||
this.lblAddRecipients = $('#mmerge-lbl-add-recipients');
|
||||
|
||||
this.chHighlight = new Common.UI.Switcher({
|
||||
el: me.$el.find('#mmerge-switcher-highlight'),
|
||||
lock: [_set.noFields, _set.lostConnect]
|
||||
});
|
||||
this.chHighlight.on('change', _.bind(this.onCheckHighlightChange, this));
|
||||
|
||||
this.chPreview = new Common.UI.Switcher({
|
||||
el: me.$el.find('#mmerge-switcher-preview'),
|
||||
lock: [_set.noRecipients, _set.lostConnect]
|
||||
});
|
||||
this.chPreview.on('change', _.bind(this.onCheckPreviewChange, this));
|
||||
this.emptyDBControls.push(this.chPreview);
|
||||
|
||||
this.btnFirst = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
|
@ -343,32 +368,26 @@ define([
|
|||
}).on('click', _.bind(this.onMergeClick, this, false));
|
||||
this.emptyDBControls.push(this.btnMerge);
|
||||
|
||||
this.$el.on('click', '#mmerge-readmore-link', _.bind(this.openHelp, this));
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
|
||||
this.linkReadMore = $('#mmerge-readmore-link', this.$el);
|
||||
},
|
||||
this.$el.on('click', '#mmerge-readmore-link', _.bind(this.openHelp, this));
|
||||
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
if (this.api) {
|
||||
this.api.asc_registerCallback('asc_onPreviewMailMergeResult', _.bind(this.onPreviewMailMergeResult, this));
|
||||
this.api.asc_registerCallback('asc_onEndPreviewMailMergeResult', _.bind(this.onEndPreviewMailMergeResult, this));
|
||||
this.api.asc_registerCallback('asc_onStartMailMerge', _.bind(this.onStartMailMerge, this));
|
||||
this.api.asc_registerCallback('asc_onSaveMailMerge', _.bind(this.onSaveMailMerge, this));
|
||||
this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this));
|
||||
Common.Gateway.on('setemailaddresses', _.bind(this.onSetEmailAddresses, this));
|
||||
Common.Gateway.on('processmailmerge', _.bind(this.onProcessMailMerge, this));
|
||||
if (this.mode) {
|
||||
if (!this.mode.mergeFolderUrl)
|
||||
this.btnPortal.setVisible(false);
|
||||
if (!this.mode.canSendEmailAddresses) {
|
||||
this._arrMergeSrc.pop();
|
||||
this.cmbMergeTo.setData(this._arrMergeSrc);
|
||||
this.cmbMergeTo.setValue(this._arrMergeSrc[0].value);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
ChangeSettings: function(props) {
|
||||
if (this._initSettings) {
|
||||
this.createDelayedControls();
|
||||
this._initSettings = false;
|
||||
}
|
||||
|
||||
this.disableInsertControls(this._locked);
|
||||
|
||||
if (props) {
|
||||
|
@ -763,6 +782,8 @@ define([
|
|||
},
|
||||
|
||||
disableControls: function(disable) {
|
||||
if (this._initSettings) return;
|
||||
|
||||
this.lockControls(DE.enumLockMM.lostConnect, disable, {
|
||||
array: _.union([this.btnEditData, this.btnInsField, this.chHighlight], (this.mode.mergeFolderUrl) ? [this.btnPortal] : []),
|
||||
merge: true
|
||||
|
@ -775,13 +796,6 @@ define([
|
|||
|
||||
setMode: function(mode) {
|
||||
this.mode = mode;
|
||||
if (!this.mode.mergeFolderUrl)
|
||||
this.btnPortal.setVisible(false);
|
||||
if (!this.mode.canSendEmailAddresses) {
|
||||
this._arrMergeSrc.pop();
|
||||
this.cmbMergeTo.setData(this._arrMergeSrc);
|
||||
this.cmbMergeTo.setValue(this._arrMergeSrc[0].value);
|
||||
}
|
||||
},
|
||||
|
||||
disableEditing: function(disable) {
|
||||
|
@ -807,7 +821,7 @@ define([
|
|||
},
|
||||
|
||||
disablePreviewMode: function() {
|
||||
if (this.api && this.chPreview.getValue()) {
|
||||
if (this.api && this.chPreview && this.chPreview.getValue()) {
|
||||
this.api.asc_EndPreviewMailMergeResult();
|
||||
}
|
||||
},
|
||||
|
|
|
@ -67,7 +67,6 @@ define([
|
|||
},
|
||||
|
||||
initialize: function () {
|
||||
var me = this;
|
||||
this._initSettings = true;
|
||||
|
||||
this._state = {
|
||||
|
@ -157,22 +156,8 @@ define([
|
|||
this.btnColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
disabled: this._locked,
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="paragraph-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="paragraph-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
menu : true
|
||||
});
|
||||
|
||||
this.btnColor.on('render:after', function(btn) {
|
||||
me.mnuColorPicker = new Common.UI.ThemeColorPalette({
|
||||
el: $('#paragraph-color-menu'),
|
||||
transparent: true
|
||||
});
|
||||
me.mnuColorPicker.on('select', _.bind(me.onColorPickerSelect, me));
|
||||
});
|
||||
|
||||
this.btnColor.render( $('#paragraph-color-btn'));
|
||||
this.lockedControls.push(this.btnColor);
|
||||
|
||||
|
@ -456,7 +441,19 @@ define([
|
|||
},
|
||||
|
||||
UpdateThemeColors: function() {
|
||||
if (this.mnuColorPicker)
|
||||
if (!this.mnuColorPicker) {
|
||||
this.btnColor.setMenu( new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="paragraph-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="paragraph-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
}));
|
||||
this.mnuColorPicker = new Common.UI.ThemeColorPalette({
|
||||
el: $('#paragraph-color-menu'),
|
||||
transparent: true
|
||||
});
|
||||
this.mnuColorPicker.on('select', _.bind(this.onColorPickerSelect, this));
|
||||
}
|
||||
this.mnuColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
},
|
||||
|
||||
|
|
|
@ -71,7 +71,7 @@ define([
|
|||
},
|
||||
|
||||
initialize: function () {
|
||||
var me = this;
|
||||
|
||||
this._initSettings = true;
|
||||
this._originalProps = null;
|
||||
this._noApply = true;
|
||||
|
@ -127,382 +127,6 @@ define([
|
|||
|
||||
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,
|
||||
allowScrollbar: false,
|
||||
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.lockedControls.push(this.btnBorderColor);
|
||||
|
||||
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.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);
|
||||
|
||||
var viewData = [
|
||||
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true },
|
||||
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare },
|
||||
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight },
|
||||
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconcls:'wrap-through', tip: this.txtThrough },
|
||||
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconcls:'wrap-topAndBottom', tip: this.txtTopAndBottom },
|
||||
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconcls:'wrap-inFront', tip: this.txtInFront },
|
||||
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconcls:'wrap-behind', tip: this.txtBehind }
|
||||
];
|
||||
|
||||
this.btnWrapType = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-wrap wrap-inline',
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="id-shape-menu-wrap" style="width: 235px; margin: 0 5px;"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnWrapType.on('render:after', function(btn) {
|
||||
me.mnuWrapPicker = new Common.UI.DataView({
|
||||
el: $('#id-shape-menu-wrap'),
|
||||
parentMenu: btn.menu,
|
||||
store: new Common.UI.DataViewStore(viewData),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>')
|
||||
});
|
||||
});
|
||||
this.btnWrapType.render($('#shape-button-wrap'));
|
||||
this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType));
|
||||
this.lockedControls.push(this.btnWrapType);
|
||||
|
||||
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.FillImageContainer = $('#shape-panel-image-fill');
|
||||
this.FillPatternContainer = $('#shape-panel-pattern-fill');
|
||||
|
@ -517,8 +141,6 @@ define([
|
|||
el.html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
|
||||
this.linkAdvanced = $('#shape-advanced-link');
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
|
@ -1018,6 +640,7 @@ define([
|
|||
},
|
||||
|
||||
_ImgWrapStyleChanged: function(style) {
|
||||
if (!this.mnuWrapPicker) return;
|
||||
if (this._state.WrappingStyle!==style) {
|
||||
this._noApply = true;
|
||||
var record = this.mnuWrapPicker.store.findWhere({data: style});
|
||||
|
@ -1539,7 +1162,261 @@ 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,
|
||||
allowScrollbar: false,
|
||||
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);
|
||||
|
||||
var viewData = [
|
||||
{ offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true },
|
||||
{ offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare },
|
||||
{ offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight },
|
||||
{ offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconcls:'wrap-through', tip: this.txtThrough },
|
||||
{ offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconcls:'wrap-topAndBottom', tip: this.txtTopAndBottom },
|
||||
{ offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconcls:'wrap-inFront', tip: this.txtInFront },
|
||||
{ offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconcls:'wrap-behind', tip: this.txtBehind }
|
||||
];
|
||||
|
||||
this.btnWrapType = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-wrap wrap-inline',
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="id-shape-menu-wrap" style="width: 235px; margin: 0 5px;"></div>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnWrapType.on('render:after', function(btn) {
|
||||
me.mnuWrapPicker = new Common.UI.DataView({
|
||||
el: $('#id-shape-menu-wrap'),
|
||||
parentMenu: btn.menu,
|
||||
store: new Common.UI.DataViewStore(viewData),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>')
|
||||
});
|
||||
});
|
||||
this.btnWrapType.render($('#shape-button-wrap'));
|
||||
this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType));
|
||||
this.lockedControls.push(this.btnWrapType);
|
||||
|
||||
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() {
|
||||
this.createDelayedControls();
|
||||
|
||||
var global_hatch_menu_map = [
|
||||
0,1,3,2,4,
|
||||
53,5,6,7,8,
|
||||
|
@ -1571,7 +1448,6 @@ define([
|
|||
this.PatternFillType = this.patternViewData[0].type;
|
||||
}
|
||||
|
||||
|
||||
this.fillAutoShapes();
|
||||
this.UpdateThemeColors();
|
||||
},
|
||||
|
@ -1579,6 +1455,24 @@ define([
|
|||
onInitStandartTextures: function(texture) {
|
||||
var me = this;
|
||||
if (texture && texture.length>0){
|
||||
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 = [];
|
||||
_.each(texture, function(item){
|
||||
texturearray.push({
|
||||
|
@ -1659,6 +1553,105 @@ define([
|
|||
},
|
||||
|
||||
UpdateThemeColors: function() {
|
||||
if (!this.btnBackColor) {
|
||||
// create color buttons
|
||||
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.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
@ -1698,6 +1691,8 @@ define([
|
|||
},
|
||||
|
||||
disableControls: function(disable, disableFill) {
|
||||
if (this._initSettings) return;
|
||||
|
||||
this.disableFillPanels(disable || disableFill);
|
||||
if (this._state.DisabledControls!==disable) {
|
||||
this._state.DisabledControls = disable;
|
||||
|
|
|
@ -69,7 +69,7 @@ define([
|
|||
},
|
||||
|
||||
initialize: function () {
|
||||
var me = this;
|
||||
this._initSettings = true;
|
||||
|
||||
this._state = {
|
||||
TemplateId: 0,
|
||||
|
@ -99,218 +99,6 @@ define([
|
|||
this._wrapHandled = false;
|
||||
|
||||
this.render();
|
||||
|
||||
this.chHeader = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-header'),
|
||||
labelText: this.textHeader
|
||||
});
|
||||
this.lockedControls.push(this.chHeader);
|
||||
|
||||
this.chTotal = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-total'),
|
||||
labelText: this.textTotal
|
||||
});
|
||||
this.lockedControls.push(this.chTotal);
|
||||
|
||||
this.chBanded = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-banded'),
|
||||
labelText: this.textBanded
|
||||
});
|
||||
this.lockedControls.push(this.chBanded);
|
||||
|
||||
this.chFirst = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-first'),
|
||||
labelText: this.textFirst
|
||||
});
|
||||
this.lockedControls.push(this.chFirst);
|
||||
|
||||
this.chLast = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-last'),
|
||||
labelText: this.textLast
|
||||
});
|
||||
this.lockedControls.push(this.chLast);
|
||||
|
||||
this.chColBanded = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-col-banded'),
|
||||
labelText: this.textBanded
|
||||
});
|
||||
this.lockedControls.push(this.chColBanded);
|
||||
|
||||
this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0));
|
||||
this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1));
|
||||
this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2));
|
||||
this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3));
|
||||
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
|
||||
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
|
||||
|
||||
this.cmbTableTemplate = new Common.UI.ComboDataView({
|
||||
itemWidth: 70,
|
||||
itemHeight: 50,
|
||||
menuMaxHeight: 300,
|
||||
enableKeyEvents: true,
|
||||
cls: 'combo-template'
|
||||
});
|
||||
this.cmbTableTemplate.render($('#table-combo-template'));
|
||||
this.cmbTableTemplate.openButton.menu.cmpEl.css({
|
||||
'min-width': 175,
|
||||
'max-width': 175
|
||||
});
|
||||
this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
|
||||
this.cmbTableTemplate.openButton.menu.on('show:after', function () {
|
||||
me.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||
});
|
||||
this.lockedControls.push(this.cmbTableTemplate);
|
||||
|
||||
this.btnWrapNone = new Common.UI.Button({
|
||||
cls: 'btn-options huge',
|
||||
iconCls: 'icon-right-panel btn-wrap-none',
|
||||
posId: c_tableWrap.TABLE_WRAP_NONE,
|
||||
hint: this.textWrapNoneTooltip,
|
||||
enableToggle: true,
|
||||
allowDepress: false,
|
||||
toggleGroup : 'tablewrapGroup'
|
||||
});
|
||||
this.btnWrapNone.render( $('#table-button-wrap-none')) ;
|
||||
this.btnWrapNone.on('click', _.bind(this.onBtnWrapClick, this));
|
||||
this.lockedControls.push(this.btnWrapNone);
|
||||
|
||||
this.btnWrapParallel = new Common.UI.Button({
|
||||
cls: 'btn-options huge',
|
||||
iconCls: 'icon-right-panel btn-wrap-parallel',
|
||||
posId: c_tableWrap.TABLE_WRAP_PARALLEL,
|
||||
hint: this.textWrapParallelTooltip,
|
||||
enableToggle: true,
|
||||
allowDepress: false,
|
||||
toggleGroup : 'tablewrapGroup'
|
||||
});
|
||||
this.btnWrapParallel.render( $('#table-button-wrap-parallel')) ;
|
||||
this.btnWrapParallel.on('click', _.bind(this.onBtnWrapClick, this));
|
||||
this.lockedControls.push(this.btnWrapParallel);
|
||||
|
||||
var _arrBorderPosition = [
|
||||
['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft],
|
||||
['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert],
|
||||
['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight],
|
||||
['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop],
|
||||
['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor],
|
||||
['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom],
|
||||
['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner],
|
||||
['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter],
|
||||
['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll],
|
||||
['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone]
|
||||
];
|
||||
|
||||
this._btnsBorderPosition = [];
|
||||
_.each(_arrBorderPosition, function(item, index, list){
|
||||
var _btn = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: item[1],
|
||||
strId :item[0],
|
||||
hint: item[3]
|
||||
});
|
||||
_btn.render( $('#'+item[2])) ;
|
||||
_btn.on('click', _.bind(this.onBtnBordersClick, this));
|
||||
this._btnsBorderPosition.push( _btn );
|
||||
this.lockedControls.push(_btn);
|
||||
}, this);
|
||||
|
||||
this.cmbBorderSize = new Common.UI.ComboBorderSize({
|
||||
el: $('#table-combo-border-size'),
|
||||
style: "width: 93px;"
|
||||
});
|
||||
this.BorderSize = this.cmbBorderSize.store.at(1).get('value');
|
||||
this.cmbBorderSize.setValue(this.BorderSize);
|
||||
this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
|
||||
this.lockedControls.push(this.cmbBorderSize);
|
||||
|
||||
this.btnBorderColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="table-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
this.btnBorderColor.on('render:after', function(btn) {
|
||||
me.borderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#table-border-color-menu')
|
||||
});
|
||||
me.borderColor.on('select', _.bind(me.onColorsBorderSelect, me));
|
||||
});
|
||||
this.btnBorderColor.render( $('#table-border-color-btn'));
|
||||
this.btnBorderColor.setColor('000000');
|
||||
$(this.el).on('click', '#table-border-color-new', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
|
||||
this.lockedControls.push(this.btnBorderColor);
|
||||
|
||||
this.btnBackColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="table-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
this.btnBackColor.on('render:after', function(btn) {
|
||||
me.colorsBack = new Common.UI.ThemeColorPalette({
|
||||
el: $('#table-back-color-menu'),
|
||||
transparent: true
|
||||
});
|
||||
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
|
||||
});
|
||||
this.btnBackColor.render( $('#table-back-color-btn'));
|
||||
$(this.el).on('click', '#table-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor, this.btnBackColor));
|
||||
this.lockedControls.push(this.btnBackColor);
|
||||
|
||||
this.btnEdit = new Common.UI.Button({
|
||||
cls: 'btn-icon-default',
|
||||
iconCls: 'btn-edit-table',
|
||||
menu : new Common.UI.Menu({
|
||||
menuAlign: 'tr-br',
|
||||
items: [
|
||||
{ caption: this.selectRowText, value: 0 },
|
||||
{ caption: this.selectColumnText, value: 1 },
|
||||
{ caption: this.selectCellText, value: 2 },
|
||||
{ caption: this.selectTableText, value: 3 },
|
||||
{ caption: '--' },
|
||||
{ caption: this.insertRowAboveText, value: 4 },
|
||||
{ caption: this.insertRowBelowText, value: 5 },
|
||||
{ caption: this.insertColumnLeftText, value: 6 },
|
||||
{ caption: this.insertColumnRightText, value: 7 },
|
||||
{ caption: '--' },
|
||||
{ caption: this.deleteRowText, value: 8 },
|
||||
{ caption: this.deleteColumnText, value: 9 },
|
||||
{ caption: this.deleteTableText, value: 10 },
|
||||
{ caption: '--' },
|
||||
{ caption: this.mergeCellsText, value: 11 },
|
||||
{ caption: this.splitCellsText, value: 12 }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnEdit.render( $('#table-btn-edit')) ;
|
||||
this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2];
|
||||
this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1];
|
||||
|
||||
this.btnEdit.menu.on('show:after', _.bind( function(){
|
||||
if (this.api) {
|
||||
this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells());
|
||||
this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells());
|
||||
}
|
||||
}, this));
|
||||
this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
|
||||
this.lockedControls.push(this.btnEdit);
|
||||
|
||||
this.chRepeatRow = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-repeat-row'),
|
||||
labelText: this.strRepeatRow
|
||||
});
|
||||
this.chRepeatRow.on('change', _.bind(this.onCheckRepeatRowChange, this));
|
||||
this.lockedControls.push(this.chRepeatRow);
|
||||
|
||||
$(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
},
|
||||
|
||||
onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) {
|
||||
|
@ -465,8 +253,6 @@ define([
|
|||
el.html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
|
||||
this.linkAdvanced = $('#table-advanced-link');
|
||||
},
|
||||
|
||||
setApi: function(o) {
|
||||
|
@ -479,7 +265,171 @@ define([
|
|||
return this;
|
||||
},
|
||||
|
||||
createDelayedControls: function() {
|
||||
this.chHeader = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-header'),
|
||||
labelText: this.textHeader
|
||||
});
|
||||
this.lockedControls.push(this.chHeader);
|
||||
|
||||
this.chTotal = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-total'),
|
||||
labelText: this.textTotal
|
||||
});
|
||||
this.lockedControls.push(this.chTotal);
|
||||
|
||||
this.chBanded = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-banded'),
|
||||
labelText: this.textBanded
|
||||
});
|
||||
this.lockedControls.push(this.chBanded);
|
||||
|
||||
this.chFirst = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-first'),
|
||||
labelText: this.textFirst
|
||||
});
|
||||
this.lockedControls.push(this.chFirst);
|
||||
|
||||
this.chLast = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-last'),
|
||||
labelText: this.textLast
|
||||
});
|
||||
this.lockedControls.push(this.chLast);
|
||||
|
||||
this.chColBanded = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-col-banded'),
|
||||
labelText: this.textBanded
|
||||
});
|
||||
this.lockedControls.push(this.chColBanded);
|
||||
|
||||
this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0));
|
||||
this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1));
|
||||
this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2));
|
||||
this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3));
|
||||
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
|
||||
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
|
||||
|
||||
this.btnWrapNone = new Common.UI.Button({
|
||||
cls: 'btn-options huge',
|
||||
iconCls: 'icon-right-panel btn-wrap-none',
|
||||
posId: c_tableWrap.TABLE_WRAP_NONE,
|
||||
hint: this.textWrapNoneTooltip,
|
||||
enableToggle: true,
|
||||
allowDepress: false,
|
||||
toggleGroup : 'tablewrapGroup'
|
||||
});
|
||||
this.btnWrapNone.render( $('#table-button-wrap-none')) ;
|
||||
this.btnWrapNone.on('click', _.bind(this.onBtnWrapClick, this));
|
||||
this.lockedControls.push(this.btnWrapNone);
|
||||
|
||||
this.btnWrapParallel = new Common.UI.Button({
|
||||
cls: 'btn-options huge',
|
||||
iconCls: 'icon-right-panel btn-wrap-parallel',
|
||||
posId: c_tableWrap.TABLE_WRAP_PARALLEL,
|
||||
hint: this.textWrapParallelTooltip,
|
||||
enableToggle: true,
|
||||
allowDepress: false,
|
||||
toggleGroup : 'tablewrapGroup'
|
||||
});
|
||||
this.btnWrapParallel.render( $('#table-button-wrap-parallel')) ;
|
||||
this.btnWrapParallel.on('click', _.bind(this.onBtnWrapClick, this));
|
||||
this.lockedControls.push(this.btnWrapParallel);
|
||||
|
||||
var _arrBorderPosition = [
|
||||
['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft],
|
||||
['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert],
|
||||
['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight],
|
||||
['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop],
|
||||
['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor],
|
||||
['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom],
|
||||
['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner],
|
||||
['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter],
|
||||
['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll],
|
||||
['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone]
|
||||
];
|
||||
|
||||
this._btnsBorderPosition = [];
|
||||
_.each(_arrBorderPosition, function(item, index, list){
|
||||
var _btn = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: item[1],
|
||||
strId :item[0],
|
||||
hint: item[3]
|
||||
});
|
||||
_btn.render( $('#'+item[2])) ;
|
||||
_btn.on('click', _.bind(this.onBtnBordersClick, this));
|
||||
this._btnsBorderPosition.push( _btn );
|
||||
this.lockedControls.push(_btn);
|
||||
}, this);
|
||||
|
||||
this.cmbBorderSize = new Common.UI.ComboBorderSize({
|
||||
el: $('#table-combo-border-size'),
|
||||
style: "width: 93px;"
|
||||
});
|
||||
this.BorderSize = this.cmbBorderSize.store.at(1).get('value');
|
||||
this.cmbBorderSize.setValue(this.BorderSize);
|
||||
this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
|
||||
this.lockedControls.push(this.cmbBorderSize);
|
||||
|
||||
this.btnEdit = new Common.UI.Button({
|
||||
cls: 'btn-icon-default',
|
||||
iconCls: 'btn-edit-table',
|
||||
menu : new Common.UI.Menu({
|
||||
menuAlign: 'tr-br',
|
||||
items: [
|
||||
{ caption: this.selectRowText, value: 0 },
|
||||
{ caption: this.selectColumnText, value: 1 },
|
||||
{ caption: this.selectCellText, value: 2 },
|
||||
{ caption: this.selectTableText, value: 3 },
|
||||
{ caption: '--' },
|
||||
{ caption: this.insertRowAboveText, value: 4 },
|
||||
{ caption: this.insertRowBelowText, value: 5 },
|
||||
{ caption: this.insertColumnLeftText, value: 6 },
|
||||
{ caption: this.insertColumnRightText, value: 7 },
|
||||
{ caption: '--' },
|
||||
{ caption: this.deleteRowText, value: 8 },
|
||||
{ caption: this.deleteColumnText, value: 9 },
|
||||
{ caption: this.deleteTableText, value: 10 },
|
||||
{ caption: '--' },
|
||||
{ caption: this.mergeCellsText, value: 11 },
|
||||
{ caption: this.splitCellsText, value: 12 }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnEdit.render( $('#table-btn-edit')) ;
|
||||
this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2];
|
||||
this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1];
|
||||
|
||||
this.btnEdit.menu.on('show:after', _.bind( function(){
|
||||
if (this.api) {
|
||||
this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells());
|
||||
this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells());
|
||||
}
|
||||
}, this));
|
||||
this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
|
||||
this.lockedControls.push(this.btnEdit);
|
||||
|
||||
this.chRepeatRow = new Common.UI.CheckBox({
|
||||
el: $('#table-checkbox-repeat-row'),
|
||||
labelText: this.strRepeatRow
|
||||
});
|
||||
this.chRepeatRow.on('change', _.bind(this.onCheckRepeatRowChange, this));
|
||||
this.lockedControls.push(this.chRepeatRow);
|
||||
|
||||
this.linkAdvanced = $('#table-advanced-link');
|
||||
$(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
},
|
||||
|
||||
createDelayedElements: function() {
|
||||
this.createDelayedControls();
|
||||
this.UpdateThemeColors();
|
||||
},
|
||||
|
||||
ChangeSettings: function(props) {
|
||||
if (this._initSettings)
|
||||
this.createDelayedElements();
|
||||
this._initSettings = false;
|
||||
|
||||
this.disableControls(this._locked);
|
||||
|
||||
if (props )
|
||||
|
@ -671,6 +621,7 @@ define([
|
|||
},
|
||||
|
||||
_TblWrapStyleChanged: function(style) {
|
||||
if (!this.btnWrapNone || !this.btnWrapParallel) return;
|
||||
if ( this._state.WrapStyle!==style ) {
|
||||
this._noApply = true;
|
||||
this.btnWrapNone.toggle((style==c_tableWrap.TABLE_WRAP_NONE), true);
|
||||
|
@ -685,18 +636,73 @@ define([
|
|||
},
|
||||
|
||||
UpdateThemeColors: function() {
|
||||
if (this.colorsBack)
|
||||
if (!this.btnBackColor) {
|
||||
// create color buttons
|
||||
this.btnBorderColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="table-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnBorderColor.render( $('#table-border-color-btn'));
|
||||
this.btnBorderColor.setColor('000000');
|
||||
this.lockedControls.push(this.btnBorderColor);
|
||||
this.borderColor = new Common.UI.ThemeColorPalette({
|
||||
el: $('#table-border-color-menu')
|
||||
});
|
||||
this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||
$(this.el).on('click', '#table-border-color-new', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
|
||||
|
||||
this.btnBackColor = new Common.UI.ColorButton({
|
||||
style: "width:45px;",
|
||||
menu : new Common.UI.Menu({
|
||||
items: [
|
||||
{ template: _.template('<div id="table-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||
{ template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||
]
|
||||
})
|
||||
});
|
||||
this.btnBackColor.render( $('#table-back-color-btn'));
|
||||
this.lockedControls.push(this.btnBackColor);
|
||||
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||
el: $('#table-back-color-menu'),
|
||||
transparent: true
|
||||
});
|
||||
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||
$(this.el).on('click', '#table-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor, this.btnBackColor));
|
||||
}
|
||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
if (this.borderColor) {
|
||||
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.btnBorderColor.setColor(this.borderColor.getColor());
|
||||
}
|
||||
},
|
||||
|
||||
_onInitTemplates: function(Templates){
|
||||
var self = this;
|
||||
this._isTemplatesChanged = true;
|
||||
|
||||
if (!this.cmbTableTemplate) {
|
||||
this.cmbTableTemplate = new Common.UI.ComboDataView({
|
||||
itemWidth: 70,
|
||||
itemHeight: 50,
|
||||
menuMaxHeight: 300,
|
||||
enableKeyEvents: true,
|
||||
cls: 'combo-template'
|
||||
});
|
||||
this.cmbTableTemplate.render($('#table-combo-template'));
|
||||
this.cmbTableTemplate.openButton.menu.cmpEl.css({
|
||||
'min-width': 175,
|
||||
'max-width': 175
|
||||
});
|
||||
this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
|
||||
this.cmbTableTemplate.openButton.menu.on('show:after', function () {
|
||||
self.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||
});
|
||||
this.lockedControls.push(this.cmbTableTemplate);
|
||||
}
|
||||
|
||||
var count = self.cmbTableTemplate.menuPicker.store.length;
|
||||
if (count>0 && count==Templates.length) {
|
||||
var data = self.cmbTableTemplate.menuPicker.store.models;
|
||||
|
@ -759,6 +765,8 @@ define([
|
|||
},
|
||||
|
||||
disableControls: function(disable) {
|
||||
if (this._initSettings) return;
|
||||
|
||||
if (this._state.DisabledControls!==disable) {
|
||||
this._state.DisabledControls = disable;
|
||||
_.each(this.lockedControls, function(item) {
|
||||
|
|
|
@ -69,7 +69,6 @@ define([
|
|||
},
|
||||
|
||||
initialize: function () {
|
||||
var me = this;
|
||||
this._initSettings = true;
|
||||
this._noApply = true;
|
||||
this.imgprops = null;
|
||||
|
@ -108,251 +107,6 @@ define([
|
|||
|
||||
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.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.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.FillGradientContainer = $('#textart-panel-gradient-fill');
|
||||
this.TransparencyContainer = $('#textart-panel-transparent-fill');
|
||||
|
@ -1043,14 +797,201 @@ 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.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.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() {
|
||||
this.createDelayedControls();
|
||||
this.UpdateThemeColors();
|
||||
this.fillTransform(this.api.asc_getPropertyEditorTextArts());
|
||||
},
|
||||
|
||||
fillTextArt: function() {
|
||||
var me = this,
|
||||
models = this.application.getCollection('Common.Collections.TextArt').models,
|
||||
var me = this;
|
||||
|
||||
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;
|
||||
if (count>0 && count==models.length) {
|
||||
var data = this.cmbTextArt.menuPicker.store.models;
|
||||
|
@ -1108,6 +1049,66 @@ define([
|
|||
},
|
||||
|
||||
UpdateThemeColors: function() {
|
||||
if (!this.btnBackColor) {
|
||||
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.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.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.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||
|
@ -1132,6 +1133,8 @@ define([
|
|||
},
|
||||
|
||||
disableControls: function(disable) {
|
||||
if (this._initSettings) return;
|
||||
|
||||
if (this._state.DisabledControls!==disable) {
|
||||
this._state.DisabledControls = disable;
|
||||
_.each(this.lockedControls, function(item) {
|
||||
|
|
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue