mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix folder drag glitch in Firefox 

issue:
* drag'n'drop a folder into the files app in Firefox
* the highlight stays there because Firefox doesn't trigger the drop event for folders

solution:
* behave like the drop event if the dragover event isn't fired for 100ms (only applied in Firefox)
This commit is contained in:
Morris Jobke 2016-09-14 13:44:34 +02:00
parent e0dd6768be
commit 78c7ff9acc
No known key found for this signature in database
GPG Key ID: 9CE5ED29E7FCD38A
1 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/files/js/file-upload.js
View File

@ -667,8 +667,23 @@ OC.Upload = {
OC.Upload._hideProgressBar(); OC.Upload._hideProgressBar();
} }
}); });
var disableDropState = function() {
$('#app-content').removeClass('file-drag');
$('.dropping-to-dir').removeClass('dropping-to-dir');
$('.dir-drop').removeClass('dir-drop');
$('.icon-filetype-folder-drag-accept').removeClass('icon-filetype-folder-drag-accept');
};
var disableClassOnFirefox = _.debounce(function() {
disableDropState();
}, 100);
fileupload.on('fileuploaddragover', function(e){ fileupload.on('fileuploaddragover', function(e){
$('#app-content').addClass('file-drag'); $('#app-content').addClass('file-drag');
// dropping a folder in firefox doesn't cause a drop event
// this is simulated by simply invoke disabling all classes
// once no dragover event isn't noticed anymore
if ($.browser['mozilla']) {
disableClassOnFirefox();
}
$('#emptycontent .icon-folder').addClass('icon-filetype-folder-drag-accept'); $('#emptycontent .icon-folder').addClass('icon-filetype-folder-drag-accept');
var filerow = $(e.delegatedEvent.target).closest('tr'); var filerow = $(e.delegatedEvent.target).closest('tr');
@ -685,12 +700,7 @@ OC.Upload = {
filerow.find('.thumbnail').addClass('icon-filetype-folder-drag-accept'); filerow.find('.thumbnail').addClass('icon-filetype-folder-drag-accept');
} }
}); });
fileupload.on('fileuploaddragleave fileuploaddrop', function (){ fileupload.on('fileuploaddragleave fileuploaddrop', disableDropState);
$('#app-content').removeClass('file-drag');
$('.dropping-to-dir').removeClass('dropping-to-dir');
$('.dir-drop').removeClass('dir-drop');
$('.icon-filetype-folder-drag-accept').removeClass('icon-filetype-folder-drag-accept');
});
} else { } else {
// for all browsers that don't support the progress bar // for all browsers that don't support the progress bar
// IE 8 & 9 // IE 8 & 9