[SSE] Change chart settings: for Bug 43763

apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template

@@ -9,23 +9,57 @@
             </tr>
         </table>
     </div>
-    <div class="separator horizontal padding-large"></div>
+</div>
+<div id="id-chart-settings-dlg-data" class="settings-panel active">
     <div class="inner-content">
         <table cols="1" style="width: 100%;">
             <tr>
                 <td>
-                    <label class="header"><%= scope.textDataRange %></label>
+                    <label class="input-label"><%= scope.textDataRange %></label>
                 </td>
             </tr>
             <tr>
                 <td class="padding-small" width="200">
-                    <div id="chart-dlg-txt-range" class="input-row" style="margin-right: 10px;"></div>
+                    <div id="chart-dlg-txt-range" class="input-row" style=""></div>
+                </td>
+            </tr>
+            <!--<tr>-->
+            <!--<td class="padding-small">-->
+            <!--<label class="input-label"><%= scope.textDataSeries %></label>-->
+            <!--<div id="chart-dlg-combo-range" class="input-group-nr" style="width:120px;"></div>-->
+            <!--</td>-->
+            <!--</tr>-->
+            <tr>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textSeries %></label>
+                    <div id="chart-dlg-series-list" class="" style="width:100%; height: 93px;"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-large">
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add" style="min-width: 70px;margin-right:5px;"><%= scope.textAdd %></button>
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit" style="min-width: 70px;margin-right:5px;"><%= scope.textEdit %></button>
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete" style="min-width: 70px;margin-right:5px;"><%= scope.textDelete %></button>
+                    <div style="display: inline-block; float: right;">
+                        <div id="chart-dlg-btn-up" style="display: inline-block;border: 1px solid #cfcfcf;border-radius: 1px;"></div>
+                        <div id="chart-dlg-btn-down" style="display: inline-block;border: 1px solid #cfcfcf;border-radius: 1px;"></div>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-large">
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-switch" style="min-width: 70px;margin-right:5px;"><%= scope.textSwitch %></button>
                 </td>
             </tr>
             <tr>
                 <td class="padding-small">
-                    <label class="input-label"><%= scope.textDataSeries %></label>
+                    <label class="input-label"><%= scope.textCategory %></label>
-                    <div id="chart-dlg-combo-range" class="input-group-nr" style="width:120px;"></div>
+                    <div id="chart-dlg-category-list" class="" style="width:100%; height: 93px;"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-category-edit" style="min-width: 70px;margin-right:5px;"><%= scope.textEdit %></button>
                 </td>
             </tr>
         </table>

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.onVCategoryClick, this));
-            this.btnsCategory[3].on('click', _.bind(this.onHCategoryClick, 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(['<div class="listview inner" style=""></div>'].join('')),
+                itemTemplate: _.template([
+                    '<div>',
+                    '<label class="checkbox-indeterminate" style="position:absolute;">',
+                    '<input id="rdcheckbox-<%= id %>" type="checkbox" class="button__checkbox">',
+                    '<label for="rdcheckbox-<%= id %>" class="checkbox__shape" ></label>',
+                    '</label>',
+                    '<div id="<%= id %>" class="list-item" style="pointer-events:none; margin-left: 20px;display: flex;">',
+                    '<div style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(value) %></div>',
+                    '</div>',
+                    '</div>'
+                ].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(['<div class="listview inner" style=""></div>'].join('')),
+                itemTemplate: _.template([
+                    '<div>',
+                    '<label class="checkbox-indeterminate" style="position:absolute;">',
+                    '<input id="rdcheckbox-<%= id %>" type="checkbox" class="button__checkbox">',
+                    '<label for="rdcheckbox-<%= id %>" class="checkbox__shape" ></label>',
+                    '</label>',
+                    '<div id="<%= id %>" class="list-item" style="pointer-events:none; margin-left: 20px;display: flex;">',
+                    '<div style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(value) %></div>',
+                    '</div>',
+                    '</div>'
+                ].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();
+                if (value==3) this.onVCategoryClick();
-                else if (value==3) this.onHCategoryClick();
+                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) ? '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[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 || {}));
 });