[PE] Click on chart placeholder

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

@@ -325,7 +325,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){
@@ -675,18 +678,6 @@ define([
                 me.mode.isEdit = false;
             };
 
-            var onDoubleClickOnChart = function(chart) {
-                if (me.mode.isEdit && !me._isDisabled) {
-                    var diagramEditor = PE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
-
-                    if (diagramEditor && chart) {
-                        diagramEditor.setEditMode(true);
-                        diagramEditor.show();
-                        diagramEditor.setChartData(new Asc.asc_CChartBinary(chart));
-                    }
-                }
-            };
-
             var onTextLanguage = function(langid) {
                 me._currLang.id = langid;
             };
@@ -1581,14 +1572,18 @@ define([
 
                     if (me.mode.isEdit===true) {
                         me.api.asc_registerCallback('asc_onDialogAddHyperlink', _.bind(onDialogAddHyperlink, me));
-                        me.api.asc_registerCallback('asc_doubleClickOnChart', onDoubleClickOnChart);
+                        me.api.asc_registerCallback('asc_doubleClickOnChart', _.bind(me.editChartClick, me));
                         me.api.asc_registerCallback('asc_onSpellCheckVariantsFound',  _.bind(onSpellCheckVariantsFound, me));
                         me.api.asc_registerCallback('asc_onShowSpecialPasteOptions',  _.bind(onShowSpecialPasteOptions, me));
                         me.api.asc_registerCallback('asc_onHideSpecialPasteOptions',  _.bind(onHideSpecialPasteOptions, me));
                         me.api.asc_registerCallback('asc_ChangeCropState',            _.bind(onChangeCropState, me));
-                        me.api.asc_registerCallback('asc_onHidePlaceholderActions',   _.bind(onChangeCropState, me));
+                        me.api.asc_registerCallback('asc_onHidePlaceholderActions',   _.bind(me.onHidePlaceholderActions, me));
                         me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Image, _.bind(me.onInsertImage, me, true));
                         me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.ImageUrl, _.bind(me.onInsertImageUrl, me, true));
+                        me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Chart, _.bind(me.onClickPlaceholderChart, me));
+                        me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Table, _.bind(me.onClickPlaceholder, me, AscCommon.PlaceholderButtonType.Table));
+                        me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Video, _.bind(me.onClickPlaceholder, me, AscCommon.PlaceholderButtonType.Video));
+                        me.api.asc_registerPlaceholderCallback(AscCommon.PlaceholderButtonType.Audio, _.bind(me.onClickPlaceholder, me, AscCommon.PlaceholderButtonType.Audio));
                     }
                     me.api.asc_registerCallback('asc_onCoAuthoringDisconnect',  _.bind(onCoAuthoringDisconnect, me));
                     Common.NotificationCenter.on('api:disconnect',              _.bind(onCoAuthoringDisconnect, me));
@@ -1703,14 +1698,15 @@ define([
             }
         },
         /** coauthoring end **/
-        editChartClick: function(){
+        editChartClick: function(chart){
-            var diagramEditor = PE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
+            if (this.mode.isEdit && !this._isDisabled) {
-            if (diagramEditor) {
+                var diagramEditor = PE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
-                diagramEditor.setEditMode(true);
-                diagramEditor.show();
 
-                var chart = this.api.asc_getChartObject();
+                if (diagramEditor) {
-                if (chart) {
+                    diagramEditor.setEditMode(chart===undefined || typeof chart == 'object'); //edit from doubleclick or context menu
+                    diagramEditor.show();
+                    if (typeof chart !== 'object')
+                        chart = this.api.asc_getChartObject(chart);
                     diagramEditor.setChartData(new Asc.asc_CChartBinary(chart));
                 }
             }
@@ -2664,7 +2660,7 @@ define([
 
             var menuChartEdit = new Common.UI.MenuItem({
                 caption     : me.editChartText
-            }).on('click', _.bind(me.editChartClick, me));
+            }).on('click', _.bind(me.editChartClick, me, undefined));
 
             var menuParagraphVAlign = new Common.UI.MenuItem({
                 caption     : me.vertAlignText,
@@ -3446,6 +3442,76 @@ define([
             })).show();
         },
 
+        onClickPlaceholderChart: function(obj, x, y) {
+            if (!this.api) return;
+            var menu = this.placeholderMenuChart,
+                menuContainer = menu ? this.cmpEl.find(Common.Utils.String.format('#menu-container-{0}', menu.id)) : null,
+                me = this;
+            this._fromShowPlaceholder = true;
+            Common.UI.Menu.Manager.hideAll();
+
+            if (!menu) {
+                this.placeholderMenuChart = menu = new Common.UI.Menu({
+                    style: 'width: 435px;',
+                    items: [
+                        {template: _.template('<div id="id-placeholder-menu-chart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
+                    ]
+                });
+                // Prepare menu container
+                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));
+                this.cmpEl.append(menuContainer);
+                menu.render(menuContainer);
+                menu.cmpEl.attr({tabindex: "-1"});
+                menu.on('hide:after', function(){
+                    if (!me._fromShowPlaceholder)
+                        me.api.asc_uncheckPlaceholders();
+                });
+
+                var picker = new Common.UI.DataView({
+                    el: $('#id-placeholder-menu-chart'),
+                    parentMenu: menu,
+                    showLast: false,
+                    // restoreHeight: 421,
+                    groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
+                    store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                });
+                picker.on('item:click', function (picker, item, record, e) {
+                    me.editChartClick(record.get('type'));
+                });
+            }
+            menuContainer.css({left: x, top : y});
+            menuContainer.attr('data-value', 'prevent-canvas-click');
+            this._preventClick = true;
+            menu.show();
+
+            menu.alignPosition();
+            _.delay(function() {
+                menu.cmpEl.focus();
+            }, 10);
+            this._fromShowPlaceholder = false;
+        },
+
+        onHidePlaceholderActions: function() {
+            this.placeholderMenuChart && this.placeholderMenuChart.hide();
+        },
+
+        onClickPlaceholder: function(type, obj, x, y) {
+            if (!this.api) return;
+
+            switch (type) {
+                case AscCommon.PlaceholderButtonType.Table:
+                    break;
+                case AscCommon.PlaceholderButtonType.Video:
+                    // this.api.addVideo();
+                    break;
+                case AscCommon.PlaceholderButtonType.Audio:
+                    // this.api.addAudio();
+                    break;
+            }
+
+        },
+
         insertRowAboveText      : 'Row Above',
         insertRowBelowText      : 'Row Below',
         insertColumnLeftText    : 'Column Left',