[DE Mobile] Add header/footer settings

apps/documenteditor/mobile/app-dev.js

@@ -139,6 +139,7 @@ require([
             'EditContainer',
             'EditText',
             'EditParagraph',
+            'EditHeader',
             'EditTable',
             'EditImage',
             'EditShape',
@@ -207,6 +208,7 @@ require([
         'documenteditor/mobile/app/controller/edit/EditContainer',
         'documenteditor/mobile/app/controller/edit/EditText',
         'documenteditor/mobile/app/controller/edit/EditParagraph',
+        'documenteditor/mobile/app/controller/edit/EditHeader',
         'documenteditor/mobile/app/controller/edit/EditTable',
         'documenteditor/mobile/app/controller/edit/EditImage',
         'documenteditor/mobile/app/controller/edit/EditShape',

apps/documenteditor/mobile/app.js

@@ -150,6 +150,7 @@ require([
             'EditContainer',
             'EditText',
             'EditParagraph',
+            'EditHeader',
             'EditTable',
             'EditImage',
             'EditShape',
@@ -218,6 +219,7 @@ require([
         'documenteditor/mobile/app/controller/edit/EditContainer',
         'documenteditor/mobile/app/controller/edit/EditText',
         'documenteditor/mobile/app/controller/edit/EditParagraph',
+        'documenteditor/mobile/app/controller/edit/EditHeader',
         'documenteditor/mobile/app/controller/edit/EditTable',
         'documenteditor/mobile/app/controller/edit/EditImage',
         'documenteditor/mobile/app/controller/edit/EditShape',

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

@@ -49,7 +49,8 @@ define([
 
     DE.Controllers.EditContainer = Backbone.Controller.extend(_.extend((function() {
         // Private
-        var _settings = [];
+        var _settings = [],
+            _headerType = 1;
 
         return {
             models: [],
@@ -135,6 +136,13 @@ define([
                             layout: DE.getController('EditTable').getView('EditTable').rootLayout()
                         })
                     }
+                    if (_.contains(_settings, 'header')) {
+                        editors.push({
+                            caption: _headerType==2 ? me.textFooter : me.textHeader,
+                            id: 'edit-header',
+                            layout: DE.getController('EditHeader').getView('EditHeader').rootLayout()
+                        })
+                    }
                     if (_.contains(_settings, 'shape')) {
                         editors.push({
                             caption: me.textShape,
@@ -360,6 +368,9 @@ define([
                         }
                     } else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
                         _settings.push('hyperlink');
+                    } else if (Asc.c_oAscTypeSelectElement.Header == type) {
+                        _settings.push('header');
+                        _headerType = object.get_ObjectValue().get_Type();
                     }
                 });
 
@@ -378,8 +389,9 @@ define([
             textShape: 'Shape',
             textImage: 'Image',
             textChart: 'Chart',
-            textHyperlink: 'Hyperlink'
+            textHyperlink: 'Hyperlink',
-
+            textHeader: 'Header',
+            textFooter: 'Footer'
         }
     })(), DE.Controllers.EditContainer || {}))
 });

apps/documenteditor/mobile/app/controller/edit/EditHeader.js

@@ -0,0 +1,194 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * 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 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * 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
+ *
+ */
+
+/**
+ *  EditHeader.js
+ *  Document Editor
+ *
+ *  Created by Julia Radzhabova on 2/15/19
+ *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/edit/EditHeader',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (core, view, $, _, Backbone) {
+    'use strict';
+
+    DE.Controllers.EditHeader = Backbone.Controller.extend(_.extend((function() {
+        // Private
+        var _stack = [],
+            _headerObject = undefined,
+            _startAt = 1;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'EditHeader'
+            ],
+
+            initialize: function () {
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
+
+                this.addListeners({
+                    'EditHeader': {
+                        'page:show'     : this.onPageShow
+                    }
+                });
+            },
+
+            setApi: function (api) {
+                var me = this;
+                me.api = api;
+
+                me.api.asc_registerCallback('asc_onFocusObject',        _.bind(me.onApiFocusObject, me));
+            },
+
+            onLaunch: function () {
+                this.createView('EditHeader').render();
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                $('#header-diff-first input:checkbox').single('change',         _.bind(me.onDiffFirst, me));
+                $('#header-diff-odd input:checkbox').single('change',           _.bind(me.onDiffOdd, me));
+                $('#header-same-as input:checkbox').single('change',            _.bind(me.onSameAs, me));
+                $('#header-numbering-continue input:checkbox').single('change', _.bind(me.onNumberingContinue, me));
+                $('#header-numbering-start .button').single('click',            _.bind(me.onStartAt, me));
+
+                me.initSettings();
+            },
+
+            categoryShow: function (e) {
+                var $target = $(e.currentTarget);
+
+                if ($target && $target.prop('id') === 'edit-header') {
+                    this.initSettings();
+                }
+            },
+
+            onPageShow: function () {
+                var me = this;
+                me.initSettings();
+            },
+
+            initSettings: function () {
+                var me = this;
+
+                if (_headerObject) {
+                    $('#header-diff-first input:checkbox').prop('checked', _headerObject.get_DifferentFirst());
+                    $('#header-diff-odd input:checkbox').prop('checked', _headerObject.get_DifferentEvenOdd());
+
+                    var value = _headerObject.get_LinkToPrevious();
+                    $('#header-same-as input:checkbox').prop('checked', !!value);
+                    $('#header-same-as').toggleClass('disabled', value===null);
+
+                    value = _headerObject.get_StartPageNumber();
+                    $('#header-numbering-continue input:checkbox').prop('checked', value<0);
+                    $('#header-numbering-start').toggleClass('disabled', value<0);
+                    if (value>=0)
+                        _startAt=value;
+                    $('#header-numbering-start .item-after label').text(_startAt);
+                }
+            },
+
+            // Public
+            // Handlers
+
+            onDiffFirst: function (e) {
+                var $checkbox = $(e.currentTarget);
+                this.api.HeadersAndFooters_DifferentFirstPage($checkbox.is(':checked'));
+            },
+
+            onDiffOdd: function (e) {
+                var $checkbox = $(e.currentTarget);
+                this.api.HeadersAndFooters_DifferentOddandEvenPage($checkbox.is(':checked'));
+            },
+
+            onSameAs: function (e) {
+                var $checkbox = $(e.currentTarget);
+                this.api.HeadersAndFooters_LinkToPrevious($checkbox.is(':checked'));
+            },
+
+            onNumberingContinue: function (e) {
+                var $checkbox = $(e.currentTarget);
+                $('#header-numbering-start').toggleClass('disabled', $checkbox.is(':checked'));
+                this.api.asc_SetSectionStartPage($checkbox.is(':checked') ? -1 : _startAt);
+            },
+
+            onStartAt: function (e) {
+                var $button = $(e.currentTarget),
+                    start = _startAt;
+
+                if ($button.hasClass('decrement')) {
+                    start = Math.max(1, --start);
+                } else {
+                    start = Math.min(2147483646, ++start);
+                }
+                _startAt = start;
+
+                $('#header-numbering-start .item-after label').text(start);
+
+                this.api.asc_SetSectionStartPage(start);
+            },
+
+            // API handlers
+
+            onApiFocusObject: function (objects) {
+                _stack = objects;
+
+                var headers = [];
+
+                _.each(_stack, function(object) {
+                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) {
+                        headers.push(object);
+                    }
+                });
+
+                if (headers.length > 0) {
+                    var object = headers[headers.length - 1]; // get top
+                    _headerObject = object.get_ObjectValue();
+                } else {
+                    _headerObject = undefined;
+                }
+            }
+        }
+    })(), DE.Controllers.EditHeader || {}))
+});

apps/documenteditor/mobile/app/template/EditHeader.template

@@ -0,0 +1,79 @@
+<!-- Root view -->
+<div id="edit-header-root">
+    <div class="list-block">
+        <ul>
+            <li id="header-diff-first">
+                <div class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title"><%= scope.textDiffFirst %></div>
+                        <div class="item-after">
+                            <label class="label-switch">
+                                <input type="checkbox">
+                                <div class="checkbox"></div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li id="header-diff-odd">
+                <div class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title"><%= scope.textDiffOdd %></div>
+                        <div class="item-after">
+                            <label class="label-switch">
+                                <input type="checkbox">
+                                <div class="checkbox"></div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li id="header-same-as">
+                <div class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title"><%= scope.textSameAs %></div>
+                        <div class="item-after">
+                            <label class="label-switch">
+                                <input type="checkbox">
+                                <div class="checkbox"></div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+    <div class="content-block-title"><%= scope.textPageNumbering %></div>
+    <div class="list-block">
+        <ul>
+            <li id="header-numbering-continue">
+                <div class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title"><%= scope.textPrev %></div>
+                        <div class="item-after">
+                            <label class="label-switch">
+                                <input type="checkbox">
+                                <div class="checkbox"></div>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li id="header-numbering-start">
+                <div class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title"><%= scope.textFrom %></div>
+                        <div class="item-after splitter">
+                            <% if (!android) { %><label></label><% } %>
+                            <p class="buttons-row">
+                                <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                <% if (android) { %><label></label><% } %>
+                                <span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</div>

apps/documenteditor/mobile/app/view/edit/EditHeader.js

@@ -0,0 +1,120 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2019
+ *
+ * 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 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * 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
+ *
+ */
+
+/**
+ *  EditHeader.js
+ *  Document Editor
+ *
+ *  Created by Julia Radzhabova on 2/15/19
+ *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!documenteditor/mobile/app/template/EditHeader.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (editTemplate, $, _, Backbone) {
+    'use strict';
+
+    DE.Views.EditHeader = Backbone.View.extend(_.extend((function() {
+        // private
+
+        return {
+            template: _.template(editTemplate),
+
+            events: {
+            },
+
+            initialize: function () {
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                DE.getController('EditHeader').initSettings();
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone'),
+                    scope   : this
+                }));
+
+                return this;
+            },
+
+            rootLayout: function () {
+                if (this.layout) {
+                    return this.layout
+                        .find('#edit-header-root')
+                        .html();
+                }
+
+                return '';
+            },
+
+            showPage: function (templateId, customFireEvent) {
+                var rootView = DE.getController('EditContainer').rootView;
+
+                if (rootView && this.layout) {
+                    var $content = this.layout.find(templateId);
+
+                    // Android fix for navigation
+                    if (Framework7.prototype.device.android) {
+                        $content.find('.page').append($content.find('.navbar'));
+                    }
+
+                    rootView.router.load({
+                        content: $content.html()
+                    });
+
+                    if (customFireEvent !== true) {
+                        this.fireEvent('page:show', [this, templateId]);
+                    }
+                }
+            },
+
+            textDiffFirst: 'Different first page',
+            textDiffOdd: 'Different odd and even pages',
+            textSameAs: 'Link to Previous',
+            textPageNumbering: 'Page Numbering',
+            textPrev: 'Continue from previous section',
+            textFrom: 'Start at'
+        }
+    })(), DE.Views.EditHeader || {}))
+});

apps/documenteditor/mobile/locale/en.json

@@ -37,6 +37,8 @@
   "DE.Controllers.EditContainer.textShape": "Shape",
   "DE.Controllers.EditContainer.textTable": "Table",
   "DE.Controllers.EditContainer.textText": "Text",
+  "DE.Controllers.EditContainer.textHeader": "Header",
+  "DE.Controllers.EditContainer.textFooter": "Footer",
   "DE.Controllers.EditImage.textEmptyImgUrl": "You need to specify image URL.",
   "DE.Controllers.EditImage.txtNotUrl": "This field should be a URL in the 'http://www.example.com' format",
   "DE.Controllers.EditText.textAuto": "Auto",
@@ -228,6 +230,12 @@
   "DE.Views.EditChart.textTopBottom": "Top and Bottom",
   "DE.Views.EditChart.textType": "Type",
   "DE.Views.EditChart.textWrap": "Wrap",
+  "DE.Views.EditHeader.textDiffFirst": "Different first page",
+  "DE.Views.EditHeader.textDiffOdd": "Different odd and even pages",
+  "DE.Views.EditHeader.textSameAs": "Link to Previous",
+  "DE.Views.EditHeader.textPageNumbering": "Page Numbering",
+  "DE.Views.EditHeader.textPrev": "Continue from previous section",
+  "DE.Views.EditHeader.textFrom": "Start at",
   "DE.Views.EditHyperlink.textDisplay": "Display",
   "DE.Views.EditHyperlink.textEdit": "Edit Link",
   "DE.Views.EditHyperlink.textLink": "Link",