[SSE mobile] Add Regional settings

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

@@ -222,8 +222,12 @@ define([
                 me.appOptions.canPlugins      = false;
                 me.plugins                    = me.editorConfig.plugins;
 
-                if (me.editorConfig.lang)
+                var value = Common.localStorage.getItem("sse-settings-regional");
-                    me.api.asc_setLocale((me.editorConfig.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(me.editorConfig.lang)) : 0x0409);
+                if (value!==null)
+                    this.api.asc_setLocale(parseInt(value));
+                else {
+                    this.api.asc_setLocale((this.editorConfig.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(this.editorConfig.lang)) : 0x0409);
+                }
 
                if (me.appOptions.location == 'us' || me.appOptions.location == 'ca')
                    Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);

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

@@ -86,7 +86,39 @@ define([
                 { value: 'ru', displayValue: 'Russian', exampleValue: ' СУММ; МИН; МАКС; СЧЁТ' },
                 { value: 'pl', displayValue: 'Polish', exampleValue: ' SUMA; MIN; MAX; ILE.LICZB' }
             ],
-            _indexLang = 0;
+            _indexLang = 0,
+            _regdata = [
+                { code: 0x042C, name: ["az-Latn-AZ", "Azərbaycan­ılı (Azərbaycan)", "Azeri (Latin, Azerbaijan)"]},
+                { code: 0x0402, name: ["bg-BG", "Български (България)", "Bulgarian (Bulgaria)"] },
+                { code: 0x0405, name: ["cs-CZ", "Čeština (Česká republika)", "Czech (Czech Republic)"]},
+                { code: 0x0407, name: ["de-DE", "Deutsch (Deutschland)", "German (Germany)"]},
+                { code: 0x0807, name: ["de-CH", "Deutsch (Schweiz)", "German (Switzerland)"]},
+                { code: 0x0408, name: ["el-GR", "Ελληνικά (Ελλάδα)", "Greek (Greece)"]},
+                { code: 0x0C09, name: ["en-AU", "English (Australia)", "English (Australia)"]},
+                { code: 0x0809, name: ["en-GB", "English (United Kingdom)", "English (United Kingdom)"]},
+                { code: 0x0409, name: ["en-US", "English (United States)", "English (United States)"]},
+                { code: 0x0C0A, name: ["es-ES", "Español (España, alfabetización internacional)", "Spanish (Spain)"]},
+                { code: 0x080A, name: ["es-MX", "Español (México)", "Spanish (Mexico)"]},
+                { code: 0x040B, name: ["fi-FI", "Suomi (Suomi)", "Finnish (Finland)"]},
+                { code: 0x040C, name: ["fr-FR", "Français (France)", "French (France)"]},
+                { code: 0x0410, name: ["it-IT", "Italiano (Italia)", "Italian (Italy)"]},
+                { code: 0x0411, name: ["ja-JP", "日本語 (日本)", "Japanese (Japan)"]},
+                { code: 0x0412, name: ["ko-KR", "한국어 (대한민국)", "Korean (Korea)"]},
+                { code: 0x0426, name: ["lv-LV", "Latviešu (Latvija)", "Latvian (Latvia)"]},
+                { code: 0x0413, name: ["nl-NL", "Nederlands (Nederland)", "Dutch (Netherlands)"]},
+                { code: 0x0415, name: ["pl-PL", "Polski (Polska)", "Polish (Poland)"]},
+                { code: 0x0416, name: ["pt-BR", "Português (Brasil)", "Portuguese (Brazil)"]},
+                { code: 0x0816, name: ["pt-PT", "Português (Portugal)", "Portuguese (Portugal)"]},
+                { code: 0x0419, name: ["ru-RU", "Русский (Россия)", "Russian (Russia)"]},
+                { code: 0x041B, name: ["sk-SK", "Slovenčina (Slovenská republika)", "Slovak (Slovakia)"]},
+                { code: 0x0424, name: ["sl-SI", "Slovenski (Slovenija)", "Slovenian (Slovenia)"]},
+                { code: 0x081D, name: ["sv-FI", "Svenska (Finland)", "Swedish (Finland)"]},
+                { code: 0x041D, name: ["sv-SE", "Svenska (Sverige)", "Swedish (Sweden)"]},
+                { code: 0x041F, name: ["tr-TR", "Türkçe (Türkiye)", "Turkish (Turkey)"]},
+                { code: 0x0422, name: ["uk-UA", "Українська (Україна)", "Ukrainian (Ukraine)"]},
+                { code: 0x042A, name: ["vi-VN", "Tiếng Việt (Việt Nam)", "Vietnamese (Vietnam)"]},
+                { code: 0x0804, name: ["zh-CN", "中文(中华人民共和国)", "Chinese (People's Republic of China)"]}
+                ];
 
         var mm2Cm = function(mm) {
             return parseFloat((mm/10.).toFixed(2));
@@ -217,6 +249,8 @@ define([
                     me.initSpreadsheetMargins();
                 } else if ('#language-formula-view' == pageId) {
                     me.initFormulaLang();
+                } else if ('#regional-settings-view' == pageId) {
+                    me.initRegSettings();
                 } else {
                     var _userCount = SSE.getController('Main').returnUserCount();
                     if (_userCount > 0) {
@@ -225,6 +259,20 @@ define([
                 }
             },
 
+            initRegSettings: function() {
+                var value = Number(Common.localStorage.getItem('sse-settings-regional'));
+                this.getView('Settings').renderRegSettings(value ? value : 0x0409, _regdata);
+                $('.page[data-page=regional-settings-view] input:radio[name=region-settings]').single('change', _.bind(this.onRegSettings, this));
+                Common.Utils.addScrollIfNeed('.page[data-page=regional-settings-view]', '.page[data-page=regional-settings-view] .page-content');
+            },
+
+            onRegSettings: function(e) {
+                var regCode = $(e.currentTarget).val();
+                Common.localStorage.setItem("sse-settings-regional", regCode);
+                this.initPageApplicationSettings();
+                if (regCode!==null) this.api.asc_setLocale(parseInt(regCode));
+            },
+
             initFormulaLang: function() {
                 var value = Common.localStorage.getItem('sse-settings-func-lang');
                 var item = _.findWhere(_dataLang, {value: value});
@@ -486,6 +534,24 @@ define([
                 $pageLang.find('.item-title').text(item.displayValue);
                 $pageLang.find('.item-example').text(item.exampleValue);
 
+                //init regional settings
+                value = Number(Common.localStorage.getItem('sse-settings-regional'));
+                var item = _.findWhere(_regdata, {code: value});
+                if(!item) {
+                    item = _.findWhere(_regdata, {code: 0x0409});
+                }
+                var $regSettings = $('#regional-settings');
+                $regSettings.find('.item-title').text(item.name[1]);
+                var info = new Asc.asc_CFormatCellsInfo();
+                info.asc_setType(Asc.c_oAscNumFormatType.None);
+                info.asc_setSymbol(value);
+                var arr = this.api.asc_getFormatCells(info);
+                var text = this.api.asc_getLocaleExample(arr[4], 1000.01, value);
+                text = text + ' ' + this.api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), value);
+                text = text + ' ' + this.api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), value);
+                $regSettings.find('.item-example').text(text);
+
+                //init r1c1 reference
                 value = Common.localStorage.getBool('sse-settings-r1c1');
                 var $r1c1Style = $('.page[data-page=settings-application-view] #r1-c1-style input');
                 $r1c1Style.prop('checked',value);

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

@@ -447,6 +447,21 @@
                         </li>
                     </ul>
                 </div>
+                <div class="content-block-title"><%= scope.textRegionalSettings %></div>
+                <div class="list-block">
+                    <ul>
+                        <li class="media-item">
+                            <a id="regional-settings" class="item-link item-content" data-page="#regional-settings-view">
+                                <div class="item-inner">
+                                    <div class="item-title-row">
+                                        <div class="item-title"><%= scope.textCustom %></div>
+                                    </div>
+                                    <div class="item-subtitle"><%= scope.textExample + ": "%><span class="item-example"><%= scope.textCustomSize %></span></div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
             </div>
         </div>
     </div>
@@ -675,6 +690,26 @@
     </div>
 </div>
 
+<!-- Regional Settings View --->
+<div id="regional-settings-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textRegionalSettings %></div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page" data-page="regional-settings-view">
+            <div class="page-content">
+                <div class="list-block">
+                    <ul>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Language Formula View --->
 <div id="language-formula-view">
     <div class="navbar">

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

@@ -169,6 +169,7 @@ define([
             showSetApp: function() {
                 this.showPage('#settings-application-view');
                 $('#language-formula').single('click', _.bind(this.showFormulaLanguage, this));
+                $('#regional-settings').single('click', _.bind(this.showRegionalSettings, this));
             },
 
             showFormulaLanguage: function () {
@@ -179,6 +180,10 @@ define([
                 this.showPage('#color-schemes-view');
             },
 
+            showRegionalSettings: function () {
+                this.showPage('#regional-settings-view');
+            },
+
             showSetSpreadsheet: function () {
                 this.showPage('#settings-spreadsheet-view');
                 $('#color-schemes').single('click', _.bind(this.showColorSchemes, this));
@@ -298,6 +303,37 @@ define([
                 $list.html(items.join(''));
             },
 
+            renderRegSettings: function(regCode, regions) {
+                var $pageLang = $('.page[data-page=regional-settings-view]'),
+                    $list = $pageLang.find('ul'),
+                    items = [];
+
+                _.each(regions, function (reg) {
+                    var itemTemplate = [
+                        '<li>',
+                        '<label class="label-radio item-content">',
+                        '<input type="radio" name="region-settings" value="<%= item.code %>" <% if (item.code == selectReg) { %>checked="checked"<% } %> >',
+                        '<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>',
+                        '<div class="item-inner">',
+                        '<div class="item-title-row">',
+                        '<i class="icon lang-flag <%= item.name[0]%>"></i>',
+                        '<div class="item-title"><%= item.name[1] %></div>',
+                        '</div>',
+                        '</div>',
+                        '</label>',
+                        '</li>'
+                    ].join('');
+                    items.push(_.template(itemTemplate)({
+                        android: Framework7.prototype.device.android,
+                        item: reg,
+                        selectReg: regCode,
+                    }));
+                });
+
+                $list.html(items);
+
+            },
+
             unknownText: 'Unknown',
             textFindAndReplace: 'Find and Replace',
             textSettings: 'Settings',
@@ -344,7 +380,8 @@ define([
             textCollaboration: 'Collaboration',
             textFormulaLanguage: 'Formula Language',
             textExample: 'Example',
-            textR1C1Style: 'R1C1 Reference Style'
+            textR1C1Style: 'R1C1 Reference Style',
+            textRegionalSettings: 'Regional Settings'
     }
     })(), SSE.Views.Settings || {}))
 });

apps/spreadsheeteditor/mobile/resources/less/app-ios.less

@@ -232,4 +232,90 @@ input, textarea {
   #btn-delete-filter {
     color: @red;
   }
+}
+
+
+//Regional Settings
+[data-page="regional-settings-view"] {
+  .list-block .item-title-row {
+    justify-content: start;
+    align-items: center;
+    display: flex;
+  }
+  .item-title {
+    margin-left: 20px;
+    font-weight: 500;
+    white-space: normal;
+  }
+}
+
+@common-image-path:         "../../../../common/mobile/resources/img";
+@img-flags-width: 48px;
+.icon.lang-flag {
+  width: 16px;
+  height: 12px;
+  background-image: data-uri(%("%s",'@{common-image-path}/controls/flags.png'));
+  background-repeat: no-repeat;
+  background-size: auto;
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 2dppx),
+  only screen and (min-resolution: 192dpi) {
+    background-image: data-uri(%("%s",'@{common-image-path}/controls/flags@2x.png'));
+    background-size:  @img-flags-width auto;
+  }
+}
+
+.lang-flag {
+  background-position: -16px -108px;
+
+  &.ca, &.ca-ES                     {background-position: 0          0;}
+  &.cs, &.cs-CZ                     {background-position: -16px      0;}
+  &.da, &.da-DK                     {background-position: -32px      0;}
+  &.de, &.de-DE                     {background-position: 0          -12px;}
+  &.el, &.el-GR                     {background-position: -16px      -12px;}
+  &.en, &.en-US                     {background-position: -32px      -12px;}
+  &.fr, &.fr-FR                     {background-position: 0          -24px;}
+  &.hu, &.hu-HU                     {background-position: -16px      -24px;}
+  &.it, &.it-IT                     {background-position: -32px      -24px;}
+  &.ko, &.ko-KR                     {background-position: 0          -36px;}
+  &.nl, &.nl-NL                     {background-position: -16px      -36px;}
+  &.nb, &.nb-NO, &.nn, &.nn-NO      {background-position: -32px      -36px;}
+  &.pl, &.pl-PL                     {background-position: 0          -48px;}
+  &.pt, &.pt-BR                     {background-position: -16px      -48px;}
+  &.ro, &.ro-RO                     {background-position: -32px      -48px;}
+  &.ru, &.ru-RU                     {background-position: 0          -60px;}
+  &.sv, &.sv-SE                     {background-position: -32px      -60px;}
+  &.tr, &.tr-TR                     {background-position: 0          -72px;}
+  &.uk, &.uk-UA                     {background-position: -16px      -72px;}
+  &.lv, &.lv-LV                     {background-position: -32px      -72px;}
+  &.lt, &.lt-LT                     {background-position: 0          -84px;}
+  &.vi, &.vi-VN                     {background-position: -16px      -84px;}
+  &.de-CH                           {background-position: -32px      -84px;}
+  &.pt-PT                           {background-position: -16px      -96px;}
+  &.de-AT                           {background-position: -32px      -96px;}
+  &.es, &.es-ES                     {background-position: 0          -108px;}
+  &.en-GB                           {background-position: -32px      -108px;}
+  &.en-AU                           {background-position: 0          -120px;}
+  &.az-Latn-AZ                      {background-position: -16px      -120px;}
+  &.id, &.id-ID                     {background-position: -32px      -120px;}
+
+  &.bg, &.bg-BG                     {background-position: 0          -132px;}
+  &.ca-ES-valencia                  {background-position: -16px      -132px;}
+  &.en-CA                           {background-position: -32px      -132px;}
+  &.en-ZA                           {background-position: 0          -144px;}
+  &.eu, &.eu-ES                     {background-position: -16px      -144px;}
+  &.gl, &.gl-ES                     {background-position: -32px      -144px;}
+  &.hr, &.hr-HR                     {background-position: 0          -156px;}
+  &.lb, &.lb-LU                     {background-position: -16px      -156px;}
+  &.mn, &.mn-MN                     {background-position: -32px      -156px;}
+  &.sl, &.sl-SI                     {background-position: 0          -168px;}
+  &.sr, &.sr-Cyrl-RS, &.sr-Latn-RS  {background-position: -16px      -168px;}
+  &.sk, &.sk-SK                     {background-position: -32px      -168px;}
+  &.kk, &.kk-KZ                     {background-position: 0          -180px;}
+  &.fi, &.fi-FI, &.sv-FI            {background-position: -16px      -180px;}
+  &.zh, &.zh-CN                     {background-position: -32px      -180px;}
+  &.ja, &.ja-JP                     {background-position: 0          -192px;}
+  &.es-MX                           {background-position: -16px      -192px;}
 }

apps/spreadsheeteditor/mobile/resources/less/app-material.less

@@ -218,4 +218,91 @@ input, textarea {
   #btn-delete-filter {
     color: @red;
   }
+}
+
+//Regional Settings
+[data-page="regional-settings-view"] {
+  .list-block .item-title-row {
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    width: 100%;
+  }
+  .item-title {
+    font-weight: 400;
+    white-space: normal;
+    order: 1;
+  }
+}
+
+@common-image-path:         "../../../../common/mobile/resources/img";
+@img-flags-width: 48px;
+.icon.lang-flag {
+  order: 2;
+  width: 16px;
+  height: 12px;
+  background-image: data-uri(%("%s",'@{common-image-path}/controls/flags.png'));
+  background-repeat: no-repeat;
+  background-size: auto;
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 2dppx),
+  only screen and (min-resolution: 192dpi) {
+    background-image: data-uri(%("%s",'@{common-image-path}/controls/flags@2x.png'));
+    background-size:  @img-flags-width auto;
+  }
+}
+
+.lang-flag {
+  background-position: -16px -108px;
+
+  &.ca, &.ca-ES                     {background-position: 0          0;}
+  &.cs, &.cs-CZ                     {background-position: -16px      0;}
+  &.da, &.da-DK                     {background-position: -32px      0;}
+  &.de, &.de-DE                     {background-position: 0          -12px;}
+  &.el, &.el-GR                     {background-position: -16px      -12px;}
+  &.en, &.en-US                     {background-position: -32px      -12px;}
+  &.fr, &.fr-FR                     {background-position: 0          -24px;}
+  &.hu, &.hu-HU                     {background-position: -16px      -24px;}
+  &.it, &.it-IT                     {background-position: -32px      -24px;}
+  &.ko, &.ko-KR                     {background-position: 0          -36px;}
+  &.nl, &.nl-NL                     {background-position: -16px      -36px;}
+  &.nb, &.nb-NO, &.nn, &.nn-NO      {background-position: -32px      -36px;}
+  &.pl, &.pl-PL                     {background-position: 0          -48px;}
+  &.pt, &.pt-BR                     {background-position: -16px      -48px;}
+  &.ro, &.ro-RO                     {background-position: -32px      -48px;}
+  &.ru, &.ru-RU                     {background-position: 0          -60px;}
+  &.sv, &.sv-SE                     {background-position: -32px      -60px;}
+  &.tr, &.tr-TR                     {background-position: 0          -72px;}
+  &.uk, &.uk-UA                     {background-position: -16px      -72px;}
+  &.lv, &.lv-LV                     {background-position: -32px      -72px;}
+  &.lt, &.lt-LT                     {background-position: 0          -84px;}
+  &.vi, &.vi-VN                     {background-position: -16px      -84px;}
+  &.de-CH                           {background-position: -32px      -84px;}
+  &.pt-PT                           {background-position: -16px      -96px;}
+  &.de-AT                           {background-position: -32px      -96px;}
+  &.es, &.es-ES                     {background-position: 0          -108px;}
+  &.en-GB                           {background-position: -32px      -108px;}
+  &.en-AU                           {background-position: 0          -120px;}
+  &.az-Latn-AZ                      {background-position: -16px      -120px;}
+  &.id, &.id-ID                     {background-position: -32px      -120px;}
+
+  &.bg, &.bg-BG                     {background-position: 0          -132px;}
+  &.ca-ES-valencia                  {background-position: -16px      -132px;}
+  &.en-CA                           {background-position: -32px      -132px;}
+  &.en-ZA                           {background-position: 0          -144px;}
+  &.eu, &.eu-ES                     {background-position: -16px      -144px;}
+  &.gl, &.gl-ES                     {background-position: -32px      -144px;}
+  &.hr, &.hr-HR                     {background-position: 0          -156px;}
+  &.lb, &.lb-LU                     {background-position: -16px      -156px;}
+  &.mn, &.mn-MN                     {background-position: -32px      -156px;}
+  &.sl, &.sl-SI                     {background-position: 0          -168px;}
+  &.sr, &.sr-Cyrl-RS, &.sr-Latn-RS  {background-position: -16px      -168px;}
+  &.sk, &.sk-SK                     {background-position: -32px      -168px;}
+  &.kk, &.kk-KZ                     {background-position: 0          -180px;}
+  &.fi, &.fi-FI, &.sv-FI            {background-position: -16px      -180px;}
+  &.zh, &.zh-CN                     {background-position: -32px      -180px;}
+  &.ja, &.ja-JP                     {background-position: 0          -192px;}
+  &.es-MX                           {background-position: -16px      -192px;}
 }