mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00
Code Issues Releases Wiki Activity

Extend Dropzone widget (#5597)

Browse Source 
* 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
This commit is contained in:
Saq Imtiaz 2021-04-10 10:48:50 +02:00 committed by GitHub
parent b9647b2c48
commit eced60853f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
core/modules/widgets/dropzone.js
View File

@ -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;
}

10
editions/tw5.com/tiddlers/widgets/DropzoneWidget.tid
View File

@ -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.