[DE mobile] Make encoding

apps/documenteditor/mobile/locale/en.json

@@ -340,7 +340,10 @@
     "textMarginsW": "Left and right margins are too high for a given page width",
     "textMarginsH": "Top and bottom margins are too high for a given page height",
     "textCollaboration": "Collaboration",
-    "textFindAndReplaceAll": "Find and Replace All"
+    "textFindAndReplaceAll": "Find and Replace All",
+    "textChooseTxtOptions": "Choose TXT Options",
+    "txtDownloadTxt": "Download TXT",
+    "textChooseEncoding": "Choose Encoding"
   },
   "Edit": {
     "textClose": "Close",

apps/documenteditor/mobile/src/controller/settings/Download.jsx

@@ -25,7 +25,6 @@ class DownloadController extends Component {
         const _t = t("Settings", { returnObjects: true });
 
         if(format) {
-            this.closeModal();
             if (format == Asc.c_oAscFileType.TXT || format == Asc.c_oAscFileType.RTF) {
                 f7.dialog.confirm(
                     (format === Asc.c_oAscFileType.TXT) ? _t.textDownloadTxt : _t.textDownloadRtf,
@@ -33,9 +32,13 @@ class DownloadController extends Component {
                     () => {
                         if (format == Asc.c_oAscFileType.TXT) {
                             const isDocReady = this.props.storeAppOptions.isDocReady;
-                            onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.TXT, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t, isDocReady, isDRM);
+                            const advOptions = api.asc_getAdvancedOptions();
+                            
+                            this.props.storeEncoding.initOptions({type: Asc.c_oAscAdvancedOptionsID.TXT, advOptions, formatOptions: new Asc.asc_CDownloadOptions(format)});
+                            onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.TXT, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t, isDocReady);
                         }
                         else {
+                            this.closeModal();
                             setTimeout(() => {
                                 api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
                             }, 400);
@@ -44,6 +47,7 @@ class DownloadController extends Component {
                 );
             } 
             else {
+                this.closeModal();
                 setTimeout(() => {
                     api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
                 }, 400);
@@ -58,71 +62,72 @@ class DownloadController extends Component {
     }
 }
 
-const DownloadWithTranslation = inject("storeAppOptions")(observer(withTranslation()(DownloadController)));
+const DownloadWithTranslation = inject("storeAppOptions", "storeEncoding")(observer(withTranslation()(DownloadController)));
 
 const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady, canRequestClose, isDRM) => {
     if ($$('.dlg-adv-options.modal-in').length > 0) return;
 
     const api = Common.EditorApi.get();
     if (type == Asc.c_oAscAdvancedOptionsID.TXT) {
-        let picker;
+        f7.views.current.router.navigate('/encoding/');
-        const pages = [];
+        // let picker;
-        const pagesName = [];
+        // const pages = [];
-        for (let page of advOptions.asc_getCodePages()) {
+        // const pagesName = [];
-            pages.push(page.asc_getCodePage());
+        // for (let page of advOptions.asc_getCodePages()) {
-            pagesName.push(page.asc_getCodePageName());
+        //     pages.push(page.asc_getCodePage());
-        }
+        //     pagesName.push(page.asc_getCodePageName());
-        Common.Notifications.trigger('preloader:close');
+        // }
-        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
+        // Common.Notifications.trigger('preloader:close');
-        const buttons = [];
+        // Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
-        if (mode === 2) {
+        // const buttons = [];
-            buttons.push({
+        // if (mode === 2) {
-                text: _t.textCancel
+        //     buttons.push({
-            });
+        //         text: _t.textCancel
-        }
+        //     });
-        buttons.push({
+        // }
-            text: 'OK',
+        // buttons.push({
-            bold: true,
+        //     text: 'OK',
-            onClick: function() {
+        //     bold: true,
-                const encoding = picker.value;
+        //     onClick: function() {
-                if (mode==2) {
+        //         const encoding = picker.value;
-                    formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding));
+        //         if (mode==2) {
-                    api.asc_DownloadAs(formatOptions);
+        //             formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding));
-                } else {
+        //             api.asc_DownloadAs(formatOptions);
-                    api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding));
+        //         } else {
-                }
+        //             api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding));
-                if (!isDocReady) {
+        //         }
-                    Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
+        //         if (!isDocReady) {
-                }
+        //             Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
-            }
+        //         }
-        });
+        //     }
-        const dialog = f7.dialog.create({
+        // });
-            title: _t.advTxtOptions,
+        // const dialog = f7.dialog.create({
-            text: '',
+        //     title: _t.advTxtOptions,
-            content:
+        //     text: '',
-                '<div class="content-block">' +
+        //     content:
-                '<div class="row">' +
+        //         '<div class="content-block">' +
-                '<div class="col-100">' + _t.textEncoding + '</div>' +
+        //         '<div class="row">' +
-                '</div>' +
+        //         '<div class="col-100">' + _t.textEncoding + '</div>' +
-                '<div id="txt-encoding"></div>' +
+        //         '</div>' +
-                '</div>',
+        //         '<div id="txt-encoding"></div>' +
-            buttons: buttons,
+        //         '</div>',
-            cssClass: 'dlg-adv-options'
+        //     buttons: buttons,
-        }).open();
+        //     cssClass: 'dlg-adv-options'
-        dialog.on('opened', () => {
+        // }).open();
-            picker = f7.picker.create({
+        // dialog.on('opened', () => {
-                containerEl: document.getElementById('txt-encoding'),
+        //     picker = f7.picker.create({
-                cols: [
+        //         containerEl: document.getElementById('txt-encoding'),
-                    {
+        //         cols: [
-                        values: pages,
+        //             {
-                        displayValues: pagesName
+        //                 values: pages,
-                    }
+        //                 displayValues: pagesName
-                ],
+        //             }
-                toolbar: false,
+        //         ],
-                rotateEffect: true,
+        //         toolbar: false,
-                value: [advOptions.asc_getRecommendedSettings().asc_getCodePage()],
+        //         rotateEffect: true,
-            });
+        //         value: [advOptions.asc_getRecommendedSettings().asc_getCodePage()],
-        });
+        //     });
+        // });
     } else if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
         Common.Notifications.trigger('preloader:close');
         Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);

