[DE] Bug 42913: replace image from storage.

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/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,16 @@ define([
             }
         },
 
-        insertFromUrl: function() {
+        insertImageFromStorage: function(data) {
+            if (data && data.url && data.c=='change') {
+                var props = new Asc.asc_CImgProperty();
+                props.put_ImageUrl(data.url, data.token);
+                this.api.ImgApply(props);
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
                 var me = this;
                 (new Common.Views.ImageFromUrlDialog({
                     handler: function(result, value) {
@@ -480,6 +493,15 @@ define([
                         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 +628,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,8 @@ define([
         },
 
         setMode: function(mode) {
-            if (this.mergeSettings)
+            this.mergeSettings && this.mergeSettings.setMode(mode);
-                this.mergeSettings.setMode(mode);
+            this.imageSettings && this.imageSettings.setMode(mode);
         },
 
         onBtnMenuClick: function(btn, e) {

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

@@ -498,20 +498,6 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             return item ? item.get('displayValue') : null;
         },
 
-        insertFromUrl: function() {
-            var me = this;
-            (new Common.Views.ImageFromUrlDialog({
-                handler: function(result, value) {
-                    if (result == 'ok') {
-                        var checkUrl = value.replace(/ /g, '');
-                        if (!_.isEmpty(checkUrl)) {
-                            me.props.put_ImageUrl(checkUrl);
-                        }
-                    }
-                }
-            })).show();
-        },
-
         onImageSelect: function(menu, item) {
             if (item.value==1) {
                 var me = this;
@@ -709,7 +695,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
         textColor: 'Text color',
         textNewColor: 'Add New Custom Color',
         textLanguage: 'Language',
-        textFromStorage: 'From storage',
+        textFromStorage: 'From Storage',
         textSelect: 'Select Image'
 
     }, DE.Views.WatermarkSettingsDialog || {}))

apps/documenteditor/main/locale/en.json

@@ -1631,6 +1631,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",
@@ -2426,6 +2427,6 @@
   "DE.Views.WatermarkSettingsDialog.textUnderline": "Underline",
   "DE.Views.WatermarkSettingsDialog.tipFontName": "Font Name",
   "DE.Views.WatermarkSettingsDialog.tipFontSize": "Font Size",
-  "DE.Views.WatermarkSettingsDialog.textFromStorage": "From storage",
+  "DE.Views.WatermarkSettingsDialog.textFromStorage": "From Storage",
   "DE.Views.WatermarkSettingsDialog.textSelect": "Select Image"
 }