[DE] Added Links tab, added inserting and updating table of contents.

apps/common/main/resources/less/toolbar.less

@@ -278,13 +278,6 @@
 .button-normal-icon(btn-addslide,         11, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-ic-docspell', 12, @toolbar-big-icon-size);
 .button-normal-icon(~'x-huge .btn-ic-review', 13, @toolbar-big-icon-size);
-.button-normal-icon(~'x-huge .btn-ic-reviewview', 30, @toolbar-big-icon-size);
-.button-normal-icon(~'x-huge .btn-ic-sharing', 31, @toolbar-big-icon-size);
-.button-normal-icon(~'x-huge .btn-ic-coedit', 32, @toolbar-big-icon-size);
-.button-normal-icon(~'x-huge .btn-ic-chat', 33, @toolbar-big-icon-size);
-.button-normal-icon(~'x-huge .btn-ic-history', 34, @toolbar-big-icon-size);
-.button-normal-icon(~'x-huge .btn-ic-protect', 35, @toolbar-big-icon-size);
-.button-normal-icon(~'x-huge .btn-ic-signature', 36, @toolbar-big-icon-size);
 .button-normal-icon(review-save,          14, @toolbar-big-icon-size);
 .button-normal-icon(review-deny,          15, @toolbar-big-icon-size);
 .button-normal-icon(review-next,          16, @toolbar-big-icon-size);
@@ -301,3 +294,12 @@
 .button-normal-icon(btn-img-bkwd,         27, @toolbar-big-icon-size);
 .button-normal-icon(btn-img-frwd,         28, @toolbar-big-icon-size);
 .button-normal-icon(btn-img-wrap,         29, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-reviewview', 30, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-sharing', 31, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-coedit', 32, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-chat', 33, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-history', 34, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-protect', 35, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-ic-signature', 36, @toolbar-big-icon-size);
+.button-normal-icon(btn-contents-update, 38, @toolbar-big-icon-size);
+.button-normal-icon(~'x-huge .btn-contents', 53, @toolbar-big-icon-size);

apps/documenteditor/main/app.js

@@ -150,6 +150,7 @@ require([
             'DocumentHolder',
             'Toolbar',
             'Statusbar',
+            'Links',
             'Navigation',
             'RightMenu',
             'LeftMenu',
@@ -175,6 +176,7 @@ require([
         'documenteditor/main/app/controller/DocumentHolder',
         'documenteditor/main/app/controller/Toolbar',
         'documenteditor/main/app/controller/Statusbar',
+        'documenteditor/main/app/controller/Links',
         'documenteditor/main/app/controller/Navigation',
         'documenteditor/main/app/controller/RightMenu',
         'documenteditor/main/app/controller/LeftMenu',

apps/documenteditor/main/app/controller/Links.js

@@ -0,0 +1,147 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * 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
+ *
+ */
+
+/**
+ *  Links.js
+ *
+ *  Created by Julia Radzhabova on 22.12.2017
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/main/app/view/Links'
+], function () {
+    'use strict';
+
+    DE.Controllers.Links = Backbone.Controller.extend(_.extend({
+        models : [],
+        collections : [
+        ],
+        views : [
+            'Links'
+        ],
+        sdkViewName : '#id_main',
+
+        initialize: function () {
+
+            this.addListeners({
+                'Links': {
+                    'links:contents': this.onTableContents,
+                    'links:update': this.onTableContentsUpdate
+                }
+            });
+        },
+        onLaunch: function () {
+            this._state = {};
+            this.editMode = true;
+        },
+
+        setApi: function (api) {
+            if (api) {
+                this.api = api;
+                this.api.asc_registerCallback('asc_onFocusObject', this.onApiFocusObject.bind(this));
+                this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this));
+                Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
+            }
+            return this;
+        },
+
+        setConfig: function(config) {
+            this.toolbar = config.toolbar;
+            this.view = this.createView('Links', {
+                toolbar: this.toolbar
+            });
+        },
+
+        SetDisabled: function(state) {
+            this.view && this.view.SetDisabled(state);
+        },
+
+        getView: function(name) {
+            return !name && this.view ?
+                this.view : Backbone.Controller.prototype.getView.call(this, name);
+        },
+
+        onCoAuthoringDisconnect: function() {
+            this.editMode = false;
+            this.SetDisabled(true);
+        },
+
+        onApiFocusObject: function(selectedObjects) {
+            if (!this.editMode) return;
+
+            var i = -1, type, pr,
+                paragraph_locked = false,
+                header_locked = false;
+
+            while (++i < selectedObjects.length) {
+                type = selectedObjects[i].get_ObjectType();
+                pr   = selectedObjects[i].get_ObjectValue();
+
+                if (type === Asc.c_oAscTypeSelectElement.Paragraph) {
+                    paragraph_locked = pr.get_Locked();
+                } else if (type === Asc.c_oAscTypeSelectElement.Header) {
+                    header_locked = pr.get_Locked();
+                }
+            }
+
+            // var need_disable = paragraph_locked || header_locked;
+            // _.each (this.view.btnsContents, function(item){
+            //     item.setDisabled(need_disable);
+            // }, this);
+        },
+
+        onTableContents: function(type){
+            switch (type) {
+                case 0:
+                    this.api.asc_addTableOfContents(); break;
+                case 1:
+                    this.api.asc_addTableOfContents(); break;
+                case 'settins':
+                    break;
+                case 'remove':
+                    break;
+            }
+        },
+
+        onTableContentsUpdate: function(type){
+            if (type == 'pages')
+                this.api.asc_updateTableOfContents();
+            else
+                this.api.asc_updateaddTableOfContents();
+        }
+
+    }, DE.Controllers.Links || {}));
+});

apps/documenteditor/main/app/controller/Toolbar.js

@@ -2846,15 +2846,19 @@ define([
                 var $panel = this.getApplication().getController('Common.Controllers.ReviewChanges').createToolbarPanel();
 
                 if ( $panel )
-                    me.toolbar.addTab(tab, $panel, 3);
+                    me.toolbar.addTab(tab, $panel, 4);
 
                 if (config.isDesktopApp && config.isOffline) {
                     tab = {action: 'protect', caption: me.toolbar.textTabProtect};
                     $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
 
                     if ( $panel )
-                        me.toolbar.addTab(tab, $panel, 4);
+                        me.toolbar.addTab(tab, $panel, 5);
                 }
+
+                var links = me.getApplication().getController('Links');
+                links.setApi(me.api).setConfig({toolbar: me.toolbar});
+                Array.prototype.push.apply(me.toolbar.toolbarControls, links.getView('Links').getButtons());
             }
         },
 

apps/documenteditor/main/app/template/Toolbar.template

@@ -108,6 +108,7 @@
                 <div class="group">
                     <span class="btn-slot text x-huge btn-pagebreak"></span>
                     <span class="btn-slot text x-huge" id="slot-btn-editheader"></span>
+                    <span class="btn-slot text x-huge btn-contents"></span>
                 </div>
                 <div class="separator long"></div>
                 <div class="group">
@@ -156,6 +157,16 @@
                     <span class="btn-slot text x-huge" id="slot-img-wrapping"></span>
                 </div>
             </section>
+            <section class="panel" data-tab="links">
+                <div class="group">
+                    <span class="btn-slot text x-huge btn-contents"></span>
+                    <span class="btn-slot text x-huge" id="slot-btn-contents-update"></span>
+                </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge slot-notes"></span>
+                </div>
+            </section>
         </section>
     </section>
 </div>

apps/documenteditor/main/app/view/Links.js

@@ -0,0 +1,185 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * 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
+ *
+ */
+
+/**
+ *  Links.js
+ *
+ *  Created by Julia Radzhabova on 22.12.2017
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout'
+], function () {
+    'use strict';
+
+    DE.Views.Links = Common.UI.BaseView.extend(_.extend((function(){
+        function setEvents() {
+            var me = this;
+            this.btnsContents.forEach(function(button) {
+                button.menu.on('item:click', function (menu, item, e) {
+                    me.fireEvent('links:contents', [item.value]);
+                });
+                button.on('click', function (b, e) {
+                    me.fireEvent('links:contents', [0]);
+                });
+            });
+
+            this.btnContentsUpdate.menu.on('item:click', function (menu, item, e) {
+                me.fireEvent('links:update', [item.value]);
+            });
+            this.btnContentsUpdate.on('click', function (b, e) {
+                me.fireEvent('links:update', ['all']);
+            });
+        }
+
+        return {
+
+            options: {},
+
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this);
+                this.toolbar = options.toolbar;
+
+                this.btnsContents = [];
+
+                var me = this,
+                    $host = me.toolbar.$el;
+                var _injectComponent = function (id, cmp) {
+                    var $slot = $host.find(id);
+                    if ($slot.length)
+                        cmp.rendered ? $slot.append(cmp.$el) : cmp.render($slot);
+                };
+
+                var $slots = $host.find('.btn-slot.btn-contents');
+                $slots.each(function(index, el) {
+                    var _cls = 'btn-toolbar';
+                    /x-huge/.test(el.className) && (_cls += ' x-huge icon-top');
+
+                    var button = new Common.UI.Button({
+                        cls: _cls,
+                        iconCls: 'btn-contents',
+                        caption: me.capBtnInsContents,
+                        split: true,
+                        menu: true,
+                        disabled: true
+                    }).render( $slots.eq(index) );
+
+                    me.btnsContents.push(button);
+                });
+
+                this.btnContentsUpdate = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'btn-contents-update',
+                    caption: this.capBtnContentsUpdate,
+                    split: true,
+                    menu: true,
+                    disabled: true
+                });
+                _injectComponent('#slot-btn-contents-update', this.btnContentsUpdate);
+
+                this._state = {disabled: false, hasPassword: false};
+                Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            },
+
+            render: function (el) {
+                return this;
+            },
+
+            onAppReady: function (config) {
+                var me = this;
+                (new Promise(function (accept, reject) {
+                    accept();
+                })).then(function(){
+                    var contentsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem" class="item-contents"><div style="background-position: 0 -<%= options.offsety %>px;" ></div></a>');
+                    me.btnsContents.forEach( function(btn) {
+                        btn.updateHint( me.tipContents );
+
+                        var _menu = new Common.UI.Menu({
+                            items: [
+                                {template: contentsTemplate, offsety: 0, value: 0},
+                                {template: contentsTemplate, offsety: 72, value: 1},
+                                {caption: me.textContentsSettings, value: 'settings'},
+                                {caption: me.textContentsRemove, value: 'remove'}
+                            ]
+                        });
+
+                        btn.setMenu(_menu);
+                    });
+
+                    me.btnContentsUpdate.updateHint(me.tipContentsUpdate);
+                    var _menu = new Common.UI.Menu({
+                        items: [
+                            {caption: me.textUpdateAll, value: 'all'},
+                            {caption: me.textUpdatePages, value: 'pages'}
+                        ]
+                    });
+                    me.btnContentsUpdate.setMenu(_menu);
+
+                    setEvents.call(me);
+                });
+            },
+
+            show: function () {
+                Common.UI.BaseView.prototype.show.call(this);
+                this.fireEvent('show', this);
+            },
+
+            getButtons: function() {
+                return this.btnsContents.concat(this.btnContentsUpdate);
+            },
+
+            SetDisabled: function (state) {
+                this._state.disabled = state;
+                this.btnsContents.forEach(function(button) {
+                    if ( button ) {
+                        button.setDisabled(state);
+                    }
+                }, this);
+                this.btnContentsUpdate.setDisabled(state);
+            },
+
+            capBtnInsContents: 'Table of Contents',
+            tipContents: 'Insert table of contents',
+            textContentsSettings: 'Settings',
+            textContentsRemove: 'Remove table of contents',
+            capBtnContentsUpdate: 'Update',
+            tipContentsUpdate: 'Update table of contents',
+            textUpdateAll: 'Update entire table',
+            textUpdatePages: 'Update page numbers only'
+        }
+    }()), DE.Views.Links || {}));
+});

apps/documenteditor/main/app/view/Navigation.js

@@ -35,9 +35,6 @@
  * Date: 14.12.17
  */
 
-if (Common === undefined)
-    var Common = {};
-
 define([
     'common/main/lib/util/utils',
     'common/main/lib/component/BaseView',

apps/documenteditor/main/app/view/Toolbar.js

@@ -83,7 +83,8 @@ define([
                             { caption: me.textTabFile, action: 'file', extcls: 'canedit'},
                             { caption: me.textTabHome, action: 'home', extcls: 'canedit'},
                             { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
-                            { caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}
+                            { caption: me.textTabLayout, action: 'layout', extcls: 'canedit'},
+                            { caption: me.textTabLinks,  action: 'links', extcls: 'canedit'}
                         ]}
                 );
 
@@ -2458,7 +2459,8 @@ define([
             textColumnsCustom: 'Custom Columns',
             textSurface: 'Surface',
             textTabCollaboration: 'Collaboration',
-            textTabProtect: 'Protection'
+            textTabProtect: 'Protection',
+            textTabLinks: 'Links'
         }
     })(), DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/app_dev.js

@@ -140,6 +140,7 @@ require([
             'DocumentHolder',
             'Toolbar',
             'Statusbar',
+            'Links',
             'Navigation',
             'RightMenu',
             'LeftMenu',
@@ -164,6 +165,7 @@ require([
         'documenteditor/main/app/controller/Viewport',
         'documenteditor/main/app/controller/DocumentHolder',
         'documenteditor/main/app/controller/Toolbar',
+        'documenteditor/main/app/controller/Links',
         'documenteditor/main/app/controller/Navigation',
         'documenteditor/main/app/controller/Statusbar',
         'documenteditor/main/app/controller/RightMenu',

apps/documenteditor/main/resources/less/toolbar.less

@@ -54,6 +54,37 @@
     height: 38px;
 }
 
+a.item-contents {
+}
+
+.btn-contents {
+    .dropdown-menu {
+        > li > a.item-contents {
+            div {
+                .background-ximage('@{app-image-path}/toolbar/contents.png', '@{app-image-path}/toolbar/contents@2x.png', 246px);
+                width: 246px;
+                height: 72px;
+
+                .box-shadow(0 0 0 1px @gray);
+
+                &:hover,
+                &.selected {
+                    .box-shadow(0 0 0 2px @primary);
+                }
+            }
+
+            &:hover, &:focus {
+                background-color: transparent;
+
+                div {
+                    .box-shadow(0 0 0 2px @primary);
+                }
+            }
+        }
+    }
+}
+
+
 .color-schemas-menu {
     span {
         &.colors {