[DE forms] Bug 53714

2021-11-29 15:02:22 +03:00 · 2021-11-29 15:02:22 +03:00 · 198c278c29
parent f881e6ad8e
commit 198c278c29
3 changed files with 139 additions and 5 deletions
--- a/apps/documenteditor/forms/app/controller/ApplicationController.js
+++ b/apps/documenteditor/forms/app/controller/ApplicationController.js
@ -11,6 +11,8 @@ define([
    'common/main/lib/util/LocalStorage',
    'common/main/lib/util/Shortcuts',
    'common/main/lib/view/CopyWarningDialog',
+    'common/main/lib/view/ImageFromUrlDialog',
+    'common/main/lib/view/SelectFileDlg',
    'common/forms/lib/view/modals',
    'documenteditor/forms/app/view/ApplicationView'
 ], function (Viewport) {
@ -87,6 +89,7 @@ define([
            this.editorConfig = {};
            this.embedConfig = {};
            this.appOptions = {};
+            this.internalFormObj = null;

            if (this.api){
                this.api.asc_registerCallback('asc_onError',                 this.onError.bind(this));
@ -352,6 +355,9 @@ define([
            this.appOptions.canRequestClose = this.editorConfig.canRequestClose;
            this.appOptions.canBackToFolder = (this.editorConfig.canBackToFolder!==false) && (typeof (this.editorConfig.customization) == 'object') && (typeof (this.editorConfig.customization.goback) == 'object')
                                                && (!_.isEmpty(this.editorConfig.customization.goback.url) || this.editorConfig.customization.goback.requestClose && this.appOptions.canRequestClose);
+
+            this.appOptions.canRequestInsertImage = this.editorConfig.canRequestInsertImage;
+            this.appOptions.fileChoiceUrl   = this.editorConfig.fileChoiceUrl;
        },

        onExternalMessage: function(msg) {
@ -852,10 +858,7 @@ define([
                        if (lock == Asc.c_oAscSdtLockType.SdtContentLocked || lock==Asc.c_oAscSdtLockType.ContentLocked)
                            return;
                    }
-                    this.api.asc_addImage(obj);
-                    setTimeout(function(){
-                        me.api.asc_UncheckContentControlButtons();
-                    }, 500);
+                    this.onShowImageActions(obj, x, y);
                    break;
                case Asc.c_oAscContentControlSpecificType.DropDownList:
                case Asc.c_oAscContentControlSpecificType.ComboBox:
@ -871,6 +874,125 @@ define([
                controlsContainer.hide();
        },

+        onShowImageActions: function(obj, x, y) {
+            var menu = this.imageControlMenu,
+                menuContainer = menu ? this.boxSdk.find(Common.Utils.String.format('#menu-container-{0}', menu.id)) : null,
+                me = this;
+
+            this.internalFormObj = obj && obj.pr ? obj.pr.get_InternalId() : null;
+            this._fromShowContentControls = true;
+            Common.UI.Menu.Manager.hideAll();
+
+            if (!menu) {
+                this.imageControlMenu = menu = new Common.UI.Menu({
+                    maxHeight: 207,
+                    menuAlign: 'tl-bl',
+                    items: [
+                        {caption: this.mniImageFromFile, value: 'file'},
+                        {caption: this.mniImageFromUrl, value: 'url'},
+                        {caption: this.mniImageFromStorage, value: 'storage', visible: this.appOptions.canRequestInsertImage || this.appOptions.fileChoiceUrl && this.appOptions.fileChoiceUrl.indexOf("{documentType}")>-1}
+                    ]
+                });
+                menu.on('item:click', function(menu, item) {
+                    setTimeout(function(){
+                        me.onImageSelect(menu, item);
+                    }, 1);
+                    setTimeout(function(){
+                        me.api.asc_UncheckContentControlButtons();
+                    }, 500);
+                });
+
+                // Prepare menu container
+                if (!menuContainer || menuContainer.length < 1) {
+                    menuContainer = $(Common.Utils.String.format('<div id="menu-container-{0}" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id));
+                    this.boxSdk.append(menuContainer);
+                }
+
+                menu.render(menuContainer);
+                menu.cmpEl.attr({tabindex: "-1"});
+                menu.on('hide:after', function(){
+                    if (!me._fromShowContentControls)
+                        me.api.asc_UncheckContentControlButtons();
+                });
+            }
+            menuContainer.css({left: x, top : y});
+            menuContainer.attr('data-value', 'prevent-canvas-click');
+            this._preventClick = true;
+            menu.show();
+
+            _.delay(function() {
+                menu.cmpEl.focus();
+            }, 10);
+            this._fromShowContentControls = false;
+        },
+
+        onImageSelect: function(menu, item) {
+            if (item.value=='url') {
+                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)) {
+                                    me.setImageUrl(checkUrl);
+                                }
+                            }
+                        }
+                    }
+                })).show();
+            } else if (item.value=='storage') {
+                Common.NotificationCenter.trigger('storage:image-load', 'control');
+            } else {
+                if (this._isFromFile) return;
+                this._isFromFile = true;
+                this.api.asc_addImage(this.internalFormObj);
+                this._isFromFile = false;
+            }
+        },
+
+        openImageFromStorage: function(type) {
+            var me = this;
+            if (this.appOptions.canRequestInsertImage) {
+                Common.Gateway.requestInsertImage(type);
+            } else {
+                (new Common.Views.SelectFileDlg({
+                    fileChoiceUrl: this.appOptions.fileChoiceUrl.replace("{fileExt}", "").replace("{documentType}", "ImagesOnly")
+                })).on('selectfile', function(obj, file){
+                    file && (file.c = type);
+                    !file.images && (file.images = [{fileType: file.fileType, url: file.url}]); // SelectFileDlg uses old format for inserting image
+                    file.url = null;
+                    me.insertImage(file);
+                }).show();
+            }
+        },
+
+        setImageUrl: function(url, token) {
+            this.api.asc_SetContentControlPictureUrl(url, this.internalFormObj && this.internalFormObj.pr ? this.internalFormObj.pr.get_InternalId() : null, token);
+        },
+
+        insertImage: function(data) { // gateway
+            if (data && (data.url || data.images)) {
+                data.url && console.log("Obsolete: The 'url' parameter of the 'insertImage' method is deprecated. Please use 'images' parameter instead.");
+
+                var arr = [];
+                if (data.images && data.images.length>0) {
+                    for (var i=0; i<data.images.length; i++) {
+                        data.images[i] && data.images[i].url && arr.push( data.images[i].url);
+                    }
+                } else
+                    data.url && arr.push(data.url);
+                data._urls = arr;
+            }
+            Common.NotificationCenter.trigger('storage:image-insert', data);
+        },
+
+        insertImageFromStorage: function(data) {
+            if (data && data._urls && data.c=='control') {
+                this.setImageUrl(data._urls[0], data.token);
+            }
+        },
+
        onShowListActions: function(obj, x, y) {
            var type = obj.type,
                props = obj.pr,
@ -1058,6 +1180,9 @@ define([
            Common.Gateway.on('processmouse',       _.bind(this.onProcessMouse, this));
            Common.Gateway.on('downloadas',         _.bind(this.onDownloadAs, this));
            Common.Gateway.on('requestclose',       _.bind(this.onRequestClose, this));
+            Common.Gateway.on('insertimage',        _.bind(this.insertImage, this));
+            Common.NotificationCenter.on('storage:image-load', _.bind(this.openImageFromStorage, this)); // try to load image from storage
+            Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this)); // set loaded image to control

            this.attachUIEvents();

@ -1530,7 +1655,10 @@ define([
        txtChoose: 'Choose an item',
        txtEnterDate: 'Enter a date',
        txtClickToLoad: 'Click to load image',
-        openErrorText: 'An error has occurred while opening the file'
+        openErrorText: 'An error has occurred while opening the file',
+        mniImageFromFile: 'Image from File',
+        mniImageFromUrl: 'Image from URL',
+        mniImageFromStorage: 'Image from Storage'

    }, DE.Controllers.ApplicationController));

--- a/apps/documenteditor/forms/locale/en.json
+++ b/apps/documenteditor/forms/locale/en.json
@ -113,6 +113,9 @@
  "DE.Controllers.ApplicationController.warnLicenseUsersExceeded": "You've reached the user limit for %1 editors. Contact your administrator to learn more.",
  "DE.Controllers.ApplicationController.warnNoLicense": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only.<br>Contact %1 sales team for personal upgrade terms.",
  "DE.Controllers.ApplicationController.warnNoLicenseUsers": "You've reached the user limit for %1 editors. Contact %1 sales team for personal upgrade terms.",
+  "DE.Controllers.ApplicationController.mniImageFromFile": "Image from File",
+  "DE.Controllers.ApplicationController.mniImageFromStorage": "Image from Storage",
+  "DE.Controllers.ApplicationController.mniImageFromUrl": "Image from URL",
  "DE.Views.ApplicationView.textClear": "Clear All Fields",
  "DE.Views.ApplicationView.textCopy": "Copy",
  "DE.Views.ApplicationView.textCut": "Cut",
--- a/apps/documenteditor/forms/locale/ru.json
+++ b/apps/documenteditor/forms/locale/ru.json
@ -112,6 +112,9 @@
  "DE.Controllers.ApplicationController.warnLicenseUsersExceeded": "Вы достигли лимита на количество пользователей редакторов %1. Свяжитесь с администратором, чтобы узнать больше.",
  "DE.Controllers.ApplicationController.warnNoLicense": "Вы достигли лимита на одновременные подключения к редакторам %1. Этот документ будет открыт на просмотр.<br>Напишите в отдел продаж %1, чтобы обсудить индивидуальные условия лицензирования.",
  "DE.Controllers.ApplicationController.warnNoLicenseUsers": "Вы достигли лимита на количество пользователей редакторов %1. Напишите в отдел продаж %1, чтобы обсудить индивидуальные условия обновления.",
+  "DE.Controllers.ApplicationController.mniImageFromFile": "Изображение из файла",
+  "DE.Controllers.ApplicationController.mniImageFromStorage": "Изображение из хранилища",
+  "DE.Controllers.ApplicationController.mniImageFromUrl": "Изображение по URL",
  "DE.Views.ApplicationView.textClear": "Очистить все поля",
  "DE.Views.ApplicationView.textCopy": "Копировать",
  "DE.Views.ApplicationView.textCut": "Вырезать",