[SSE mobile] Added the ability to insert image

apps/spreadsheeteditor/mobile/locale/en.json

@@ -22,7 +22,17 @@
             "sCatLookupAndReference": "Lookup and Reference",
             "sCatMathematic": "Math and trigonometry",
             "sCatStatistical": "Statistical",
-            "sCatTextAndData": "Text and data"
+            "sCatTextAndData": "Text and data",
+            "textImage": "Image",
+            "textInsertImage": "Insert Image",
+            "textLinkSettings": "Link Settings",
+            "textAddress": "Address",
+            "textImageURL": "Image URL",
+            "textPictureFromLibrary": "Picture from library",
+            "textPictureFromURL": "Picture from URL",
+            "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
+            "textEmptyImgUrl": "You need to specify image URL.",
+            "notcriticalErrorTitle": "Warning"
         },
         "Edit" : {
             "textSelectObjectToEdit": "Select object to edit",

apps/spreadsheeteditor/mobile/src/controller/add/AddImage.jsx

@@ -0,0 +1,60 @@
+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.asc_addImageDrawingObject(_value);
+            } else {
+                f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle);
+            }
+        } else {
+            f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle);
+        }
+    }
+
+    render () {
+        return (
+            <AddImage inTabs={this.props.inTabs}
+                      onInsertByFile={this.onInsertByFile}
+                      onInsertByUrl={this.onInsertByUrl}
+            />
+        )
+    }
+}
+
+const AddImageWithTranslation = withTranslation()(AddImageController);
+
+export {AddImageWithTranslation as AddImageController};

apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx

@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import { withTranslation} from 'react-i18next';
+
+import {AddOther} from '../../view/add/AddOther';
+
+class AddOtherController extends Component {
+    constructor (props) {
+        super(props);
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    render () {
+        return (
+            <AddOther
+            />
+        )
+    }
+}
+
+const AddOtherWithTranslation = withTranslation()(AddOtherController);
+
+export {AddOtherWithTranslation as AddOtherController};

apps/spreadsheeteditor/mobile/src/view/add/Add.jsx

@@ -9,7 +9,9 @@ import AddChartController from "../../controller/add/AddChart";
 import {AddFunctionController} from "../../controller/add/AddFunction";
 import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction";
 import AddShapeController from "../../controller/add/AddShape";
-//import {AddOtherController} from "../../controller/add/AddOther";
+import {AddOtherController} from "../../controller/add/AddOther";
+import {AddImageController} from "../../controller/add/AddImage";
+import {PageImageLinkSettings} from "./AddImage";
 
 const routes = [
     // Functions
@@ -20,6 +22,15 @@ const routes = [
     {
         path: '/add-function-info/',
         component: PageFunctionInfo
+    },
+    // Image
+    {
+        path: '/add-image/',
+        component: AddImageController
+    },
+    {
+        path: '/add-image-from-url/',
+        component: PageImageLinkSettings
     }
 ];
 
@@ -83,12 +94,22 @@ const AddTabs = props => {
             component: <AddShapeController/>
         });
     }
-    /*tabs.push({
+    if (showPanels && showPanels.indexOf('image') !== -1) {
-        caption: _t.textOther,
+        tabs.push({
-        id: 'add-other',
+            caption: _t.textImage,
-        icon: 'icon-add-other',
+            id: 'add-image',
-        component: <AddOtherController />
+            icon: 'icon-add-image',
-    });*/
+            component: <AddImageController inTabs={true}/>
+        });
+    }
+    if (!showPanels) {
+        tabs.push({
+            caption: _t.textOther,
+            id: 'add-other',
+            icon: 'icon-add-other',
+            component: <AddOtherController/>
+        });
+    }
     return (
         <View style={props.style} stackPages={true} routes={routes}>
             <Page pageContent={false}>

apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx

@@ -0,0 +1,61 @@
+import React, {Fragment, useState} from 'react';
+import {Page, Navbar, BlockTitle, List, ListItem, ListInput, ListButton, Icon} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const AddImageList = 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>
+    )
+};
+
+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 (
+        props.inTabs ?
+            <AddImageList onInsertByFile={props.onInsertByFile} onInsertByUrl={ props.onInsertByUrl} /> :
+            <Page>
+                <Navbar title={_t.textImage} backLink={_t.textBack}/>
+                <AddImageList onInsertByFile={props.onInsertByFile} onInsertByUrl={ props.onInsertByUrl} />
+            </Page>
+        )
+};
+
+export {AddImage, PageLinkSettings as PageImageLinkSettings};

apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {List, ListItem, Icon} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const AddOther = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Add', {returnObjects: true});
+    return (
+        <List>
+            <ListItem title={_t.textImage} link={'/add-image/'}>
+                <Icon slot="media" icon="icon-insimage"></Icon>
+            </ListItem>
+        </List>
+    )
+};
+
+export {AddOther};