[DE mobile] Added the ability to add image

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"
   }
 }

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};

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',

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};