[PE] Delay rendering controls in Chart Settings on the right panel.
This commit is contained in:
Julia Radzhabova
parent
47edb2ef05
commit
65afc4894c
|
|
@ -62,7 +62,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
|
|
@ -83,148 +82,6 @@ define([
|
||||||
this._originalProps = null;
|
this._originalProps = null;
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
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.btnEditData = new Common.UI.Button({
|
|
||||||
el: $('#chart-button-edit-data')
|
|
||||||
});
|
|
||||||
this.btnEditData.on('click', _.bind(this.setEditData, this));
|
|
||||||
this.lockedControls.push(this.btnEditData);
|
|
||||||
|
|
||||||
this.spnWidth = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#chart-spin-width'),
|
|
||||||
step: .1,
|
|
||||||
width: 78,
|
|
||||||
defaultUnit : "cm",
|
|
||||||
value: '3 cm',
|
|
||||||
maxValue: 55.88,
|
|
||||||
minValue: 0
|
|
||||||
});
|
|
||||||
this.spinners.push(this.spnWidth);
|
|
||||||
this.lockedControls.push(this.spnWidth);
|
|
||||||
|
|
||||||
this.spnHeight = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#chart-spin-height'),
|
|
||||||
step: .1,
|
|
||||||
width: 78,
|
|
||||||
defaultUnit : "cm",
|
|
||||||
value: '3 cm',
|
|
||||||
maxValue: 55.88,
|
|
||||||
minValue: 0
|
|
||||||
});
|
|
||||||
this.spinners.push(this.spnHeight);
|
|
||||||
this.lockedControls.push(this.spnHeight);
|
|
||||||
|
|
||||||
this.spnWidth.on('change', _.bind(this.onWidthChange, this));
|
|
||||||
this.spnHeight.on('change', _.bind(this.onHeightChange, this));
|
|
||||||
|
|
||||||
this.btnRatio = new Common.UI.Button({
|
|
||||||
cls: 'btn-toolbar',
|
|
||||||
iconCls: 'advanced-btn-ratio',
|
|
||||||
style: 'margin-bottom: 1px;',
|
|
||||||
enableToggle: true,
|
|
||||||
hint: this.textKeepRatio
|
|
||||||
});
|
|
||||||
this.btnRatio.render($('#chart-button-ratio')) ;
|
|
||||||
this.lockedControls.push(this.btnRatio);
|
|
||||||
|
|
||||||
this.btnRatio.on('click', _.bind(function(btn, e) {
|
|
||||||
if (btn.pressed && this.spnHeight.getNumberValue()>0) {
|
|
||||||
this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
|
|
||||||
}
|
|
||||||
if (this.api) {
|
|
||||||
var props = new Asc.CAscChartProp();
|
|
||||||
props.asc_putLockAspect(btn.pressed);
|
|
||||||
this.api.ChartApply(props);
|
|
||||||
}
|
|
||||||
this.fireEvent('editcomplete', this);
|
|
||||||
}, this));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
|
|
@ -333,7 +190,125 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
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.btnEditData.on('click', _.bind(this.setEditData, this));
|
||||||
|
this.lockedControls.push(this.btnEditData);
|
||||||
|
|
||||||
|
this.spnWidth = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#chart-spin-width'),
|
||||||
|
step: .1,
|
||||||
|
width: 78,
|
||||||
|
defaultUnit : "cm",
|
||||||
|
value: '3 cm',
|
||||||
|
maxValue: 55.88,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.spinners.push(this.spnWidth);
|
||||||
|
this.lockedControls.push(this.spnWidth);
|
||||||
|
|
||||||
|
this.spnHeight = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#chart-spin-height'),
|
||||||
|
step: .1,
|
||||||
|
width: 78,
|
||||||
|
defaultUnit : "cm",
|
||||||
|
value: '3 cm',
|
||||||
|
maxValue: 55.88,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.spinners.push(this.spnHeight);
|
||||||
|
this.lockedControls.push(this.spnHeight);
|
||||||
|
|
||||||
|
this.spnWidth.on('change', _.bind(this.onWidthChange, this));
|
||||||
|
this.spnHeight.on('change', _.bind(this.onHeightChange, this));
|
||||||
|
|
||||||
|
this.btnRatio = new Common.UI.Button({
|
||||||
|
cls: 'btn-toolbar',
|
||||||
|
iconCls: 'advanced-btn-ratio',
|
||||||
|
style: 'margin-bottom: 1px;',
|
||||||
|
enableToggle: true,
|
||||||
|
hint: this.textKeepRatio
|
||||||
|
});
|
||||||
|
this.btnRatio.render($('#chart-button-ratio')) ;
|
||||||
|
this.lockedControls.push(this.btnRatio);
|
||||||
|
|
||||||
|
this.btnRatio.on('click', _.bind(function(btn, e) {
|
||||||
|
if (btn.pressed && this.spnHeight.getNumberValue()>0) {
|
||||||
|
this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
|
||||||
|
}
|
||||||
|
if (this.api) {
|
||||||
|
var props = new Asc.CAscChartProp();
|
||||||
|
props.asc_putLockAspect(btn.pressed);
|
||||||
|
this.api.ChartApply(props);
|
||||||
|
}
|
||||||
|
this.fireEvent('editcomplete', this);
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -415,6 +390,36 @@ define([
|
||||||
|
|
||||||
updateChartStyles: function(styles) {
|
updateChartStyles: function(styles) {
|
||||||
var me = this;
|
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){
|
if (styles && styles.length>0){
|
||||||
var stylesStore = this.mnuChartStylePicker.store;
|
var stylesStore = this.mnuChartStylePicker.store;
|
||||||
if (stylesStore) {
|
if (stylesStore) {
|
||||||
|
|
@ -493,6 +498,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue