[SE mobile] Added Image Settings

apps/spreadsheeteditor/mobile/locale/en.json

@@ -35,7 +35,21 @@
             "textBringToForeground": "Bring to Foreground",
             "textSendToBackground": "Send to Background",
             "textMoveForward": "Move Forward",
-            "textMoveBackward": "Move Backward"
+            "textMoveBackward": "Move Backward",
+            "textImage": "Image", 
+            "textFromLibrary": "Picture from Library",
+            "textFromURL": "Picture from URL",
+            "textLinkSettings": "Link Settings",
+            "textAddress": "Address",
+            "textImageURL": "Image URL",
+            "textReplaceImage": "Replace Image",
+            "textActualSize": "Actual Size",
+            "textRemoveImage": "Remove Image",
+            "textEmptyImgUrl": "You need to specify image URL.",
+            "textNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
+            "notcriticalErrorTitle": "Warning",
+            "textPictureFromLibrary": "Picture from Library",
+            "textPictureFromURL": "Picture from URL"
         }
     },
     "Common": {

apps/spreadsheeteditor/mobile/src/controller/edit/EditImage.jsx

@@ -0,0 +1,91 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+
+import { EditImage } from '../../view/edit/EditImage';
+
+class EditImageController extends Component {
+    constructor (props) {
+        super(props);
+        this.onRemoveImage = this.onRemoveImage.bind(this);
+        this.onReplaceByFile = this.onReplaceByFile.bind(this);
+        this.onReplaceByUrl = this.onReplaceByUrl.bind(this);
+    }
+
+    onReorder(type) {
+        const api = Common.EditorApi.get();
+        let ascType;
+
+        switch(type) {
+            case 'all-up':
+                ascType = Asc.c_oAscDrawingLayerType.BringToFront;
+                break;
+            case 'all-down':
+                ascType = Asc.c_oAscDrawingLayerType.SendToBack;
+                break;
+            case 'move-up':
+                ascType = Asc.c_oAscDrawingLayerType.BringForward;
+                break;
+            case 'move-down':
+                ascType = Asc.c_oAscDrawingLayerType.SendBackward;
+                break;
+        }
+
+        api.asc_setSelectedDrawingObjectLayer(ascType);
+    }
+
+    closeModal() {
+        if (Device.phone) {
+            f7.sheet.close('#edit-sheet', true);
+        } else {
+            f7.popover.close('#edit-popover');
+        }
+    };
+
+    onDefaultSize() {
+        const api = Common.EditorApi.get();
+        let imgsize = api.asc_getOriginalImageSize(),
+            properties = new Asc.asc_CImgProperty();
+
+        properties.put_Width(imgsize.get_ImageWidth());
+        properties.put_Height(imgsize.get_ImageHeight());
+        properties.put_ResetCrop(true);
+        api.asc_setGraphicObjectProps(properties);
+    }
+
+    onRemoveImage() {
+        const api = Common.EditorApi.get();
+        api.asc_Remove();
+        this.closeModal();
+    }
+
+    onReplaceByFile() {
+        const api = Common.EditorApi.get();
+        api.asc_changeImageFromFile();
+        this.closeModal();
+    }
+
+    onReplaceByUrl(value) {
+        const api = Common.EditorApi.get();
+        const image = new Asc.asc_CImgProperty();
+        image.asc_putImageUrl(value);
+        api.asc_setGraphicObjectProps(image);
+        this.closeModal();
+    }
+
+
+    render () {
+        return (
+            <EditImage
+                onReorder={this.onReorder}
+                onRemoveImage={this.onRemoveImage}
+                onReplaceByFile={this.onReplaceByFile}
+                onDefaultSize={this.onDefaultSize}
+                onReplaceByUrl={this.onReplaceByUrl}
+            />
+        )
+    }
+}
+
+export default EditImageController;

apps/spreadsheeteditor/mobile/src/store/focusObjects.js

@@ -152,4 +152,21 @@ export class storeFocusObjects {
             return undefined;
         }
     }
