',
'<% _.each(groups, function(group) { %>',
'<% if (group.headername !== undefined) { %>',
'',
@@ -238,6 +239,7 @@ define([
me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
me.showLast = me.options.showLast;
me.style = me.options.style || '';
+ me.cls = me.options.cls || '';
me.emptyText = me.options.emptyText || '';
me.listenStoreEvents= (me.options.listenStoreEvents!==undefined) ? me.options.listenStoreEvents : true;
me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true;
@@ -267,7 +269,8 @@ define([
this.setElement(parentEl, false);
this.cmpEl = $(this.template({
groups: me.groups ? me.groups.toJSON() : null,
- style: me.style
+ style: me.style,
+ cls: me.cls
}));
parentEl.html(this.cmpEl);
@@ -275,7 +278,8 @@ define([
this.cmpEl = me.$el || $(this.el);
this.cmpEl.html(this.template({
groups: me.groups ? me.groups.toJSON() : null,
- style: me.style
+ style: me.style,
+ cls: me.cls
}));
}
@@ -454,7 +458,8 @@ define([
$(this.el).html(this.template({
groups: this.groups ? this.groups.toJSON() : null,
- style: this.style
+ style: this.style,
+ cls: this.cls
}));
if (!_.isUndefined(this.scroller)) {
diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index 8591a2e24..1a371e700 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -73,4 +73,9 @@
font-weight: bold;
cursor: default;
}
+
+ &.bordered {
+ border: 1px solid @input-border;
+ .border-radius(@border-radius-small);
+ }
}
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettings.template b/apps/spreadsheeteditor/main/app/template/ChartSettings.template
index 0a8151692..7801608c7 100644
--- a/apps/spreadsheeteditor/main/app/template/ChartSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ChartSettings.template
@@ -24,27 +24,31 @@
-
-
-
-
- |
-
-
-
+
+
+
+
+
+
+ |
+
|
+
+
+
+
+
-
+
|
-
-
+
|
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
index e205fb0de..39fbcaeab 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
@@ -47,7 +47,8 @@ define([
'common/main/lib/component/MetricSpinner',
'common/main/lib/component/ComboDataView',
'spreadsheeteditor/main/app/view/ChartSettingsDlg',
- 'spreadsheeteditor/main/app/view/ChartDataDialog'
+ 'spreadsheeteditor/main/app/view/ChartDataDialog',
+ 'spreadsheeteditor/main/app/view/ChartTypeDialog'
], function (menuTemplate, $, _, Backbone) {
'use strict';
@@ -112,6 +113,7 @@ define([
this.ChartTypesContainer = $('#chart-panel-types');
this.SparkTypesContainer = $('#spark-panel-types');
this.SparkPointsContainer = $('#spark-panel-points');
+ this.NotCombinedSettings = $('.not-combined');
},
render: function () {
@@ -151,21 +153,11 @@ define([
}
value = props.asc_getSeveralChartTypes();
- if (this._state.SeveralCharts && value) {
- this.btnChartType.setIconCls('svgicon');
- this._state.ChartType = null;
- } else {
- var type = this.chartProps.getType();
- if (this._state.ChartType !== type) {
- var record = this.mnuChartTypePicker.store.findWhere({type: type});
- this.mnuChartTypePicker.selectRecord(record, true);
- if (record) {
- this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
- } else
- this.btnChartType.setIconCls('svgicon');
- this.updateChartStyles(this.api.asc_getChartPreviews(type));
- this._state.ChartType = type;
- }
+ var type = (this._state.SeveralCharts && value) ? null : this.chartProps.getType();
+ if (this._state.ChartType !== type) {
+ this.ShowCombinedProps(type);
+ (type !== null) && this.updateChartStyles(this.api.asc_getChartPreviews(type));
+ this._state.ChartType = type;
}
value = props.asc_getSeveralChartStyles();
@@ -600,30 +592,30 @@ define([
var me = this;
// charts
- this.btnChartType = new Common.UI.Button({
- cls : 'btn-large-dataview',
- iconCls : 'svgicon chart-bar-normal',
- menu : new Common.UI.Menu({
- style: 'width: 364px; padding-top: 12px;',
- items: [
- { template: _.template('') }
- ]
- })
- });
-
- this.btnChartType.on('render:after', function(btn) {
- me.mnuChartTypePicker = new Common.UI.DataView({
- el: $('#id-chart-menu-type'),
- parentMenu: btn.menu,
- restoreHeight: 421,
- groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
- store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
- itemTemplate: _.template('
')
- });
- });
- this.btnChartType.render($('#chart-button-type'));
- this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
- this.lockedControls.push(this.btnChartType);
+ // this.btnChartType = new Common.UI.Button({
+ // cls : 'btn-large-dataview',
+ // iconCls : 'svgicon chart-bar-normal',
+ // menu : new Common.UI.Menu({
+ // style: 'width: 364px; padding-top: 12px;',
+ // items: [
+ // { template: _.template('') }
+ // ]
+ // })
+ // });
+ //
+ // this.btnChartType.on('render:after', function(btn) {
+ // me.mnuChartTypePicker = new Common.UI.DataView({
+ // el: $('#id-chart-menu-type'),
+ // parentMenu: btn.menu,
+ // restoreHeight: 421,
+ // groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
+ // store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
+ // itemTemplate: _.template('
')
+ // });
+ // });
+ // this.btnChartType.render($('#chart-button-type'));
+ // this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
+ // this.lockedControls.push(this.btnChartType);
this.spnWidth = new Common.UI.MetricSpinner({
el: $('#chart-spin-width'),
@@ -756,8 +748,22 @@ define([
this.chLastPoint.on('change', _.bind(this.onCheckPointChange, this, 4));
this.chMarkersPoint.on('change', _.bind(this.onCheckPointChange, this, 5));
+ this.btnChangeType = new Common.UI.Button({
+ parentEl: $('#chart-btn-change-type'),
+ cls : 'btn-toolbar',
+ iconCls : 'toolbar__icon btn-menu-chart',
+ caption : this.textChangeType,
+ style : 'width: 100%;text-align: left;'
+ });
+ this.btnChangeType.on('click', _.bind(this.onChangeType, this));
+ this.lockedControls.push(this.btnChangeType);
+
this.btnSelectData = new Common.UI.Button({
- el: $('#chart-btn-select-data')
+ parentEl: $('#chart-btn-select-data'),
+ cls : 'btn-toolbar',
+ iconCls : 'toolbar__icon btn-select-range',
+ caption : this.textSelectData,
+ style : 'width: 100%;text-align: left;'
});
this.btnSelectData.on('click', _.bind(this.onSelectData, this));
this.lockedControls.push(this.btnSelectData);
@@ -780,6 +786,10 @@ define([
this.SparkPointsContainer.toggleClass('settings-hidden', isChart);
},
+ ShowCombinedProps: function(type) {
+ this.NotCombinedSettings.toggleClass('settings-hidden', type==Asc.c_oAscChartTypeSettings.combo);
+ },
+
onWidthChange: function(field, newValue, oldValue, eOpts){
var w = field.getNumberValue();
var h = this.spnHeight.getNumberValue();
@@ -924,35 +934,65 @@ define([
}
},
- onSelectType: function(btn, picker, itemView, record) {
- if (this._noApply) return;
-
- var rawData = {},
- isPickerSelect = _.isFunction(record.toJSON);
-
- if (isPickerSelect){
- if (record.get('selected')) {
- rawData = record.toJSON();
- } else {
- // record deselected
- return;
+ onChangeType: function() {
+ var me = this;
+ var props;
+ if (me.api){
+ props = me.api.asc_getChartObject();
+ if (props) {
+ me._isEditType = true;
+ // props.startEdit();
+ var win = new SSE.Views.ChartTypeDialog({
+ chartSettings: props,
+ api: me.api,
+ handler: function(result, value) {
+ if (result == 'ok') {
+ // props.endEdit();
+ if (me.api) {
+ me.api.asc_editChartDrawingObject(value.chartSettings);
+ }
+ me._isEditType = false;
+ }
+ Common.NotificationCenter.trigger('edit:complete', me);
+ }
+ }).on('close', function() {
+ // me._isEditType && props.cancelEdit();
+ me._isEditType = false;
+ });
+ win.show();
}
- } else {
- rawData = record;
}
-
- this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
- this._state.ChartType = -1;
-
- if (this.api && !this._noApply && this.chartProps) {
- var props = new Asc.asc_CImgProperty();
- this.chartProps.changeType(rawData.type);
- props.asc_putChartProperties(this.chartProps);
- this.api.asc_setGraphicObjectProps(props);
- }
- Common.NotificationCenter.trigger('edit:complete', this);
},
+ // onSelectType: function(btn, picker, itemView, record) {
+ // if (this._noApply) return;
+ //
+ // var rawData = {},
+ // isPickerSelect = _.isFunction(record.toJSON);
+ //
+ // if (isPickerSelect){
+ // if (record.get('selected')) {
+ // rawData = record.toJSON();
+ // } else {
+ // // record deselected
+ // return;
+ // }
+ // } else {
+ // rawData = record;
+ // }
+ //
+ // // this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
+ // this._state.ChartType = -1;
+ //
+ // if (this.api && !this._noApply && this.chartProps) {
+ // var props = new Asc.asc_CImgProperty();
+ // this.chartProps.changeType(rawData.type);
+ // props.asc_putChartProperties(this.chartProps);
+ // this.api.asc_setGraphicObjectProps(props);
+ // }
+ // Common.NotificationCenter.trigger('edit:complete', this);
+ // },
+
onSelectStyle: function(combo, record) {
if (this._noApply) return;
@@ -1259,7 +1299,8 @@ define([
textType: 'Type',
textSelectData: 'Select Data',
textRanges: 'Data Range',
- textBorderSizeErr: 'The entered value is incorrect.
Please enter a value between 0 pt and 1584 pt.'
+ textBorderSizeErr: 'The entered value is incorrect.
Please enter a value between 0 pt and 1584 pt.',
+ textChangeType: 'Change type'
}, SSE.Views.ChartSettings || {}));
});
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
new file mode 100644
index 000000000..a09974821
--- /dev/null
+++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
@@ -0,0 +1,303 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2020
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ * ChartTypeDialog.js
+ *
+ * Created by Julia Radzhabova on 03.12.2020
+ * Copyright (c) 2020 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+ 'common/main/lib/util/utils',
+ 'common/main/lib/component/ComboBox',
+ 'common/main/lib/component/ListView',
+ 'common/main/lib/view/AdvancedSettingsWindow'
+], function () { 'use strict';
+
+ SSE.Views.ChartTypeDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+ options: {
+ contentWidth: 312,
+ height: 490
+ },
+
+ initialize : function(options) {
+ var me = this;
+
+ _.extend(this.options, {
+ title: this.textTitle,
+ template: [
+ '
',
+ '
',
+ '
',
+ '
',
+ '',
+ '',
+ '',
+ '',
+ ' | ',
+ '
',
+ '',
+ '',
+ '',
+ '',
+ ' | ',
+ '
',
+ '',
+ '',
+ '',
+ '',
+ '',
+ ' | ',
+ '
',
+ '',
+ '',
+ '',
+ ' | ',
+ '
',
+ '
',
+ '
',
+ '
',
+ '
'
+ ].join('')
+ }, options);
+
+ this.handler = options.handler;
+
+ Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
+
+ this._changedProps = null;
+
+ this.api = this.options.api;
+ this.chartSettings = this.options.chartSettings;
+ this.currentChartType = Asc.c_oAscChartTypeSettings.barNormal;
+ },
+
+ render: function() {
+ Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
+ var me = this;
+
+ this.btnChartType = new Common.UI.Button({
+ cls : 'btn-large-dataview',
+ iconCls : 'svgicon chart-bar-normal',
+ menu : new Common.UI.Menu({
+ style: 'width: 364px; padding-top: 12px;',
+ additionalAlign: this.menuAddAlign,
+ items: [
+ { template: _.template('') }
+ ]
+ })
+ });
+ this.btnChartType.on('render:after', function(btn) {
+ me.mnuChartTypePicker = new Common.UI.DataView({
+ el: $('#chart-type-dlg-menu-type', me.$window),
+ parentMenu: btn.menu,
+ restoreHeight: 421,
+ groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
+ store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
+ itemTemplate: _.template('
')
+ });
+ });
+ this.btnChartType.render($('#chart-type-dlg-button-type'), this.$window);
+ this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this));
+
+ this.stylesList = new Common.UI.DataView({
+ el: $('#chart-type-dlg-styles-list', this.$window),
+ store: new Common.UI.DataViewStore(),
+ cls: 'bordered',
+ enableKeyEvents: this.options.enableKeyEvents,
+ itemTemplate : _.template([
+ '
',
+ '

',
+ '<% if (typeof title !== "undefined") {%>',
+ '
<%= title %>',
+ '<% } %>',
+ '
'
+ ].join(''))
+ });
+ this.stylesList.on('item:select', _.bind(this.onSelectStyles, this));
+
+ this.NotCombinedSettings = $('.simple-chart', this.$window);
+ this.CombinedSettings = $('.combined-chart', this.$window);
+
+ this.afterRender();
+ },
+
+ afterRender: function() {
+ this._setDefaults(this.chartSettings);
+ },
+
+ show: function() {
+ Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+ },
+
+ close: function () {
+ this.api.asc_onCloseChartFrame();
+ Common.Views.AdvancedSettingsWindow.prototype.close.apply(this, arguments);
+ },
+
+ _setDefaults: function (props) {
+ var me = this;
+ if (props ){
+ this.chartSettings = props;
+ this.currentChartType = props.getType();
+ var record = this.mnuChartTypePicker.store.findWhere({type: this.currentChartType});
+ this.mnuChartTypePicker.selectRecord(record, true);
+ if (record) {
+ this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
+ } else
+ this.btnChartType.setIconCls('svgicon');
+ this.ShowHideSettings(this.currentChartType);
+ if (this.currentChartType==Asc.c_oAscChartTypeSettings.combo) {
+
+ } else
+ this.updateChartStyles(this.api.asc_getChartPreviews(this.currentChartType));
+ }
+ },
+
+ getSettings: function () {
+ return { chartSettings: this.chartSettings};
+ },
+
+ onDlgBtnClick: function(event) {
+ var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event;
+ if (state == 'ok') {
+ // if (!this.isRangeValid()) return;
+ this.handler && this.handler.call(this, state, (state == 'ok') ? this.getSettings() : undefined);
+ }
+
+ this.close();
+ },
+
+ onPrimary: function() {
+ this.onDlgBtnClick('ok');
+ return false;
+ },
+
+ onSelectType: function(picker, itemView, record) {
+ var rawData = {},
+ isPickerSelect = _.isFunction(record.toJSON);
+
+ if (isPickerSelect){
+ if (record.get('selected')) {
+ rawData = record.toJSON();
+ } else {
+ // record deselected
+ return;
+ }
+ } else {
+ rawData = record;
+ }
+
+ this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
+ this.currentChartType = rawData.type;
+ this.chartSettings.changeType(this.currentChartType);
+ this.ShowHideSettings(this.currentChartType);
+ if (this.currentChartType==Asc.c_oAscChartTypeSettings.combo) {
+
+ } else
+ this.updateChartStyles(this.api.asc_getChartPreviews(this.currentChartType));
+ },
+
+ onSelectStyle: function(combo, record) {
+ },
+
+ updateChartStyles: function(styles) {
+ var me = this;
+ if (styles && styles.length>0){
+ var stylesStore = this.stylesList.store;
+ if (stylesStore) {
+ var count = stylesStore.length;
+ if (count>0 && count==styles.length) {
+ var data = stylesStore.models;
+ _.each(styles, function(style, index){
+ data[index].set('imageUrl', style.asc_getImage());
+ });
+ } else {
+ var stylearray = [],
+ selectedIdx = -1;
+ _.each(styles, function(item, index){
+ stylearray.push({
+ imageUrl: item.asc_getImage(),
+ data : item.asc_getName(),
+ tip : me.textStyle + ' ' + item.asc_getName()
+ });
+ });
+ stylesStore.reset(stylearray, {silent: false});
+ }
+ }
+ } else {
+ this.stylesList.store.reset();
+ }
+ this.stylesList.setDisabled(!styles || styles.length<1);
+ },
+
+ onSelectStyles: function(dataView, itemView, record) {
+ this.chartSettings.putStyle(record.get('data'));
+ },
+
+ updateSeriesList: function(series, index) {
+ this.btnEditCategory.setDisabled(series && series.length>0 ? series[0].asc_IsScatter() : false);
+
+ var arr = [];
+ var store = this.seriesList.store;
+ for (var i = 0, len = series.length; i < len; i++)
+ {
+ var item = series[i],
+ rec = new Common.UI.DataViewModel();
+ rec.set({
+ value: item.asc_getSeriesName(),
+ index: item.asc_getIdx(),
+ order: item.asc_getOrder(),
+ series: item
+ });
+ arr.push(rec);
+ }
+ store.reset(arr);
+ (len>0) && this.seriesList.selectByIndex(Math.min(index || 0, store.length-1));
+ },
+
+ ShowHideSettings: function(type) {
+ this.NotCombinedSettings.toggleClass('hidden', type==Asc.c_oAscChartTypeSettings.combo);
+ this.CombinedSettings.toggleClass('hidden', type!==Asc.c_oAscChartTypeSettings.combo);
+ },
+
+ textTitle: 'Chart Type',
+ textType: 'Type',
+ textStyle: 'Style',
+ textSeries: 'Series',
+ textSecondary: 'Secondary Axis'
+
+ }, SSE.Views.ChartTypeDialog || {}))
+});