[sse mobile] Add Hide Headings and Hide Gridlines in table settings

apps/spreadsheeteditor/mobile/app/controller/Settings.js

@@ -77,9 +77,10 @@ define([
             },
 
             setApi: function (api) {
-                var me = this;
+                this.api = api;
-                me.api = api;
+                this.api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(this.onSendThemeColorSchemes, this));
-                me.api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(me.onSendThemeColorSchemes, me));
+                this.api.asc_registerCallback('asc_onSheetsChanged',            _.bind(this.sheetChanged, this));
+                this.api.asc_registerCallback('asc_onUpdateSheetViewSettings',   _.bind(this.sheetChanged, this));
             },
 
             onLaunch: function () {
@@ -167,9 +168,42 @@ define([
                 } else if ('#color-schemes-view' == pageId) {
                     me.initPageColorSchemes();
                     Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view]', '.page[data-page=color-schemes-view] .page-content');
+                } else if ('#settings-spreadsheet-view' == pageId) {
+                    me.initSpreadsheetSettings();
                 }
             },
 
+            initSpreadsheetSettings: function() {
+                var me = this,
+                    $pageSpreadsheetSettings = $('.page[data-page=settings-spreadsheet-view]'),
+                    $switchHideHeadings = $pageSpreadsheetSettings.find('#hide-headings input'),
+                    $switchHideGridlines = $pageSpreadsheetSettings.find('#hide-gridlines input');
+
+                $switchHideHeadings.single('change',    _.bind(me.clickCheckboxHideHeadings, me));
+                $switchHideGridlines.single('change',    _.bind(me.clickCheckboxHideGridlines, me));
+
+                var params = me.sheetChanged();
+                $switchHideHeadings.prop('checked',!params.asc_getShowRowColHeaders());
+                $switchHideGridlines.prop('checked',!params.asc_getShowGridLines());
+            },
+
+            clickCheckboxHideHeadings: function(e) {
+                var $target = $(e.currentTarget),
+                    checked = $target.prop('checked');
+                this.api.asc_setDisplayHeadings(!checked);
+            },
+
+            clickCheckboxHideGridlines: function(e) {
+                var $target = $(e.currentTarget),
+                    checked = $target.prop('checked');
+                this.api.asc_setDisplayGridlines(!checked);
+            },
+
+            sheetChanged: function() {
+                var params = this.api.asc_getSheetViewSettings();
+                return(params);
+            },
+
             initPageColorSchemes: function() {
                 $('#color-schemes-content').html(templateInsert);
                 $('.color-schemes-menu').on('click', _.bind(this.onColorSchemaClick, this));

apps/spreadsheeteditor/mobile/app/template/Settings.template

@@ -417,7 +417,36 @@
     </div>
     <div class="page" id="page-settings-spreadsheet-view" data-page="settings-spreadsheet-view">
         <div class="page-content">
-
+            <div class="list-block">
+                <ul>
+                    <li id="hide-headings">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textHideHeadings %></div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li id="hide-gridlines">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textHideGridlines %></div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
             <div class="list-block media-list">
                 <ul>
                     <li>

apps/spreadsheeteditor/mobile/app/view/Settings.js

@@ -247,7 +247,9 @@ define([
             textPoint: 'Point',
             textInch: 'Inch',
             textSpreadsheetSettings: 'Spreadsheet Settings',
-            textColorSchemes: 'Color Schemes'
+            textColorSchemes: 'Color Schemes',
+            textHideHeadings: 'Hide Headings',
+            textHideGridlines: 'Hide Gridlines'
     }
     })(), SSE.Views.Settings || {}))
 });