[PE mobile] Add EditContainer and AddContainer.

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',

apps/presentationeditor/mobile/app/controller/add/AddContainer.js

+/*
+ *
+ * (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 =
+                    '<div class="content-block inset">' +
+                        '<div class="content-block-inner"> ' +
+                            '<p>Under Construction</p>' +
+                        '</div>' +
+                    '</div>';
+
+                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 = $(
+                    '<div class="navbar">' +
+                        '<div data-page="index" class="navbar-inner">' +
+                            '<div class="center sliding categories"></div>' +
+                            (isPhone ? '<div class="right sliding"><a href="#" class="link icon-only close-popup"><i class="icon icon-expand-down"></i></a></div>' : '') +
+                        '</div>' +
+                    '</div>'
+                );
+
+
+                if (isAndroid) {
+                    $layoutNavbar
+                        .find('.center')
+                        .append('<div class="toolbar tabbar"><div data-page="index" class="toolbar-inner"></div></div>');
+
+                    _.each(layoutAdds, function (layout, index) {
+                        $layoutNavbar
+                            .find('.toolbar-inner')
+                            .append(
+                                '<a href="#' + layout.id + '" class="tab-link ' + (index < 1 ? 'active' : '') + '">' + layout.caption + '</a>'
+                            );
+                    });
+                    $layoutNavbar
+                        .find('.toolbar-inner')
+                        .append('<span class="tab-link-highlight" style="width: ' + (100/layoutAdds.length) + '%;"></span>');
+                } else {
+                    $layoutNavbar
+                        .find('.center')
+                        .append('<div class="buttons-row"></div>');
+
+                    _.each(layoutAdds, function (layout, index) {
+                        $layoutNavbar
+                            .find('.buttons-row')
+                            .append(
+                                '<a href="#' + layout.id + '" class="tab-link button ' + (index < 1 ? 'active' : '') + '">' + layout.caption + '</a>'
+                            );
+                    });
+                }
+
+
+                // Content
+
+                var $layoutPages = $(
+                    '<div class="pages">' +
+                        '<div class="page" data-page="index">' +
+                            '<div class="page-content">' +
+                                '<div class="tabs-animated-wrap">' +
+                                    '<div class="tabs"></div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>'
+                );
+
+                _.each(layoutAdds, function (addView, index) {
+                    $layoutPages.find('.tabs').append(
+                        '<div id="' + addView.id + '" class="tab view ' + (index < 1 ? 'active' : '') + '">' +
+                            '<div class="pages">' +
+                                '<div class="page no-navbar">' +
+                                    '<div class="page-content">' +
+                                        addView.layout +
+                                    '</div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>'
+                    );
+                });
+
+                if (isPhone) {
+                    me.picker = $$(uiApp.popup(
+                        '<div class="popup settings container-add">' +
+                            '<div class="view add-root-view navbar-through">' +
+                                $layoutNavbar.prop('outerHTML') +
+                                $layoutPages.prop('outerHTML') +
+                            '</div>' +
+                        '</div>'
+                    ))
+                } else {
+                    me.picker = uiApp.popover(
+                        '<div class="popover settings container-add">' +
+                            '<div class="popover-angle"></div>' +
+                            '<div class="popover-inner">' +
+                                '<div class="content-block">' +
+                                    '<div class="view popover-view add-root-view navbar-through">' +
+                                        $layoutNavbar.prop('outerHTML') +
+                                        $layoutPages.prop('outerHTML') +
+                                    '</div>' +
+                                '</div>' +
+                            '</div>',
+                        $$('#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

apps/presentationeditor/mobile/app/controller/edit/EditContainer.js

+/*
+ *
+ * (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 =
+                    '<div class="content-block inset">' +
+                        '<div class="content-block-inner"> ' +
+                            '<p>Select object to edit</p>' +
+                        '</div>' +
+                    '</div>';
+
+                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 = $(
+                    '<div class="navbar">' +
+                        '<div data-page="index" class="navbar-inner">' +
+                            '<div class="center sliding categories"></div>' +
+                            (isPhone ? '<div class="right sliding"><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a></div>' : '') +
+                        '</div>' +
+                    '</div>'
+                );
+
+                if (layoutEditors.length < 2) {
+                    $layoutNavbar
+                        .find('.center')
+                        .removeClass('categories')
+                        .html(layoutEditors[0].caption);
+                } else {
+                    if (isAndroid) {
+                        $layoutNavbar
+                            .find('.center')
+                            .append('<div class="toolbar tabbar"><div data-page="index" class="toolbar-inner"></div></div>');
+
+                        _.each(layoutEditors, function (layout, index) {
+                            $layoutNavbar
+                                .find('.toolbar-inner')
+                                .append(
+                                    '<a href="#' + layout.id + '" class="tab-link ' + (index < 1 ? 'active' : '') + '">' + layout.caption + '</a>'
+                                );
+                        });
+                        $layoutNavbar
+                            .find('.toolbar-inner')
+                            .append('<span class="tab-link-highlight" style="width: ' + (100/layoutEditors.length) + '%;"></span>');
+                    } else {
+                        $layoutNavbar
+                            .find('.center')
+                            .append('<div class="buttons-row"></div>');
+
+                        _.each(layoutEditors, function (layout, index) {
+                            $layoutNavbar
+                                .find('.buttons-row')
+                                .append(
+                                    '<a href="#' + layout.id + '" class="tab-link button ' + (index < 1 ? 'active' : '') + '">' + layout.caption + '</a>'
+                                );
+                        });
+                    }
+                }
+
+
+                // Content
+
+                var $layoutPages = $(
+                    '<div class="pages">' +
+                        '<div class="page" data-page="index">' +
+                            '<div class="page-content">' +
+                                '<div class="tabs-animated-wrap">' +
+                                    '<div class="tabs"></div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>'
+                );
+
+                _.each(layoutEditors, function (editor, index) {
+                    $layoutPages.find('.tabs').append(
+                        '<div id="' + editor.id + '" class="tab view ' + (index < 1 ? 'active' : '') + '">' +
+                            '<div class="pages">' +
+                                '<div class="page no-navbar">' +
+                                    '<div class="page-content">' +
+                                        editor.layout +
+                                    '</div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>'
+                    );
+                });
+
+                if (isPhone) {
+                    me.picker = $$(uiApp.pickerModal(
+                        '<div class="picker-modal settings container-edit">' +
+                            '<div class="view edit-root-view navbar-through">' +
+                                $layoutNavbar.prop('outerHTML') +
+                                $layoutPages.prop('outerHTML') +
+                            '</div>' +
+                        '</div>'
+                    )).on('close', function (e) {
+                        mainView.showNavbar();
+                    });
+                    mainView.hideNavbar();
+                } else {
+                    me.picker = uiApp.popover(
+                        '<div class="popover settings container-edit">' +
+                            '<div class="popover-angle"></div>' +
+                            '<div class="popover-inner">' +
+                                '<div class="content-block">' +
+                                '<div class="view popover-view edit-root-view navbar-through">' +
+                                    $layoutNavbar.prop('outerHTML') +
+                                    $layoutPages.prop('outerHTML') +
+                                '</div>' +
+                            '</div>' +
+                        '</div>',
+                        $$('#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

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