[DE] Bug 42913: load watermark image from storage.

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') {
-                if (this.toolbar.mode.canRequestInsertImage) {
+                Common.NotificationCenter.trigger('storage:image-load', 'add');
-                    Common.Gateway.requestInsertImage();
-                } else {
-                    (new Common.Views.SelectFileDlg({
-                        fileChoiceUrl: this.toolbar.mode.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
-                    })).on('selectfile', function(obj, file){
-                        me.insertImage(file);
-                    }).show();
-                }
             }
         },
 
-        insertImage: function(data) {
+        openImageFromStorage: function(type) {
-            if (data && data.url) {
+            var me = this;
+            if (this.toolbar.mode.canRequestInsertImage) {
+                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();
+            }
+        },
+
+        insertImageFromStorage: function(data) {
+            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/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/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);
             });
         },
 
@@ -496,6 +512,26 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             })).show();
         },
 
+        onImageSelect: function(menu, item) {
+            if (item.value==1) {
+                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();
+            } else if (item.value==2) {
+                Common.NotificationCenter.trigger('storage:image-load', 'watermark');
+            } else {
+                this.props.showFileDialog();
+            }
+        },
+
         _setDefaults: function (props) {
             this.loadLanguages();
             if (props) {
@@ -672,7 +708,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

@@ -2425,5 +2425,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"
 }