[PE mobile] Added context menu.

apps/presentationeditor/mobile/app-dev.js

@@ -137,7 +137,7 @@ require([
             'Toolbar',
             'Search',
             'Main',
-            // 'DocumentHolder',
+            'DocumentHolder',
             'Settings',
             'EditContainer',
             'EditText',
@@ -203,7 +203,7 @@ require([
         'presentationeditor/mobile/app/controller/Toolbar',
         'presentationeditor/mobile/app/controller/Search',
         'presentationeditor/mobile/app/controller/Main',
-        // 'presentationeditor/mobile/app/controller/DocumentHolder',
+        'presentationeditor/mobile/app/controller/DocumentHolder',
         'presentationeditor/mobile/app/controller/Settings',
         'presentationeditor/mobile/app/controller/edit/EditContainer',
         'presentationeditor/mobile/app/controller/edit/EditText',

apps/presentationeditor/mobile/app.js

@@ -146,11 +146,11 @@ require([
         controllers : [
             'Editor',
             'Toolbar',
-            // 'Search',
+            'Search',
             'Main',
-            // 'DocumentHolder',
+            'DocumentHolder',
-            // 'Settings',
+            'Settings',
-            // 'EditContainer',
+            'EditContainer',
             'EditText',
             'EditTable',
             'EditImage',
@@ -212,10 +212,10 @@ require([
         'common/main/lib/util/utils',
         'presentationeditor/mobile/app/controller/Editor',
         'presentationeditor/mobile/app/controller/Toolbar',
-        // 'presentationeditor/mobile/app/controller/Search',
+        'presentationeditor/mobile/app/controller/Search',
         'presentationeditor/mobile/app/controller/Main',
-        // 'presentationeditor/mobile/app/controller/DocumentHolder',
+        'presentationeditor/mobile/app/controller/DocumentHolder',
-        // 'presentationeditor/mobile/app/controller/Settings',
+        'presentationeditor/mobile/app/controller/Settings',
         'presentationeditor/mobile/app/controller/edit/EditContainer',
         'presentationeditor/mobile/app/controller/edit/EditText',
         'presentationeditor/mobile/app/controller/edit/EditTable',

apps/presentationeditor/mobile/app/controller/DocumentHolder.js

@@ -0,0 +1,273 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  DocumentHolder.js
+ *  Presentation Editor
+ *
+ *  Created by Julia Radzhabova on 12/19/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'presentationeditor/mobile/app/view/DocumentHolder'
+], function (core) {
+    'use strict';
+
+    PE.Controllers.DocumentHolder = Backbone.Controller.extend(_.extend((function() {
+        // private
+        var _stack,
+            _isEdit = false;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'DocumentHolder'
+            ],
+
+            initialize: function() {
+                this.addListeners({
+                    'DocumentHolder': {
+                        'contextmenu:click' : this.onContextMenuClick
+                    }
+                });
+            },
+
+            setApi: function(api) {
+                this.api = api;
+
+                this.api.asc_registerCallback('asc_onShowPopMenu',      _.bind(this.onApiShowPopMenu, this));
+                this.api.asc_registerCallback('asc_onHidePopMenu',      _.bind(this.onApiHidePopMenu, this));
+            },
+
+            setMode: function (mode) {
+                _isEdit = ('edit' === mode);
+            },
+
+            // When our application is ready, lets get started
+            onLaunch: function() {
+                var me = this;
+
+                me.view = me.createView('DocumentHolder').render();
+
+                $$(window).on('resize', _.bind(me.onEditorResize, me));
+            },
+
+            // Handlers
+
+            onContextMenuClick: function (view, eventName) {
+                var me = this;
+
+                if ('cut' == eventName) {
+                    me.api.Cut();
+                } else if ('copy' == eventName) {
+                    me.api.Copy();
+                } else if ('paste' == eventName) {
+                    me.api.Paste();
+                } else if ('delete' == eventName) {
+                    me.api.asc_Remove();
+                } else if ('edit' == eventName) {
+                    me.view.hideMenu();
+
+                    PE.getController('EditContainer').showModal();
+                } else if ('addlink' == eventName) {
+                    me.view.hideMenu();
+
+                    PE.getController('AddContainer').showModal();
+                    uiApp.showTab('#add-link');
+                    // PE.getController('AddLink').getView('AddLink').showLink();
+                } else if ('openlink' == eventName) {
+                    _.some(_stack, function (item) {
+                        if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                            me._openLink(item.get_ObjectValue().get_Value());
+                            return true;
+                        }
+                    });
+                }
+
+                me.view.hideMenu();
+            },
+
+            // API Handlers
+
+            onEditorResize: function(cmp) {
+                // Hide context menu
+            },
+
+            onApiShowPopMenu: function(posX, posY) {
+                var me = this,
+                    items;
+
+                _stack = me.api.getSelectedElements();
+                items = me._initMenu(_stack);
+
+                me.view.showMenu(items, posX, posY);
+            },
+
+            onApiHidePopMenu: function() {
+                this.view.hideMenu();
+            },
+
+            // Internal
+
+            _openLink: function(url) {
+                if (this.api.asc_getUrlType(url) > 0) {
+                    var newDocumentPage = window.open(url, '_blank');
+
+                    if (newDocumentPage) {
+                        newDocumentPage.focus();
+                    }
+                } else
+                    this.api.openInternalLink(url);
+            },
+
+            _initMenu: function (stack) {
+                var me = this,
+                    menuItems = [],
+                    canCopy = true;
+                    // canCopy = me.api.can_CopyCut();
+
+                var isText = false,
+                    isTable = false,
+                    isImage = false,
+                    isChart = false,
+                    isShape = false,
+                    isLink = false,
+                    isSlide = false,
+                    isObject = false;
+
+                _.each(stack, function (item) {
+                    var objectType = item.get_ObjectType(),
+                        objectValue = item.get_ObjectValue();
+
+                    if (objectType == Asc.c_oAscTypeSelectElement.Paragraph) {
+                        isText = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
+                        isImage = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Chart) {
+                        isChart = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Shape) {
+                        isShape = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
+                        isTable = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                        isLink = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Slide) {
+                        isSlide = true;
+                    }
+                });
+                isObject = isText || isImage || isChart || isShape || isTable;
+
+                if (canCopy && isObject) {
+                    menuItems.push({
+                        caption: me.menuCopy,
+                        event: 'copy'
+                    });
+                }
+
+                if (stack.length > 0) {
+                    var topObject = stack[stack.length - 1],
+                        topObjectType = topObject.get_ObjectType(),
+                        topObjectValue = topObject.get_ObjectValue(),
+                        objectLocked = _.isFunction(topObjectValue.get_Locked) ? topObjectValue.get_Locked() : false;
+
+                    !objectLocked && (objectLocked = _.isFunction(topObjectValue.get_LockDelete) ? topObjectValue.get_LockDelete() : false);
+
+                    var swapItems = function(items, indexBefore, indexAfter) {
+                        items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
+                    };
+
+                    if (!objectLocked && _isEdit) {
+                        if (canCopy && isObject) {
+                            menuItems.push({
+                                caption: me.menuCut,
+                                event: 'cut'
+                            });
+
+                            // Swap 'Copy' and 'Cut'
+                            swapItems(menuItems, 0, 1);
+                        }
+
+                        menuItems.push({
+                            caption: me.menuPaste,
+                            event: 'paste'
+                        });
+
+                        if (isObject)
+                            menuItems.push({
+                                caption: me.menuDelete,
+                                event: 'delete'
+                            });
+
+                        menuItems.push({
+                            caption: me.menuEdit,
+                            event: 'edit'
+                        });
+
+                        if (!isLink && me.api.can_AddHyperlink()!==false) {
+                            menuItems.push({
+                                caption: me.menuAddLink,
+                                event: 'addlink'
+                            });
+                        }
+                    }
+                }
+
+                if (Common.SharedSettings.get('phone') && menuItems.length > 3) {
+                    menuItems = menuItems.slice(0, 3);
+                }
+
+                if (isLink) {
+                    menuItems.push({
+                        caption: me.menuOpenLink,
+                        event: 'openlink'
+                    });
+                }
+
+                return menuItems;
+            },
+
+            menuCut: 'Cut',
+            menuCopy: 'Copy',
+            menuPaste: 'Paste',
+            menuEdit: 'Edit',
+            menuDelete: 'Delete',
+            menuAddLink: 'Add Link',
+            menuOpenLink: 'Open Link'
+        }
+    })(), PE.Controllers.DocumentHolder || {}))
+});

apps/presentationeditor/mobile/app/view/DocumentHolder.js

@@ -0,0 +1,192 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  DocumentHolder.js
+ *  Presentation Editor
+ *
+ *  Created by Julia Radzhabova on 12/19/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'jquery',
+    'underscore',
+    'backbone'
+], function ($, _, Backbone) {
+    'use strict';
+
+    PE.Views.DocumentHolder = Backbone.View.extend((function() {
+        // private
+        var _anchorId = 'context-menu-target';
+
+        function androidSizeMenu(popover, target) {
+            popover.css({left: '', top: ''});
+            var modalWidth =  popover.width();
+            var modalHeight =  popover.height();
+            var modalAngleSize = 10;
+            var targetWidth = target.outerWidth();
+            var targetHeight = target.outerHeight();
+            var targetOffset = target.offset();
+            var targetParentPage = target.parents('.page');
+            if (targetParentPage.length > 0) {
+                targetOffset.top = targetOffset.top - targetParentPage[0].scrollTop;
+            }
+
+            var windowHeight = $(window).height();
+            var windowWidth = $(window).width();
+
+            var modalTop = 0;
+            var modalLeft = 0;
+
+            // Top Position
+            var modalPosition = 'top';// material ? 'bottom' : 'top';
+            {
+                if ((modalHeight + modalAngleSize) < targetOffset.top) {
+                    // On top
+                    modalTop = targetOffset.top - modalHeight - modalAngleSize;
+                }
+                else if ((modalHeight + modalAngleSize) < windowHeight - targetOffset.top - targetHeight) {
+                    // On bottom
+                    modalPosition = 'bottom';
+                    modalTop = targetOffset.top + targetHeight + modalAngleSize;
+                }
+                else {
+                    // On middle
+                    modalPosition = 'middle';
+                    modalTop = targetHeight / 2 + targetOffset.top - modalHeight / 2;
+
+                    if (modalTop <= 0) {
+                        modalTop = 5;
+                    }
+                    else if (modalTop + modalHeight >= windowHeight) {
+                        modalTop = windowHeight - modalHeight - 5;
+                    }
+                }
+
+                // Horizontal Position
+                if (modalPosition === 'top' || modalPosition === 'bottom') {
+                    modalLeft = targetWidth / 2 + targetOffset.left - modalWidth / 2;
+                    if (modalLeft < 5) modalLeft = 5;
+                    if (modalLeft + modalWidth > windowWidth) modalLeft = windowWidth - modalWidth - 5;
+                }
+                else if (modalPosition === 'middle') {
+                    modalLeft = targetOffset.left - modalWidth - modalAngleSize;
+
+                    if (modalLeft < 5 || (modalLeft + modalWidth > windowWidth)) {
+                        if (modalLeft < 5) modalLeft = targetOffset.left + targetWidth + modalAngleSize;
+                        if (modalLeft + modalWidth > windowWidth) modalLeft = windowWidth - modalWidth - 5;
+                    }
+                }
+            }
+
+            // Apply Styles
+            popover.css({top: modalTop + 'px', left: modalLeft + 'px'});
+        }
+
+        return {
+            el: '#editor_sdk',
+
+            template: _.template('<div id="' + _anchorId + '" style="position: absolute;"></div>'),
+            // Delegated events for creating new items, and clearing completed ones.
+            events: {
+            },
+
+            // Set innerHTML and get the references to the DOM elements
+            initialize: function() {
+                //
+            },
+
+            // Render layout
+            render: function() {
+                var el = $(this.el);
+                el.append(this.template({}));
+
+                return this;
+            },
+
+            showMenu: function (items, posX, posY) {
+                if (items.length < 1) {
+                    return;
+                }
+
+                var menuItemTemplate = _.template([
+                    '<% _.each(menuItems, function(item) { %>',
+                    '<li data-event="<%= item.event %>"><a href="#" class="item-link list-button"><%= item.caption %></li>',
+                    '<% }); %>'
+                ].join(''));
+
+                $('#' + _anchorId)
+                    .css('left', posX)
+                    .css('top', Math.max(0, posY));
+
+                uiApp.closeModal('.document-menu.modal-in');
+
+                var popoverHTML =
+                    '<div class="popover document-menu">'+
+                        '<div class="popover-inner">'+
+                            '<div class="list-block">'+
+                                '<ul>'+
+                                    menuItemTemplate({menuItems: items}) +
+                                '</ul>'+
+                            '</div>'+
+                        '</div>'+
+                    '</div>';
+
+                var popover = uiApp.popover(popoverHTML, $('#' + _anchorId));
+
+                if (Common.SharedSettings.get('android')) {
+                    androidSizeMenu($(popover),  $('#' + _anchorId));
+                }
+
+                $('.modal-overlay').removeClass('modal-overlay-visible');
+
+                $('.document-menu li').single('click', _.buffered(function(e) {
+                    var $target = $(e.currentTarget),
+                        eventName = $target.data('event');
+
+                    this.fireEvent('contextmenu:click', [this, eventName]);
+                }, 100, this));
+            },
+
+            hideMenu: function () {
+                $('#' + _anchorId)
+                    .css('left', -1000)
+                    .css('top', -1000);
+
+                uiApp.closeModal('.document-menu.modal-in');
+            }
+        }
+    })());
+});