From 3a1e43e55af66cd21202d527039c6f6dbc728c20 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Tue, 6 Dec 2016 11:51:22 +0300 Subject: [PATCH] [SE mobile] Add AddContainer. --- apps/spreadsheeteditor/mobile/app-dev.js | 28 +- .../mobile/app/controller/add/AddContainer.js | 271 +++++++++++++ .../app/controller/edit/EditContainer.js | 366 ++++++++++++++++++ .../mobile/app/view/Toolbar.js | 2 +- 4 files changed, 652 insertions(+), 15 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/app/controller/add/AddContainer.js create mode 100644 apps/spreadsheeteditor/mobile/app/controller/edit/EditContainer.js diff --git a/apps/spreadsheeteditor/mobile/app-dev.js b/apps/spreadsheeteditor/mobile/app-dev.js index 467728d01..f87eee3c1 100644 --- a/apps/spreadsheeteditor/mobile/app-dev.js +++ b/apps/spreadsheeteditor/mobile/app-dev.js @@ -130,7 +130,7 @@ require([ // ,'EditShape' // ,'EditChart' // ,'EditHyperlink' - // ,'AddContainer' + ,'AddContainer' // ,'AddTable' // ,'AddShape' // ,'AddImage' @@ -192,19 +192,19 @@ require([ , 'spreadsheeteditor/mobile/app/controller/CellEditor' , 'spreadsheeteditor/mobile/app/controller/Statusbar' , 'spreadsheeteditor/mobile/app/controller/Settings' - // ,'documenteditor/mobile/app/controller/edit/EditContainer' - // ,'documenteditor/mobile/app/controller/edit/EditText' - // ,'documenteditor/mobile/app/controller/edit/EditParagraph' - // ,'documenteditor/mobile/app/controller/edit/EditTable' - // ,'documenteditor/mobile/app/controller/edit/EditImage' - // ,'documenteditor/mobile/app/controller/edit/EditShape' - // ,'documenteditor/mobile/app/controller/edit/EditChart' - // ,'documenteditor/mobile/app/controller/edit/EditHyperlink' - // ,'documenteditor/mobile/app/controller/add/AddContainer' - // ,'documenteditor/mobile/app/controller/add/AddTable' - // ,'documenteditor/mobile/app/controller/add/AddShape' - // ,'documenteditor/mobile/app/controller/add/AddImage' - // ,'documenteditor/mobile/app/controller/add/AddOther' + // ,'spreadsheeteditor/mobile/app/controller/edit/EditContainer' + // ,'spreadsheeteditor/mobile/app/controller/edit/EditText' + // ,'spreadsheeteditor/mobile/app/controller/edit/EditParagraph' + // ,'spreadsheeteditor/mobile/app/controller/edit/EditTable' + // ,'spreadsheeteditor/mobile/app/controller/edit/EditImage' + // ,'spreadsheeteditor/mobile/app/controller/edit/EditShape' + // ,'spreadsheeteditor/mobile/app/controller/edit/EditChart' + // ,'spreadsheeteditor/mobile/app/controller/edit/EditHyperlink' + ,'spreadsheeteditor/mobile/app/controller/add/AddContainer' + // ,'spreadsheeteditor/mobile/app/controller/add/AddTable' + // ,'spreadsheeteditor/mobile/app/controller/add/AddShape' + // ,'spreadsheeteditor/mobile/app/controller/add/AddImage' + // ,'spreadsheeteditor/mobile/app/controller/add/AddOther' ], function() { app.start(); }); diff --git a/apps/spreadsheeteditor/mobile/app/controller/add/AddContainer.js b/apps/spreadsheeteditor/mobile/app/controller/add/AddContainer.js new file mode 100644 index 000000000..4ea25f073 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/controller/add/AddContainer.js @@ -0,0 +1,271 @@ +/* + * + * (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 + * Spreadsheet Editor + * + * Created by Alexander Yuzhin on 12/6/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'core', + 'jquery', + 'underscore', + 'backbone' +], function (core, $, _, Backbone) { + 'use strict'; + + SSE.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')); + + SSE.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.textChart, + id: 'add-chart', + layout: me._dummyEditController().getLayout() + }); + + addViews.push({ + caption: me.textFormula, + id: 'add-formula', + layout: me._dummyEditController().getLayout() + }); + + addViews.push({ + caption: me.textShape, + id: 'add-shape', + 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'); + }, + + textChart: 'Chart', + textFormula: 'Formula', + textShape: 'Shape', + textOther: 'Other' + } + })(), SSE.Controllers.AddContainer || {})) +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditContainer.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditContainer.js new file mode 100644 index 000000000..acf0ac896 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditContainer.js @@ -0,0 +1,366 @@ +/* + * + * (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 + * Document Editor + * + * Created by Alexander Yuzhin on 9/27/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ +define([ + 'core' +], function (core) { + 'use strict'; + + DE.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 = DE.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')); + + DE.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 = []; + + if (_settings.length < 0) { + editors.push(me._emptyEditController()); + } else { + if (_.contains(_settings, 'text')) { + editors.push({ + caption: me.textText, + id: 'edit-text', + layout: DE.getController('EditText').getView('EditText').rootLayout() + }) + } + if (_.contains(_settings, 'paragraph')) { + editors.push({ + caption: me.textParagraph, + id: 'edit-paragraph', + layout: DE.getController('EditParagraph').getView('EditParagraph').rootLayout() + }) + } + if (_.contains(_settings, 'table')) { + editors.push({ + caption: me.textTable, + id: 'edit-table', + layout: DE.getController('EditTable').getView('EditTable').rootLayout() + }) + } + if (_.contains(_settings, 'shape')) { + editors.push({ + caption: me.textShape, + id: 'edit-shape', + layout: DE.getController('EditShape').getView('EditShape').rootLayout() + }) + } + if (_.contains(_settings, 'image')) { + editors.push({ + caption: me.textImage, + id: 'edit-image', + layout: DE.getController('EditImage').getView('EditImage').rootLayout() + }) + } + if (_.contains(_settings, 'chart')) { + editors.push({ + caption: me.textChart, + id: 'edit-chart', + layout: DE.getController('EditChart').getView('EditChart').rootLayout() + }) + } + if (_.contains(_settings, 'hyperlink')) { + editors.push({ + caption: me.textHyperlink, + id: 'edit-link', + layout: DE.getController('EditHyperlink').getView('EditHyperlink').rootLayout() + }) + } + } + + return editors; + }, + + _showByStack: function(isPhone) { + var me = this, + mainView = DE.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' + + } + })(), DE.Controllers.EditContainer || {})) +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/Toolbar.js b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js index 7ee9e2293..ae1cda6ad 100644 --- a/apps/spreadsheeteditor/mobile/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js @@ -130,7 +130,7 @@ define([ // Inserts showInserts: function () { - // SSE.getController('AddContainer').showModal(); + SSE.getController('AddContainer').showModal(); }, // Settings