[DE] Added document structure in the left panel.

apps/common/main/lib/component/DataView.js

@@ -143,7 +143,7 @@ define([
             el.off('click').on('click', _.bind(this.onClick, this));
             el.off('dblclick').on('dblclick', _.bind(this.onDblClick, this));
             el.off('contextmenu').on('contextmenu', _.bind(this.onContextMenu, this));
-            el.toggleClass('disabled', this.model.get('disabled'));
+            el.toggleClass('disabled', !!this.model.get('disabled'));
 
             if (!_.isUndefined(this.model.get('cls')))
                 el.addClass(this.model.get('cls'));

apps/common/main/lib/component/TreeView.js

@@ -0,0 +1,199 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *  TreeView.js
+ *
+ *  Created by Julia Radzhabova on 12/14/17
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'common/main/lib/component/DataView'
+], function () {
+    'use strict';
+
+    Common.UI.TreeViewModel = Common.UI.DataViewModel.extend({
+        defaults: function() {
+            return {
+                id: Common.UI.getId(),
+                name: '',
+                hasSubItems: false,
+                isExpanded: true,
+                isVisible: true,
+                selected: false,
+                allowSelected: true,
+                disabled: false,
+                level: 0,
+                index: 0
+            }
+        }
+    });
+
+    Common.UI.TreeViewStore = Backbone.Collection.extend({
+        model: Common.UI.TreeViewModel,
+
+        expand: function(record) {
+            var me = this;
+            var _expand_sub_items = function(idx, expanded, level) {
+                for (var i=idx+1; i<me.length; i++) {
+                    var item = me.at(i);
+                    var item_level = item.get('level');
+                    if (item_level>level) {
+                        if (expanded)
+                            item.set('isVisible', true);
+                        if (item.get('hasSubItems'))
+                            i = _expand_sub_items(i, item.get('isExpanded'), item_level );
+                    } else {
+                        return (i-1);
+                    }
+                }
+            };
+
+            record.set('isExpanded', true);
+            _expand_sub_items(record.get('index'), true, record.get('level'));
+        },
+
+        collapse: function(record) {
+            var start_level = record.get('level'),
+                index = record.get('index');
+            for (var i=index+1; i<this.length; i++) {
+                var item = this.at(i);
+                var item_level = item.get('level');
+                if (item_level>start_level) {
+                    item.set('isVisible', false);
+                } else {
+                    break;
+                }
+            }
+        }
+    });
+
+    Common.UI.TreeView = Common.UI.DataView.extend((function() {
+        return {
+            options: {
+                handleSelect: true,
+                showLast: true,
+                allowScrollbar: true,
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-left: <%= level*10 + 26 %>px;">',
+                    '<% if (hasSubItems) { %>',
+                    '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-left: <%= level*10 %>px;"></div>',
+                    '<% } %>',
+                    '<div class="name"><%= name %></div>',
+                    '</div>'
+                ].join(''))
+            },
+
+            template: _.template([
+                '<div class="treeview inner"></div>'
+            ].join('')),
+
+            initialize : function(options) {
+                options.store = options.store || new Common.UI.TreeViewStore();
+                Common.UI.DataView.prototype.initialize.call(this, options);
+            },
+
+            onAddItem: function(record, index, opts) {
+                var view = new Common.UI.DataViewItem({
+                    template: this.itemTemplate,
+                    model: record
+                });
+
+                if (view) {
+                    var innerEl = $(this.el).find('.inner').addBack().filter('.inner');
+                    if (innerEl) {
+                        if (opts && opts.at == 0)
+                            innerEl.prepend(view.render().el); else
+                            innerEl.append(view.render().el);
+
+                        innerEl.find('.empty-text').remove();
+                        this.dataViewItems.push(view);
+
+                        var name = record.get('name');
+                        if (name.length > 37 - record.get('level')*2)
+                            record.set('tip', name);
+                        if (record.get('tip')) {
+                            var view_el = $(view.el);
+                            view_el.attr('data-toggle', 'tooltip');
+                            view_el.tooltip({
+                                title       : record.get('tip'),
+                                placement   : 'cursor',
+                                zIndex : this.tipZIndex
+                            });
+                        }
+
+                        this.listenTo(view, 'change',      this.onChangeItem);
+                        this.listenTo(view, 'remove',      this.onRemoveItem);
+                        this.listenTo(view, 'click',       this.onClickItem);
+                        this.listenTo(view, 'dblclick',    this.onDblClickItem);
+                        this.listenTo(view, 'select',      this.onSelectItem);
+                        this.listenTo(view, 'contextmenu', this.onContextMenuItem);
+
+                        if (!this.isSuspendEvents)
+                            this.trigger('item:add', this, view, record);
+                    }
+                }
+            },
+
+            onClickItem: function(view, record, e) {
+                var btn = $(e.target);
+                if (btn && btn.hasClass('tree-caret')) {
+                    var tip = view.$el.data('bs.tooltip');
+                    if (tip) (tip.tip()).remove();
+
+                    var isExpanded = !record.get('isExpanded');
+                    record.set('isExpanded', isExpanded);
+                    this.store[(isExpanded) ? 'expand' : 'collapse'](record);
+                    this.scroller.update({minScrollbarLength: 40});
+                } else
+                    Common.UI.DataView.prototype.onClickItem.call(this, view, record, e);
+            },
+
+            expandAll: function() {
+                this.store.each(function(item) {
+                    item.set('isExpanded', true);
+                });
+                this.store.expand(this.store.at(0));
+                this.scroller.update({minScrollbarLength: 40});
+            },
+
+            collapseAll: function() {
+                this.store.collapse(this.store.at(0));
+                this.scroller.update({minScrollbarLength: 40});
+            }
+        }
+    })());
+});

