[DE mobile] Added modal window of choosing txt options when download document

apps/common/mobile/resources/less/common-ios.less

@@ -19,6 +19,8 @@
 
     --f7-list-button-text-color: @themeColor;
 
+    --f7-dialog-button-text-color: @themeColor;
+
     // Main Toolbar
     #editor-navbar.navbar .right a + a,
     #editor-navbar.navbar .left a + a {
@@ -293,4 +295,8 @@
             background: @white;
         }
     }
+
+    .dialog {
+        background-color: rgba(var(--f7-dialog-bg-color-rgb), 1);
+    }
 }

apps/common/mobile/resources/less/common-material.less

@@ -15,6 +15,8 @@
     --f7-input-focused-border-color: @themeColor;
     --f7-label-focused-text-color: @themeColor;
 
+    --f7-dialog-button-text-color: @themeColor;
+
     // Buttons
     .segmented {
         .decrement, .increment {

apps/common/mobile/resources/less/common.less

@@ -38,3 +38,9 @@
         text-overflow: clip;
     }
 }
+
+.content-block {
+    margin: 32px 0;
+    padding: 0 16px;
+    box-sizing: border-box;
+}

apps/documenteditor/mobile/locale/en.json

@@ -1,5 +1,6 @@
 {
   "Settings": {
+    "textCancel": "Cancel",
     "textSettings": "Settings",
     "textDone": "Done",
     "textFind": "Find",
@@ -58,7 +59,13 @@
     "textTitle": "Title",
     "textSubject": "Subject",
     "textComment": "Comment",
-    "textCreated": "Created"
+    "textCreated": "Created",
+    "advTxtOptions": "Choose TXT Options",
+    "textEncoding": "Encoding",
+    "advDRMPassword": "Password",
+    "closeButtonText": "Close File",
+    "advDRMOptions": "Protected File",
+    "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset"
   },
   "Collaboration": {
     "textEditUser": "Users who are editing the file:"

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -1,7 +1,9 @@
 
-import React, {Component} from 'react'
+import React, {Component} from 'react';
 import {inject} from "mobx-react";
-import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
+import { withTranslation } from 'react-i18next';
+import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx';
+import { onAdvancedOptions } from './settings/Download.jsx';
 
 @inject("storeAppOptions", "storeDocumentSettings", "storeFocusObjects", "storeTextSettings", "storeParagraphSettings", "storeTableSettings", "storeDocumentInfo")
 class MainController extends Component {
@@ -280,11 +282,22 @@ class MainController extends Component {
             storeDocumentSettings.addSchemes(arr);
         });
 
+        // Downloaded Advanced Options
+        this.api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions, mode, formatOptions) => {
+            const {t} = this.props;
+            const _t = t("Settings", { returnObjects: true });
+            onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this.props.storeAppOptions.canRequestClose);
+        });
     }
 
     render() {
         return <CollaborationController />
     }
+
+    componentDidMount() {
+        this.initSdk();
+    }
 }
 
-export default MainController;
+const translated = withTranslation()(MainController);
+export {translated as MainController};

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

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import Download from "../../view/settings/Download";
 import { Device } from '../../../../../common/mobile/utils/device';
 import { f7 } from 'framework7-react';
