[PE mobile] Add edit popup

apps/presentationeditor/mobile/locale/en.json

@@ -55,6 +55,15 @@
       "textShape": "Shape",
       "textImage": "Image",
       "textOther": "Other"
+    },
+    "Edit": {
+      "textText": "Text",
+      "textSlide": "Slide",
+      "textTable": "Table",
+      "textShape": "Shape",
+      "textImage": "Image",
+      "textChart": "Chart",
+      "textHyperlink": "Hyperlink"
     }
   }
 }

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -4,6 +4,7 @@ import { inject } from "mobx-react";
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
+@inject("storeFocusObjects")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -170,6 +171,11 @@ class MainController extends Component {
         // me.api.asc_registerCallback('asc_onPrintUrl',                   _.bind(me.onPrintUrl, me));
         // me.api.asc_registerCallback('asc_onThumbnailsShow',             _.bind(me.onThumbnailsShow, me));
         // me.api.asc_registerCallback('asc_onMeta',                       _.bind(me.onMeta, me));
+
+        const storeFocusObjects = this.props.storeFocusObjects;
+        this.api.asc_registerCallback('asc_onFocusObject', objects => {
+            storeFocusObjects.resetFocusObjects(objects);
+        });
     }
 
     _onDocumentContentReady() {

apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+
+import { EditSlide } from '../../view/edit/EditSlide';
+
+class EditSlideController extends Component {
+    constructor (props) {
+        super(props);
+    }
+    render () {
+        return (
+            <EditSlide
+            />
+        )
+    }
+}
+
+export default EditSlideController;

apps/presentationeditor/mobile/src/controller/edit/EditText.jsx

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+
+import { EditText } from '../../view/edit/EditText';
+
+class EditTextController extends Component {
+    constructor (props) {
+        super(props);
+    }
+    render () {
+        return (
+            <EditText
+            />
+        )
+    }
+}
+
+export default EditTextController;

apps/presentationeditor/mobile/src/page/main.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
 
-// import EditOptions from '../view/edit/Edit';
+import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
@@ -64,10 +64,10 @@ export default class MainPage extends Component {
             </Navbar>
             {/* Page content */}
             <View id="editor_sdk" />
-            {/*{*/}
+            {
-                {/*!this.state.editOptionsVisible ? null :*/}
+                !this.state.editOptionsVisible ? null :
-                    {/*<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />*/}
+                    <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
-            {/*}*/}
+            }
             {
                 !this.state.addOptionsVisible ? null :
                     <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} />

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

@@ -0,0 +1,55 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeFocusObjects {
+    @observable _focusObjects = [];
+
+    @action resetFocusObjects(objects) {
+        this._focusObjects = objects;
+    }
+
+    @computed get settings() {
+        const _settings = [];
+        let no_text = true;
+        for (let object of this._focusObjects) {
+            const type = object.get_ObjectType(),
+                objectValue = object.get_ObjectValue();
+            if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
+                if ( !objectValue.get_Locked() )
+                    no_text = false;
+            } else if (Asc.c_oAscTypeSelectElement.Table == type) {
+                if ( !objectValue.get_Locked() ) {
+                    _settings.push('table');
+                    no_text = false;
+                }
+            } else if (Asc.c_oAscTypeSelectElement.Slide == type) {
+                if ( !(objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming() ))
+                    _settings.push('slide');
+            } else if (Asc.c_oAscTypeSelectElement.Image == type) {
+                if ( !objectValue.get_Locked() )
+                    _settings.push('image');
+            } else if (Asc.c_oAscTypeSelectElement.Chart == type) {
+                if ( !objectValue.get_Locked() )
+                    _settings.push('chart');
+            } else if (Asc.c_oAscTypeSelectElement.Shape == type && !objectValue.get_FromChart()) {
+                if ( !objectValue.get_Locked() ) {
+                    _settings.push('shape');
+                    no_text = false;
+                }
+            } else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
+                _settings.push('hyperlink');
+            }
+        }
+        if (!no_text && _settings.indexOf('image') < 0)
+            _settings.unshift('text');
+        const resultArr = _settings.filter((value, index, self) => self.indexOf(value) === index); //get uniq array
+        // Exclude hyperlink if text is locked
+        if (resultArr.indexOf('hyperlink') > -1 && resultArr.indexOf('text') < 0) {
+            resultArr.splice(resultArr.indexOf('hyperlink'), 1);
+        }
+        // Exclude shapes if chart exist
+        if (resultArr.indexOf('chart') > -1) {
+            resultArr.splice(resultArr.indexOf('shape'), 1);
+        }
+        return resultArr;
+    }
+}

apps/presentationeditor/mobile/src/store/mainStore.js

@@ -1,6 +1,6 @@
 
 // import {storeDocumentSettings} from './documentSettings';
-// import {storeFocusObjects} from "./focusObjects";
+import {storeFocusObjects} from "./focusObjects";
 import {storeUsers} from '../../../../common/mobile/lib/store/users';
 import {storeApplicationSettings} from './applicationSettings';
 // import {storeTextSettings} from "./textSettings";
