Unify drag & drop handling.

Back port drag & drop handling changes from scout 10.x: - If42e98749929f203f2b54b741a9f82e0e7f93cac - I5690860699b6865b7d9f34e6063b8d7abeac6584 - Ia118153649bd69c2c9746401ecba528b0ae5ab0e 301777 Signed-off-by: Cyrill Wyss <cyrill.wyss@bsi-software.com>
eclipse-scout · Sep 7, 2021 · 68d2e2f · 68d2e2f
1 parent c686644
commit 68d2e2f
Show file tree

Hide file tree

Showing 15 changed files with 371 additions and 153 deletions.
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout-module.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout-module.js
@@ -34,9 +34,11 @@
   __include("scout/util/dates.js");
   __include("scout/util/defaultValues.js");
   __include("scout/util/events.js");
+  __include("scout/util/files.js");
   __include("scout/util/Device.js");
   __include("scout/util/DoubleClickSupport.js");
   __include("scout/util/dragAndDrop.js");
+  __include("scout/util/DragAndDropHandler.js");
   __include("scout/util/Event.js");
   __include("scout/util/EventSupport.js");
   __include("scout/util/fonts.js");

diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/filechooser/FileChooser.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/filechooser/FileChooser.js
@@ -75,11 +75,6 @@ scout.FileChooser.prototype._render = function() {
   // DnD and Multiple files are only supported with the new file api
   if (!this.fileInput.legacy) {
 
-    // Install DnD support
-    this.$container.on('dragenter', this._onDragEnterOrOver.bind(this))
-      .on('dragover', this._onDragEnterOrOver.bind(this))
-      .on('drop', this._onDrop.bind(this));
-
     // explanation for file chooser
     this.$content.appendDiv('file-chooser-label')
       .text(this.session.text('ui.FileChooserHint'));
@@ -140,6 +135,11 @@ scout.FileChooser.prototype._renderProperties = function() {
   this._renderFiles();
 };
 
+scout.FileChooser.prototype._renderEnabled = function() {
+  scout.FileChooser.parent.prototype._renderEnabled.call(this);
+  this._installOrUninstallDragAndDropHandler();
+};
+
 scout.FileChooser.prototype._postRender = function() {
   scout.FileChooser.parent.prototype._postRender.call(this);
   this._installFocusContext();
@@ -151,6 +151,50 @@ scout.FileChooser.prototype._remove = function() {
   scout.FileChooser.parent.prototype._remove.call(this);
 };
 
+scout.FileChooser.prototype._createDragAndDropHandler = function() {
+  return scout.dragAndDrop.handler(this, {
+    supportedScoutTypes: scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER,
+    validateFiles: function(event) {
+    },
+    onDrop: function(event) {
+      this.addFiles(event.files);
+    }.bind(this),
+    dropType: function() {
+      return scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER;
+    },
+    dropMaximumSize: function() {
+      return this.maximumUploadSize;
+    }.bind(this)
+  });
+};
+
+scout.FileChooser.prototype._installOrUninstallDragAndDropHandler = function() {
+  if (this.enabledComputed) {
+    this._installDragAndDropHandler();
+  } else {
+    this._uninstallDragAndDropHandler();
+  }
+};
+
+scout.FileChooser.prototype._installDragAndDropHandler = function() {
+  if (this.dragAndDropHandler) {
+    return;
+  }
+  this.dragAndDropHandler = this._createDragAndDropHandler();
+  if (!this.dragAndDropHandler) {
+    return;
+  }
+  this.dragAndDropHandler.install(this.$container);
+};
+
+scout.FileChooser.prototype._uninstallDragAndDropHandler = function() {
+  if (!this.dragAndDropHandler) {
+    return;
+  }
+  this.dragAndDropHandler.uninstall();
+  this.dragAndDropHandler = null;
+};
+
 scout.FileChooser.prototype._installFocusContext = function() {
   this.session.focusManager.installFocusContext(this.$container, scout.focusRule.AUTO);
 };
@@ -309,16 +353,6 @@ scout.FileChooser.prototype._renderFiles = function() {
   this.$uploadButton.setEnabled(files.length > 0);
 };
 
-scout.FileChooser.prototype._onDragEnterOrOver = function(event) {
-  scout.dragAndDrop.verifyDataTransferTypesScoutTypes(event, scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER);
-};
-
-scout.FileChooser.prototype._onDrop = function(event) {
-  if (scout.dragAndDrop.dataTransferTypesContainsScoutTypes(event.originalEvent.dataTransfer, scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER)) {
-    $.suppressEvent(event);
-    this.addFiles(event.originalEvent.dataTransfer.files);
-  }
-};
 
 scout.FileChooser.prototype._onUploadButtonClicked = function(event) {
   this.trigger('upload');

diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/filechooser/FileInput.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/filechooser/FileInput.js
@@ -52,10 +52,7 @@ scout.FileInput.prototype._render = function() {
     .on('change', this._onFileChange.bind(this));
 
   if (!this.legacy) {
-    this.$container = this.$parent.appendDiv('file-input input-field')
-      .on('dragenter', this._onDragEnterOrOver.bind(this))
-      .on('dragover', this._onDragEnterOrOver.bind(this))
-      .on('drop', this._onDrop.bind(this));
+    this.$container = this.$parent.appendDiv('file-input input-field');
     this.$fileInput.appendTo(this.$container);
     this.$container.on('mousedown', this._onMouseDown.bind(this));
     this.$text = this.$container.appendDiv('file-input-text');
@@ -108,6 +105,7 @@ scout.FileInput.prototype._renderProperties = function() {
 
 scout.FileInput.prototype._renderEnabled = function() {
   scout.FileInput.parent.prototype._renderEnabled.call(this);
+  this._installOrUninstallDragAndDropHandler();
 
   if (this.legacy) {
     this.$fileInput.setEnabled(this.enabled);
@@ -120,6 +118,52 @@ scout.FileInput.prototype.setText = function(text) {
   this.setProperty('text', text);
 };
 
+scout.FileInput.prototype._createDragAndDropHandler = function() {
+  return scout.dragAndDrop.handler(this, {
+    supportedScoutTypes: scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER,
+    validateFiles: function() {
+    },
+    onDrop: function(event) {
+      if (event.files.length >= 1) {
+        this._setFiles(event.files);
+      }
+    }.bind(this),
+    dropType: function() {
+      return scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER;
+    },
+    dropMaximumSize: function() {
+      return this.maximumUploadSize;
+    }.bind(this)
+  });
+};
+
+scout.FileInput.prototype._installOrUninstallDragAndDropHandler = function() {
+  if (this.enabledComputed) {
+    this._installDragAndDropHandler();
+  } else {
+    this._uninstallDragAndDropHandler();
+  }
+};
+
+scout.FileInput.prototype._installDragAndDropHandler = function() {
+  if (this.dragAndDropHandler) {
+    return;
+  }
+  this.dragAndDropHandler = this._createDragAndDropHandler();
+  if (!this.dragAndDropHandler) {
+    return;
+  }
+  this.dragAndDropHandler.install(this.$container);
+};
+
+scout.FileInput.prototype._uninstallDragAndDropHandler = function() {
+  if (!this.dragAndDropHandler) {
+    return;
+  }
+  this.dragAndDropHandler.uninstall();
+  this.dragAndDropHandler = null;
+};
+
 scout.FileInput.prototype._renderText = function() {
   if (this.legacy) {
     return;
@@ -221,22 +265,6 @@ scout.FileInput.prototype._onMouseDown = function() {
   this.browse();
 };
 
-scout.FileInput.prototype._onDragEnterOrOver = function(event) {
-  scout.dragAndDrop.verifyDataTransferTypesScoutTypes(event, scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER);
-};
-
-scout.FileInput.prototype._onDrop = function(event) {
-  if (scout.dragAndDrop.dataTransferTypesContainsScoutTypes(event.originalEvent.dataTransfer, scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER)) {
-    event.stopPropagation();
-    event.preventDefault();
-
-    var files = event.originalEvent.dataTransfer.files;
-    if (files.length >= 1) {
-      this._setFiles(files);
-    }
-  }
-};
-
 scout.FileInput.fileListToArray = function(fileList) {
   var files = [],
     i;
@@ -247,16 +275,7 @@ scout.FileInput.fileListToArray = function(fileList) {
 };
 
 scout.FileInput.prototype.validateMaximumUploadSize = function(files) {
-  files = scout.arrays.ensure(files);
-  if (files.length === 0) {
-    return;
-  }
-
-  var totalSize = files.reduce(function(total, file) {
-    return total + file.size;
-  }, 0);
-
-  if (this.maximumUploadSize !== null && totalSize > this.maximumUploadSize) {
+  if (!scout.files.validateMaximumUploadSize(files, this.maximumUploadSize)) {
     throw this.session.text('ui.FileSizeLimit', (this.maximumUploadSize / 1024 / 1024));
   }
 };
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js
@@ -511,6 +511,7 @@ scout.FormField.prototype._renderEnabled = function() {
     this.$field.setEnabled(this.enabledComputed);
   }
   this._updateDisabledCopyOverlay();
+  this._installOrUninstallDragAndDropHandler();
 };
 
 /**
@@ -1046,17 +1047,24 @@ scout.FormField.prototype.prepareForCellEdit = function(opts) {
   }
 };
 
+scout.FormField.prototype.setDropType = function(dropType) {
+  this.setProperty('dropType', dropType);
+};
+
 scout.FormField.prototype._renderDropType = function() {
-  if (this.dropType) {
-    this._installDragAndDropHandler();
-  } else {
-    this._uninstallDragAndDropHandler();
-  }
+  this._installOrUninstallDragAndDropHandler();
+};
+
+scout.FormField.prototype.setDropMaximumSize = function(dropMaximumSize) {
+  this.setProperty('dropMaximumSize', dropMaximumSize);
 };
 
 scout.FormField.prototype._createDragAndDropHandler = function() {
   return scout.dragAndDrop.handler(this, {
     supportedScoutTypes: scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER,
+    onDrop: function(event) {
+      this.trigger('drop', event);
+    }.bind(this),
     dropType: function() {
       return this.dropType;
     }.bind(this),
@@ -1066,12 +1074,23 @@ scout.FormField.prototype._createDragAndDropHandler = function() {
   });
 };
 
+scout.FormField.prototype._installOrUninstallDragAndDropHandler = function() {
+  if (this.dropType && this.enabledComputed) {
+    this._installDragAndDropHandler();
+  } else {
+    this._uninstallDragAndDropHandler();
+  }
+};
+
 scout.FormField.prototype._installDragAndDropHandler = function(event) {
   if (this.dragAndDropHandler) {
     return;
   }
   this.dragAndDropHandler = this._createDragAndDropHandler();
-  this.dragAndDropHandler.install(this.$field);
+  if (!this.dragAndDropHandler) {
+    return;
+  }
+  this.dragAndDropHandler.install(this.$field || this.$container);
 };
 
 scout.FormField.prototype._uninstallDragAndDropHandler = function(event) {

diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormFieldAdapter.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormFieldAdapter.js
@@ -34,3 +34,12 @@ scout.FormFieldAdapter.prototype._goOnline = function() {
   }
   this.widget.setEnabled(this._enabledBeforeOffline);
 };
+
+
+scout.FormFieldAdapter.prototype._onWidgetEvent = function(event) {
+  if (event.type === 'drop' && this.widget.dragAndDropHandler) {
+    this.widget.dragAndDropHandler.uploadFiles(event.files);
+  } else {
+    scout.FormFieldAdapter.parent.prototype._onWidgetEvent.call(this, event);
+  }
+};
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/clipboardfield/ClipboardField.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/clipboardfield/ClipboardField.js
@@ -11,8 +11,6 @@
 scout.ClipboardField = function() {
   scout.ClipboardField.parent.call(this);
 
-  this.dropType = 0;
-  this.dropMaximumSize = scout.dragAndDrop.DEFAULT_DROP_MAXIMUM_SIZE;
   this._fileUploadWaitRetryCountTimeout = 99;
   this._fullSelectionLength = 0;
 };
@@ -81,14 +79,12 @@ scout.ClipboardField.prototype._render = function() {
     .on('cut', this._onCopy.bind(this));
 };
 
-scout.ClipboardField.prototype._renderProperties = function() {
-  scout.ClipboardField.parent.prototype._renderProperties.call(this);
-  this._renderDropType();
-};
-
 scout.ClipboardField.prototype._createDragAndDropHandler = function() {
   return scout.dragAndDrop.handler(this, {
     supportedScoutTypes: scout.dragAndDrop.SCOUT_TYPES.FILE_TRANSFER,
+    onDrop: function(event) {
+      this.trigger('drop', event);
+    }.bind(this),
     dropType: function() {
       return this.dropType;
     }.bind(this),

diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/imagefield/ImageField.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/imagefield/ImageField.js
@@ -46,11 +46,10 @@ scout.ImageField.prototype._render = function() {
 scout.ImageField.prototype._renderProperties = function() {
   scout.ImageField.parent.prototype._renderProperties.call(this);
   this._renderScrollBarEnabled();
-  this._renderDropType();
   this._renderImageUrl();
 };
 
-scout.ImageField.prototype._installDragAndDropHandler = function(event) {
+scout.ImageField.prototype._installDragAndDropHandler = function() {
   if (this.dragAndDropHandler) {
     return;
   }

diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/session/Session.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/session/Session.js
@@ -1049,7 +1049,7 @@ scout.Session.prototype.showFatalMessage = function(options, errorCode) {
 
 scout.Session.prototype.uploadFiles = function(target, files, uploadProperties, maxTotalSize, allowedTypes) {
   var formData = new FormData(),
-    totalSize = 0;
+  acceptedFiles = [];
 
   if (uploadProperties) {
     $.each(uploadProperties, function(key, value) {
@@ -1059,22 +1059,22 @@ scout.Session.prototype.uploadFiles = function(target, files, uploadProperties,
 
   $.each(files, function(index, value) {
     if (!allowedTypes || allowedTypes.length === 0 || scout.isOneOf(value.type, allowedTypes)) {
-      totalSize += value.size;
       /*
        * - see ClipboardField for comments on "scoutName"
        * - Some Browsers (e.g. Edge) handle an empty string as filename as if the filename is not set and therefore introduce a default filename like 'blob'.
        *   To counter this, we introduce a empty filename string. The string consists of characters that can not occur in regular filenames, to prevent collisions.
        */
       var filename = scout.nvl(value.scoutName, value.name, scout.Session.EMPTY_UPLOAD_FILENAME);
       formData.append('files', value, filename);
+      acceptedFiles.push(value);
     }
   }.bind(this));
 
   // 50 MB as default maximum size
   maxTotalSize = scout.nvl(maxTotalSize, scout.FileInput.DEFAULT_MAXIMUM_UPLOAD_SIZE);
 
   // very large files must not be sent to server otherwise the whole system might crash (for all users).
-  if (totalSize > maxTotalSize) {
+  if (!scout.files.validateMaximumUploadSize(acceptedFiles, maxTotalSize)) {
     var boxOptions = {
       header: this.text('ui.FileSizeLimitTitle'),
       body: this.text('ui.FileSizeLimit', (maxTotalSize / 1024 / 1024)),