apps/documenteditor/mobile/src/controller/settings/Encoding.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { Device } from '../../../../../common/mobile/utils/device';
+import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popup } from "framework7-react";
+import { withTranslation } from 'react-i18next';
+import { observer, inject } from "mobx-react";
+import { Encoding } from "../../view/settings/Encoding";
+
+class EncodingController extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    onSaveFormat(type, value) {
+        const api = Common.EditorApi.get();
+        api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(value));
+    }
+
+    render() {
+        return (
+            <Encoding onSaveFormat={this.onSaveFormat} />
+        );
+    }
+}
+
+export default EncodingController;

apps/documenteditor/mobile/src/store/encoding.js

@@ -0,0 +1,44 @@
+import {action, observable, makeObservable} from 'mobx';
+
+export class storeEncoding {
+    constructor() {
+        makeObservable(this, {
+            type: observable,
+            advOptions: observable,
+            formatOptions: observable,
+            pages: observable,
+            pagesName: observable,
+            initOptions: action,
+            valueEncoding: observable,
+            nameEncoding: observable,
+            initPages: action,
+            changeEncoding: action
+        });
+    }
+
+    pages = [];
+    pagesName = [];
+    type;
+    advOptions;
+    formatOptions;
+    valueEncoding;
+    nameEncoding;
+
+    initOptions ({type, advOptions, formatOptions}) {
+        this.type= type;
+        this.advOptions = advOptions;
+        this.formatOptions = formatOptions;
+    }
+
+    initPages() {
+        for (let page of this.advOptions.asc_getCodePages()) {
+            this.pages.push(page.asc_getCodePage());
+            this.pagesName.push(page.asc_getCodePageName());
+        }
+    }
+
+    changeEncoding(value) {
+        this.nameEncoding = this.pagesName[this.pages.indexOf(value)];
+        this.valueEncoding = value;
+    }
+}

