[PE mobile] Added the ability to insert images

apps/presentationeditor/mobile/locale/en.json

@@ -77,7 +77,17 @@
       "textSlide": "Slide",
       "textShape": "Shape",
       "textImage": "Image",
-      "textOther": "Other"
+      "textOther": "Other",
+      "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"
     },
     "Edit": {
       "textText": "Text",

apps/presentationeditor/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("View.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/presentationeditor/mobile/src/view/add/Add.jsx

@@ -7,11 +7,16 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import AddSlideController from "../../controller/add/AddSlide";
 import AddShapeController from "../../controller/add/AddShape";
-//import AddImageController from "../../controller/add/AddImage";
+import {AddImageController} from "../../controller/add/AddImage";
+import {PageImageLinkSettings} from "./AddImage";
 //import AddOtherController from "../../controller/add/AddOther";
 
 const routes = [
-
+    // Image
+    {
+        path: '/add-image-from-url/',
+        component: PageImageLinkSettings
+    }
 ];
 
 const AddLayoutNavbar = ({ tabs, inPopover }) => {
@@ -58,13 +63,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/presentationeditor/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('View.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('View.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};