Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs

apps/common/mobile/lib/controller/ContextMenu.jsx

@@ -109,15 +109,17 @@ class ContextMenuController extends Component {
                 extraItems: this.initExtraItems()
             });
 
-            this.$targetEl.css({left: `${x}px`, top: `${y}px`});
+            if ( this.state.items.length > 0 ) {
-            const popover = f7.popover.open(idContextMenuElement, idCntextMenuTargetElement);
+                this.$targetEl.css({left: `${x}px`, top: `${y}px`});
+                const popover = f7.popover.open(idContextMenuElement, idCntextMenuTargetElement);
 
-            if ( Device.android )
+                if (Device.android)
-                this.offsetPopoverTop(popover);
+                    this.offsetPopoverTop(popover);
 
-            this.setState(state => {
+                this.setState(state => {
-                return {opened: true}
+                    return {opened: true}
-            });
+                });
+            }
         }
     }
 

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

@@ -7,6 +7,7 @@ import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
 import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu';
 import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu';
 import { Device } from '../../../../common/mobile/utils/device';
+import EditorUIController from '../lib/patch';
 
 @inject ( stores => ({
     isEdit: stores.storeAppOptions.isEdit,
@@ -64,28 +65,25 @@ class ContextMenu extends ContextMenuController {
     onMenuItemClick(action) {
         super.onMenuItemClick(action);
 
+        if ( EditorUIController.ContextMenu.handleMenuItemClick(this, action) )
+            return;
+
         const api = Common.EditorApi.get();
         switch (action) {
             case 'cut':
-                if (!api.Cut() && !LocalStorage.getBool("de-hide-copy-cut-paste-warning")) {
+                if ( !LocalStorage.getBool("de-hide-copy-cut-paste-warning") )
                     this.showCopyCutPasteModal();
-                }
+
                 break;
             case 'copy':
-                if (!api.Copy() && !LocalStorage.getBool("de-hide-copy-cut-paste-warning")) {
+                if ( !LocalStorage.getBool("de-hide-copy-cut-paste-warning") )
                     this.showCopyCutPasteModal();
-                }
+
                 break;
             case 'paste':
-                if (!api.Paste() && !LocalStorage.getBool("de-hide-copy-cut-paste-warning")) {
+                if ( !LocalStorage.getBool("de-hide-copy-cut-paste-warning") )
                     this.showCopyCutPasteModal();
-                }
+
-                break;
-            case 'addcomment':
-                Common.Notifications.trigger('addcomment');
-                break;
-            case 'viewcomment':
-                Common.Notifications.trigger('viewcomment');
                 break;
             case 'review':
                 setTimeout(() => {
@@ -97,18 +95,9 @@ class ContextMenu extends ContextMenuController {
                     this.props.openOptions('coauth', 'cm-review-change');
                 }, 400);
                 break;
-            case 'merge':
-                api.MergeCells();
-                break;
             case 'split':
                 this.showSplitModal();
                 break;
-            case 'delete':
-                api.asc_Remove();
-                break;
-            case 'deletetable':
-                api.remTable();
-                break;
             case 'edit':
                 setTimeout(() => {
                     this.props.openOptions('edit');
@@ -117,17 +106,7 @@ class ContextMenu extends ContextMenuController {
             case 'addlink':
                 setTimeout(() => {
                     this.props.openOptions('add', 'link');
-                }, 400)
+                }, 400);
-                break;
-            case 'openlink':
-                const stack = Common.EditorApi.get().getSelectedElements();
-                let value;
-                stack.forEach((item) => {
-                    if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                        value = item.get_ObjectValue().get_Value();
-                    }
-                });
-                value && this.openLink(value);
                 break;
         }
 
@@ -164,14 +143,13 @@ class ContextMenu extends ContextMenuController {
         const dialog = f7.dialog.create({
             title: _t.menuSplit,
             text: '',
-            content:
+            content: `<div class="content-block">
-                '<div class="content-block">' +
+                        <div class="row">
-                '<div class="row">' +
+                            <div class="col-50">${_t.textColumns}</div>
-                '<div class="col-50">' + _t.textColumns + '</div>' +
+                            <div class="col-50">${_t.textRows}</div>
-                '<div class="col-50">' + _t.textRows + '</div>' +
+                        </div>
-                '</div>' +
+                        <div id="picker-split-size"></div>
-                '<div id="picker-split-size"></div>' +
+                    </div>`,
-                '</div>',
             buttons: [
                 {
                     text: _t.menuCancel
@@ -229,196 +207,7 @@ class ContextMenu extends ContextMenuController {
     initMenuItems() {
         if ( !Common.EditorApi ) return [];
 
-        const { t } = this.props;
+        return EditorUIController.ContextMenu.mapMenuItems(this);
-        const _t = t("ContextMenu", { returnObjects: true });
-
-        const { isEdit, canViewComments, canReview, isDisconnected } = this.props;
-
-        const api = Common.EditorApi.get();
-        const stack = api.getSelectedElements();
-        const canCopy = api.can_CopyCut();
-
-        let itemsIcon = [],
-            itemsText = [];
-
-        if ( canCopy ) {
-            itemsIcon.push({
-                event: 'copy',
-                icon: 'icon-copy'
-            });
-        }
-
-        if ( canViewComments && this.isComments && !isEdit ) {
-            itemsText.push({
-                caption: _t.menuViewComment,
-                event: 'viewcomment'
-            });
-        }
-
-        let isText = false,
-            isTable = false,
-            isImage = false,
-            isChart = false,
-            isShape = false,
-            isLink = false,
-            lockedText = false,
-            lockedTable = false,
-            lockedImage = false,
-            lockedHeader = false;
-
-        stack.forEach(item => {
-            const objectType = item.get_ObjectType(),
-                    objectValue = item.get_ObjectValue();
-
-            if ( objectType == Asc.c_oAscTypeSelectElement.Header ) {
-                lockedHeader = objectValue.get_Locked();
-            } else
-            if ( objectType == Asc.c_oAscTypeSelectElement.Paragraph ) {
-                lockedText = objectValue.get_Locked();
-                isText = true;
-            } else
-            if ( objectType == Asc.c_oAscTypeSelectElement.Image ) {
-                lockedImage = objectValue.get_Locked();
-                if ( objectValue && objectValue.get_ChartProperties() ) {
-                    isChart = true;
-                } else
-                if ( objectValue && objectValue.get_ShapeProperties() ) {
-                    isShape = true;
-                } else {
-                    isImage = true;
-                }
-            } else
-            if ( objectType == Asc.c_oAscTypeSelectElement.Table ) {
-                lockedTable = objectValue.get_Locked();
-                isTable = true;
-            } else
-            if ( objectType == Asc.c_oAscTypeSelectElement.Hyperlink ) {
-                isLink = true;
-            }
-        });
-
-        if ( stack.length > 0 ) {
-            const swapItems = function(items, indexBefore, indexAfter) {
-                items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
-            };
-
-            if ( isEdit && !isDisconnected ) {
-                if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader && canCopy ) {
-                    itemsIcon.push({
-                        event: 'cut',
-                        icon: 'icon-cut'
-                    });
-
-                    // Swap 'Copy' and 'Cut'
-                    swapItems(itemsIcon, 0, 1);
-                }
-
-                if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) {
-                    itemsIcon.push({
-                        event: 'paste',
-                        icon: 'icon-paste'
-                    });
-                }
-
-                if ( isTable && api.CheckBeforeMergeCells() && !lockedTable && !lockedHeader) {
-                    itemsText.push({
-                        caption: _t.menuMerge,
-                        event: 'merge'
-                    });
-                }
-
-                if ( isTable && api.CheckBeforeSplitCells() && !lockedTable && !lockedHeader ) {
-                    itemsText.push({
-                        caption: _t.menuSplit,
-                        event: 'split'
-                    });
-                }
-
-                if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) {
-                    itemsText.push({
-                        caption: _t.menuDelete,
-                        event: 'delete'
-                    });
-                }
-
-                if ( isTable && !lockedTable && !lockedText && !lockedHeader ) {
-                    itemsText.push({
-                        caption: _t.menuDeleteTable,
-                        event: 'deletetable'
-                    });
-                }
-
-                if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ){
-                    itemsText.push({
-                        caption: _t.menuEdit,
-                        event: 'edit'
-                    });
-                }
-
-                if ( !!api.can_AddHyperlink() && !lockedHeader) {
-                    itemsText.push({
-                        caption: _t.menuAddLink,
-                        event: 'addlink'
-                    });
-                }
-
-                if ( canReview ) {
-                    if (this.inRevisionChange) {
-                        itemsText.push({
-                            caption: _t.menuReviewChange,
-                            event: 'reviewchange'
-                        });
-                    } else {
-                        itemsText.push({
-                            caption: _t.menuReview,
-                            event: 'review'
-                        });
-                    }
-                }
-
-                if ( this.isComments && canViewComments ) {
-                    itemsText.push({
-                        caption: _t.menuViewComment,
-                        event: 'viewcomment'
-                    });
-                }
-
-                const isObject = isShape || isChart || isImage || isTable;
-                const hideAddComment = !canViewComments || api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject);
-                if ( !hideAddComment ) {
-                    itemsText.push({
-                        caption: _t.menuAddComment,
-                        event: 'addcomment'
-                    });
-                }
-            }
-        }
-
-        if ( isLink ) {
-            itemsText.push({
-                caption: _t.menuOpenLink,
-                event: 'openlink'
-            });
-        }
-
-        if ( Device.phone && itemsText.length > 2 ) {
-            this.extraItems = itemsText.splice(2,itemsText.length, {
-                caption: _t.menuMore,
-                event: 'showActionSheet'
-            });
-        }
-
-        return itemsIcon.concat(itemsText);
-        // return [{
-        //         caption: 'Edit',
-        //         event: 'edit'
-        //     }, {
-        //         caption: 'View',
-        //         event: 'view'
-        //     }, {
-        //         icon: 'icon-paste',
-        //         event: 'review'
-        //     }];
     }
 
     initExtraItems () {

apps/documenteditor/mobile/src/lib/patch.jsx

@@ -14,7 +14,10 @@ EditorUIController.getToolbarOptions = () => {
 EditorUIController.initFonts = () => null;
 EditorUIController.initEditorStyles = () => null;
 EditorUIController.initFocusObjects = () => null;
-EditorUIController.filterFocusObjects = () => [];
 EditorUIController.initTableTemplates = () => null;
+EditorUIController.ContextMenu = {
+    mapMenuItems: () => [],
+    handleMenuItemClick: () => true,
+};
 
 export default EditorUIController;

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

@@ -24,11 +24,10 @@ export class storeFocusObjects {
     _headerType = 1;
 
     resetFocusObjects (objects) {
-        this._focusObjects = objects;
     }
 
     get settings() {
-        return EditorUIController.filterFocusObjects(this._focusObjects);
+        return !!this.intf ? this.intf.filterFocusObjects() : null;
     }
 
     get headerType() {
@@ -42,83 +41,23 @@ export class storeFocusObjects {
     }
 
     get headerObject() {
-        const headers = [];
+        return !!this.intf ? this.intf.getHeaderObject() : null;
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) {
-                headers.push(object);
-            }
-        }
-        if (headers.length > 0) {
-            const object = headers[headers.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
     }
 
     get paragraphObject() {
-        const paragraphs = [];
+        return !!this.intf ? this.intf.getParagraphObject() : null;
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
-                paragraphs.push(object);
-            }
-        }
-        if (paragraphs.length > 0) {
-            const object = paragraphs[paragraphs.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
     }
 
     get shapeObject() {
-        const shapes = [];
+        return !!this.intf ? this.intf.getShapeObject() : null;
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
-                if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
-                    shapes.push(object);
-                }
-            }
-        }
-        if (shapes.length > 0) {
-            const object = shapes[shapes.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
     }
 
     get imageObject() {
-        const images = [];
+        return !!this.intf ? this.intf.getImageObject() : null;
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                const imageObject = object.get_ObjectValue();
-                if (imageObject && imageObject.get_ShapeProperties() === null && imageObject.get_ChartProperties() === null) {
-                    images.push(object);
-                }
-            }
-        }
-        if (images.length > 0) {
-            const object = images[images.length - 1]; // get top
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
     }
 
     get tableObject() {
-        const tables = [];
+        return !!this.intf ? this.intf.getTableObject() : null;
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
-                tables.push(object);
-            }
-        }
-        if (tables.length > 0) {
-            const object = tables[tables.length - 1]; // get top table
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
     }
 
     get isTableInStack() {
@@ -131,32 +70,10 @@ export class storeFocusObjects {
     }
 
     get chartObject() {
-        const charts = [];
+        return !!this.intf ? this.intf.getChartObject() : null;
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) {
-                charts.push(object);
-            }
-        }
-        if (charts.length > 0) {
-            const object = charts[charts.length - 1]; // get top table
-            return object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
     }
     
     get linkObject() {
-        const links = [];
+        return !!this.intf ? this.intf.getLinkObject() : null;
-        for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                links.push(object);
-            }
-        }
-        if (links.length > 0) {
-            const object = links[links.length - 1]; // get top
-            return  object.get_ObjectValue();
-        } else {
-            return undefined;
-        }
     }
 }

apps/documenteditor/mobile/src/store/paragraphSettings.js

@@ -20,11 +20,6 @@ export class storeParagraphSettings {
     styleName = undefined;
 
     initEditorStyles (styles) {
-        this.styles = styles.get_MergedStyles();
-        this.styleThumbSize = {
-            width   : styles.STYLE_THUMBNAIL_WIDTH,
-            height  : styles.STYLE_THUMBNAIL_HEIGHT
-        };
     }
 
     get paragraphStyles () {
@@ -39,7 +34,6 @@ export class storeParagraphSettings {
     }
 
     changeParaStyleName (name) {
-        this.styleName = name;
     }
 
     backColor = undefined;