mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-25 23:03:15 +00:00
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
This commit is contained in:
parent
b9647b2c48
commit
eced60853f
|
@ -12,6 +12,8 @@ Dropzone widget
|
||||||
/*global $tw: false */
|
/*global $tw: false */
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
var IMPORT_TITLE = "$:/Import";
|
||||||
|
|
||||||
var Widget = require("$:/core/modules/widgets/widget.js").widget;
|
var Widget = require("$:/core/modules/widgets/widget.js").widget;
|
||||||
|
|
||||||
var DropZoneWidget = function(parseTreeNode,options) {
|
var DropZoneWidget = function(parseTreeNode,options) {
|
||||||
|
@ -110,10 +112,38 @@ DropZoneWidget.prototype.handleDragEndEvent = function(event) {
|
||||||
$tw.utils.removeClass(this.domNodes[0],"tc-dragover");
|
$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) {
|
DropZoneWidget.prototype.handleDropEvent = function(event) {
|
||||||
var self = this,
|
var self = this,
|
||||||
readFileCallback = function(tiddlerFieldsArray) {
|
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);
|
this.leaveDrag(event);
|
||||||
// Check for being over a TEXTAREA or INPUT
|
// Check for being over a TEXTAREA or INPUT
|
||||||
|
@ -149,7 +179,7 @@ DropZoneWidget.prototype.handleDropEvent = function(event) {
|
||||||
DropZoneWidget.prototype.handlePasteEvent = function(event) {
|
DropZoneWidget.prototype.handlePasteEvent = function(event) {
|
||||||
var self = this,
|
var self = this,
|
||||||
readFileCallback = function(tiddlerFieldsArray) {
|
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
|
// 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) {
|
if(["TEXTAREA","INPUT"].indexOf(event.target.tagName) == -1 && !event.target.isContentEditable) {
|
||||||
|
@ -176,7 +206,7 @@ DropZoneWidget.prototype.handlePasteEvent = function(event) {
|
||||||
if($tw.log.IMPORT) {
|
if($tw.log.IMPORT) {
|
||||||
console.log("Importing string '" + str + "', type: '" + type + "'");
|
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.dropzoneDeserializer = this.getAttribute("deserializer");
|
||||||
this.dropzoneEnable = (this.getAttribute("enable") || "yes") === "yes";
|
this.dropzoneEnable = (this.getAttribute("enable") || "yes") === "yes";
|
||||||
this.autoOpenOnImport = this.getAttribute("autoOpenOnImport");
|
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
|
// Make child widgets
|
||||||
this.makeChildWidgets();
|
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) {
|
DropZoneWidget.prototype.refresh = function(changedTiddlers) {
|
||||||
var changedAttributes = this.computeAttributes();
|
var changedAttributes = this.computeAttributes();
|
||||||
if(changedAttributes.enable || changedAttributes.autoOpenOnImport || changedAttributes.importTitle || changedAttributes.deserializer || changedAttributes.class) {
|
if($tw.utils.count(changedAttributes) > 0) {
|
||||||
this.refreshSelf();
|
this.refreshSelf();
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
caption: dropzone
|
caption: dropzone
|
||||||
created: 20131024141900000
|
created: 20131024141900000
|
||||||
modified: 20200403103224328
|
modified: 20210410062410660
|
||||||
tags: Widgets
|
tags: Widgets
|
||||||
title: DropzoneWidget
|
title: DropzoneWidget
|
||||||
type: text/vnd.tiddlywiki
|
type: text/vnd.tiddlywiki
|
||||||
|
@ -16,9 +16,13 @@ It sends a [[WidgetMessage: tm-import-tiddlers]] carrying a JSON representation
|
||||||
|!Attribute |!Description |
|
|!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) |
|
|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") |
|
|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 |
|
|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.
|
The list of available deserializers can be inspected by executing `Object.keys($tw.Wiki.tiddlerDeserializerModules).sort().join("\n")` in the browser JavaScript console.
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user