apps/common/main/resources/less/treeview.less

@@ -0,0 +1,41 @@
+.treeview {
+  .item {
+    display: block;
+    width: 100%;
+    .box-shadow(none);
+    margin: 0;
+
+    &:hover,
+    &.over,
+    &.selected {
+      background-color: @secondary;
+    }
+  }
+
+  .tree-item {
+    width: 100%;
+    padding: 0px 0 0 26px;
+  }
+
+  .name {
+    width: 100%;
+    padding: 7px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tree-caret {
+    width: 26px;
+    height: 26px;
+    background-position: 4px -269px;
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    cursor: pointer;
+
+    &.up {
+      transform: rotate(270deg);
+    }
+  }
+}

apps/documenteditor/main/app.js

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

apps/documenteditor/main/app/collection/EquationGroups.js

@@ -42,10 +42,7 @@ define([
     'backbone',
     'documenteditor/main/app/model/EquationGroup'
 ], function(Backbone){ 'use strict';
-    if (Common === undefined)
+    DE.Collections = DE.Collections || {};
-        var Common = {};
-
-    Common.Collections = Common.Collections || {};
 
     DE.Collections.EquationGroups = Backbone.Collection.extend({
         model: DE.Models.EquationGroup

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

@@ -0,0 +1,50 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ * User: Julia.Radzhabova
+ * Date: 14.12.17
+ */
+
+DE.Collections = DE.Collections || {};
+
+define([
+    'underscore',
+    'backbone',
+    'common/main/lib/component/TreeView'
+], function(_, Backbone){
+    'use strict';
+
+    DE.Collections.Navigation = Common.UI.TreeViewStore.extend({
+        model: Common.UI.TreeViewModel
+    });
+});

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

@@ -198,6 +198,8 @@ define([
             if (this.mode.canUseHistory)
                 this.leftMenu.setOptionsPanel('history', this.getApplication().getController('Common.Controllers.History').getView('Common.Views.History'));
 
+            this.leftMenu.setOptionsPanel('navigation', this.getApplication().getController('Navigation').getView('Navigation'));
+
             this.mode.trialMode && this.leftMenu.setDeveloperMode(this.mode.trialMode);
 
             Common.util.Shortcuts.resumeEvents();
@@ -494,6 +496,7 @@ define([
             this.leftMenu.btnChat.setDisabled(true);
             /** coauthoring end **/
             this.leftMenu.btnPlugins.setDisabled(true);
+            this.leftMenu.btnNavigation.setDisabled(true);
 
             this.leftMenu.getMenu('file').setMode({isDisconnected: true, disableDownload: !!disableDownload});
             if ( this.dlgSearch ) {
@@ -511,6 +514,7 @@ define([
             this.leftMenu.btnChat.setDisabled(disable);
             /** coauthoring end **/
             this.leftMenu.btnPlugins.setDisabled(disable);
+            this.leftMenu.btnNavigation.setDisabled(disable);
             if (disableFileMenu) this.leftMenu.getMenu('file').SetDisabled(disable);
         },
 

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

@@ -891,7 +891,8 @@ define([
                     rightmenuController         = application.getController('RightMenu'),
                     leftmenuController          = application.getController('LeftMenu'),
                     chatController              = application.getController('Common.Controllers.Chat'),
-                    pluginsController           = application.getController('Common.Controllers.Plugins');
+                    pluginsController           = application.getController('Common.Controllers.Plugins'),
+                    navigationController        = application.getController('Navigation');
 
                 leftmenuController.getView('LeftMenu').getMenu('file').loadDocument({doc:me.document});
                 leftmenuController.setMode(me.appOptions).createDelayedElements().setApi(me.api);
@@ -904,6 +905,8 @@ define([
                 me.requestPlugins('../../../../plugins.json');
                 me.api.asc_registerCallback('asc_onPluginsInit', _.bind(me.updatePluginsList, me));
 
+                navigationController.setApi(me.api);
+
                 documentHolderController.setApi(me.api);
                 documentHolderController.createDelayedElements();
                 statusbarController.createDelayedElements();

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

@@ -0,0 +1,182 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ * User: Julia.Radzhabova
+ * Date: 14.12.17
+ */
+
+define([
+    'core',
+    'documenteditor/main/app/collection/Navigation',
+    'documenteditor/main/app/view/Navigation'
+], function () {
+    'use strict';
+
+    DE.Controllers.Navigation = Backbone.Controller.extend(_.extend({
+        models: [],
+        collections: [
+            'Navigation'
+        ],
+        views: [
+            'Navigation'
+        ],
+
+        initialize: function() {
+            var me = this;
+            this.addListeners({
+                'Navigation': {
+                    'show': function() {
+                        var obj = me.api.asc_ShowDocumentOutline();
+                        if (!me._navigationObject)
+                            me._navigationObject = obj;
+                        me.updateNavigation();
+                    },
+                    'hide': function() {
+                        me.api.asc_HideDocumentOutline();
+                    }
+                }
+            });
+        },
+
+        events: function() {
+        },
+
+        onLaunch: function() {
+            this.panelNavigation= this.createView('Navigation', {
+                storeNavigation: this.getApplication().getCollection('Navigation')
+            });
+            this.panelNavigation.on('render:after', _.bind(this.onAfterRender, this));
+            this._navigationObject = null;
+        },
+
+        setApi: function(api) {
+            this.api = api;
+            this.api.asc_registerCallback('asc_onDocumentOutlineUpdate', _.bind(this.updateNavigation, this));
+            return this;
+        },
+
+        setMode: function(mode) {
+        },
+
+        onAfterRender: function(panelNavigation) {
+            panelNavigation.viewNavigationList.on('item:click', _.bind(this.onSelectItem, this));
+            panelNavigation.viewNavigationList.on('item:contextmenu', _.bind(this.onItemContextMenu, this));
+            panelNavigation.navigationMenu.on('item:click',           _.bind(this.onMenuItemClick, this));
+        },
+
+        updateNavigation: function() {
+            if (!this._navigationObject) return;
+
+            var count = this._navigationObject.get_ElementsCount(),
+                prev_level = -1,
+                arr = [];
+            for (var i=0; i<count; i++) {
+                var level = this._navigationObject.get_Level(i);
+                if (level>prev_level && i>0)
+                    arr[i-1].set('hasSubItems', true);
+                arr.push(new Common.UI.TreeViewModel({
+                    name : this._navigationObject.get_Text(i),
+                    level: level,
+                    index: i
+                }));
+                prev_level = level;
+
+            }
+            this.getApplication().getCollection('Navigation').reset(arr);
+        },
+
+        onItemContextMenu: function(picker, item, record, e){
+            var showPoint;
+            var menu = this.panelNavigation.navigationMenu;
+            if (menu.isVisible()) {
+                menu.hide();
+            }
+
+            var parentOffset = this.panelNavigation.$el.offset(),
+                top = e.clientY*Common.Utils.zoom();
+            showPoint = [e.clientX*Common.Utils.zoom() + 5, top - parentOffset.top + 5];
+
+            if (record != undefined) {
+                //itemMenu
+                // menu.items[0].setVisible(true);
+            } else {
+            }
+
+            if (showPoint != undefined) {
+                var menuContainer = this.panelNavigation.$el.find('#menu-navigation-container');
+                if (!menu.rendered) {
+                    if (menuContainer.length < 1) {
+                        menuContainer = $('<div id="menu-navigation-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id);
+                        $(this.panelNavigation.$el).append(menuContainer);
+                    }
+                    menu.render(menuContainer);
+                    menu.cmpEl.attr({tabindex: "-1"});
+                }
+
+                menuContainer.css({
+                    left: showPoint[0],
+                    top: showPoint[1]
+                });
+                menu.show();
+            }
+
+        },
+
+        onSelectItem: function(picker, item, record, e){
+            // this.api.asc_gotoHeader();
+        },
+
+        onMenuItemClick: function (menu, item) {
+            if (item.value == 'promote') {
+
+            } else if (item.value == 'promote') {
+
+            } else if (item.value == 'indent') {
+
+            } else if (item.value == 'before') {
+
+            } else if (item.value == 'after') {
+
+            } else if (item.value == 'new') {
+
+            } else if (item.value == 'select') {
+
+            } else if (item.value == 'expand') {
+                this.panelNavigation.viewNavigationList.expandAll();
+            } else  if (item.value == 'collapse') {
+                this.panelNavigation.viewNavigationList.collapseAll();
+            }
+        }
+
+    }, DE.Controllers.Navigation || {}));
+});

apps/documenteditor/main/app/template/LeftMenu.template

@@ -6,6 +6,7 @@
         <button id="left-btn-chat" class="btn btn-category" content-target="left-panel-chat"><i class="icon img-toolbarmenu btn-menu-chat">&nbsp;</i></button>
         <!-- /** coauthoring end **/ -->
         <button id="left-btn-plugins" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-plugin">&nbsp;</i></button>
+        <button id="left-btn-navigation" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-plugin">&nbsp;</i></button>
         <button id="left-btn-support" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-support">&nbsp;</i></button>
         <button id="left-btn-about" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-about">&nbsp;</i></button>
     </div>
@@ -15,5 +16,6 @@
         <div id="left-panel-chat" class="" style="display: none;" />
         <!-- /** coauthoring end **/ -->
         <div id="left-panel-plugins" class="" style="display: none; height: 100%;" />
+        <div id="left-panel-navigation" class="" style="display: none; height: 100%;" />
     </div>
 </div>

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

@@ -53,7 +53,8 @@ define([
     'common/main/lib/view/Plugins',
     'common/main/lib/view/About',
     'common/main/lib/view/SearchDialog',
-    'documenteditor/main/app/view/FileMenu'
+    'documenteditor/main/app/view/FileMenu',
+    'documenteditor/main/app/view/Navigation'
 ], function (menuTemplate, $, _, Backbone) {
     'use strict';
 
@@ -73,6 +74,7 @@ define([
                 'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
                 /** coauthoring end **/
                 'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
+                'click #left-btn-navigation': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-support': function() {
                     var config = this.mode.customization;
                     config && !!config.feedback && !!config.feedback.url ?
@@ -151,6 +153,15 @@ define([
             this.btnPlugins.hide();
             this.btnPlugins.on('click',         _.bind(this.onBtnMenuClick, this));
 
+            this.btnNavigation = new Common.UI.Button({
+                el: $('#left-btn-navigation'),
+                hint: this.tipNavigation,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: 'leftMenuGroup'
+            });
+            this.btnNavigation.on('click',         _.bind(this.onBtnMenuClick, this));
+
             this.btnSearch.on('click',          _.bind(this.onBtnMenuClick, this));
             this.btnAbout.on('toggle',          _.bind(this.onBtnMenuToggle, this));
 
@@ -222,6 +233,12 @@ define([
                         this.panelChat['hide']();
                 }
             }
+            if (this.panelNavigation) {
+                if (this.btnNavigation.pressed) {
+                    this.panelNavigation.show();
+                } else
+                    this.panelNavigation['hide']();
+            }
             /** coauthoring end **/
             // if (this.mode.canPlugins && this.panelPlugins) {
             //     if (this.btnPlugins.pressed) {
@@ -243,6 +260,9 @@ define([
             } else
             if (name == 'plugins' && !this.panelPlugins) {
                 this.panelPlugins = panel.render(/*'#left-panel-plugins'*/);
+            } else
+            if (name == 'navigation' && !this.panelNavigation) {
+                this.panelNavigation = panel.render('#left-panel-navigation');
             }
         },
 
@@ -284,6 +304,10 @@ define([
                     this.panelPlugins['hide']();
                     this.btnPlugins.toggle(false, true);
                 }
+                if (this.panelNavigation) {
+                    this.panelNavigation['hide']();
+                    this.btnNavigation.toggle(false, true);
+                }
             }
         },
 
@@ -304,6 +328,7 @@ define([
             this.btnChat.setDisabled(false);
             /** coauthoring end **/
             this.btnPlugins.setDisabled(false);
+            this.btnNavigation.setDisabled(false);
         },
 
         showMenu: function(menu, opts) {
@@ -385,6 +410,7 @@ define([
         tipSearch   : 'Search',
         tipPlugins  : 'Plugins',
         txtDeveloper: 'DEVELOPER MODE',
-        txtTrial: 'TRIAL MODE'
+        txtTrial: 'TRIAL MODE',
+        tipNavigation: 'Navigation'
     }, DE.Views.LeftMenu || {}));
 });

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

@@ -0,0 +1,151 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ * User: Julia.Radzhabova
+ * Date: 14.12.17
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout',
+    'common/main/lib/component/TreeView'
+], function (template) {
+    'use strict';
+
+    DE.Views.Navigation = Common.UI.BaseView.extend(_.extend({
+        el: '#left-panel-navigation',
+
+        storeNavigation: undefined,
+        template: _.template([
+            '<div id="navigation-box" class="layout-ct vbox">',
+                // '<div id="navigation-header"><%= scope.strNavigate %></div>',
+                '<div id="navigation-list" class="">',
+                '</div>',
+            '</div>'
+        ].join('')),
+
+        initialize: function(options) {
+            _.extend(this, options);
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+        },
+
+        render: function(el) {
+            el = el || this.el;
+            $(el).html(this.template({scope: this}));
+            this.$el = $(el);
+
+            this.viewNavigationList = new Common.UI.TreeView({
+                el: $('#navigation-list'),
+                store: this.storeNavigation,
+                enableKeyEvents: false
+            });
+            this.viewNavigationList.cmpEl.off('click');
+            this.navigationMenu = new Common.UI.Menu({
+                // menuAlign   : 'tr-br',
+                items: [{
+                        caption     : this.txtPromote,
+                        value: 'promote'
+                    },
+                    {
+                        caption     : this.txtIndent,
+                        value: 'indent'
+                    },
+                    {
+                        caption     : '--'
+                    },
+                    {
+                        caption     : this.txtHeadingBefore,
+                        value: 'before'
+                    },
+                    {
+                        caption     : this.txtHeadingAfter,
+                        value: 'after'
+                    },
+                    {
+                        caption     : this.txtNewHeading,
+                        value: 'new'
+                    },
+                    {
+                        caption     : '--'
+                    },
+                    {
+                        caption     : this.txtSelect,
+                        value: 'select'
+                    },
+                    {
+                        caption     : '--'
+                    },
+                    {
+                        caption     : this.txtExpand,
+                        value: 'expand'
+                    },
+                    {
+                        caption     : this.txtCollapse,
+                        value: 'collapse'
+                    }
+                ]
+            });
+
+            this.trigger('render:after', this);
+            return this;
+        },
+
+        show: function () {
+            Common.UI.BaseView.prototype.show.call(this,arguments);
+            this.fireEvent('show', this );
+        },
+
+        hide: function () {
+            Common.UI.BaseView.prototype.hide.call(this,arguments);
+            this.fireEvent('hide', this );
+        },
+
+        ChangeSettings: function(props) {
+        },
+
+        strNavigate: 'Table of Contents',
+        txtPromote: 'Promote',
+        txtIndent: 'Indent',
+        txtHeadingBefore: 'New heading before',
+        txtHeadingAfter: 'New heading after',
+        txtNewHeading: 'New subheading',
+        txtSelect: 'Select content',
+        txtExpand: 'Expand all',
+        txtCollapse: 'Collapse all'
+
+    }, DE.Views.Navigation || {}));
+});

apps/documenteditor/main/app_dev.js

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

apps/documenteditor/main/resources/less/app.less

@@ -88,6 +88,7 @@
 @import "../../../../common/main/resources/less/radiobox.less";
 @import "../../../../common/main/resources/less/dataview.less";
 @import "../../../../common/main/resources/less/listview.less";
+@import "../../../../common/main/resources/less/treeview.less";
 @import "../../../../common/main/resources/less/colorpalette.less";
 @import "../../../../common/main/resources/less/theme-colorpalette.less";
 @import "../../../../common/main/resources/less/dimension-picker.less";
@@ -127,6 +128,7 @@
 @import "filemenu.less";
 @import "rightmenu.less";
 @import "advanced-settings.less";
+@import "navigation.less";
 
 .font-size-small {
     .fontsize(@font-size-small);

apps/documenteditor/main/resources/less/navigation.less

@@ -0,0 +1,23 @@
+#navigation-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    #navigation-header {
+        position: absolute;
+        height: 38px;
+        left: 0;
+        top: 0;
+        width: 100%;
+        font-weight: bold;
+        padding: 10px 12px;
+        border-bottom: 1px solid @gray-dark;
+    }
+
+    #navigation-list {
+        height: 100%;
+        overflow: hidden;
+        padding: 15px 0 10px 0;
+        font-size: 13px;
+    }
+}

apps/documenteditor/sdk_dev_scripts.js

@@ -107,6 +107,7 @@ var sdk_dev_scrpipts = [
 	"../../../../sdkjs/word/Editor/ParagraphChanges.js",
     "../../../../sdkjs/word/Editor/DocumentContentBase.js",
     "../../../../sdkjs/word/Editor/Document.js",
+    "../../../../sdkjs/word/Editor/DocumentOutline.js",
 	"../../../../sdkjs/word/Editor/DocumentChanges.js",
     "../../../../sdkjs/word/Editor/DocumentContent.js",
 	"../../../../sdkjs/word/Editor/DocumentContentChanges.js",