From 8b923f7965a1e8cc09af92d09664496192e4c2db Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 21 Jan 2021 17:56:45 +0300
Subject: [PATCH] [DE mobile] Added the ability to add image

---
 apps/documenteditor/mobile/locale/en.json     | 12 +++-
 .../mobile/src/controller/add/AddImage.jsx    | 59 +++++++++++++++++++
 .../mobile/src/view/add/Add.jsx               | 15 +++--
 .../mobile/src/view/add/AddImage.jsx          | 49 +++++++++++++++
 4 files changed, 130 insertions(+), 5 deletions(-)
 create mode 100644 apps/documenteditor/mobile/src/controller/add/AddImage.jsx
 create mode 100644 apps/documenteditor/mobile/src/view/add/AddImage.jsx

diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 9f0e76085..9bd3e1db8 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -227,6 +227,16 @@
     "textTableSize": "Table Size",
     "textColumns": "Columns",
     "textRows": "Rows",
-    "textCancel": "Cancel"
+    "textCancel": "Cancel",
+    "textPictureFromLibrary": "Picture from Library",
+    "textPictureFromURL": "Picture from URL",
+    "textLinkSettings": "LinkSettings",
+    "textBack": "Back",
+    "textEmptyImgUrl": "You need to specify image URL.",
+    "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
+    "notcriticalErrorTitle": "Warning",
+    "textAddress": "Address",
+    "textImageURL": "Image URL",
+    "textInsertImage": "Insert Image"
   }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/controller/add/AddImage.jsx b/apps/documenteditor/mobile/src/controller/add/AddImage.jsx
new file mode 100644
index 000000000..c3a10eaff
--- /dev/null
+++ b/apps/documenteditor/mobile/src/controller/add/AddImage.jsx
@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import { withTranslation} from 'react-i18next';
+
+import {AddImage} from '../../view/add/AddImage';
+
+class AddImageController extends Component {
+    constructor (props) {
+        super(props);
+        this.onInsertByFile = this.onInsertByFile.bind(this);
+        this.onInsertByUrl = this.onInsertByUrl.bind(this);
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    onInsertByFile () {
+        const api = Common.EditorApi.get();
+        api.asc_addImage();
+        this.closeModal();
+    }
+
+    onInsertByUrl (value) {
+        const { t } = this.props;
+        const _t = t("Add", { returnObjects: true });
+
+        const _value = value.replace(/ /g, '');
+
+        if (_value) {
+            if ((/((^https?)|(^ftp)):\/\/.+/i.test(_value))) {
+                this.closeModal();
+                const api = Common.EditorApi.get();
+                api.AddImageUrl(_value);
+            } else {
+                f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle);
+            }
+        } else {
+                f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle);
+        }
+    }
+
+    render () {
+        return (
+            <AddImage onInsertByFile={this.onInsertByFile}
+                      onInsertByUrl={this.onInsertByUrl}
+            />
+        )
+    }
+}
+
+const AddImageWithTranslation = withTranslation()(AddImageController);
+
+export {AddImageWithTranslation as AddImageController};
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx
index eeb7ab866..e34973e09 100644
--- a/apps/documenteditor/mobile/src/view/add/Add.jsx
+++ b/apps/documenteditor/mobile/src/view/add/Add.jsx
@@ -7,11 +7,18 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import {AddTableController} from "../../controller/add/AddTable";
 import AddShapeController from "../../controller/add/AddShape";
-//import AddImageController from "../../controller/add/AddImage";
+import {AddImageController} from "../../controller/add/AddImage";
+import {PageTextFonts} from "../edit/EditText";
 //import AddOtherController from "../../controller/add/AddOther";
 
-const routes = [
+import {PageImageLinkSettings} from "../add/AddImage";
 
+const routes = [
+    // Image
+    {
+        path: '/add-image-from-url/',
+        component: PageImageLinkSettings,
+    },
 ];
 
 const AddLayoutNavbar = ({ tabs, inPopover }) => {
@@ -58,13 +65,13 @@ const AddTabs = props => {
         icon: 'icon-add-shape',
         component: <AddShapeController />
     });
-    /*tabs.push({
+    tabs.push({
         caption: _t.textImage,
         id: 'add-image',
         icon: 'icon-add-image',
         component: <AddImageController />
     });
-    tabs.push({
+    /*tabs.push({
         caption: _t.textOther,
         id: 'add-other',
         icon: 'icon-add-other',
diff --git a/apps/documenteditor/mobile/src/view/add/AddImage.jsx b/apps/documenteditor/mobile/src/view/add/AddImage.jsx
new file mode 100644
index 000000000..066f03c8a
--- /dev/null
+++ b/apps/documenteditor/mobile/src/view/add/AddImage.jsx
@@ -0,0 +1,49 @@
+import React, {useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const PageLinkSettings = props => {
+    const { t } = useTranslation();
+    const _t = t('Add', {returnObjects: true});
+    const [stateValue, setValue] = useState('');
+    return (
+        <Page>
+            <Navbar title={_t.textLinkSettings} backLink={_t.textBack}></Navbar>
+            <BlockTitle>{_t.textAddress}</BlockTitle>
+            <List>
+                <ListInput
+                    type='text'
+                    placeholder={_t.textImageURL}
+                    value={stateValue}
+                    onChange={(event) => {setValue(event.target.value)}}
+                >
+                </ListInput>
+            </List>
+            <List>
+                <ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
+                            title={_t.textInsertImage}
+                            onClick={() => {props.onInsertByUrl(stateValue)}}></ListButton>
+            </List>
+        </Page>
+    )
+};
+
+const AddImage = props => {
+    const { t } = useTranslation();
+    const _t = t('Add', {returnObjects: true});
+    return (
+        <List>
+            <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onInsertByFile()}}>
+                <Icon slot="media" icon="icon-image-library"></Icon>
+            </ListItem>
+            <ListItem title={_t.textPictureFromURL} link={'/add-image-from-url/'} routeProps={{
+                onInsertByUrl: props.onInsertByUrl
+            }}>
+                <Icon slot="media" icon="icon-link"></Icon>
+            </ListItem>
+        </List>
+    )
+};
+
+export {AddImage, PageLinkSettings as PageImageLinkSettings};
\ No newline at end of file