Merge pull request #397 from ONLYOFFICE/feature/Bug-42913

Feature/bug 42913

apps/common/Gateway.js

@@ -306,8 +306,8 @@ if (Common === undefined) {
                 _postMessage({event:'onRequestSendNotify', data: emails});
             },
 
-            requestInsertImage:  function () {
+            requestInsertImage:  function (command) {
-                _postMessage({event:'onRequestInsertImage'});
+                _postMessage({event:'onRequestInsertImage', data: {c: command}});
             },
 
             requestMailMergeRecipients:  function () {

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

@@ -390,6 +390,8 @@ define([
                 Common.NotificationCenter.on('fonts:change',                _.bind(this.onApiChangeFont, this));
                 this.api.asc_registerCallback('asc_onTableDrawModeChanged', _.bind(this.onTableDraw, this));
                 this.api.asc_registerCallback('asc_onTableEraseModeChanged', _.bind(this.onTableErase, this));
+                Common.NotificationCenter.on('storage:image-load', _.bind(this.openImageFromStorage, this));
+                Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
             } else if (this.mode.isRestrictedEdit) {
                 this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onApiFocusObjectRestrictedEdit, this));
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
@@ -1506,26 +1508,36 @@ define([
                     }
                 })).show();
             } else if (item.value === 'storage') {
+                Common.NotificationCenter.trigger('storage:image-load', 'add');
+            }
+        },
+
+        openImageFromStorage: function(type) {
+            var me = this;
             if (this.toolbar.mode.canRequestInsertImage) {
-                    Common.Gateway.requestInsertImage();
+                Common.Gateway.requestInsertImage(type);
             } else {
                 (new Common.Views.SelectFileDlg({
                     fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
                 })).on('selectfile', function(obj, file){
+                    file && (file.c = type);
                     me.insertImage(file);
                 }).show();
             }
-            }
         },
 
-        insertImage: function(data) {
+        insertImageFromStorage: function(data) {
-            if (data && data.url) {
+            if (data && data.url && (!data.c || data.c=='add')) {
                 this.toolbar.fireEvent('insertimage', this.toolbar);
                 this.api.AddImageUrl(data.url, undefined, data.token);// for loading from storage
                 Common.component.Analytics.trackEvent('ToolBar', 'Image');
             }
         },
 
+        insertImage: function(data) { // gateway
+            Common.NotificationCenter.trigger('storage:image-insert', data);
+        },
+
         onBtnInsertTextClick: function(btn, e) {
             if (this.api)
                 this._addAutoshape(btn.pressed, 'textRect');
@@ -2053,6 +2065,7 @@ define([
                         props: me.api.asc_GetWatermarkProps(),
                         api: me.api,
                         lang: me.mode.lang,
+                        storage: me.mode.canRequestInsertImage || me.mode.fileChoiceUrl && me.mode.fileChoiceUrl.indexOf("{documentType}")>-1,
                         fontStore: me.fontstore,
                         handler: function(result, value) {
                             if (result == 'ok') {

apps/documenteditor/main/app/template/ImageSettings.template

@@ -75,20 +75,12 @@
     </tr>
     <tr>
         <td colspan=2>
-            <label class="header" id="image-lbl-replace" ><%= scope.textInsert %></label>
+            <div id="image-button-replace" style="width:100%;"></div>
-        </td>
-    </tr>
-    <tr>
-        <td width="50%">
-            <button type="button" class="btn btn-text-default" id="image-button-from-file" style="width:85px;"><%= scope.textFromFile %></button>
-        </td>
-        <td width="50%">
-            <button type="button" class="btn btn-text-default" id="image-button-from-url" style="width:85px;"><%= scope.textFromUrl %></button>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100px;"><%= scope.textEdit %></button>
+            <button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button>
         </td>
     </tr>
     <tr>

apps/documenteditor/main/app/template/ShapeSettings.template

@@ -17,11 +17,8 @@
             <div id="shape-panel-image-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <table cols="2" style="width: 100%;">
                 <tr>
-                    <td class="padding-small" width="50%">
+                    <td colspan="2" class="padding-small">
-                        <button type="button" class="btn btn-text-default" id="shape-button-from-file" style="width:90px;"><%= scope.textFromFile %></button>
+                        <div id="shape-button-replace" style="width:100%;"></div>
-                    </td>
-                    <td class="padding-small" width="50%">
-                        <button type="button" class="btn btn-text-default" id="shape-button-from-url" style="width:90px;float:right;"><%= scope.textFromUrl %></button>
                     </td>
                 </tr>
                 <tr>

apps/documenteditor/main/app/template/WatermarkSettings.template

@@ -45,13 +45,10 @@
         <div id="watermark-radio-image"></div>
     </td></tr>
     <tr><td class="padding-small">
-        <table id="watermark-tbl-image" cols="3" style="margin-left: 22px;">
+        <table id="watermark-tbl-image" cols="2" style="margin-left: 22px;">
             <tr>
                 <td style="vertical-align: top;">
-                    <button type="button" class="btn btn-text-default" id="watermark-from-file" style="width:90px;"><%= scope.textFromFile %></button>
+                    <div id="watermark-select-image"></div>
-                </td>
-                <td style="vertical-align: top;">
-                    <button type="button" class="btn btn-text-default" id="watermark-from-url" style="width:90px;margin-left: 15px;"><%= scope.textFromUrl %></button>
                 </td>
                 <td rowspan="2">
                     <div style="width: 80px; height: 70px; padding: 9px 14px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;margin-left: 15px;">
@@ -62,9 +59,8 @@
             <tr>
                 <td style="vertical-align: bottom;">
                     <label class="input-label" style=""><%= scope.textScale %></label>
-                    <div id="watermark-combo-scale" style="width: 90px;"></div>
+                    <div id="watermark-combo-scale" style="width: 142px;"></div>
                 </td>
-                <td></td>
             </tr>
             </table>
     </td></tr>

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

@@ -2433,6 +2433,11 @@ define([
                                     me.fireEvent('editcomplete', me);
                                 }
                             })).show();
+                        }),
+                        new Common.UI.MenuItem({
+                            caption     : this.textFromStorage
+                        }).on('click', function(item) {
+                            Common.NotificationCenter.trigger('storage:image-load', 'change');
                         })
                     ]
                 })
@@ -2579,6 +2584,7 @@ define([
                     menuImgReplace.setVisible(value.imgProps.isOnlyImg && (pluginGuid===null || pluginGuid===undefined));
                     if (menuImgReplace.isVisible())
                         menuImgReplace.setDisabled(islocked || pluginGuid===null);
+                    menuImgReplace.menu.items[2].setVisible(me.mode.canRequestInsertImage || me.mode.fileChoiceUrl && me.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
 
                     menuImgRotate.setVisible(!value.imgProps.isChart && (pluginGuid===null || pluginGuid===undefined));
                     if (menuImgRotate.isVisible())
@@ -4416,7 +4422,8 @@ define([
         textCells: 'Cells',
         textSeveral: 'Several Rows/Columns',
         txtInsertCaption: 'Insert Caption',
-        txtEmpty: '(Empty)'
+        txtEmpty: '(Empty)',
+        textFromStorage: 'From Storage'
 
     }, DE.Views.DocumentHolder || {}));
 });

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

@@ -101,9 +101,15 @@ define([
                 this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this));
                 this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
             }
