|
-
+
|
|
-
+
+ |
+
+
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+ |
+
+
+ |
+
|
|
-
-
+
+
+ |
+
+
+ |
+
|
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
index 4729d53c3e..f981fa73e4 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
@@ -40,12 +40,34 @@
define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template',
'common/main/lib/view/AdvancedSettingsWindow',
+ 'common/main/lib/component/ListView',
'common/main/lib/component/CheckBox',
'common/main/lib/component/InputField',
'spreadsheeteditor/main/app/view/CellRangeDialog'
], function (contentTemplate) {
'use strict';
+ var _CustomItem = Common.UI.DataViewItem.extend({
+ initialize : function(options) {
+ Common.UI.BaseView.prototype.initialize.call(this, options);
+
+ var me = this;
+
+ me.template = me.options.template || me.template;
+
+ me.listenTo(me.model, 'change:sort', function() {
+ me.render();
+ me.trigger('change', me, me.model);
+ });
+ me.listenTo(me.model, 'change:selected', function() {
+ var el = me.$el || $(me.el);
+ el.toggleClass('selected', me.model.get('selected') && me.model.get('allowSelected'));
+ me.onSelectChange(me.model, me.model.get('selected') && me.model.get('allowSelected'));
+ });
+ me.listenTo(me.model, 'remove', me.remove);
+ }
+ });
+
SSE.Views.ChartSettingsDlg = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: {
contentWidth: 322,
@@ -58,7 +80,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
_.extend(this.options, {
title: this.textTitle,
items: [
- {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textTypeData},
+ {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textType},
+ {panelId: 'id-chart-settings-dlg-data', panelCaption: this.textData},
{panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout},
{panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis},
{panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis},
@@ -728,8 +751,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
}
}, this));
- this.btnsCategory[2].on('click', _.bind(this.onVCategoryClick, this));
- this.btnsCategory[3].on('click', _.bind(this.onHCategoryClick, this));
+ this.btnsCategory[3].on('click', _.bind(this.onVCategoryClick, this));
+ this.btnsCategory[4].on('click', _.bind(this.onHCategoryClick, this));
// Sparklines
this.btnSparkType = new Common.UI.Button({
@@ -970,6 +993,111 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
me.isAltDescChanged = true;
});
+ // Chart data
+ this.seriesList = new Common.UI.ListView({
+ el: $('#chart-dlg-series-list', this.$window),
+ store: new Common.UI.DataViewStore(),
+ emptyText: '',
+ scrollAlwaysVisible: true,
+ template: _.template(['
'].join('')),
+ itemTemplate: _.template([
+ '
',
+ '
',
+ '
',
+ '
<%= Common.Utils.String.htmlEncode(value) %>
',
+ '
',
+ '
'
+ ].join(''))
+ });
+ this.seriesList.createNewItem = function(record) {
+ return new _CustomItem({
+ template: this.itemTemplate,
+ model: record
+ });
+ };
+ this.seriesList.on({
+ 'item:change': this.onItemChanged.bind(this),
+ 'item:add': this.onItemChanged.bind(this),
+ 'item:select': this.onCellCheck.bind(this)
+ });
+ this.seriesList.onKeyDown = _.bind(this.onListKeyDown, this, 'series');
+ this.seriesList.createNewItem = function(record) {
+ return new _CustomItem({
+ template: this.itemTemplate,
+ model: record
+ });
+ };
+ this.seriesList.on('item:select', _.bind(this.onSelectSeries, this));
+
+ this.btnAdd = new Common.UI.Button({
+ el: $('#chart-dlg-btn-add')
+ });
+ // this.btnAdd.on('click', _.bind(this.onAddSeries, this, false));
+
+ this.btnDelete = new Common.UI.Button({
+ el: $('#chart-dlg-btn-delete')
+ });
+ // this.btnDelete.on('click', _.bind(this.onDeleteSeries, this));
+
+ this.btnEdit = new Common.UI.Button({
+ el: $('#chart-dlg-btn-edit')
+ });
+ // this.btnEdit.on('click', _.bind(this.onEditSeries, this, false));
+
+ this.btnUp = new Common.UI.Button({
+ parentEl: $('#chart-dlg-btn-up'),
+ cls: 'btn-toolbar',
+ iconCls: 'caret-up',
+ hint: this.textUp
+ });
+ // this.btnUp.on('click', _.bind(this.onMoveClick, this, true));
+
+ this.btnDown = new Common.UI.Button({
+ parentEl: $('#chart-dlg-btn-down'),
+ cls: 'btn-toolbar',
+ iconCls: 'caret-down',
+ hint: this.textDown
+ });
+ // this.btnDown.on('click', _.bind(this.onMoveClick, this, false));
+
+ this.btnSwitch = new Common.UI.Button({
+ el: $('#chart-dlg-btn-switch')
+ });
+ // this.btnSwitch.on('click', _.bind(this.onSwitch, this));
+
+ this.categoryList = new Common.UI.ListView({
+ el: $('#chart-dlg-category-list', this.$window),
+ store: new Common.UI.DataViewStore(),
+ emptyText: '',
+ scrollAlwaysVisible: true,
+ template: _.template(['
'].join('')),
+ itemTemplate: _.template([
+ '
',
+ '
',
+ '
',
+ '
<%= Common.Utils.String.htmlEncode(value) %>
',
+ '
',
+ '
'
+ ].join(''))
+ });
+ this.categoryList.on({
+ 'item:change': this.onItemChanged.bind(this),
+ 'item:add': this.onItemChanged.bind(this),
+ 'item:select': this.onCellCheck.bind(this)
+ });
+ this.categoryList.onKeyDown = _.bind(this.onListKeyDown, this, 'category');
+
+ this.btnEditCategory = new Common.UI.Button({
+ el: $('#chart-dlg-btn-category-edit')
+ });
+ // this.btnEditCategory.on('click', _.bind(this.onEditCategory, this, false));
+
this.afterRender();
},
@@ -979,23 +1107,24 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.setTitle((this.isChart) ? this.textTitle : this.textTitleSparkline);
if (this.isChart) {
- this.btnsCategory[4].setVisible(false);
this.btnsCategory[5].setVisible(false);
+ this.btnsCategory[6].setVisible(false);
} else {
this.btnsCategory[0].setVisible(false);
this.btnsCategory[1].setVisible(false);
this.btnsCategory[2].setVisible(false);
this.btnsCategory[3].setVisible(false);
- this.btnsCategory[6].setVisible(false);
+ this.btnsCategory[4].setVisible(false);
this.btnsCategory[7].setVisible(false);
+ this.btnsCategory[8].setVisible(false);
}
if (this.storageName) {
var value = Common.localStorage.getItem(this.storageName);
this.setActiveCategory((value!==null) ? parseInt(value) : 0);
value = this.getActiveCategory();
- if (value==2) this.onVCategoryClick();
- else if (value==3) this.onHCategoryClick();
+ if (value==3) this.onVCategoryClick();
+ else if (value==4) this.onHCategoryClick();
}
},
@@ -1038,8 +1167,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
}
value = (type == Asc.c_oAscChartTypeSettings.pie || type == Asc.c_oAscChartTypeSettings.doughnut || type == Asc.c_oAscChartTypeSettings.pie3d);
- this.btnsCategory[2].setDisabled(value);
this.btnsCategory[3].setDisabled(value);
+ this.btnsCategory[4].setDisabled(value);
this.cmbHorShow.setDisabled(value);
this.cmbVertShow.setDisabled(value);
this.cmbHorTitle.setDisabled(value);
@@ -1061,8 +1190,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
value = (type == Asc.c_oAscChartTypeSettings.hBarNormal || type == Asc.c_oAscChartTypeSettings.hBarStacked || type == Asc.c_oAscChartTypeSettings.hBarStackedPer ||
type == Asc.c_oAscChartTypeSettings.hBarNormal3d || type == Asc.c_oAscChartTypeSettings.hBarStacked3d || type == Asc.c_oAscChartTypeSettings.hBarStackedPer3d);
- this.btnsCategory[2].options.contentTarget = (value) ? 'id-chart-settings-dlg-hor' : 'id-chart-settings-dlg-vert';
- this.btnsCategory[3].options.contentTarget = (value || type == Asc.c_oAscChartTypeSettings.scatter) ? 'id-chart-settings-dlg-vert' : 'id-chart-settings-dlg-hor';
+ this.btnsCategory[3].options.contentTarget = (value) ? 'id-chart-settings-dlg-hor' : 'id-chart-settings-dlg-vert';
+ this.btnsCategory[4].options.contentTarget = (value || type == Asc.c_oAscChartTypeSettings.scatter) ? 'id-chart-settings-dlg-vert' : 'id-chart-settings-dlg-hor';
},
updateDataLabels: function(chartType, labelPos) {
@@ -1610,7 +1739,80 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
}
},
- show: function() {
+ onItemChanged: function (view, record) {
+ var state = record.model.get('check');
+ if ( state == 'indeterminate' )
+ $('input[type=checkbox]', record.$el).prop('indeterminate', true);
+ else $('input[type=checkbox]', record.$el).prop({checked: state, indeterminate: false});
+ },
+
+ onCellCheck: function (listView, itemView, record) {
+ if (this.checkCellTrigerBlock)
+ return;
+
+ var target = '', isLabel = false, bound = null;
+
+ var event = window.event ? window.event : window._event;
+ if (event) {
+ target = $(event.currentTarget).find('.list-item');
+
+ if (target.length) {
+ bound = target.get(0).getBoundingClientRect();
+ var _clientX = event.clientX*Common.Utils.zoom(),
+ _clientY = event.clientY*Common.Utils.zoom();
+ if (bound.left < _clientX && _clientX < bound.right &&
+ bound.top < _clientY && _clientY < bound.bottom) {
+ isLabel = true;
+ }
+ }
+
+ if (isLabel || event.target.className.match('checkbox')) {
+ this.updateCellCheck(listView, record);
+
+ _.delay(function () {
+ listView.$el.find('.listview').focus();
+ }, 100, this);
+ }
+ }
+ },
+
+ onListKeyDown: function (type, e, data) {
+ var record = null, listView = (type=='series') ? this.seriesList : this.categoryList;
+
+ if (listView.disabled) return;
+ if (_.isUndefined(undefined)) data = e;
+
+ if (data.keyCode == Common.UI.Keys.SPACE) {
+ data.preventDefault();
+ data.stopPropagation();
+
+ this.updateCellCheck(listView, listView.getSelectedRec());
+ } else if (type=='series' && data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) {
+ // this.onDeleteSeries();
+ } else {
+ Common.UI.DataView.prototype.onKeyDown.call(listView, e, data);
+ }
+ },
+
+ updateCellCheck: function (listView, record) {
+ if (record && listView) {
+ record.set('check', !record.get('check'));
+ // listView.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true});
+ }
+ },
+
+ onSelectSeries: function(lisvView, itemView, record) {
+ this.updateMoveButtons();
+ },
+
+ updateMoveButtons: function() {
+ var rec = this.seriesList.getSelectedRec(),
+ index = rec ? this.seriesList.store.indexOf(rec) : -1;
+ this.btnUp.setDisabled(index<1);
+ this.btnDown.setDisabled(index<0 || index==this.seriesList.store.length-1);
+ },
+
+ show: function() {
Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
var me = this;
@@ -1750,7 +1952,16 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
textSnap: 'Cell Snapping',
textAbsolute: 'Don\'t move or size with cells',
textOneCell: 'Move but don\'t size with cells',
- textTwoCell: 'Move and size with cells'
+ textTwoCell: 'Move and size with cells',
+ textSeries: 'Legend Entries (Series)',
+ textAdd: 'Add',
+ textEdit: 'Edit',
+ textDelete: 'Remove',
+ textSwitch: 'Switch Row/Column',
+ textCategory: 'Horizontal (Category) Axis Labels',
+ textUp: 'Up',
+ textDown: 'Down',
+ textData: 'Data'
}, SSE.Views.ChartSettingsDlg || {}));
});