[DE mobile] start to implement context menu

apps/common/mobile/resources/less/common-ios.less

@@ -1,3 +1,5 @@
+@import "./ios/_contextmenu";
+@import "icons-ios";
 
 .device-ios {
     @blockTitleColor: #6d6d72;

apps/common/mobile/resources/less/icons-ios.less

@@ -0,0 +1,9 @@
+.device-ios {
+    i.icon {
+        &.icon-paste {
+            width: 24px;
+            height: 24px;
+            .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10 8H23V23H10V8Z" fill="white"/><path d="M5 0H14V5H5V0Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H12V11H21V12Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H12V15H21V16Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H12V19H21V20Z" fill="white"/></svg>');
+        }
+    }
+}

apps/documenteditor/mobile/src/controller/ContextMenu.jsx

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import { f7 } from 'framework7-react';
+
+import ContextMenuView from '../view/ContextMenu';
+
+class ContextMenuController extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            pos: [-10000,-10000],
+            show: false
+        };
+
+        this.onMenuClosed = this.onMenuClosed.bind(this);
+
+        Common.Notifications.on({
+            'engineCreated': api => {
+                api.asc_registerCallback('asc_onShowPopMenu', this.onApiShowPopMenu.bind(this));
+                api.asc_registerCallback('asc_onHidePopMenu', this.onApiHidePopMenu.bind(this));
+            },
+            'document:ready': () => {
+                this.$targetEl = $$('<div id="idx-context-menu-target" style="position:absolute;width:15px;height:15px;background-color:green;z-index:1;"></div>');
+                this.$targetEl.css({left: '-10000px', top: '-10000px'});
+
+                $$('#editor_sdk').append(this.$targetEl);
+            }
+        });
+
+        console.log('context menu controller created');
+    }
+
+    onApiShowPopMenu(x, y) {
+        console.log('show context menu ' + [x,y]);
+
+        this.$targetEl.css({left: `${x}px`, top: `${y}px`});
+        this.setState({
+            pos: [x,y],
+            show: true });
+    }
+
+    onApiHidePopMenu() {
+        // console.log('hide context menu');
+
+        if ( this.state.show ) {
+            f7.popover.close('#idx-context-menu-popover');
+        }
+    }
+
+    onMenuClosed() {
+        (async () => {
+            await 1 && this.setState(state => {
+                this.$targetEl.css({left: '-10000px', top: '-10000px'});
+                return ({pos: [-10000, -10000], show: false});
+            });
+        })();
+    }
+
+    componentWillUnmount() {
+        console.log('context menu controller will be unmounted');
+    }
+
+    componentDidMount() {
+        console.log('context menu controller did mount');
+    }
+
+    render() {
+        return (
+            !this.state.show ? null :
+                <ContextMenuView onMenuClosed={this.onMenuClosed} />)
+    }
+}
+
+export { ContextMenuController as ContextMenu };

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

@@ -7,6 +7,7 @@ import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
 import { Device } from '../../../../common/mobile/utils/device'
 import { Search, SearchSettings } from '../controller/Search';
+import { ContextMenu } from '../controller/ContextMenu';
 
 export default class MainPage extends Component {
     constructor(props) {
@@ -89,6 +90,7 @@ export default class MainPage extends Component {
                   !this.state.collaborationVisible ? null :
                       <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
               }
+              {/*<ContextMenu />*/}
           </Page>
       )
   }

apps/documenteditor/mobile/src/view/ContextMenu.jsx

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { Popover, List, ListItem, ListButton, Link, Icon } from 'framework7-react';
+import { f7 } from 'framework7-react';
+
+const buttons = [
+    {
+        text: 'Edit',
+        action: 'edit'
+    }, {
+        text: 'View',
+        action: 'view'
+    }, {
+        icon: 'icon-paste',
+        action: 'review'
+    }
+];
+
+class ContextMenuView extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        f7.popover.open('#idx-context-menu-popover', '#idx-context-menu-target');
+    }
+
+    render() {
+        return (
+            <Popover id="idx-context-menu-popover"
+                     className="document-menu"
+                     backdrop={false}
+                     closeByBackdropClick={false}
+                     closeByOutsideClick={false}
+                     onPopoverClosed={e => this.props.onMenuClosed()}
+            >
+                <List className="list-block">
+                    {buttons.map((b, index) =>
+                        !!b.text ?
+                            <ListButton className="asd" title={b.text} key={index} /> :
+                            <ListButton className="asd" title={b.text} key={index}>
+                                <Icon slot="media" icon={b.icon} />
+                            </ListButton>
+                    )}
+                </List>
+            </Popover>
+        )
+    }
+}
+
+export default ContextMenuView;