+            Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
+
             return this;
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
         updateMetricUnit: function() {
             var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
             this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(2) + ' ' + Common.Utils.Metric.getCurrentMetricName();
@@ -164,30 +170,13 @@ define([
             this.btnOriginalSize.cmpEl.width(w);
             this.btnFitMargins.cmpEl.width(w);
 
-            this.btnInsertFromFile = new Common.UI.Button({
-                el: $('#image-button-from-file')
-            });
-            this.lockedControls.push(this.btnInsertFromFile);
-
-            this.btnInsertFromUrl = new Common.UI.Button({
-                el: $('#image-button-from-url')
-            });
-            this.lockedControls.push(this.btnInsertFromUrl);
-
             this.btnEditObject = new Common.UI.Button({
                 el: $('#image-button-edit-object')
             });
             this.lockedControls.push(this.btnEditObject);
 
             this.btnOriginalSize.on('click', _.bind(this.setOriginalSize, this));
-            this.btnInsertFromFile.on('click', _.bind(function(btn){
+
-                if (this._isFromFile) return;
-                this._isFromFile = true;
-                if (this.api) this.api.ChangeImageFromFile();
-                this.fireEvent('editcomplete', this);
-                this._isFromFile = false;
-            }, this));
-            this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
             this.btnEditObject.on('click', _.bind(function(btn){
                 if (this.api) this.api.asc_startEditCurrentOleObject();
                 this.fireEvent('editcomplete', this);
@@ -268,8 +257,26 @@ define([
             this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
             this.lockedControls.push(this.btnCrop);
 
+            this.btnSelectImage = new Common.UI.Button({
+                parentEl: $('#image-button-replace'),
+                cls: 'btn-text-menu-default',
+                caption: this.textInsert,
+                style: "width:100%;",
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 194px;',
+                    maxHeight: 200,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
+            });
+            this.lockedControls.push(this.btnSelectImage);
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
+            this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
+
             this.linkAdvanced = $('#image-advanced-link');
-            this.lblReplace = $('#image-lbl-replace');
             $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
 
@@ -335,10 +342,8 @@ define([
                 var pluginGuid = props.asc_getPluginGuid();
                 value = (pluginGuid !== null && pluginGuid !== undefined);
                 if (this._state.isOleObject!==value) {
-                    this.btnInsertFromUrl.setVisible(!value);
+                    this.btnSelectImage.setVisible(!value);
-                    this.btnInsertFromFile.setVisible(!value);
                     this.btnEditObject.setVisible(value);
-                    this.lblReplace.text(value ? this.textEditObject : this.textInsert);
                     this.btnRotate270.setDisabled(value);
                     this.btnRotate90.setDisabled(value);
                     this.btnFlipV.setDisabled(value);
@@ -350,8 +355,7 @@ define([
                     var plugin = DE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
                     this.btnEditObject.setDisabled(plugin===null || plugin ===undefined || this._locked);
                 } else {
-                    this.btnInsertFromUrl.setDisabled(pluginGuid===null || this._locked);
+                    this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
-                    this.btnInsertFromFile.setDisabled(pluginGuid===null || this._locked);
                 }
             }
         },
@@ -463,7 +467,20 @@ define([
             }
         },
 
-        insertFromUrl: function() {
+        setImageUrl: function(url, token) {
+            var props = new Asc.asc_CImgProperty();
+            props.put_ImageUrl(url, token);
+            this.api.ImgApply(props);
+        },
+
+        insertImageFromStorage: function(data) {
+            if (data && data.url && data.c=='change') {
+                this.setImageUrl(data.url, data.token);
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -471,15 +488,22 @@ define([
                             if (me.api) {
                                 var checkUrl = value.replace(/ /g, '');
                                 if (!_.isEmpty(checkUrl)) {
-                                var props = new Asc.asc_CImgProperty();
+                                    me.setImageUrl(checkUrl);
-                                props.put_ImageUrl(checkUrl);
-                                me.api.ImgApply(props);
                                 }
                             }
                         }
                         me.fireEvent('editcomplete', me);
                     }
                 })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'change');
+            } else {
+                if (this._isFromFile) return;
+                this._isFromFile = true;
+                if (this.api) this.api.ChangeImageFromFile();
+                this.fireEvent('editcomplete', this);
+                this._isFromFile = false;
+            }
         },
 
         onBtnRotateClick: function(btn) {
@@ -606,6 +630,7 @@ define([
         textHintFlipH: 'Flip Horizontally',
         textCrop: 'Crop',
         textCropFill: 'Fill',
-        textCropFit: 'Fit'
+        textCropFit: 'Fit',
+        textFromStorage: 'From Storage'
     }, DE.Views.ImageSettings || {}));
 });

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

@@ -245,8 +245,9 @@ define([
         },
 
         setMode: function(mode) {
-            if (this.mergeSettings)
+            this.mergeSettings && this.mergeSettings.setMode(mode);
-                this.mergeSettings.setMode(mode);
+            this.imageSettings && this.imageSettings.setMode(mode);
+            this.shapeSettings && this.shapeSettings.setMode(mode);
         },
 
         onBtnMenuClick: function(btn, e) {

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

@@ -152,9 +152,14 @@ define([
                 this.api.asc_setInterfaceDrawImagePlaceShape('shape-texture-img');
                 this.api.asc_registerCallback('asc_onInitStandartTextures', _.bind(this.onInitStandartTextures, this));
             }
+            Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
             return this;
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
         onFillSrcSelect: function(combo, record) {
             this.ShowHideElem(record.value);
             switch (record.value){
@@ -690,7 +695,29 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        insertFromUrl: function() {
+        setImageUrl: function(url, token) {
+            if (this.BlipFillType !== null) {
+                var props = new Asc.asc_CShapeProperty();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
+                fill.put_fill( new Asc.asc_CFillBlip());
+                fill.get_fill().put_type(this.BlipFillType);
+                fill.get_fill().put_url(url, token);
+
+                props.put_fill(fill);
+                this.imgprops.put_ShapeProperties(props);
+                this.api.ImgApply(this.imgprops);
+            }
+        },
+
+        insertImageFromStorage: function(data) {
+            if (data && data.url && data.c=='fill') {
+                this.setImageUrl(data.url, data.token);
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -698,24 +725,19 @@ define([
                             if (me.api) {
                                 var checkUrl = value.replace(/ /g, '');
                                 if (!_.isEmpty(checkUrl)) {
-                                if (me.BlipFillType !== null) {
+                                    me.setImageUrl(checkUrl);
-                                    var props = new Asc.asc_CShapeProperty();
-                                    var fill = new Asc.asc_CShapeFill();
-                                    fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
-                                    fill.put_fill( new Asc.asc_CFillBlip());
-                                    fill.get_fill().put_type(me.BlipFillType);
-                                    fill.get_fill().put_url(checkUrl);
-
-                                    props.put_fill(fill);
-                                    me.imgprops.put_ShapeProperties(props);
-                                    me.api.ImgApply(me.imgprops);
-                                }
                                 }
                             }
                         }
                         me.fireEvent('editcomplete', me);
                     }
                 })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'fill');
+            } else {
+                if (this.api) this.api.ChangeShapeImageFromFile(this.BlipFillType);
+                this.fireEvent('editcomplete', this);
+            }
         },
 
         openAdvancedSettings: function(e) {
@@ -1206,21 +1228,24 @@ define([
             });
             this.fillControls.push(this.cmbPattern);
 
-            this.btnInsertFromFile = new Common.UI.Button({
+            this.btnSelectImage = new Common.UI.Button({
-                el: $('#shape-button-from-file')
+                parentEl: $('#shape-button-replace'),
+                cls: 'btn-text-menu-default',
+                caption: this.textSelectImage,
+                style: "width:100%;",
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 194px;',
+                    maxHeight: 200,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
             });
-            this.fillControls.push(this.btnInsertFromFile);
+            this.fillControls.push(this.btnSelectImage);
-
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
-            this.btnInsertFromUrl = new Common.UI.Button({
+            this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
-                el: $('#shape-button-from-url')
-            });
-            this.fillControls.push(this.btnInsertFromUrl);
-
-            this.btnInsertFromFile.on('click', _.bind(function(btn){
-                if (this.api) this.api.ChangeShapeImageFromFile(this.BlipFillType);
-                this.fireEvent('editcomplete', this);
-            }, this));
-            this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
 
             this._arrFillType = [
                 {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
@@ -1848,6 +1873,8 @@ define([
         textHint90: 'Rotate 90° Clockwise',
         textHintFlipV: 'Flip Vertically',
         textHintFlipH: 'Flip Horizontally',
-        strShadow: 'Show shadow'
+        strShadow: 'Show shadow',
+        textFromStorage: 'From Storage',
+        textSelectImage: 'Select Picture'
     }, DE.Views.ShapeSettings || {}));
 });

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

@@ -104,6 +104,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             this.props      = options.props;
             this.fontStore = options.fontStore;
             this.api        = options.api;
+            this.storage    = !!options.storage;
             this.textControls = [];
             this.imageControls = [];
             this.fontName = 'Arial';
@@ -165,19 +166,25 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             }, this));
 
             // Image watermark
-            this.btnFromFile = new Common.UI.Button({
+            this.btnSelectImage = new Common.UI.Button({
-                el: $('#watermark-from-file')
+                parentEl: $('#watermark-select-image'),
+                cls: 'btn-text-menu-default',
+                caption: this.textSelect,
+                style: 'width: 142px;',
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 142px;',
+                    maxHeight: 200,
+                    additionalAlign: this.menuAddAlign,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
             });
-            this.btnFromFile.on('click', _.bind(function(btn){
+            this.imageControls.push(this.btnSelectImage);
-                this.props.showFileDialog();
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
-            }, this));
+            this.btnSelectImage.menu.items[2].setVisible(this.storage);
-            this.imageControls.push(this.btnFromFile);
-
-            this.btnFromUrl = new Common.UI.Button({
-                el: $('#watermark-from-url')
-            });
-            this.btnFromUrl.on('click', _.bind(this.insertFromUrl, this));
-            this.imageControls.push(this.btnFromUrl);
 
             this._arrScale = [
                 {displayValue: this.textAuto,   value: -1},
@@ -190,7 +197,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             this.cmbScale = new Common.UI.ComboBox({
                 el          : $('#watermark-combo-scale'),
                 cls         : 'input-group-nr',
-                menuStyle   : 'min-width: 90px;',
+                menuStyle   : 'min-width: 142px;',
                 data        : this._arrScale
             }).on('selected', _.bind(function(combo, record) {
             }, this));
@@ -410,8 +417,17 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                 me.btnOk.setDisabled(false);
             };
             this.api.asc_registerCallback('asc_onWatermarkImageLoaded', onApiWMLoaded);
+
+            var insertImageFromStorage = function(data) {
+                if (data && data.url && data.c=='watermark') {
+                    me.props.put_ImageUrl(data.url, data.token);
+                }
+            };
+            Common.NotificationCenter.on('storage:image-insert', insertImageFromStorage);
+
             this.on('close', function(obj){
                 me.api.asc_unregisterCallback('asc_onWatermarkImageLoaded', onApiWMLoaded);
+                Common.NotificationCenter.off('storage:image-insert', insertImageFromStorage);
             });
         },
 
@@ -482,7 +498,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             return item ? item.get('displayValue') : null;
         },
 
-        insertFromUrl: function() {
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -494,6 +511,11 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                         }
                     }
                 })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'watermark');
+            } else {
+                this.props.showFileDialog();
+            }
         },
 
         _setDefaults: function (props) {
@@ -672,7 +694,9 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
         textHor: 'Horizontal',
         textColor: 'Text color',
         textNewColor: 'Add New Custom Color',
-        textLanguage: 'Language'
+        textLanguage: 'Language',
+        textFromStorage: 'From Storage',
+        textSelect: 'Select Image'
 
     }, DE.Views.WatermarkSettingsDialog || {}))
 });

