[DE] Bug 42913: load image for filling shape from storage.

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/view/RightMenu.js

@@ -247,6 +247,7 @@ define([
         setMode: function(mode) {
             this.mergeSettings && 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,32 +695,56 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        insertFromUrl: function() {
+        insertImageFromStorage: function(data) {
-            var me = this;
+            if (data && data.url && data.c=='fill') {
-            (new Common.Views.ImageFromUrlDialog({
+                if (this.BlipFillType !== null) {
-                handler: function(result, value) {
+                    var props = new Asc.asc_CShapeProperty();
-                    if (result == 'ok') {
+                    var fill = new Asc.asc_CShapeFill();
-                        if (me.api) {
+                    fill.put_type(Asc.c_oAscFill.FILL_TYPE_BLIP);
-                            var checkUrl = value.replace(/ /g, '');
+                    fill.put_fill( new Asc.asc_CFillBlip());
-                            if (!_.isEmpty(checkUrl)) {
+                    fill.get_fill().put_type(this.BlipFillType);
-                                if (me.BlipFillType !== null) {
+                    fill.get_fill().put_url(data.url, data.token);
-                                    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);
+                    props.put_fill(fill);
-                                    me.imgprops.put_ShapeProperties(props);
+                    this.imgprops.put_ShapeProperties(props);
-                                    me.api.ImgApply(me.imgprops);
+                    this.api.ImgApply(this.imgprops);
+                }
+            }
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
+                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 (me.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(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);
                     }
-                    me.fireEvent('editcomplete', me);
+                })).show();
-                }
+            } else if (item.value==2) {
-            })).show();
+                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 +1235,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 +1880,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/locale/en.json

@@ -2009,6 +2009,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",