Extend Dropzone widget (#5597)

* Extend dropzone widget with optional actions invoked after tm-import-tiddlers message has been sent. Allows triggering an alternative UX for the import

* Allow restricting a dropzone to specific mimeTypes via mimeTypes and mimeTypesPrefix attributes

* Use a mimeTypesFilter instead of the mimeTypes and mimeTypesPrefix attributes

* Updated refresh handling

* Syntax cleanup

* Replace references to mimeType with content type for consistency with existing documentation. Update documentation for DropZone widget

core/modules/widgets/dropzone.js

@@ -12,6 +12,8 @@ Dropzone widget
 /*global $tw: false */
 "use strict";
 
+var IMPORT_TITLE = "$:/Import";
+
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var DropZoneWidget = function(parseTreeNode,options) {
@@ -110,10 +112,38 @@ DropZoneWidget.prototype.handleDragEndEvent = function(event) {
 	$tw.utils.removeClass(this.domNodes[0],"tc-dragover");
 };
 
+DropZoneWidget.prototype.filterByContentTypes = function(tiddlerFieldsArray) {
+	var filteredTypes,
+		filtered = [],
+		types = [];
+	$tw.utils.each(tiddlerFieldsArray,function(tiddlerFields) {
+		types.push(tiddlerFields.type);
+	});
+	filteredTypes = this.wiki.filterTiddlers(this.contentTypesFilter,this,this.wiki.makeTiddlerIterator(types));
+	$tw.utils.each(tiddlerFieldsArray,function(tiddlerFields) {
+		if(filteredTypes.indexOf(tiddlerFields.type) !== -1) {
+			filtered.push(tiddlerFields);
+		}
+	});
+	return filtered;
+};
+
+DropZoneWidget.prototype.readFileCallback = function(tiddlerFieldsArray) {
+	if(this.contentTypesFilter) {
+		tiddlerFieldsArray = this.filterByContentTypes(tiddlerFieldsArray);
+	}
+	if(tiddlerFieldsArray.length) {
+		this.dispatchEvent({type: "tm-import-tiddlers", param: JSON.stringify(tiddlerFieldsArray), autoOpenOnImport: this.autoOpenOnImport, importTitle: this.importTitle});
+		if(this.actions) {
+			this.invokeActionString(this.actions,this,event,{importTitle: this.importTitle});
+		}
+	}
+};
+
 DropZoneWidget.prototype.handleDropEvent  = function(event) {
 	var self = this,
 		readFileCallback = function(tiddlerFieldsArray) {
-			self.dispatchEvent({type: "tm-import-tiddlers", param: JSON.stringify(tiddlerFieldsArray), autoOpenOnImport: self.autoOpenOnImport, importTitle: self.importTitle});
+			self.readFileCallback(tiddlerFieldsArray);
 		};
 	this.leaveDrag(event);
 	// Check for being over a TEXTAREA or INPUT
@@ -149,7 +179,7 @@ DropZoneWidget.prototype.handleDropEvent  = function(event) {
 DropZoneWidget.prototype.handlePasteEvent  = function(event) {
 	var self = this,
 		readFileCallback = function(tiddlerFieldsArray) {
-			self.dispatchEvent({type: "tm-import-tiddlers", param: JSON.stringify(tiddlerFieldsArray), autoOpenOnImport: self.autoOpenOnImport, importTitle: self.importTitle});
+			self.readFileCallback(tiddlerFieldsArray);
 		};
 	// Let the browser handle it if we're in a textarea or input box
 	if(["TEXTAREA","INPUT"].indexOf(event.target.tagName) == -1 && !event.target.isContentEditable) {
@@ -176,7 +206,7 @@ DropZoneWidget.prototype.handlePasteEvent  = function(event) {
 					if($tw.log.IMPORT) {
 						console.log("Importing string '" + str + "', type: '" + type + "'");
 					}
-					self.dispatchEvent({type: "tm-import-tiddlers", param: JSON.stringify([tiddlerFields]), autoOpenOnImport: self.autoOpenOnImport, importTitle: self.importTitle});
+					readFileCallback([tiddlerFields]);
 				});
 			}
 		}
@@ -194,7 +224,9 @@ DropZoneWidget.prototype.execute = function() {
 	this.dropzoneDeserializer = this.getAttribute("deserializer");
 	this.dropzoneEnable = (this.getAttribute("enable") || "yes") === "yes";
 	this.autoOpenOnImport = this.getAttribute("autoOpenOnImport");
-	this.importTitle = this.getAttribute("importTitle");
+	this.importTitle = this.getAttribute("importTitle",IMPORT_TITLE);
+	this.actions = this.getAttribute("actions");
+	this.contentTypesFilter = this.getAttribute("contentTypesFilter");
 	// Make child widgets
 	this.makeChildWidgets();
 };
@@ -204,7 +236,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 DropZoneWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.enable || changedAttributes.autoOpenOnImport || changedAttributes.importTitle || changedAttributes.deserializer || changedAttributes.class) {
+	if($tw.utils.count(changedAttributes) > 0) {
 		this.refreshSelf();
 		return true;
 	}

editions/tw5.com/tiddlers/widgets/DropzoneWidget.tid

@@ -1,6 +1,6 @@
 caption: dropzone
 created: 20131024141900000
-modified: 20200403103224328
+modified: 20210410062410660
 tags: Widgets
 title: DropzoneWidget
 type: text/vnd.tiddlywiki
@@ -16,9 +16,13 @@ It sends a [[WidgetMessage: tm-import-tiddlers]] carrying a JSON representation
 |!Attribute |!Description |
 |deserializer |<<.from-version "5.1.15">> Optional name of deserializer to be used (by default the deserializer is derived from the file extension) |
 |enable |<<.from-version "5.1.22">> Optional value "no" to disable the dropzone functionality (defaults to "yes") |
-|class |<<.from-version "5.1.22">> Optional CSS class to be assigned to the dropzone (defaults to "tc-drag-over") |
+|class |<<.from-version "5.1.22">> Optional CSS class to be assigned to the DOM node created by the dropzone (defaults to "tc-dropzone") |
 |autoOpenOnImport |<<.from-version "5.1.23">> Optional value "no" or "yes" that can override tv-auto-open-on-import |
-|importTitle|<<.from-version "5.1.23">> optional tiddler title to use for import process instead of ~$:/Import |
+|importTitle|<<.from-version "5.1.23">> Optional tiddler title to use for import process instead of ~$:/Import |
+|actions|<<.from-version "5.1.24">> Optional actions string to be invoked after the `tm-import-tiddlers` message has been sent. The variable `importTitle` provides the title of the tiddler used for the import process. |
+|contentTypesFilter |<<.from-version "5.1.24">> Optional filter that specifies the [[content types|ContentType]] accepted by the dropzone. |
+
+<<.tip """Use the `prefix` filter operator to easily accept multiple related content types. For example this filter will accept all image content types: `[prefix[image/]]`""">>
 
 The list of available deserializers can be inspected by executing `Object.keys($tw.Wiki.tiddlerDeserializerModules).sort().join("\n")` in the browser JavaScript console.