[DE] Show menu for table of contents in canvas.

apps/common/main/lib/extend/Bootstrap.js

@@ -191,6 +191,10 @@ function clearMenus(isFromInputControl) {
     $('.dropdown-toggle').each(function (e) {
         var $parent = ($(this)).parent();
         if (!$parent.hasClass('open')) return;
+        if ($parent.attr('data-value') == 'prevent-canvas-click') {
+            $parent.attr('data-value','');
+            return;
+        }
         $parent.trigger(e = $.Event('hide.bs.dropdown'));
         if (e.isDefaultPrevented()) return;
         $parent.removeClass('open').trigger('hidden.bs.dropdown', isFromInputControl);

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

@@ -85,6 +85,9 @@ define([
                 this.api.asc_registerCallback('asc_onCanAddHyperlink',      _.bind(this.onApiCanAddHyperlink, this));
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this));
                 Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
+                this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this));
+                this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this));
+
             }
             return this;
         },
@@ -252,12 +255,14 @@ define([
                     this.api.asc_RemoveTableOfContents();
                     break;
             }
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
         onTableContentsUpdate: function(type, currentTOC){
             if (currentTOC)
                 currentTOC = this.api.asc_GetTableOfContentsPr(currentTOC).get_InternalClass();
             this.api.asc_UpdateTableOfContents(type == 'pages', currentTOC);
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
         onNotesClick: function(type) {
@@ -306,6 +311,42 @@ define([
                     }, 50);
                     break;
             }
+        },
+
+        onShowContentControlsActions: function(action, x, y) {
+            var menu = (action==1) ? this.view.contentsUpdateMenu : this.view.contentsMenu,
+                documentHolderView  = this.getApplication().getController('DocumentHolder').documentHolder,
+                menuContainer = documentHolderView.cmpEl.find(Common.Utils.String.format('#menu-container-{0}', menu.id));
+
+            if (!menu) return;
+
+            Common.UI.Menu.Manager.hideAll();
+
+            if (!menu.rendered) {
+                // Prepare menu container
+                if (menuContainer.length < 1) {
+                    menuContainer = $(Common.Utils.String.format('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id));
+                    documentHolderView.cmpEl.append(menuContainer);
+                }
+
+                menu.render(menuContainer);
+                menu.cmpEl.attr({tabindex: "-1"});
+            }
+
+            menuContainer.css({left: x, top : y});
+            menuContainer.attr('data-value', 'prevent-canvas-click');
+            documentHolderView._preventClick = true;
+            menu.show();
+
+            menu.alignPosition();
+            _.delay(function() {
+                menu.cmpEl.focus();
+            }, 10);
+        },
+
+        onHideContentControlsActions: function() {
+            this.view.contentsMenu && this.view.contentsMenu.hide();
+            this.view.contentsUpdateMenu && this.view.contentsUpdateMenu.hide();
         }
 
     }, DE.Controllers.Links || {}));

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

@@ -316,7 +316,10 @@ define([
                     });
                     meEl.on('click', function(e){
                         if (e.target.localName == 'canvas') {
-                            meEl.focus();
+                            if (me._preventClick)
+                                me._preventClick = false;
+                            else
+                                meEl.focus();
                         }
                     });
                     meEl.on('mousedown', function(e){

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

@@ -57,6 +57,11 @@ define([
                     me.fireEvent('links:contents', [0]);
                 });
             });
+            this.contentsMenu.on('item:click', function (menu, item, e) {
+                setTimeout(function(){
+                    me.fireEvent('links:contents', [item.value, true]);
+                }, 10);
+            });
 
             this.btnContentsUpdate.menu.on('item:click', function (menu, item, e) {
                 me.fireEvent('links:update', [item.value]);
@@ -64,6 +69,11 @@ define([
             this.btnContentsUpdate.on('click', function (b, e) {
                 me.fireEvent('links:update', ['all']);
             });
+            this.contentsUpdateMenu.on('item:click', function (menu, item, e) {
+                setTimeout(function(){
+                    me.fireEvent('links:update', [item.value, true]);
+                }, 10);
+            });
 
             this.btnsNotes.forEach(function(button) {
                 button.menu.on('item:click', function (menu, item, e) {
@@ -180,6 +190,15 @@ define([
                         btn.setMenu(_menu);
                     });
 
+                    me.contentsMenu = 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'}
+                        ]
+                    });
+
                     me.btnContentsUpdate.updateHint(me.tipContentsUpdate);
                     me.btnContentsUpdate.setMenu(new Common.UI.Menu({
                         items: [
@@ -188,6 +207,13 @@ define([
                         ]
                     }));
 
+                    me.contentsUpdateMenu = new Common.UI.Menu({
+                        items: [
+                            {caption: me.textUpdateAll, value: 'all'},
+                            {caption: me.textUpdatePages, value: 'pages'}
+                        ]
+                    });
+
                     me.btnsNotes.forEach( function(btn, index) {
                         btn.updateHint( me.tipNotes );
 

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

@@ -54,37 +54,31 @@
     height: 38px;
 }
 
-a.item-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;
 
-.btn-contents {
+            .box-shadow(0 0 0 1px @gray);
-    .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 {
-                &:hover,
+                .box-shadow(0 0 0 2px @primary);
-                &.selected {
-                    .box-shadow(0 0 0 2px @primary);
-                }
             }
+        }
 
-            &:hover, &:focus {
+        &:hover, &:focus {
-                background-color: transparent;
+            background-color: transparent;
 
-                div {
+            div {
-                    .box-shadow(0 0 0 2px @primary);
+                .box-shadow(0 0 0 2px @primary);
-                }
             }
         }
     }
 }
 
-
 .color-schemas-menu {
     span {
         &.colors {