From 1b63975a039034b416efa6fce42666ef68b27c35 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Tue, 22 Nov 2016 14:45:53 +0300 Subject: [PATCH] [PE mobile] Add EditContainer and AddContainer. --- apps/presentationeditor/mobile/app-dev.js | 12 +- .../mobile/app/controller/add/AddContainer.js | 275 +++++++++++++ .../app/controller/edit/EditContainer.js | 371 ++++++++++++++++++ .../mobile/app/view/Toolbar.js | 22 +- 4 files changed, 667 insertions(+), 13 deletions(-) create mode 100644 apps/presentationeditor/mobile/app/controller/add/AddContainer.js create mode 100644 apps/presentationeditor/mobile/app/controller/edit/EditContainer.js diff --git a/apps/presentationeditor/mobile/app-dev.js b/apps/presentationeditor/mobile/app-dev.js index 4fc312dbe..51e0f331e 100644 --- a/apps/presentationeditor/mobile/app-dev.js +++ b/apps/presentationeditor/mobile/app-dev.js @@ -138,8 +138,8 @@ require([ 'Search', 'Main', // 'DocumentHolder', - 'Settings' - // 'EditContainer', + 'Settings', + 'EditContainer', // 'EditText', // 'EditParagraph', // 'EditTable', @@ -147,7 +147,7 @@ require([ // 'EditShape', // 'EditChart', // 'EditHyperlink', - // 'AddContainer', + 'AddContainer' // 'AddTable', // 'AddShape', // 'AddImage', @@ -203,8 +203,8 @@ require([ 'presentationeditor/mobile/app/controller/Search', 'presentationeditor/mobile/app/controller/Main', // 'presentationeditor/mobile/app/controller/DocumentHolder', - 'presentationeditor/mobile/app/controller/Settings' - // 'presentationeditor/mobile/app/controller/edit/EditContainer', + 'presentationeditor/mobile/app/controller/Settings', + 'presentationeditor/mobile/app/controller/edit/EditContainer', // 'presentationeditor/mobile/app/controller/edit/EditText', // 'presentationeditor/mobile/app/controller/edit/EditParagraph', // 'presentationeditor/mobile/app/controller/edit/EditTable', @@ -212,7 +212,7 @@ require([ // 'presentationeditor/mobile/app/controller/edit/EditShape', // 'presentationeditor/mobile/app/controller/edit/EditChart', // 'presentationeditor/mobile/app/controller/edit/EditHyperlink', - // 'presentationeditor/mobile/app/controller/add/AddContainer', + 'presentationeditor/mobile/app/controller/add/AddContainer' // 'presentationeditor/mobile/app/controller/add/AddTable', // 'presentationeditor/mobile/app/controller/add/AddShape', // 'presentationeditor/mobile/app/controller/add/AddImage', diff --git a/apps/presentationeditor/mobile/app/controller/add/AddContainer.js b/apps/presentationeditor/mobile/app/controller/add/AddContainer.js new file mode 100644 index 000000000..c8037e89a --- /dev/null +++ b/apps/presentationeditor/mobile/app/controller/add/AddContainer.js @@ -0,0 +1,275 @@ +/* + * + * (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 + * + */ + +/** + * AddContainer.js + * Presentation Editor + * + * Created by Alexander Yuzhin on 11/22/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'core' +], function (core) { + 'use strict'; + + PE.Controllers.AddContainer = Backbone.Controller.extend(_.extend((function() { + // private + + return { + models: [], + collections: [], + views: [], + + initialize: function() { + // + }, + + setApi: function(api) { + this.api = api; + }, + + onLaunch: function() { + // + }, + + showModal: function() { + var me = this; + + if ($$('.container-add.modal-in').length > 0) { + return; + } + + uiApp.closeModal(); + + me._showByStack(Common.SharedSettings.get('phone')); + + PE.getController('Toolbar').getView('Toolbar').hideSearch(); + }, + + hideModal: function () { + if (this.picker) { + uiApp.closeModal(this.picker); + } + }, + + _dummyEditController: function () { + var layout = + '
' + + '
' + + '

Under Construction

' + + '
' + + '
'; + + return { + getCaption: function () { return 'Dummy' }, + getLayout : function () { return layout } + } + }, + + _layoutEditorsByStack: function () { + var me = this, + addViews = []; + + addViews.push({ + caption: me.textSlide, + id: 'add-slide', + layout: me._dummyEditController().getLayout() + }); + + addViews.push({ + caption: me.textTable, + id: 'add-table', + layout: me._dummyEditController().getLayout() + }); + + addViews.push({ + caption: me.textShape, + id: 'add-shape', + layout: me._dummyEditController().getLayout() + }); + + addViews.push({ + caption: me.textImage, + id: 'add-image', + layout: me._dummyEditController().getLayout() + }); + + addViews.push({ + caption: me.textOther, + id: 'add-other', + layout: me._dummyEditController().getLayout() + }); + + return addViews; + }, + + _showByStack: function(isPhone) { + var me = this, + isAndroid = Framework7.prototype.device.android === true, + layoutAdds = me._layoutEditorsByStack(); + + if ($$('.container-add.modal-in').length > 0) { + return; + } + + // Navigation bar + var $layoutNavbar = $( + '
' + + '
' + + '
' + + (isPhone ? '
' : '') + + '
' + + '
' + ); + + + if (isAndroid) { + $layoutNavbar + .find('.center') + .append('
'); + + _.each(layoutAdds, function (layout, index) { + $layoutNavbar + .find('.toolbar-inner') + .append( + '' + layout.caption + '' + ); + }); + $layoutNavbar + .find('.toolbar-inner') + .append(''); + } else { + $layoutNavbar + .find('.center') + .append('
'); + + _.each(layoutAdds, function (layout, index) { + $layoutNavbar + .find('.buttons-row') + .append( + '' + layout.caption + '' + ); + }); + } + + + // Content + + var $layoutPages = $( + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + ); + + _.each(layoutAdds, function (addView, index) { + $layoutPages.find('.tabs').append( + '
' + + '
' + + '
' + + '
' + + addView.layout + + '
' + + '
' + + '
' + + '
' + ); + }); + + if (isPhone) { + me.picker = $$(uiApp.popup( + '
' + + '
' + + $layoutNavbar.prop('outerHTML') + + $layoutPages.prop('outerHTML') + + '
' + + '
' + )) + } else { + me.picker = uiApp.popover( + '
' + + '
' + + '
' + + '
' + + '
' + + $layoutNavbar.prop('outerHTML') + + $layoutPages.prop('outerHTML') + + '
' + + '
' + + '
', + $$('#toolbar-add') + ); + + // Prevent hide overlay. Conflict popover and modals. + var $overlay = $('.modal-overlay'); + + $$(me.picker).on('opened', function () { + $overlay.on('removeClass', function () { + if (!$overlay.hasClass('modal-overlay-visible')) { + $overlay.addClass('modal-overlay-visible') + } + }); + }).on('close', function () { + $overlay.off('removeClass'); + $overlay.removeClass('modal-overlay-visible') + }); + } + + if (isAndroid) { + $$('.view.add-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed'); + $$('.view.add-root-view .navbar').prependTo('.view.add-root-view > .pages > .page'); + } + + me.rootView = uiApp.addView('.add-root-view', { + dynamicNavbar: true + }); + + Common.NotificationCenter.trigger('addcontainer:show'); + }, + + textSlide: 'Slide', + textTable: 'Table', + textShape: 'Shape', + textImage: 'Image', + textOther: 'Other' + } + })(), PE.Controllers.AddContainer || {})) +}); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/controller/edit/EditContainer.js b/apps/presentationeditor/mobile/app/controller/edit/EditContainer.js new file mode 100644 index 000000000..450b8cc6b --- /dev/null +++ b/apps/presentationeditor/mobile/app/controller/edit/EditContainer.js @@ -0,0 +1,371 @@ +/* + * + * (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 + * + */ + +/** + * EditContainer.js + * Presentation Editor + * + * Created by Alexander Yuzhin on 9/27/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ +define([ + 'core' +], function (core) { + 'use strict'; + + PE.Controllers.EditContainer = Backbone.Controller.extend(_.extend((function() { + // Private + var _settings = []; + + return { + models: [], + collections: [], + views: [], + + initialize: function() { + // + }, + + setApi: function(api) { + this.api = api; + this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onApiFocusObject, this)); + }, + + onLaunch: function() { + // + }, + + showModal: function() { + var me = this, + mainView = PE.getController('Editor').getView('Editor').f7View, + isAndroid = Framework7.prototype.device.android === true; + + if ($$('.container-edit.modal-in').length > 0) { + // myApp.closeModal('.picker-modal.edit.modal-in'); + // me.fireEvent('editcontainer:error', [this, 'alreadyOpen']); + return; + } + + uiApp.closeModal(); + + me._showByStack(Common.SharedSettings.get('phone')); + + PE.getController('Toolbar').getView('Toolbar').hideSearch(); + }, + + hideModal: function () { + if (this.picker) { + uiApp.closeModal(this.picker); + } + }, + + _emptyEditController: function () { + var layout = + '
' + + '
' + + '

Select object to edit

' + + '
' + + '
'; + + return { + caption: this.textSettings, + layout: layout + } + }, + + _layoutEditorsByStack: function () { + var me = this, + editors = []; + + // TODO: Debug only + editors.push(me._emptyEditController()); + return editors; + + + if (_settings.length < 0) { + editors.push(me._emptyEditController()); + } else { + if (_.contains(_settings, 'text')) { + editors.push({ + caption: me.textText, + id: 'edit-text', + layout: PE.getController('EditText').getView('EditText').rootLayout() + }) + } + if (_.contains(_settings, 'paragraph')) { + editors.push({ + caption: me.textParagraph, + id: 'edit-paragraph', + layout: PE.getController('EditParagraph').getView('EditParagraph').rootLayout() + }) + } + if (_.contains(_settings, 'table')) { + editors.push({ + caption: me.textTable, + id: 'edit-table', + layout: PE.getController('EditTable').getView('EditTable').rootLayout() + }) + } + if (_.contains(_settings, 'shape')) { + editors.push({ + caption: me.textShape, + id: 'edit-shape', + layout: PE.getController('EditShape').getView('EditShape').rootLayout() + }) + } + if (_.contains(_settings, 'image')) { + editors.push({ + caption: me.textImage, + id: 'edit-image', + layout: PE.getController('EditImage').getView('EditImage').rootLayout() + }) + } + if (_.contains(_settings, 'chart')) { + editors.push({ + caption: me.textChart, + id: 'edit-chart', + layout: PE.getController('EditChart').getView('EditChart').rootLayout() + }) + } + if (_.contains(_settings, 'hyperlink')) { + editors.push({ + caption: me.textHyperlink, + id: 'edit-link', + layout: PE.getController('EditHyperlink').getView('EditHyperlink').rootLayout() + }) + } + } + + return editors; + }, + + _showByStack: function(isPhone) { + var me = this, + mainView = PE.getController('Editor').getView('Editor').f7View, + isAndroid = Framework7.prototype.device.android === true, + layoutEditors = me._layoutEditorsByStack(); + + if ($$('.container-edit.modal-in').length > 0) { + return; + } + + // Navigation bar + var $layoutNavbar = $( + '
' + + '
' + + '
' + + (isPhone ? '
' : '') + + '
' + + '
' + ); + + if (layoutEditors.length < 2) { + $layoutNavbar + .find('.center') + .removeClass('categories') + .html(layoutEditors[0].caption); + } else { + if (isAndroid) { + $layoutNavbar + .find('.center') + .append('
'); + + _.each(layoutEditors, function (layout, index) { + $layoutNavbar + .find('.toolbar-inner') + .append( + '' + layout.caption + '' + ); + }); + $layoutNavbar + .find('.toolbar-inner') + .append(''); + } else { + $layoutNavbar + .find('.center') + .append('
'); + + _.each(layoutEditors, function (layout, index) { + $layoutNavbar + .find('.buttons-row') + .append( + '' + layout.caption + '' + ); + }); + } + } + + + // Content + + var $layoutPages = $( + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + ); + + _.each(layoutEditors, function (editor, index) { + $layoutPages.find('.tabs').append( + '
' + + '
' + + '
' + + '
' + + editor.layout + + '
' + + '
' + + '
' + + '
' + ); + }); + + if (isPhone) { + me.picker = $$(uiApp.pickerModal( + '
' + + '
' + + $layoutNavbar.prop('outerHTML') + + $layoutPages.prop('outerHTML') + + '
' + + '
' + )).on('close', function (e) { + mainView.showNavbar(); + }); + mainView.hideNavbar(); + } else { + me.picker = uiApp.popover( + '
' + + '
' + + '
' + + '
' + + '
' + + $layoutNavbar.prop('outerHTML') + + $layoutPages.prop('outerHTML') + + '
' + + '
' + + '
', + $$('#toolbar-edit') + ); + + // Prevent hide overlay. Conflict popover and modals. + var $overlay = $('.modal-overlay'); + + $$(me.picker).on('opened', function () { + $overlay.on('removeClass', function () { + if (!$overlay.hasClass('modal-overlay-visible')) { + $overlay.addClass('modal-overlay-visible') + } + }); + }).on('close', function () { + $overlay.off('removeClass'); + $overlay.removeClass('modal-overlay-visible') + }); + } + + $('.container-edit .tab').single('show', function (e) { + Common.NotificationCenter.trigger('editcategory:show', e); + }); + + if (isAndroid) { + $$('.view.edit-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed'); + $$('.view.edit-root-view .navbar').prependTo('.view.edit-root-view > .pages > .page'); + } + + me.rootView = uiApp.addView('.edit-root-view', { + dynamicNavbar: true, + domCache: true + }); + + Common.NotificationCenter.trigger('editcontainer:show'); + }, + + // API handlers + + onApiFocusObject: function (objects) { + _settings = []; + + // Paragraph : 0, + // Table : 1, + // Image : 2, + // Header : 3, + // Shape : 4, + // Slide : 5, + // Chart : 6, + // MailMerge : 7, + // TextArt : 8 + + _.each(objects, function(object) { + var type = object.get_ObjectType(); + + if (Asc.c_oAscTypeSelectElement.Paragraph == type) { + _settings.push('text', 'paragraph'); + } else if (Asc.c_oAscTypeSelectElement.Table == type) { + _settings.push('table'); + } else if (Asc.c_oAscTypeSelectElement.Image == type) { + if (object.get_ObjectValue().get_ChartProperties()) { + _settings.push('chart'); + } else if (object.get_ObjectValue().get_ShapeProperties()) { + _settings.push('shape'); + } else { + _settings.push('image'); + } + } else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) { + _settings.push('hyperlink'); + } + }); + + // Exclude shapes if chart exist + if (_settings.indexOf('chart') > -1) { + _settings = _.without(_settings, 'shape'); + } + + _settings = _.uniq(_settings); + }, + + textSettings: 'Settings', + textText: 'Text', + textParagraph: 'Paragraph', + textTable: 'Table', + textShape: 'Shape', + textImage: 'Image', + textChart: 'Chart', + textHyperlink: 'Hyperlink' + + } + })(), PE.Controllers.EditContainer || {})) +}); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/Toolbar.js b/apps/presentationeditor/mobile/app/view/Toolbar.js index 06ffb3b50..fe81551ca 100644 --- a/apps/presentationeditor/mobile/app/view/Toolbar.js +++ b/apps/presentationeditor/mobile/app/view/Toolbar.js @@ -81,16 +81,19 @@ define([ // Render layout render: function() { - var $el = $(this.el); + var me = this, + $el = $(me.el); - $el.prepend(this.template({ + $el.prepend(me.template({ android : Common.SharedSettings.get('android'), phone : Common.SharedSettings.get('phone'), - backTitle : Common.SharedSettings.get('android') ? '' : this.textBack, - scope : this + backTitle : Common.SharedSettings.get('android') ? '' : me.textBack, + scope : me })); - return this; + $('.view-main .navbar').on('addClass removeClass', _.bind(me.onDisplayMainNavbar, me)); + + return me; }, setMode: function (mode) { @@ -101,6 +104,11 @@ define([ } }, + onDisplayMainNavbar: function (e) { + var $target = $(e.currentTarget); + $('#editor_sdk').css('marginTop', $target.hasClass('navbar-hidden') ? 0 : ''); + }, + // Search searchToggle: function() { if ($$('.searchbar.document').length > 0) { @@ -120,13 +128,13 @@ define([ // Editor showEdition: function () { - // PE.getController('EditContainer').showModal(); + PE.getController('EditContainer').showModal(); }, // Inserts showInserts: function () { - // PE.getController('AddContainer').showModal(); + PE.getController('AddContainer').showModal(); }, // Settings