apps/documenteditor/mobile/src/store/mainStore.js

@@ -10,6 +10,7 @@ import {storeTableSettings} from "./tableSettings";
 import {storeChartSettings} from "./chartSettings";
 import {storeDocumentInfo} from "./documentInfo";
 import {storeApplicationSettings} from './applicationSettings';
+import {storeEncoding} from "./encoding";
 import {storeAppOptions} from "./appOptions";
 import {storePalette} from "./palette";
 import {storeReview} from "./review";
@@ -20,6 +21,7 @@ export const stores = {
     storeFocusObjects: new storeFocusObjects(),
     storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
+    storeEncoding: new storeEncoding(),
     storeTextSettings: new storeTextSettings(),
     storeParagraphSettings: new storeParagraphSettings(),
     storeShapeSettings: new storeShapeSettings(),

apps/documenteditor/mobile/src/view/settings/Encoding.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { observer, inject } from "mobx-react";
+import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageEncoding = props => {
+    const { t } = useTranslation();
+    const _t = t("Settings", { returnObjects: true });
+    const storeEncoding = props.storeEncoding;
+    const nameEncoding = storeEncoding.nameEncoding;
+    const type = storeEncoding.type;
+    storeEncoding.initPages();
+    const advOptions = storeEncoding.advOptions;
+    const pagesName = storeEncoding.pagesName;
+    
+    return (
+        <Page>
+            <Navbar title={_t.textChooseTxtOptions} backLink={_t.textBack} />
+            <BlockTitle>{_t.textEncoding}</BlockTitle>
+            <List>
+                <ListItem title={nameEncoding} href="/encoding-list/"></ListItem>
+            </List>
+            <List className="buttons-list">
+                <ListButton className='button-fill button-raised' title={_t.textDownload} onClick={() => props.onSaveFormat(type, storeEncoding.valueEncoding)}></ListButton>
+            </List>
+        </Page>
+    )
+}
+
+const PageEncodingList = props => {
+    const { t } = useTranslation();
+    const _t = t("Settings", { returnObjects: true });
+    const storeEncoding = props.storeEncoding;
+    const encoding = storeEncoding.encoding;
+    // const advOptions = storeEncoding.advOptions;
+    const pages = storeEncoding.pages;
+    const pagesName = storeEncoding.pagesName;
+    
+    return (
+        <Page>
+            <Navbar title={_t.txtDownloadTxt} backLink={_t.textBack} />
+            <BlockTitle>{_t.textChooseEncoding}</BlockTitle>
+            <List>
+                {pagesName.map((name, index) => {
+                    return (
+                        <ListItem radio checked={encoding === pages[index]} title={name} key={index} value={pages[index]} onChange={() => {
+                            storeEncoding.changeEncoding(pages[index]);
+                            f7.views.current.router.back();
+                        }}></ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const Encoding = inject("storeEncoding")(observer(PageEncoding));
+const EncodingList = inject("storeEncoding")(observer(PageEncodingList));
+
+export {EncodingList, Encoding}

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -12,6 +12,8 @@ import ApplicationSettingsController from "../../controller/settings/Application
 import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings";
 import { MacrosSettings } from "./ApplicationSettings";
 import About from '../../../../../common/mobile/lib/view/About';
+import EncodingController from '../../controller/settings/Encoding';
+import { EncodingList } from '../../view/settings/Encoding';
 
 const routes = [
     {
@@ -53,6 +55,14 @@ const routes = [
     {
         path: '/about/',
         component: About
+    },
+    {
+        path: '/encoding/',
+        component: EncodingController
+    },
+    {
+        path: '/encoding-list/',
+        component: EncodingList
     }
 ];