-import { withTranslation } from 'react-i18next';
+import { withTranslation, useTranslation } from 'react-i18next';
 
 class DownloadController extends Component {
     constructor(props) {
@@ -21,15 +21,16 @@ class DownloadController extends Component {
     onSaveFormat(format) {
         const api = Common.EditorApi.get();
         const { t } = this.props;
+        const _t = t("Settings", { returnObjects: true });
 
         if(format) {
             if (format == Asc.c_oAscFileType.TXT || format == Asc.c_oAscFileType.RTF) {
                 f7.dialog.confirm(
-                    (format === Asc.c_oAscFileType.TXT) ? t("Settings.textDownloadTxt") : t("Settings.textDownloadRtf"),
+                    (format === Asc.c_oAscFileType.TXT) ? _t.textDownloadTxt : _t.textDownloadRtf,
-                    t("Settings.notcriticalErrorTitle"),
+                    _t.notcriticalErrorTitle,
                     function () {
                         if (format == Asc.c_oAscFileType.TXT) {
-                            // ToDo: choose txt options
+                            onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.TXT, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t);
                         }
                         else {
                             api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
@@ -51,6 +52,99 @@ class DownloadController extends Component {
         );
     }
 }
+const DownloadWithTranslation = withTranslation()(DownloadController);
+
+const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, canRequestClose) => {
+    const api = Common.EditorApi.get();
+    if (type == Asc.c_oAscAdvancedOptionsID.TXT) {
+        let picker;
+        const pages = [];
+        const pagesName = [];
+        for (let page of advOptions.asc_getCodePages()) {
+            pages.push(page.asc_getCodePage());
+            pagesName.push(page.asc_getCodePageName());
+        }
+        //me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument);
+        const buttons = [];
+        if (mode === 2) {
+            buttons.push({
+                text: _t.textCancel
+            });
+        }
+        buttons.push({
+            text: 'OK',
+            bold: true,
+            onClick: function() {
+                const encoding = picker.value;
+                if (mode==2) {
+                    formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding));
+                    api.asc_DownloadAs(formatOptions);
+                } else {
+                    api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding));
+                }
+                //if (!me._isDocReady) {
+                        //me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+                //}
+            }
+        });
+        const dialog = f7.dialog.create({
+            title: _t.advTxtOptions,
+            text: '',
+            content:
+                '<div class="content-block">' +
+                '<div class="row">' +
+                '<div class="col-100">' + _t.textEncoding + '</div>' +
+                '</div>' +
+                '<div id="txt-encoding"></div>' +
+                '</div>',
+            buttons: buttons
+        }).open();
+        dialog.on('opened', () => {
+            picker = f7.picker.create({
+                containerEl: document.getElementById('txt-encoding'),
+                cols: [
+                    {
+                        values: pages,
+                        displayValues: pagesName
+                    }
+                ],
+                toolbar: false,
+                rotateEffect: true,
+                value: [advOptions.asc_getRecommendedSettings().asc_getCodePage()],
+            });
+        });
+    } else if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
+        //me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument);
+        const buttons = [{
+            text: 'OK',
+            bold: true,
+            onClick: function () {
+                const password = document.getElementById('modal-password').value;
+                api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password));
+                //if (!me._isDocReady) {
+                    //me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
+                //}
+            }
+        }];
+        if (canRequestClose)
+            buttons.push({
+                text: _t.closeButtonText,
+                onClick: function () {
+                    Common.Gateway.requestClose();
+                }
+            });
+        f7.dialog.create({
+            title: _t.advDRMOptions,
+            text: _t.txtProtected,
+            content:
+                '<div class="input-field"><input type="password" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>',
+            buttons: buttons
+        }).open();
+    }
+};
 
 
-export default withTranslation()(DownloadController);
+export {
+    DownloadWithTranslation as DownloadController,
+    onAdvancedOptions
+};

apps/documenteditor/mobile/src/view/app.jsx

@@ -7,7 +7,7 @@ import routes from '../js/routes';
 import '../../../../common/Gateway.js';
 import '../../../../common/main/lib/util/utils.js';
 import Notifications from '../../../../common/mobile/utils/notifications.js'
-import MainController from '../controller/Main';
+import {MainController} from '../controller/Main';
 import {Device} from '../../../../common/mobile/utils/device'
 
 export default class extends React.Component {
@@ -59,7 +59,7 @@ export default class extends React.Component {
 
         {/* Your main view, should have "view-main" class */}
         <View main className="safe-areas" url="/" />
-          <MainController ref="mainController" />
+          <MainController />
 
         {/* Popup */}
         <Popup id="my-popup">
@@ -85,7 +85,5 @@ export default class extends React.Component {
         // Call F7 APIs here
             Device.initDom();
         });
-
-        this.refs.mainController.initSdk();
     }
 }

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

@@ -7,7 +7,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import DocumentSettingsController from "../../controller/settings/DocumentSettings";
 import DocumentInfoController from "../../controller/settings/DocumentInfo";
-import DownloadController from "../../controller/settings/Download";
+import { DownloadController } from "../../controller/settings/Download";
 import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
 import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings";
 import { MacrosSettings } from "./ApplicationSettings";