mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
Cleanup Jua upload handler
This commit is contained in:
parent
9130da9dca
commit
7a0ec76d25
|
@ -1045,9 +1045,6 @@ export class ComposePopupView extends AbstractViewPopup {
|
|||
attachmentSizeLimit = pInt(SettingsGet('AttachmentLimit'));
|
||||
|
||||
oJua
|
||||
// .on('onLimitReached', (limit) => {
|
||||
// alert(limit);
|
||||
// })
|
||||
.on('onDragEnter', () => {
|
||||
this.dragAndDropOver(true);
|
||||
})
|
||||
|
|
|
@ -281,7 +281,6 @@ export class ContactsPopupView extends AbstractViewPopup {
|
|||
const j = new Jua({
|
||||
action: serverRequest('UploadContacts'),
|
||||
limit: 1,
|
||||
disableDocumentDropPrevent: true,
|
||||
clickElement: this.importButton()
|
||||
});
|
||||
|
||||
|
|
162
vendors/jua/jua.js
vendored
162
vendors/jua/jua.js
vendored
|
@ -6,32 +6,28 @@
|
|||
* @param {*} aItems
|
||||
* @param {Function} fFileCallback
|
||||
* @param {number=} iLimit = 20
|
||||
* @param {Function=} fLimitCallback
|
||||
*/
|
||||
getDataFromFiles = (aItems, fFileCallback, iLimit, fLimitCallback) =>
|
||||
getDataFromFiles = (aItems, fFileCallback, iLimit) =>
|
||||
{
|
||||
if (aItems?.length)
|
||||
{
|
||||
let
|
||||
oFile,
|
||||
iInputLimit = iLimit,
|
||||
bUseLimit = 0 < iLimit,
|
||||
bCallLimit = !fLimitCallback
|
||||
iCount = 0,
|
||||
bCallLimit = false
|
||||
;
|
||||
|
||||
[...aItems].forEach(oItem => {
|
||||
if (oItem)
|
||||
{
|
||||
if (!bUseLimit || 0 <= --iLimit)
|
||||
{
|
||||
if (oItem) {
|
||||
if (iLimit && iLimit < ++iCount) {
|
||||
if (!bCallLimit) {
|
||||
bCallLimit = true;
|
||||
// fLimitCallback(iLimit);
|
||||
}
|
||||
} else {
|
||||
oFile = getDataFromFile(oItem);
|
||||
oFile && fFileCallback(oFile);
|
||||
}
|
||||
else if (bUseLimit && !bCallLimit)
|
||||
{
|
||||
bCallLimit = true;
|
||||
fLimitCallback(iInputLimit);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -57,14 +53,7 @@
|
|||
: null; // Folder
|
||||
},
|
||||
|
||||
eventContainsFiles = oEvent =>
|
||||
{
|
||||
try {
|
||||
return oEvent.dataTransfer.types.includes('Files');
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
eventContainsFiles = oEvent => oEvent.dataTransfer.types.includes('Files');
|
||||
|
||||
class Queue extends Array
|
||||
{
|
||||
|
@ -111,8 +100,7 @@
|
|||
onDragEnter: null,
|
||||
onDragLeave: null,
|
||||
onBodyDragEnter: null,
|
||||
onBodyDragLeave: null,
|
||||
onLimitReached: null
|
||||
onBodyDragLeave: null
|
||||
};
|
||||
|
||||
self.oXhrs = {};
|
||||
|
@ -120,11 +108,13 @@
|
|||
self.options = Object.assign({
|
||||
action: '',
|
||||
name: 'uploader',
|
||||
hidden: {},
|
||||
limit: 0
|
||||
limit: 0,
|
||||
// clickElement:
|
||||
// dragAndDropElement:
|
||||
}, options || {});
|
||||
self.oQueue = new Queue();
|
||||
|
||||
// clickElement
|
||||
if (el) {
|
||||
el.style.position = 'relative';
|
||||
el.style.overflow = 'hidden';
|
||||
|
@ -136,111 +126,58 @@
|
|||
}
|
||||
|
||||
el = options.dragAndDropElement;
|
||||
if (el)
|
||||
{
|
||||
let oBigDropZone = options.dragAndDropBodyElement || doc;
|
||||
|
||||
if (!options.disableDocumentDropPrevent)
|
||||
{
|
||||
doc.addEventListener('dragover', oEvent => {
|
||||
if (eventContainsFiles(oEvent))
|
||||
{
|
||||
try
|
||||
{
|
||||
if (el) {
|
||||
addEventListeners(doc, {
|
||||
dragover: oEvent => {
|
||||
if (eventContainsFiles(oEvent)) {
|
||||
timerStop();
|
||||
if (el.contains(oEvent.target)) {
|
||||
oEvent.dataTransfer.dropEffect = 'copy';
|
||||
oEvent.stopPropagation();
|
||||
} else {
|
||||
oEvent.dataTransfer.dropEffect = 'none';
|
||||
oEvent.preventDefault();
|
||||
}
|
||||
catch (oExc) {
|
||||
console.error(oExc);
|
||||
}
|
||||
oEvent.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (oBigDropZone)
|
||||
{
|
||||
addEventListeners(oBigDropZone, {
|
||||
dragover: () => timerStop(),
|
||||
dragenter: oEvent => {
|
||||
if (eventContainsFiles(oEvent))
|
||||
{
|
||||
timerStop();
|
||||
oEvent.preventDefault();
|
||||
|
||||
self.runEvent('onBodyDragEnter', oEvent);
|
||||
}
|
||||
},
|
||||
dragleave: oEvent =>
|
||||
oEvent.dataTransfer && timerStart(() => self.runEvent('onBodyDragLeave', oEvent)),
|
||||
drop: oEvent => {
|
||||
if (oEvent.dataTransfer) {
|
||||
let bFiles = eventContainsFiles(oEvent);
|
||||
bFiles && oEvent.preventDefault();
|
||||
|
||||
self.runEvent('onBodyDragLeave', oEvent);
|
||||
|
||||
return !bFiles;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addEventListeners(el, {
|
||||
},
|
||||
dragenter: oEvent => {
|
||||
if (eventContainsFiles(oEvent)) {
|
||||
timerStop();
|
||||
|
||||
oEvent.preventDefault();
|
||||
self.runEvent('onDragEnter', el, oEvent);
|
||||
}
|
||||
},
|
||||
dragover: oEvent => {
|
||||
if (eventContainsFiles(oEvent)) {
|
||||
try
|
||||
{
|
||||
let sEffect = oEvent.dataTransfer.effectAllowed;
|
||||
|
||||
self.runEvent('onBodyDragEnter', oEvent);
|
||||
if (el.contains(oEvent.target)) {
|
||||
timerStop();
|
||||
|
||||
oEvent.dataTransfer.dropEffect = (sEffect === 'move' || sEffect === 'linkMove') ? 'move' : 'copy';
|
||||
|
||||
oEvent.stopPropagation();
|
||||
oEvent.preventDefault();
|
||||
}
|
||||
catch (oExc) {
|
||||
console.error(oExc);
|
||||
self.runEvent('onDragEnter', el, oEvent);
|
||||
}
|
||||
}
|
||||
},
|
||||
dragleave: oEvent => {
|
||||
if (oEvent.dataTransfer) {
|
||||
if (eventContainsFiles(oEvent)) {
|
||||
let oRelatedTarget = doc.elementFromPoint(oEvent.clientX, oEvent.clientY);
|
||||
if (!oRelatedTarget || !el.contains(oRelatedTarget)) {
|
||||
timerStop();
|
||||
self.runEvent('onDragLeave', el, oEvent);
|
||||
}
|
||||
timerStart(() => self.runEvent('onBodyDragLeave', oEvent))
|
||||
}
|
||||
},
|
||||
drop: oEvent => {
|
||||
if (eventContainsFiles(oEvent)) {
|
||||
timerStop();
|
||||
oEvent.preventDefault();
|
||||
|
||||
getDataFromFiles(
|
||||
oEvent.files || oEvent.dataTransfer.files,
|
||||
oFile => {
|
||||
if (oFile) {
|
||||
self.addFile(oFile);
|
||||
timerStop();
|
||||
}
|
||||
},
|
||||
self.options.limit,
|
||||
self.getEvent('onLimitReached')
|
||||
);
|
||||
if (el.contains(oEvent.target)) {
|
||||
getDataFromFiles(
|
||||
oEvent.files || oEvent.dataTransfer.files,
|
||||
oFile => {
|
||||
if (oFile) {
|
||||
self.addFile(oFile);
|
||||
}
|
||||
},
|
||||
self.options.limit
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
self.runEvent('onDragLeave', oEvent);
|
||||
self.runEvent('onBodyDragLeave', oEvent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -308,7 +245,6 @@
|
|||
oXhr = new XMLHttpRequest(),
|
||||
oFormData = new FormData(),
|
||||
sAction = this.options.action,
|
||||
aHidden = this.options.hidden,
|
||||
fStartFunction = this.getEvent('onStart'),
|
||||
fProgressFunction = this.getEvent('onProgress')
|
||||
;
|
||||
|
@ -350,9 +286,6 @@
|
|||
fStartFunction && fStartFunction(sUid);
|
||||
|
||||
oFormData.append(this.options.name, oFileInfo['File']);
|
||||
Object.entries(aHidden).forEach(([key, value]) =>
|
||||
oFormData.append(key, (typeof value === "function" ? value(oFileInfo) : value).toString())
|
||||
);
|
||||
|
||||
oXhr.send(oFormData);
|
||||
|
||||
|
@ -393,10 +326,7 @@
|
|||
}, 10);
|
||||
};
|
||||
if (oInput.files?.length) {
|
||||
getDataFromFiles(oInput.files, fFileCallback,
|
||||
limit,
|
||||
self.getEvent('onLimitReached')
|
||||
);
|
||||
getDataFromFiles(oInput.files, fFileCallback, limit);
|
||||
} else {
|
||||
fFileCallback({
|
||||
FileName: oInput.value.split(/\\\//).pop(),
|
||||
|
|
Loading…
Reference in a new issue