apps/documenteditor/main/locale/en.json

@@ -1419,6 +1419,7 @@
   "DE.Views.DocumentHolder.txtUngroup": "Ungroup",
   "DE.Views.DocumentHolder.updateStyleText": "Update %1 style",
   "DE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
+  "DE.Views.DocumentHolder.textFromStorage": "From Storage",
   "DE.Views.DropcapSettingsAdvanced.strBorders": "Borders & Fill",
   "DE.Views.DropcapSettingsAdvanced.strDropcap": "Drop Cap",
   "DE.Views.DropcapSettingsAdvanced.strMargins": "Margins",
@@ -1631,6 +1632,7 @@
   "DE.Views.ImageSettings.txtThrough": "Through",
   "DE.Views.ImageSettings.txtTight": "Tight",
   "DE.Views.ImageSettings.txtTopAndBottom": "Top and bottom",
+  "DE.Views.ImageSettings.textFromStorage": "From Storage",
   "DE.Views.ImageSettingsAdvanced.strMargins": "Text Padding",
   "DE.Views.ImageSettingsAdvanced.textAbsoluteWH": "Absolute",
   "DE.Views.ImageSettingsAdvanced.textAlignment": "Alignment",
@@ -2008,6 +2010,8 @@
   "DE.Views.ShapeSettings.txtTight": "Tight",
   "DE.Views.ShapeSettings.txtTopAndBottom": "Top and bottom",
   "DE.Views.ShapeSettings.txtWood": "Wood",
+  "DE.Views.ShapeSettings.textFromStorage": "From Storage",
+  "DE.Views.ShapeSettings.textSelectImage": "Select Picture",
   "DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
   "DE.Views.SignatureSettings.strDelete": "Remove Signature",
   "DE.Views.SignatureSettings.strDetails": "Signature Details",
@@ -2425,5 +2429,7 @@
   "DE.Views.WatermarkSettingsDialog.textTransparency": "Semitransparent",
   "DE.Views.WatermarkSettingsDialog.textUnderline": "Underline",
   "DE.Views.WatermarkSettingsDialog.tipFontName": "Font Name",
-  "DE.Views.WatermarkSettingsDialog.tipFontSize": "Font Size"
+  "DE.Views.WatermarkSettingsDialog.tipFontSize": "Font Size",
+  "DE.Views.WatermarkSettingsDialog.textFromStorage": "From Storage",
+  "DE.Views.WatermarkSettingsDialog.textSelect": "Select Image"
 }

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

