mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 01:20:30 +00:00
Code Issues Releases Wiki Activity

Dropzone: persistent dragover state fix (#5688)

Browse Source
This commit is contained in:
Saq Imtiaz 2021-05-16 15:01:46 +02:00 committed by GitHub
parent e7b3f69162
commit b267a71f2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,6 +37,7 @@ DropZoneWidget.prototype.render = function(parent,nextSibling) {
this.execute(); this.execute();
// Create element // Create element
var domNode = this.document.createElement("div"); var domNode = this.document.createElement("div");
this.domNode = domNode;
domNode.className = this.dropzoneClass || "tc-dropzone"; domNode.className = this.dropzoneClass || "tc-dropzone";
// Add event handlers // Add event handlers
if(this.dropzoneEnable) { if(this.dropzoneEnable) {
@ -49,8 +50,6 @@ DropZoneWidget.prototype.render = function(parent,nextSibling) {
{name: "dragend", handlerObject: this, handlerMethod: "handleDragEndEvent"} {name: "dragend", handlerObject: this, handlerMethod: "handleDragEndEvent"}
]); ]);
} }
domNode.addEventListener("click",function (event) {
},false);
// Insert element // Insert element
parent.insertBefore(domNode,nextSibling); parent.insertBefore(domNode,nextSibling);
this.renderChildren(domNode,null); this.renderChildren(domNode,null);
@ -59,12 +58,46 @@ DropZoneWidget.prototype.render = function(parent,nextSibling) {
this.currentlyEntered = []; this.currentlyEntered = [];
}; };
// Handler for transient event listeners added when the dropzone has an active drag in progress
DropZoneWidget.prototype.handleEvent = function(event) {
if(event.type === "click") {
if(this.currentlyEntered.length) {
this.resetState();
}
} else if(event.type === "dragenter") {
if(event.target && event.target !== this.domNode && !$tw.utils.domContains(this.domNode,event.target)) {
this.resetState();
}
} else if(event.type === "dragleave") {
// Check if drag left the window
if(event.relatedTarget === null || (event.relatedTarget && event.relatedTarget.nodeName === "HTML")) {
this.resetState();
}
}
};
// Reset the state of the dropzone after a drag has ended
DropZoneWidget.prototype.resetState = function() {
$tw.utils.removeClass(this.domNode,"tc-dragover");
this.currentlyEntered = [];
this.document.body.removeEventListener("click",this,true);
this.document.body.removeEventListener("dragenter",this,true);
this.document.body.removeEventListener("dragleave",this,true);
this.dragInProgress = false;
};
DropZoneWidget.prototype.enterDrag = function(event) { DropZoneWidget.prototype.enterDrag = function(event) {
if(this.currentlyEntered.indexOf(event.target) === -1) { if(this.currentlyEntered.indexOf(event.target) === -1) {
this.currentlyEntered.push(event.target); this.currentlyEntered.push(event.target);
} }
// If we're entering for the first time we need to apply highlighting if(!this.dragInProgress) {
$tw.utils.addClass(this.domNodes[0],"tc-dragover"); this.dragInProgress = true;
// If we're entering for the first time we need to apply highlighting
$tw.utils.addClass(this.domNodes[0],"tc-dragover");
this.document.body.addEventListener("click",this,true);
this.document.body.addEventListener("dragenter",this,true);
this.document.body.addEventListener("dragleave",this,true);
}
}; };
DropZoneWidget.prototype.leaveDrag = function(event) { DropZoneWidget.prototype.leaveDrag = function(event) {
@ -74,12 +107,11 @@ DropZoneWidget.prototype.leaveDrag = function(event) {
} }
// Remove highlighting if we're leaving externally // Remove highlighting if we're leaving externally
if(this.currentlyEntered.length === 0) { if(this.currentlyEntered.length === 0) {
$tw.utils.removeClass(this.domNodes[0],"tc-dragover"); this.resetState();
} }
}; };
DropZoneWidget.prototype.handleDragEnterEvent = function(event) { DropZoneWidget.prototype.handleDragEnterEvent = function(event) {
// Check for this window being the source of the drag
if($tw.dragInProgress) { if($tw.dragInProgress) {
return false; return false;
} }
@ -109,7 +141,7 @@ DropZoneWidget.prototype.handleDragLeaveEvent = function(event) {
}; };
DropZoneWidget.prototype.handleDragEndEvent = function(event) { DropZoneWidget.prototype.handleDragEndEvent = function(event) {
$tw.utils.removeClass(this.domNodes[0],"tc-dragover"); this.resetState();
}; };
DropZoneWidget.prototype.filterByContentTypes = function(tiddlerFieldsArray) { DropZoneWidget.prototype.filterByContentTypes = function(tiddlerFieldsArray) {
@ -117,7 +149,7 @@ DropZoneWidget.prototype.filterByContentTypes = function(tiddlerFieldsArray) {
filtered = [], filtered = [],
types = []; types = [];
$tw.utils.each(tiddlerFieldsArray,function(tiddlerFields) { $tw.utils.each(tiddlerFieldsArray,function(tiddlerFields) {
types.push(tiddlerFields.type); types.push(tiddlerFields.type || "");
}); });
filteredTypes = this.wiki.filterTiddlers(this.contentTypesFilter,this,this.wiki.makeTiddlerIterator(types)); filteredTypes = this.wiki.filterTiddlers(this.contentTypesFilter,this,this.wiki.makeTiddlerIterator(types));
$tw.utils.each(tiddlerFieldsArray,function(tiddlerFields) { $tw.utils.each(tiddlerFieldsArray,function(tiddlerFields) {
@ -157,7 +189,7 @@ DropZoneWidget.prototype.handleDropEvent = function(event) {
var self = this, var self = this,
dataTransfer = event.dataTransfer; dataTransfer = event.dataTransfer;
// Remove highlighting // Remove highlighting
$tw.utils.removeClass(this.domNodes[0],"tc-dragover"); this.resetState();
// Import any files in the drop // Import any files in the drop
var numFiles = 0; var numFiles = 0;
if(dataTransfer.files) { if(dataTransfer.files) {