diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js index 788f60b10..2f3fecc3e 100644 --- a/dev/View/Popup/Compose.js +++ b/dev/View/Popup/Compose.js @@ -1045,9 +1045,6 @@ export class ComposePopupView extends AbstractViewPopup { attachmentSizeLimit = pInt(SettingsGet('AttachmentLimit')); oJua - // .on('onLimitReached', (limit) => { - // alert(limit); - // }) .on('onDragEnter', () => { this.dragAndDropOver(true); }) diff --git a/dev/View/Popup/Contacts.js b/dev/View/Popup/Contacts.js index 08dab6e41..e21d49ff3 100644 --- a/dev/View/Popup/Contacts.js +++ b/dev/View/Popup/Contacts.js @@ -281,7 +281,6 @@ export class ContactsPopupView extends AbstractViewPopup { const j = new Jua({ action: serverRequest('UploadContacts'), limit: 1, - disableDocumentDropPrevent: true, clickElement: this.importButton() }); diff --git a/vendors/jua/jua.js b/vendors/jua/jua.js index 7e27a26ab..0f8724143 100644 --- a/vendors/jua/jua.js +++ b/vendors/jua/jua.js @@ -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(),