@@ -368,6 +368,8 @@ define([
                 this.api.asc_registerCallback('asc_onMathTypes',            _.bind(this.onApiMathTypes, this));
                 this.api.asc_registerCallback('asc_onContextMenu',          _.bind(this.onContextMenu, this));
                 this.api.asc_registerCallback('asc_onTextLanguage',         _.bind(this.onTextLanguage, this));
+                Common.NotificationCenter.on('storage:image-load',          _.bind(this.openImageFromStorage, this));
+                Common.NotificationCenter.on('storage:image-insert',        _.bind(this.insertImageFromStorage, this));
             } else if (this.mode.isRestrictedEdit) {
                 this.api.asc_registerCallback('asc_onCountPages',           _.bind(this.onApiCountPagesRestricted, this));
             }
@@ -1453,26 +1455,36 @@ define([
                     }
                 })).show();
             } else if (opts === 'storage') {
+                Common.NotificationCenter.trigger('storage:image-load', 'add');
+            }
+        },
+
+        openImageFromStorage: function(type) {
+            var me = this;
             if (this.toolbar.mode.canRequestInsertImage) {
-                    Common.Gateway.requestInsertImage();
+                Common.Gateway.requestInsertImage(type);
             } else {
                 (new Common.Views.SelectFileDlg({
                     fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
                 })).on('selectfile', function(obj, file){
+                    file && (file.c = type);
                     me.insertImage(file);
                 }).show();
             }
-            }
         },
 
-        insertImage: function(data) {
+        insertImageFromStorage: function(data) {
-            if (data && data.url) {
+            if (data && data.url && (!data.c || data.c=='add')) {
                 this.toolbar.fireEvent('insertimage', this.toolbar);
                 this.api.AddImageUrl(data.url, undefined, data.token);// for loading from storage
                 Common.component.Analytics.trackEvent('ToolBar', 'Image');
             }
         },
 
+        insertImage: function(data) { // gateway
+            Common.NotificationCenter.trigger('storage:image-insert', data);
+        },
+
         onInsertText: function(status) {
             if ( status == 'begin' ) {
                 this._addAutoshape(true, 'textRect');

apps/presentationeditor/main/app/template/ImageSettings.template

@@ -60,20 +60,12 @@
     </tr>
     <tr>
         <td colspan=2>
-            <label class="header" id="image-lbl-replace" ><%= scope.textInsert %></label>
+            <div id="image-button-replace" style="width:100%;"></div>
-        </td>
-    </tr>
-    <tr>
-        <td width="50%">
-            <button type="button" class="btn btn-text-default" id="image-button-from-file" style="width:85px;"><%= scope.textFromFile %></button>
-        </td>
-        <td width="50%">
-            <button type="button" class="btn btn-text-default" id="image-button-from-url" style="width:85px;"><%= scope.textFromUrl %></button>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100px;"><%= scope.textEdit %></button>
+            <button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button>
         </td>
     </tr>
     <tr>

apps/presentationeditor/main/app/template/ShapeSettings.template

@@ -17,11 +17,8 @@
             <div id="shape-panel-image-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <table cols="2" style="width: 100%;">
                 <tr>
-                    <td class="padding-small" width="50%">
+                    <td colspan="2" class="padding-small">
-                        <button type="button" class="btn btn-text-default" id="shape-button-from-file" style="width:90px;"><%= scope.textFromFile %></button>
+                        <div id="shape-button-replace" style="width:100%;"></div>
-                    </td>
-                    <td class="padding-small" width="50%">
-                        <button type="button" class="btn btn-text-default" id="shape-button-from-url" style="width:90px;float:right;"><%= scope.textFromUrl %></button>
                     </td>
                 </tr>
                 <tr>

apps/presentationeditor/main/app/template/SlideSettings.template

@@ -17,11 +17,8 @@
             <div id="slide-panel-image-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <table cols="2" style="width: 100%;">
                     <tr>
-                        <td class="padding-small" width="50%">
+                        <td colspan="2" class="padding-small">
-                            <button type="button" class="btn btn-text-default" id="slide-button-from-file" style="width:90px;"><%= scope.textFromFile %></button>
+                            <div id="slide-button-replace" style="width:100%;"></div>
-                        </td>
-                        <td class="padding-small" width="50%">
-                            <button type="button" class="btn btn-text-default" id="slide-button-from-url" style="width:90px;float:right;"><%= scope.textFromUrl %></button>
                         </td>
                     </tr>
                     <tr>

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

@@ -2848,7 +2848,12 @@ define([
                         }),
                         new Common.UI.MenuItem({
                             caption     : this.textFromUrl
-                        }).on('click', _.bind(me.onInsertImageUrl, me, false))
+                        }).on('click', _.bind(me.onInsertImageUrl, me, false)),
+                        new Common.UI.MenuItem({
+                            caption     : this.textFromStorage
+                        }).on('click', function(item) {
+                            Common.NotificationCenter.trigger('storage:image-load', 'change');
+                        })
                     ]
                 })
             });
@@ -3357,6 +3362,7 @@ define([
                     menuImgReplace.setVisible(isimage && (pluginGuid===null || pluginGuid===undefined));
                     if (menuImgReplace.isVisible())
                         menuImgReplace.setDisabled(disabled || pluginGuid===null);
+                    menuImgReplace.menu.items[2].setVisible(me.mode.canRequestInsertImage || me.mode.fileChoiceUrl && me.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
                     
                     me.menuImgCrop.setVisible(me.api.asc_canEditCrop());
                     if (me.menuImgCrop.isVisible())
@@ -3811,7 +3817,8 @@ define([
         txtPrintSelection: 'Print Selection',
         addToLayoutText: 'Add to Layout',
         txtResetLayout: 'Reset Slide',
-        mniCustomTable: 'Insert Custom Table'
+        mniCustomTable: 'Insert Custom Table',
+        textFromStorage: 'From Storage'
 
     }, PE.Views.DocumentHolder || {}));
 });

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

