[PE mobile] Added context menu.
This commit is contained in:
Julia Radzhabova
parent
a02226f03f
commit
46a8fcaa3a
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -146,11 +146,11 @@ require([
|
|||
controllers : [
|
||||
'Editor',
|
||||
'Toolbar',
|
||||
// 'Search',
|
||||
'Search',
|
||||
'Main',
|
||||
// 'DocumentHolder',
|
||||
// 'Settings',
|
||||
// 'EditContainer',
|
||||
'DocumentHolder',
|
||||
'Settings',
|
||||
'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/Settings',
|
||||
'presentationeditor/mobile/app/controller/DocumentHolder',
|
||||
'presentationeditor/mobile/app/controller/Settings',
|
||||
'presentationeditor/mobile/app/controller/edit/EditContainer',
|
||||
'presentationeditor/mobile/app/controller/edit/EditText',
|
||||
'presentationeditor/mobile/app/controller/edit/EditTable',
|
||||
|
|
|
|||
273
apps/presentationeditor/mobile/app/controller/DocumentHolder.js
Normal file
273
apps/presentationeditor/mobile/app/controller/DocumentHolder.js
Normal file
|
|
@ -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 || {}))
|
||||
});
|
||||
192
apps/presentationeditor/mobile/app/view/DocumentHolder.js
Normal file
192
apps/presentationeditor/mobile/app/view/DocumentHolder.js
Normal file
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
})());
|
||||
});
|
||||
Loading…
Reference in a new issue