[SE mobile] Chart settings, type and styles.

apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js

@@ -53,8 +53,7 @@ define([
 
     SSE.Controllers.EditChart = Backbone.Controller.extend(_.extend((function() {
         var _stack = [],
-            _chartInfo = {},
-            _chartStyles = [],
+            _chartObject = {},
             _borderInfo = {color: '000000', width: 1},
             _isEdit = false;
 
@@ -79,6 +78,8 @@ define([
                 var me = this;
                 me.api = api;
 
+                me.api.asc_registerCallback('asc_onSelectionChanged',   _.bind(me.onApiSelectionChanged, me));
+                me.api.asc_registerCallback('asc_onUpdateChartStyles',  _.bind(me.onApiUpdateChartStyles, me));
                 // me.api.asc_registerCallback('asc_onSelectionChanged',           _.bind(me.onApiSelectionChanged, me));
                 // me.api.asc_registerCallback('asc_onEditorSelectionChanged',     _.bind(me.onApiEditorSelectionChanged, me));
                 // me.api.asc_registerCallback('asc_onInitEditorStyles',           _.bind(me.onApiInitEditorStyles, me)); // TODO: It does not work until the error in the SDK
@@ -95,8 +96,6 @@ define([
             initEvents: function () {
                 var me = this;
 
-                me.getView('EditChart').renderStyles(_chartStyles);
-
                 me.initSettings();
             },
 
@@ -109,8 +108,8 @@ define([
             initSettings: function (pageId) {
                 var me = this;
 
-                if ('#edit-chart-styles' == pageId) {
-                    me.initStylesPage();
+                if ('#edit-chart-style' == pageId) {
+                    me.initStylePage();
                 } else if ('#edit-chart-reorder' == pageId) {
                     me.initReorderPage();
                 } else {
@@ -125,11 +124,25 @@ define([
             },
 
             getChart: function () {
-                return _chartInfo;
+                return _chartObject;
             },
 
-            initStylesPage: function () {
-                //
+            initStylePage: function () {
+                var me = this,
+                    chartProperties = _chartObject.get_ChartProperties();
+
+                // Type
+
+                var type = chartProperties.getType();
+                $('.chart-types li').removeClass('active');
+                $('.chart-types li[data-type=' + type + ']').addClass('active');
+                $('#tab-chart-type li').single('click', _.buffered(me.onType, 100, me));
+
+                // Styles
+
+                _.defer(function () {
+                    me._updateChartStyles(me.api.asc_getChartPreviews(_chartObject.get_ChartProperties().getType()));
+                });
             },
 
             initReorderPage: function () {
@@ -186,19 +199,52 @@ define([
                 this.api.asc_setSelectedDrawingObjectLayer(ascType);
             },
 
+            onType: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget),
+                    type = $target.data('type');
+
+                $('.chart-types li').removeClass('active');
+                $target.addClass('active');
+
+                _.defer(function() {
+                    var image = new Asc.asc_CImgProperty(),
+                        chart = _chartObject.get_ChartProperties();
+
+                    chart.changeType(type);
+                    image.put_ChartProperties(chart);
+
+                    me.api.asc_setGraphicObjectProps(image);
+
+                    // Force update styles
+                    me._updateChartStyles(me.api.asc_getChartPreviews(chart.getType()));
+                });
+            },
+
+            onStyle: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget),
+                    type = $target.data('type');
+
+                var image = new Asc.asc_CImgProperty(),
+                    chart = _chartObject.get_ChartProperties();
+
+                chart.putStyle(type);
+                image.put_ChartProperties(chart);
+
+                me.api.asc_setGraphicObjectProps(image);
+            },
+
             onFillColor:function (palette, color) {
                 this.api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color));
             },
 
             // API handlers
 
-            onApiEditorSelectionChanged: function(fontObj) {
-                if (!_isEdit) {
-                    return;
+            onApiUpdateChartStyles: function () {
+                if (this.api && _chartObject && _chartObject.get_ChartProperties()) {
+                    this._updateChartStyles(this.api.asc_getChartPreviews(_chartObject.get_ChartProperties().getType()));
                 }
-                //
-                // _fontInfo = fontObj;
-                // this.initFontSettings(fontObj);
             },
 
             onApiSelectionChanged: function(cellInfo) {
@@ -206,12 +252,31 @@ define([
                     return;
                 }
 
-                // _cellInfo = cellInfo;
-                // this.initCellSettings(cellInfo);
+                if (cellInfo.asc_getFlags().asc_getSelectionType() == Asc.c_oAscSelectionType.RangeChart) {
+                    var selectedObjects = this.api.asc_getGraphicObjectProps();
+
+                    for (var i = 0; i < selectedObjects.length; i++) {
+                        if (selectedObjects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image) {
+                            var elValue = selectedObjects[i].asc_getObjectValue();
+                            var chartProps = elValue.asc_getChartProperties();
+                            // isObjLocked = isObjLocked || elValue.asc_getLocked();
+
+                            if (chartProps) {
+                                _chartObject = elValue;
+                                break;
+                            }
+                        }
+                    }
+                }
             },
 
             // Helpers
 
+            _updateChartStyles: function(styles) {
+                this.getView('EditChart').renderStyles(styles);
+                $('#tab-chart-style li').single('click',    _.bind(this.onStyle, this));
+            },
+
             _sdkToThemeColor: function (color) {
                 var clr = 'transparent';
 

apps/spreadsheeteditor/mobile/app/view/edit/EditChart.js

@@ -52,7 +52,6 @@ define([
     SSE.Views.EditChart = Backbone.View.extend(_.extend((function() {
         // private
         var _editTextController,
-            _styles = [],
             _types = [
             { type: Asc.c_oAscChartTypeSettings.barNormal,               thumb: 'chart-03.png'},
             { type: Asc.c_oAscChartTypeSettings.barStacked,              thumb: 'chart-02.png'},
@@ -136,7 +135,7 @@ define([
             },
 
             renderStyles: function (chartStyles) {
-                var $styleContainer = $('.chart-styles .item-content');
+                var $styleContainer = $('#tab-chart-style');
 
                 if ($styleContainer.length > 0) {
                     var columns = parseInt($styleContainer.width() / 70), // magic
@@ -154,11 +153,11 @@ define([
                     var template = _.template([
                         '<% _.each(styles, function(row) { %>',
                         '<ul class="row">',
-                        '<% _.each(row, function(style) { %>',
-                        '<li data-type="<%= style.asc_getName() %>">',
-                        '<img src="<%= style.asc_getImage() %>" width="50px" height="50px">',
-                        '</li>',
-                        '<% }); %>',
+                            '<% _.each(row, function(style) { %>',
+                            '<li data-type="<%= style.asc_getStyle() %>">',
+                                '<img src="<%= style.asc_getImageUrl() %>" width="50px" height="50px">',
+                            '</li>',
+                            '<% }); %>',
                         '</ul>',
                         '<% }); %>'
                     ].join(''), {