+
+    @computed get imageObject() {
+        const images = [];
+        console.log(this._focusObjects);
+        for (let object of this._focusObjects) {
+            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
+                console.log(object);
+                images.push(object);     
+            }
+        }
+        if (images.length > 0) {
+            const object = images[images.length - 1]; // get top
+            return object.get_ObjectValue();
+        } else {
+            return undefined;
+        }
+    }
 }

apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx

@@ -7,8 +7,10 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import EditCellController from "../../controller/edit/EditCell";
 import EditShapeController from "../../controller/edit/EditShape";
+import EditImageController from "../../controller/edit/EditImage";
 
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
+import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
 
 const routes = [
 
@@ -41,7 +43,23 @@ const routes = [
     {
         path: '/edit-shape-custom-fill-color/',
         component: PageShapeCustomFillColor
+    },
+
+    // Image
+
+    {
+        path: '/edit-replace-image/',
+        component: PageImageReplace
+    },
+    {
+        path: '/edit-reorder-image/',
+        component: PageImageReorder
+    },
+    {
+        path: '/edit-image-link/',
+        component: PageLinkSettings
     }
+
 ];
 
 const EmptyEditLayout = () => {
@@ -124,6 +142,13 @@ const EditTabs = props => {
                 component: <EditShapeController />
             })
         }
+        if (settings.indexOf('image') > -1) {
+            editors.push({
+                caption: _t.textImage,
+                id: 'edit-image',
+                component: <EditImageController />
+            })
+        }
     }
 
     return (

apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx

@@ -0,0 +1,124 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListInput, ListButton} from 'framework7-react';
+import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+const EditImage = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    return (
+        <Fragment>
+            <List>
+                <ListItem title={_t.textReplace} link="/edit-replace-image/" routeProps={{
+                    onReplaceByFile: props.onReplaceByFile,
+                    onReplaceByUrl: props.onReplaceByUrl
+                }}></ListItem>
+                <ListItem title={_t.textReorder} link="/edit-reorder-image/" routeProps={{
+                    onReorder: props.onReorder
+                }}></ListItem>
+            </List>
+            <List className="buttons-list">
+                <ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem>
+                <ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem>
+            </List>
+        </Fragment>
+    )
+};
+
+const PageReorder = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    return (
+        <Page>
+            <Navbar title={_t.textReorder} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-foreground"></Icon>
+                </ListItem>
+                <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-background"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-forward"></Icon>
+                </ListItem>
+                <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
+                    <Icon slot="media" icon="icon-move-backward"></Icon>
+                </ListItem>
+            </List>
+        </Page>
+    )
+};
+
+
+const PageReplace = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    return (
+        <Page className="images">
+            <Navbar title={_t.textReplace} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
+                    <Icon slot="media" icon="icon-image-library"></Icon>
+                </ListItem>
+                <ListItem title={_t.textPictureFromURL} link='/edit-image-link/' routeProps={{
+                    onReplaceByUrl: props.onReplaceByUrl
+                }}>
+                    <Icon slot="media" icon="icon-link"></Icon>
+                </ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const PageLinkSettings = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const [stateValue, setValue] = useState('');
+
+    const onReplace = () => {
+        if (stateValue.trim().length > 0) {
+            if ((/((^https?)|(^ftp)):\/\/.+/i.test(stateValue))) {
+                props.onReplaceByUrl(stateValue.trim());
+            } else {
+                f7.dialog.alert(_t.textNotUrl, _t.notcriticalErrorTitle);
+            }
+        } else {
+            f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle);
+        }
+    };
+    return (
+        <Page>
+            <Navbar title={_t.textLinkSettings} backLink={_t.textBack} />
+            <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.textReplaceImage} onClick={() => {onReplace()}}></ListButton>
+            </List>
+        </Page>
+    )
+};
+
+const EditImageContainer = inject("storeFocusObjects")(observer(EditImage));
+const PageReplaceContainer = inject("storeFocusObjects")(observer(PageReplace));
+const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
+const PageLinkSettingsContainer = inject("storeFocusObjects")(observer(PageLinkSettings));
+
+export {
+    EditImageContainer as EditImage,
+    PageReplaceContainer as PageImageReplace,
+    PageReorderContainer as PageImageReorder,
+    PageLinkSettingsContainer as PageLinkSettings
+}