@@ -97,9 +97,14 @@ define([
             if (this.api) {
                 this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
             }
+            Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
             return this;
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
         updateMetricUnit: function() {
             var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
             this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(2) + ' ' + Common.Utils.Metric.getCurrentMetricName();
@@ -114,15 +119,24 @@ define([
             });
             this.lockedControls.push(this.btnOriginalSize);
 
-            this.btnInsertFromFile = new Common.UI.Button({
+            this.btnSelectImage = new Common.UI.Button({
-                el: $('#image-button-from-file')
+                parentEl: $('#image-button-replace'),
+                cls: 'btn-text-menu-default',
+                caption: this.textInsert,
+                style: "width:100%;",
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 194px;',
+                    maxHeight: 200,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
             });
-            this.lockedControls.push(this.btnInsertFromFile);
+            this.lockedControls.push(this.btnSelectImage);
-
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
-            this.btnInsertFromUrl = new Common.UI.Button({
+            this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
-                el: $('#image-button-from-url')
-            });
-            this.lockedControls.push(this.btnInsertFromUrl);
 
             this.btnEditObject = new Common.UI.Button({
                 el: $('#image-button-edit-object')
@@ -130,14 +144,6 @@ define([
             this.lockedControls.push(this.btnEditObject);
 
             this.btnOriginalSize.on('click', _.bind(this.setOriginalSize, this));
-            this.btnInsertFromFile.on('click', _.bind(function(btn){
-                if (this._isFromFile) return;
-                this._isFromFile = true;
-                if (this.api) this.api.ChangeImageFromFile();
-                this.fireEvent('editcomplete', this);
-                this._isFromFile = false;
-            }, this));
-            this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
             this.btnEditObject.on('click', _.bind(function(btn){
                 if (this.api) this.api.asc_startEditCurrentOleObject();
                 this.fireEvent('editcomplete', this);
@@ -228,7 +234,6 @@ define([
             this.lockedControls.push(this.btnFlipH);
 
             this.linkAdvanced = $('#image-advanced-link');
-            this.lblReplace = $('#image-lbl-replace');
             $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
 
@@ -264,10 +269,8 @@ define([
                 var pluginGuid = props.asc_getPluginGuid();
                 value = (pluginGuid !== null && pluginGuid !== undefined); // undefined - only images are selected, null - selected images and ole-objects
                 if (this._state.isOleObject!==value) {
-                    this.btnInsertFromUrl.setVisible(!value);
+                    this.btnSelectImage.setVisible(!value);
-                    this.btnInsertFromFile.setVisible(!value);
                     this.btnEditObject.setVisible(value);
-                    this.lblReplace.text(value ? this.textEditObject : this.textInsert);
                     this.btnRotate270.setDisabled(value);
                     this.btnRotate90.setDisabled(value);
                     this.btnFlipV.setDisabled(value);
@@ -279,8 +282,7 @@ define([
                     var plugin = PE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
                     this.btnEditObject.setDisabled(plugin===null || plugin ===undefined || this._locked);
                 } else {
-                    this.btnInsertFromUrl.setDisabled(pluginGuid===null || this._locked);
+                    this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
-                    this.btnInsertFromFile.setDisabled(pluginGuid===null || this._locked);
                 }
             }
         },
@@ -303,7 +305,20 @@ define([
             }
         },
 
-        insertFromUrl: function() {
+        setImageUrl: function(url, token) {
+            var props = new Asc.asc_CImgProperty();
+            props.put_ImageUrl(url, token);
+            this.api.ImgApply(props);
+        },
+
+        insertImageFromStorage: function(data) {
+            if (data && data.url && data.c=='change') {
+                this.setImageUrl(data.url, data.token);
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -311,15 +326,22 @@ define([
                             if (me.api) {
                                 var checkUrl = value.replace(/ /g, '');
                                 if (!_.isEmpty(checkUrl)) {
-                                var props = new Asc.asc_CImgProperty();
+                                    me.setImageUrl(checkUrl);
-                                props.put_ImageUrl(checkUrl);
-                                me.api.ImgApply(props);
                                 }
                             }
                         }
                         me.fireEvent('editcomplete', me);
                     }
                 })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'change');
+            } else {
+                if (this._isFromFile) return;
+                this._isFromFile = true;
+                if (this.api) this.api.ChangeImageFromFile();
+                this.fireEvent('editcomplete', this);
+                this._isFromFile = false;
+            }
         },
         
         openAdvancedSettings: function(e) {
@@ -448,7 +470,7 @@ define([
         textCrop: 'Crop',
         textCropFill: 'Fill',
         textCropFit: 'Fit',
-        textFitSlide: 'Fit to Slide'
+        textFitSlide: 'Fit to Slide',
-
+        textFromStorage: 'From Storage'
     }, PE.Views.ImageSettings || {}));
 });

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

@@ -228,7 +228,9 @@ define([
         },
 
         setMode: function(mode) {
-
+            this.imageSettings && this.imageSettings.setMode(mode);
+            this.shapeSettings && this.shapeSettings.setMode(mode);
+            this.slideSettings && this.slideSettings.setMode(mode);
         },
 
         onBtnMenuClick: function(btn, e) {

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

@@ -146,9 +146,14 @@ define([
                 this.api.asc_setInterfaceDrawImagePlaceShape('shape-texture-img');
                 this.api.asc_registerCallback('asc_onInitStandartTextures', _.bind(this.onInitStandartTextures, this));
             }
+            Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
             return this;
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
         onFillSrcSelect: function(combo, record) {
             this.ShowHideElem(record.value);
             switch (record.value){
@@ -630,7 +635,28 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        insertFromUrl: function() {
+        setImageUrl: function(url, token) {
+            if (this.BlipFillType !== null) {
+                var props = new Asc.asc_CShapeProperty();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
+                fill.put_fill( new Asc.asc_CFillBlip());
+                fill.get_fill().put_type(this.BlipFillType);
+                fill.get_fill().put_url(url, token);
+
+                props.put_fill(fill);
+                this.api.ShapeApply(props);
+            }
+        },
+
+        insertImageFromStorage: function(data) {
+            if (data && data.url && data.c=='fill') {
+                this.setImageUrl(data.url, data.token);
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -638,23 +664,19 @@ define([
                             if (me.api) {
                                 var checkUrl = value.replace(/ /g, '');
                                 if (!_.isEmpty(checkUrl)) {
-                                if (me.BlipFillType !== null) {
+                                    me.setImageUrl(checkUrl);
-                                    var props = new Asc.asc_CShapeProperty();
-                                    var fill = new Asc.asc_CShapeFill();
-                                    fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
-                                    fill.put_fill( new Asc.asc_CFillBlip());
-                                    fill.get_fill().put_type(me.BlipFillType);
-                                    fill.get_fill().put_url(checkUrl);
-
-                                    props.put_fill(fill);
-                                    me.api.ShapeApply(props);
-                                }
                                 }
                             }
                         }
                         me.fireEvent('editcomplete', me);
                     }
                 })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'fill');
+            } else {
+                if (this.api) this.api.ChangeShapeImageFromFile(this.BlipFillType);
+                this.fireEvent('editcomplete', this);
+            }
         },
 
         openAdvancedSettings: function(e) {
@@ -1119,21 +1141,24 @@ define([
             });
             this.fillControls.push(this.cmbPattern);
 
-            this.btnInsertFromFile = new Common.UI.Button({
+            this.btnSelectImage = new Common.UI.Button({
-                el: $('#shape-button-from-file')
+                parentEl: $('#shape-button-replace'),
+                cls: 'btn-text-menu-default',
+                caption: this.textSelectImage,
+                style: "width:100%;",
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 194px;',
+                    maxHeight: 200,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
             });
-            this.fillControls.push(this.btnInsertFromFile);
+            this.fillControls.push(this.btnSelectImage);
-
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
-            this.btnInsertFromUrl = new Common.UI.Button({
+            this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
-                el: $('#shape-button-from-url')
-            });
-            this.fillControls.push(this.btnInsertFromUrl);
-
-            this.btnInsertFromFile.on('click', _.bind(function(btn){
-                if (this.api) this.api.ChangeShapeImageFromFile(this.BlipFillType);
-                this.fireEvent('editcomplete', this);
-            }, this));
-            this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
 
             this._arrFillType = [
                 {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
@@ -1712,6 +1737,8 @@ define([
         textHint90: 'Rotate 90° Clockwise',
         textHintFlipV: 'Flip Vertically',
         textHintFlipH: 'Flip Horizontally',
-        strShadow: 'Show shadow'
+        strShadow: 'Show shadow',
+        textFromStorage: 'From Storage',
+        textSelectImage: 'Select Picture'
     }, PE.Views.ShapeSettings || {}));
 });

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

@@ -292,9 +292,14 @@ define([
                 this.api.SetInterfaceDrawImagePlaceSlide('slide-texture-img');
                 this.api.asc_registerCallback('asc_onInitStandartTextures', _.bind(this.onInitStandartTextures, this));
             }
+            Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
             return this;
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
         onFillSrcSelect: function(combo, record) {
             this.ShowHideElem(record.value);
             switch (record.value){
@@ -640,7 +645,28 @@ define([
             }
         },
 
-        insertFromUrl: function() {
+        setImageUrl: function(url, token) {
+            if (this.BlipFillType !== null) {
+                var props = new Asc.CAscSlideProps();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
+                fill.put_fill( new Asc.asc_CFillBlip());
+                fill.get_fill().put_type(this.BlipFillType);
+                fill.get_fill().put_url(url, token);
+
+                props.put_background(fill);
+                this.api.SetSlideProps(props);
+            }
+        },
+
+        insertImageFromStorage: function(data) {
+            if (data && data.url && data.c=='slide') {
+                this.setImageUrl(data.url, data.token);
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -648,23 +674,19 @@ define([
                             if (me.api) {
                                 var checkUrl = value.replace(/ /g, '');
                                 if (!_.isEmpty(checkUrl)) {
-                                if (me.BlipFillType !== null) {
+                                    me.setImageUrl(checkUrl);
-                                    var props = new Asc.CAscSlideProps();
-                                    var fill = new Asc.asc_CShapeFill();
-                                    fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
-                                    fill.put_fill( new Asc.asc_CFillBlip());
-                                    fill.get_fill().put_type(me.BlipFillType);
-                                    fill.get_fill().put_url(checkUrl);
-
-                                    props.put_background(fill);
-                                    me.api.SetSlideProps(props);
-                                }
                                 }
                             }
                         }
                         me.fireEvent('editcomplete', me);
                     }
                 })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'slide');
+            } else {
+                if (this.api) this.api.ChangeSlideImageFromFile(this.BlipFillType);
+                this.fireEvent('editcomplete', this);
+            }
         },
 
         createDelayedControls: function() {
@@ -692,20 +714,24 @@ define([
             this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
             this.FillItems.push(this.cmbPattern);
 
-            this.btnInsertFromFile = new Common.UI.Button({
+            this.btnSelectImage = new Common.UI.Button({
-                el: $('#slide-button-from-file')
+                parentEl: $('#slide-button-replace'),
+                cls: 'btn-text-menu-default',
+                caption: this.textSelectImage,
+                style: "width:100%;",
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 194px;',
+                    maxHeight: 200,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
             });
-            this.btnInsertFromFile.on('click', _.bind(function(btn){
+            this.FillItems.push(this.btnSelectImage);
-                if (this.api) this.api.ChangeSlideImageFromFile(this.BlipFillType);
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
-                this.fireEvent('editcomplete', this);
+            this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
-            }, this));
-            this.FillItems.push(this.btnInsertFromFile);
-
-            this.btnInsertFromUrl = new Common.UI.Button({
-                el: $('#slide-button-from-url')
-            });
-            this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
-            this.FillItems.push(this.btnInsertFromUrl);
 
             this._arrFillType = [
                 {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
@@ -1534,6 +1560,8 @@ define([
         textGradient: 'Gradient',
         textSec: 's',
         strSlideNum: 'Show Slide Number',
-        strDateTime: 'Show Date and Time'
+        strDateTime: 'Show Date and Time',
+        textFromStorage: 'From Storage',
+        textSelectImage: 'Select Picture'
     }, PE.Views.SlideSettings || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1156,6 +1156,7 @@
   "PE.Views.DocumentHolder.txtUnderbar": "Bar under text",
   "PE.Views.DocumentHolder.txtUngroup": "Ungroup",
   "PE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
+  "PE.Views.DocumentHolder.textFromStorage": "From Storage",
   "PE.Views.DocumentPreview.goToSlideText": "Go to Slide",
   "PE.Views.DocumentPreview.slideIndexText": "Slide {0} of {1}",
   "PE.Views.DocumentPreview.txtClose": "Close slideshow",
@@ -1313,6 +1314,7 @@
   "PE.Views.ImageSettings.textRotation": "Rotation",
   "PE.Views.ImageSettings.textSize": "Size",
   "PE.Views.ImageSettings.textWidth": "Width",
+  "PE.Views.ImageSettings.textFromStorage": "From Storage",
   "PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",
   "PE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
   "PE.Views.ImageSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.",
@@ -1445,6 +1447,8 @@
   "PE.Views.ShapeSettings.txtNoBorders": "No Line",
   "PE.Views.ShapeSettings.txtPapyrus": "Papyrus",
   "PE.Views.ShapeSettings.txtWood": "Wood",
+  "PE.Views.ShapeSettings.textFromStorage": "From Storage",
+  "PE.Views.ShapeSettings.textSelectImage": "Select Picture",
   "PE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
   "PE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
   "PE.Views.ShapeSettingsAdvanced.textAlt": "Alternative Text",
@@ -1572,6 +1576,8 @@
   "PE.Views.SlideSettings.txtLeather": "Leather",
   "PE.Views.SlideSettings.txtPapyrus": "Papyrus",
   "PE.Views.SlideSettings.txtWood": "Wood",
+  "PE.Views.SlideSettings.textFromStorage": "From Storage",
+  "PE.Views.SlideSettings.textSelectImage": "Select Picture",
   "PE.Views.SlideshowSettings.textLoop": "Loop continuously until 'Esc' is pressed",
   "PE.Views.SlideshowSettings.textTitle": "Show Settings",
   "PE.Views.SlideSizeSettings.strLandscape": "Landscape",

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

@@ -1649,6 +1649,7 @@ define([
                 var pluginGuid = (documentHolder.mnuImgAdvanced.imageInfo) ? documentHolder.mnuImgAdvanced.imageInfo.asc_getPluginGuid() : null;
                 documentHolder.menuImgReplace.setVisible(isimageonly && (pluginGuid===null || pluginGuid===undefined));
                 documentHolder.menuImgReplace.setDisabled(isObjLocked || pluginGuid===null);
+                documentHolder.menuImgReplace.menu.items[2].setVisible(this.permissions.canRequestInsertImage || this.permissions.fileChoiceUrl && this.permissions.fileChoiceUrl.indexOf("{documentType}")>-1);
                 documentHolder.menuImageArrange.setDisabled(isObjLocked);
 
                 documentHolder.menuImgRotate.setVisible(!ischartmenu && (pluginGuid===null || pluginGuid===undefined));
@@ -3211,6 +3212,8 @@ define([
                         if (me.api) me.api.asc_changeImageFromFile();
                         Common.NotificationCenter.trigger('edit:complete', me.documentHolder);
                     }, 10);
+                } else if (item.value == 'storage') {
+                    Common.NotificationCenter.trigger('storage:image-load', 'change');
                 } else {
                     (new Common.Views.ImageFromUrlDialog({
                         handler: function(result, value) {

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

@@ -399,6 +399,8 @@ define([
                     this.api.asc_registerCallback('asc_onSendThemeColors',      _.bind(this.onSendThemeColors, this));
                     this.api.asc_registerCallback('asc_onMathTypes',            _.bind(this.onApiMathTypes, this));
                     this.api.asc_registerCallback('asc_onContextMenu',          _.bind(this.onContextMenu, this));
+                    Common.NotificationCenter.on('storage:image-load',          _.bind(this.openImageFromStorage, this));
+                    Common.NotificationCenter.on('storage:image-insert',        _.bind(this.insertImageFromStorage, this));
                 }
                 this.api.asc_registerCallback('asc_onInitEditorStyles',     _.bind(this.onApiInitEditorStyles, this));
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onApiCoAuthoringDisconnect, this));
@@ -852,26 +854,36 @@ define([
                     }
                 })).show();
             } else if (item.value === 'storage') {
+                Common.NotificationCenter.trigger('storage:image-load', 'add');
+            }
+        },
+
+        openImageFromStorage: function(type) {
+            var me = this;
             if (this.toolbar.mode.canRequestInsertImage) {
-                    Common.Gateway.requestInsertImage();
+                Common.Gateway.requestInsertImage(type);
             } else {
                 (new Common.Views.SelectFileDlg({
                     fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
                 })).on('selectfile', function(obj, file){
+                    file && (file.c = type);
                     me.insertImage(file);
                 }).show();
             }
-            }
         },
 
-        insertImage: function(data) {
+        insertImageFromStorage: function(data) {
-            if (data && data.url) {
+            if (data && data.url && (!data.c || data.c=='add')) {
                 this.toolbar.fireEvent('insertimage', this.toolbar);
                 this.api.asc_addImageDrawingObject(data.url, undefined, data.token);// for loading from storage
                 Common.component.Analytics.trackEvent('ToolBar', 'Image');
             }
         },
 
+        insertImage: function(data) { // gateway
+            Common.NotificationCenter.trigger('storage:image-insert', data);
+        },
+
         onHyperlink: function(btn) {
             var me = this;
             var win,

apps/spreadsheeteditor/main/app/template/ImageSettings.template

@@ -62,20 +62,12 @@
     </tr>
     <tr>
         <td colspan=2>
-            <label class="header" id="image-lbl-replace"><%= scope.textInsert %></label>
+            <div id="image-button-replace" style="width:100%;"></div>
-        </td>
-    </tr>
-    <tr>
-        <td width="50%">
-            <button type="button" class="btn btn-text-default" id="image-button-from-file" style="width:85px;"><%= scope.textFromFile %></button>
-        </td>
-        <td width="50%">
-            <button type="button" class="btn btn-text-default" id="image-button-from-url" style="width:85px;"><%= scope.textFromUrl %></button>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100px;"><%= scope.textEdit %></button>
+            <button type="button" class="btn btn-text-default hidden" id="image-button-edit-object" style="width:100%;"><%= scope.textEditObject %></button>
         </td>
     </tr>
     <tr>

apps/spreadsheeteditor/main/app/template/ShapeSettings.template

@@ -17,11 +17,8 @@
             <div id="shape-panel-image-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <table cols="2" style="width: 100%;">
                 <tr>
-                    <td class="padding-small" width="50%">
+                    <td colspan="2" class="padding-small">
-                        <button type="button" class="btn btn-text-default" id="shape-button-from-file" style="width:90px;"><%= scope.textFromFile %></button>
+                        <div id="shape-button-replace" style="width:100%;"></div>
-                    </td>
-                    <td class="padding-small" width="50%">
-                        <button type="button" class="btn btn-text-default" id="shape-button-from-url" style="width:90px;float:right;"><%= scope.textFromUrl %></button>
                     </td>
                 </tr>
                 <tr>

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

@@ -600,7 +600,8 @@ define([
                     menuAlign: 'tl-tr',
                     items: [
                         new Common.UI.MenuItem({caption     : this.textFromFile, value: 'file'}),
-                        new Common.UI.MenuItem({caption     : this.textFromUrl, value: 'url'})
+                        new Common.UI.MenuItem({caption     : this.textFromUrl, value: 'url'}),
+                        new Common.UI.MenuItem({caption     : this.textFromStorage, value: 'storage'})
                     ]
                 })
             });
@@ -1098,7 +1099,8 @@ define([
         textCrop: 'Crop',
         textCropFill: 'Fill',
         textCropFit: 'Fit',
-        textListSettings: 'List Settings'
+        textListSettings: 'List Settings',
+        textFromStorage: 'From Storage'
 
     }, SSE.Views.DocumentHolder || {}));
 });

apps/spreadsheeteditor/main/app/view/ImageSettings.js

@@ -101,9 +101,14 @@ define([
             if (this.api) {
                 this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
             }
+            Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
             return this;
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
         updateMetricUnit: function() {
             if (this.spinners) {
                 for (var i=0; i<this.spinners.length; i++) {
@@ -166,15 +171,24 @@ define([
             });
             this.lockedControls.push(this.btnOriginalSize);
 
-            this.btnInsertFromFile = new Common.UI.Button({
+            this.btnSelectImage = new Common.UI.Button({
-                el: $('#image-button-from-file')
+                parentEl: $('#image-button-replace'),
+                cls: 'btn-text-menu-default',
+                caption: this.textInsert,
+                style: "width:100%;",
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 194px;',
+                    maxHeight: 200,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
             });
-            this.lockedControls.push(this.btnInsertFromFile);
+            this.lockedControls.push(this.btnSelectImage);
-
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
-            this.btnInsertFromUrl = new Common.UI.Button({
+            this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
-                el: $('#image-button-from-url')
-            });
-            this.lockedControls.push(this.btnInsertFromUrl);
 
             this.btnEditObject = new Common.UI.Button({
                 el: $('#image-button-edit-object')
@@ -186,20 +200,10 @@ define([
             this.spnWidth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
             this.spnHeight.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
             this.btnOriginalSize.on('click', _.bind(this.setOriginalSize, this));
-            this.btnInsertFromFile.on('click', _.bind(function(btn){
-                if (this._isFromFile) return;
-                this._isFromFile = true;
-                if (this.api) this.api.asc_changeImageFromFile();
-                Common.NotificationCenter.trigger('edit:complete', this);
-                this._isFromFile = false;
-            }, this));
             this.btnEditObject.on('click', _.bind(function(btn){
                 if (this.api) this.api.asc_startEditCurrentOleObject();
                 Common.NotificationCenter.trigger('edit:complete', this);
             }, this));
-            this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
-
-            this.lblReplace = $('#image-lbl-replace');
 
             var w = this.btnOriginalSize.cmpEl.outerWidth();
             this.btnCrop = new Common.UI.Button({
@@ -355,10 +359,8 @@ define([
                 var pluginGuid = props.asc_getPluginGuid();
                 value = (pluginGuid !== null && pluginGuid !== undefined);
                 if (this._state.isOleObject!==value) {
-                    this.btnInsertFromUrl.setVisible(!value);
+                    this.btnSelectImage.setVisible(!value);
-                    this.btnInsertFromFile.setVisible(!value);
                     this.btnEditObject.setVisible(value);
-                    this.lblReplace.text(value ? this.textEditObject : this.textInsert);
                     this.btnRotate270.setDisabled(value);
                     this.btnRotate90.setDisabled(value);
                     this.btnFlipV.setDisabled(value);
@@ -370,8 +372,7 @@ define([
                     var plugin = SSE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
                     this.btnEditObject.setDisabled(plugin===null || plugin ===undefined || this._locked);
                 } else {
-                    this.btnInsertFromUrl.setDisabled(pluginGuid===null || this._locked);
+                    this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
-                    this.btnInsertFromFile.setDisabled(pluginGuid===null || this._locked);
                 }
             }
         },
@@ -430,7 +431,20 @@ define([
             }
         },
 
-        insertFromUrl: function() {
+        setImageUrl: function(url, token) {
+            var props = new Asc.asc_CImgProperty();
+            props.asc_putImageUrl(url, token);
+            this.api.asc_setGraphicObjectProps(props);
+        },
+        
+        insertImageFromStorage: function(data) {
+            if (data && data.url && data.c=='change') {
+                this.setImageUrl(data.url, data.token);
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -438,15 +452,22 @@ define([
                             if (me.api) {
                                 var checkUrl = value.replace(/ /g, '');
                                 if (!_.isEmpty(checkUrl)) {
-                                var props = new Asc.asc_CImgProperty();
+                                    me.setImageUrl(checkUrl);
-                                props.asc_putImageUrl(checkUrl);
-                                me.api.asc_setGraphicObjectProps(props);
                                 }
                             }
                         }
                         Common.NotificationCenter.trigger('edit:complete', me);
                     }
                 })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'change');
+            } else {
+                if (this._isFromFile) return;
+                this._isFromFile = true;
+                if (this.api) this.api.asc_changeImageFromFile();
+                Common.NotificationCenter.trigger('edit:complete', this);
+                this._isFromFile = false;
+            }
         },
 
         _changeCropState: function(state) {
@@ -531,6 +552,7 @@ define([
         textHintFlipH: 'Flip Horizontally',
         textCrop: 'Crop',
         textCropFill: 'Fill',
-        textCropFit: 'Fit'
+        textCropFit: 'Fit',
+        textFromStorage: 'From Storage'
     }, SSE.Views.ImageSettings || {}));
 });

apps/spreadsheeteditor/main/app/view/RightMenu.js

@@ -250,6 +250,8 @@ define([
 
         setMode: function(mode) {
             this.mode = mode;
+            this.imageSettings && this.imageSettings.setMode(mode);
+            this.shapeSettings && this.shapeSettings.setMode(mode);
             return this;
         },
 

apps/spreadsheeteditor/main/app/view/ShapeSettings.js

@@ -147,9 +147,14 @@ define([
                 this.api.asc_setInterfaceDrawImagePlaceShape('shape-texture-img');
                 this.api.asc_registerCallback('asc_onInitStandartTextures', _.bind(this.onInitStandartTextures, this));
             }
+            Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this));
             return this;
         },
 
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
         onFillSrcSelect: function(combo, record) {
             this.ShowHideElem(record.value);
             switch (record.value){
@@ -649,7 +654,29 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this);
         },
 
-        insertFromUrl: function() {
+        setImageUrl: function(url, token) {
+            if (this.BlipFillType !== null) {
+                var props = new Asc.asc_CShapeProperty();
+                var fill = new Asc.asc_CShapeFill();
+                fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_BLIP);
+                fill.asc_putFill( new Asc.asc_CFillBlip());
+                fill.asc_getFill().asc_putType(this.BlipFillType);
+                fill.asc_getFill().asc_putUrl(url, token);
+
+                props.asc_putFill(fill);
+                this.imgprops.asc_putShapeProperties(props);
+                this.api.asc_setGraphicObjectProps(this.imgprops);
+            }
+        },
+
+        insertImageFromStorage: function(data) {
+            if (data && data.url && data.c=='fill') {
+                this.setImageUrl(data.url, data.token);
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -657,24 +684,19 @@ define([
                             if (me.api) {
                                 var checkUrl = value.replace(/ /g, '');
                                 if (!_.isEmpty(checkUrl)) {
-                                if (me.BlipFillType !== null) {
+                                    me.setImageUrl(checkUrl);
-                                    var props = new Asc.asc_CShapeProperty();
-                                    var fill = new Asc.asc_CShapeFill();
-                                    fill.asc_putType(Asc.c_oAscFill.FILL_TYPE_BLIP);
-                                    fill.asc_putFill( new Asc.asc_CFillBlip());
-                                    fill.asc_getFill().asc_putType(me.BlipFillType);
-                                    fill.asc_getFill().asc_putUrl(checkUrl);
-
-                                    props.asc_putFill(fill);
-                                    me.imgprops.asc_putShapeProperties(props);
-                                    me.api.asc_setGraphicObjectProps(me.imgprops);
-                                }
                                 }
                             }
                         }
                         Common.NotificationCenter.trigger('edit:complete', me);
                     }
                 })).show();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'fill');
+            } else {
+                if (this.api) this.api.asc_changeShapeImageFromFile(this.BlipFillType);
+                Common.NotificationCenter.trigger('edit:complete', this);
+            }
         },
 
         openAdvancedSettings: function(e) {
@@ -1143,21 +1165,24 @@ define([
             });
             this.fillControls.push(this.cmbPattern);
 
-            this.btnInsertFromFile = new Common.UI.Button({
+            this.btnSelectImage = new Common.UI.Button({
-                el: $('#shape-button-from-file')
+                parentEl: $('#shape-button-replace'),
+                cls: 'btn-text-menu-default',
+                caption: this.textSelectImage,
+                style: "width:100%;",
+                menu: new Common.UI.Menu({
+                    style: 'min-width: 194px;',
+                    maxHeight: 200,
+                    items: [
+                        {caption: this.textFromFile, value: 0},
+                        {caption: this.textFromUrl, value: 1},
+                        {caption: this.textFromStorage, value: 2}
+                    ]
+                })
             });
-            this.fillControls.push(this.btnInsertFromFile);
+            this.fillControls.push(this.btnSelectImage);
-
+            this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
-            this.btnInsertFromUrl = new Common.UI.Button({
+            this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1);
-                el: $('#shape-button-from-url')
-            });
-            this.fillControls.push(this.btnInsertFromUrl);
-
-            this.btnInsertFromFile.on('click', _.bind(function(btn){
-                if (this.api) this.api.asc_changeShapeImageFromFile(this.BlipFillType);
-                Common.NotificationCenter.trigger('edit:complete', this);
-            }, this));
-            this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
 
             this._arrFillType = [
                 {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
@@ -1740,6 +1765,8 @@ define([
         textHint90: 'Rotate 90° Clockwise',
         textHintFlipV: 'Flip Vertically',
         textHintFlipH: 'Flip Horizontally',
-        strShadow: 'Show shadow'
+        strShadow: 'Show shadow',
+        textFromStorage: 'From Storage',
+        textSelectImage: 'Select Picture'
     }, SSE.Views.ShapeSettings || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1575,6 +1575,7 @@
   "SSE.Views.DocumentHolder.txtUngroup": "Ungroup",
   "SSE.Views.DocumentHolder.txtWidth": "Width",
   "SSE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
+  "SSE.Views.DocumentHolder.textFromStorage": "From Storage",
   "SSE.Views.FieldSettingsDialog.textTitle": "Field Settings",
   "SSE.Views.FieldSettingsDialog.strSubtotals": "Subtotals",
   "SSE.Views.FieldSettingsDialog.strLayout": "Layout",
@@ -1831,6 +1832,7 @@
   "SSE.Views.ImageSettings.textRotation": "Rotation",
   "SSE.Views.ImageSettings.textSize": "Size",
   "SSE.Views.ImageSettings.textWidth": "Width",
+  "SSE.Views.ImageSettings.textFromStorage": "From Storage",
   "SSE.Views.ImageSettingsAdvanced.textAbsolute": "Don't move or size with cells",
   "SSE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",
   "SSE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
@@ -2173,6 +2175,8 @@
   "SSE.Views.ShapeSettings.txtNoBorders": "No Line",
   "SSE.Views.ShapeSettings.txtPapyrus": "Papyrus",
   "SSE.Views.ShapeSettings.txtWood": "Wood",
+  "SSE.Views.ShapeSettings.textFromStorage": "From Storage",
+  "SSE.Views.ShapeSettings.textSelectImage": "Select Picture",
   "SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
   "SSE.Views.ShapeSettingsAdvanced.strMargins": "Text Padding",
   "SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells",