Merge pull request #271 from ONLYOFFICE/feature/placeholders

Feature/placeholders

apps/common/main/lib/view/ExternalDiagramEditor.js

@@ -88,6 +88,11 @@ define([
             this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
         },
 
+        show: function() {
+            this.setPlaceholder();
+            Common.UI.Window.prototype.show.apply(this, arguments);
+        },
+
         setChartData: function(data) {
             this._chartData = data;
             if (this._isExternalDocReady)
@@ -143,6 +148,14 @@ define([
             }
         },
 
+        setPlaceholder: function(placeholder) {
+            this._placeholder = placeholder;
+        },
+
+        getPlaceholder: function() {
+            return this._placeholder;
+        },
+
         textSave: 'Save & Exit',
         textClose: 'Close',
         textTitle: 'Chart Editor'

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

@@ -112,7 +112,7 @@ define([
                     if (this.api) {
                         ( diagramEditor.isEditMode() )
                             ? this.api.asc_editChartDrawingObject(data)
-                            : this.api.asc_addChartDrawingObject(data);
+                            : this.api.asc_addChartDrawingObject(data, diagramEditor.getPlaceholder());
                     }
                 }, this));
                 diagramEditor.on('hide', _.bind(function(cmp, message) {

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

@@ -325,6 +325,9 @@ define([
                     });
                     meEl.on('click', function(e){
                         if (e.target.localName == 'canvas') {
+                            if (me._preventClick)
+                                me._preventClick = false;
+                            else
                                 meEl.focus();
                         }
                     });
@@ -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,12 +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(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.onClickPlaceholderTable, me));
+                        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));
@@ -1701,15 +1698,17 @@ define([
             }
         },
         /** coauthoring end **/
-        editChartClick: function(){
+        editChartClick: function(chart, placeholder){
+            if (this.mode.isEdit && !this._isDisabled) {
                 var diagramEditor = PE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
-            if (diagramEditor) {
-                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, placeholder);
                     diagramEditor.setChartData(new Asc.asc_CChartBinary(chart));
+                    diagramEditor.setPlaceholder(placeholder);
                 }
             }
         },
@@ -2662,7 +2661,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,
@@ -2781,29 +2780,12 @@ define([
                             caption     : this.textFromFile
                         }).on('click', function(item) {
                             setTimeout(function(){
-                                if (me.api) me.api.ChangeImageFromFile();
+                                me.onInsertImage();
-                                me.fireEvent('editcomplete', me);
                             }, 10);
                         }),
                         new Common.UI.MenuItem({
                             caption     : this.textFromUrl
-                        }).on('click', function(item) {
+                        }).on('click', _.bind(me.onInsertImageUrl, me, false))
-                            (new Common.Views.ImageFromUrlDialog({
-                                handler: function(result, value) {
-                                    if (result == 'ok') {
-                                        if (me.api) {
-                                            var checkUrl = value.replace(/ /g, '');
-                                            if (!_.isEmpty(checkUrl)) {
-                                                var props = new Asc.asc_CImgProperty();
-                                                props.put_ImageUrl(checkUrl);
-                                                me.api.ImgApply(props);
-                                            }
-                                        }
-                                    }
-                                    me.fireEvent('editcomplete', me);
-                                }
-                            })).show();
-                        })
                     ]
                 })
             });
@@ -3432,6 +3414,159 @@ define([
             this._isDisabled = state;
         },
 
+        onInsertImage: function(placeholder, obj, x, y) {
+            if (this.api)
+                (placeholder) ? this.api.asc_addImage(obj) : this.api.ChangeImageFromFile();
+            this.fireEvent('editcomplete', this);
+        },
+
+        onInsertImageUrl: function(placeholder, obj, x, y) {
+            var me = this;
+            (new Common.Views.ImageFromUrlDialog({
+                handler: function(result, value) {
+                    if (result == 'ok') {
+                        if (me.api) {
+                            var checkUrl = value.replace(/ /g, '');
+                            if (!_.isEmpty(checkUrl)) {
+                                if (placeholder)
+                                    me.api.AddImageUrl(checkUrl, undefined, undefined, obj);
+                                else {
+                                    var props = new Asc.asc_CImgProperty();
+                                    props.put_ImageUrl(checkUrl);
+                                    me.api.ImgApply(props, obj);
+                                }
+                            }
+                        }
+                    }
+                    me.fireEvent('editcomplete', me);
+                }
+            })).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'), obj);
+                });
+            }
+            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;
+        },
+
+        onClickPlaceholderTable: function(obj, x, y) {
+            if (!this.api) return;
+            var menu = this.placeholderMenuTable,
+                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.placeholderMenuTable = menu = new Common.UI.Menu({
+                    items: [
+                        {template: _.template('<div id="id-placeholder-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
+                        {caption: me.mniCustomTable, value: 'custom'}
+                    ]
+                });
+                // 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.DimensionPicker({
+                    el: $('#id-placeholder-menu-tablepicker'),
+                    minRows: 8,
+                    minColumns: 10,
+                    maxRows: 8,
+                    maxColumns: 10
+                });
+                picker.on('select', function(picker, columns, rows){
+                    me.api.put_Table(columns, rows, obj);
+                    me.fireEvent('editcomplete', me);
+                });
+                menu.on('item:click', function(menu, item, e){
+                    if (item.value === 'custom') {
+                        (new Common.Views.InsertTableDialog({
+                            handler: function(result, value) {
+                                if (result == 'ok')
+                                    me.api.put_Table(value.columns, value.rows, obj);
+                                me.fireEvent('editcomplete', me);
+                            }
+                        })).show();
+                    }
+                });
+            }
+            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;
+            if (type == AscCommon.PlaceholderButtonType.Video) {
+                // this.api.addVideo(obj);
+            } else if (type == AscCommon.PlaceholderButtonType.Audio) {
+                // this.api.addAudio(obj);
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
         insertRowAboveText      : 'Row Above',
         insertRowBelowText      : 'Row Below',
         insertColumnLeftText    : 'Column Left',
@@ -3607,7 +3742,8 @@ define([
         toDictionaryText: 'Add to Dictionary',
         txtPrintSelection: 'Print Selection',
         addToLayoutText: 'Add to Layout',
-        txtResetLayout: 'Reset Slide'
+        txtResetLayout: 'Reset Slide',
+        mniCustomTable: 'Insert custom table'
 
     }, PE.Views.DocumentHolder || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1127,6 +1127,7 @@
   "PE.Views.DocumentHolder.txtUnderbar": "Bar under text",
   "PE.Views.DocumentHolder.txtUngroup": "Ungroup",
   "PE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
+  "PE.Views.DocumentHolder.mniCustomTable": "Insert custom table",
   "PE.Views.DocumentPreview.goToSlideText": "Go to Slide",
   "PE.Views.DocumentPreview.slideIndexText": "Slide {0} of {1}",
   "PE.Views.DocumentPreview.txtClose": "Close slideshow",