@@ -11,7 +11,7 @@ import {storeApplicationSettings} from './applicationSettings';
 // import {storeChartSettings} from "./chartSettings";
 
 export const stores = {
-    // storeFocusObjects: new storeFocusObjects(),
+    storeFocusObjects: new storeFocusObjects(),
     // storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
     storeApplicationSettings: new storeApplicationSettings()

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

@@ -0,0 +1,183 @@
+import React, {useState, useEffect} from 'react';
+import {observer, inject} from "mobx-react";
+import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import EditSlideController from "../../controller/edit/EditSlide";
+import EditTextController from "../../controller/edit/EditText";
+//import EditShapeController from "../../controller/edit/EditShape";
+//import EditImageController from "../../controller/edit/EditImage";
+//import EditTableController from "../../controller/edit/EditTable";
+//import EditChartController from "../../controller/edit/EditChart";
+//import EditLinkController from "../../controller/edit/EditLink";
+
+const routes = [
+
+];
+
+const EmptyEditLayout = () => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    return (
+        <Page>
+            <div className="content-block inset">
+                <div className="content-block-inner">
+                    <p>{_t.textSelectObjectToEdit}</p>
+                </div>
+            </div>
+        </Page>
+    )
+};
+
+const EditLayoutNavbar = ({ editors, inPopover }) => {
+    const isAndroid = Device.android;
+    return (
+        <Navbar>
+            {
+                editors.length > 1 ?
+                    <div className='tab-buttons tabbar'>
+                        {editors.map((item, index) => <Link key={"pe-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
+                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
+                    </div> :
+                    <NavTitle>{ editors[0].caption }</NavTitle>
+            }
+            { !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
+        </Navbar>
+    )
+};
+
+const EditLayoutContent = ({ editors }) => {
+    if (editors.length > 1) {
+        return (
+            <Tabs animated>
+                {editors.map((item, index) =>
+                    <Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                        {item.component}
+                    </Tab>
+                )}
+            </Tabs>
+        )
+    } else {
+        return (
+            <Page>
+                {editors[0].component}
+            </Page>
+        )
+    }
+};
+
+const EditTabs = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    const settings = props.storeFocusObjects.settings;
+    let editors = [];
+    if (settings.length < 1) {
+        editors.push({
+            caption: _t.textSettings,
+            component: <EmptyEditLayout />
+        });
+    } else {
+        if (settings.indexOf('slide') > -1) {
+            editors.push({
+                caption: _t.textSlide,
+                id: 'edit-slide',
+                component: <EditSlideController />
+            })
+        }
+        if (settings.indexOf('text') > -1) {
+            editors.push({
+                caption: _t.textText,
+                id: 'edit-text',
+                component: <EditTextController />
+            })
+        }
+        /*if (settings.indexOf('table') > -1) {
+            editors.push({
+                caption: _t.textTable,
+                id: 'edit-table',
+                component: <EditTableController />
+            })
+        }
+        if (settings.indexOf('shape') > -1) {
+            editors.push({
+                caption: _t.textShape,
+                id: 'edit-shape',
+                component: <EditShapeController />
+            })
+        }
+        if (settings.indexOf('image') > -1) {
+            editors.push({
+                caption: _t.textImage,
+                id: 'edit-image',
+                component: <EditImageController />
+            })
+        }
+        if (settings.indexOf('chart') > -1) {
+            editors.push({
+                caption: _t.textChart,
+                id: 'edit-chart',
+                component: <EditChartController />
+            })
+        }
+        if (settings.indexOf('hyperlink') > -1) {
+            editors.push({
+                caption: _t.textHyperlink,
+                id: 'edit-link',
+                component: <EditLinkController />
+            })
+        }*/
+    }
+
+    return (
+        <View style={props.style} stackPages={true} routes={routes}>
+            <Page pageContent={false}>
+                <EditLayoutNavbar editors={editors} inPopover={props.inPopover}/>
+                <EditLayoutContent editors={editors} />
+            </Page>
+        </View>
+    )
+};
+
+const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs));
+
+const EditView = props => {
+    const onOptionClick = (page) => {
+        $f7.views.current.router.navigate(page);
+    };
+    const show_popover = props.usePopover;
+    return (
+        show_popover ?
+            <Popover id="edit-popover" className="popover__titled" onPopoverClosed={() => props.onClosed()}>
+                <EditTabsContainer inPopover={true} onOptionClick={onOptionClick} style={{height: '410px'}} />
+            </Popover> :
+            <Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}>
+                <EditTabsContainer onOptionClick={onOptionClick} />
+            </Sheet>
+    )
+};
+
+const EditOptions = props => {
+    useEffect(() => {
+        if ( Device.phone )
+            f7.sheet.open('#edit-sheet');
+        else f7.popover.open('#edit-popover', '#btn-edit');
+
+        return () => {
+            // component will unmount
+        }
+    });
+
+    const onviewclosed = () => {
+        if ( props.onclosed )
+            props.onclosed();
+    };
+
+    return (
+        <EditView usePopover={!Device.phone} onClosed={onviewclosed} />
+    )
+};
+
+export default EditOptions;

apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx

@@ -0,0 +1,15 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+const EditSlide = props => {
+    return (
+        <Fragment>
+
+        </Fragment>
+    )
+};
+
+export {EditSlide};

apps/presentationeditor/mobile/src/view/edit/EditText.jsx

@@ -0,0 +1,15 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+const EditText = props => {
+    return (
+        <Fragment>
+
+        </Fragment>
+    )
+};
+
+export {EditText};