the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2025-12-11 05:36:14 +08:00
Code Issues Projects Releases Packages Wiki Activity

Bugfix: Chrome 84 on Android only accepts text/plain in Drag & Drop

Browse source
This commit is contained in:
djmaze 2020-09-27 12:04:47 +02:00
parent 344c478a45
commit 5b986b7bb0
3 changed files with 35 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
dev/External/User/ko.js vendored
View file

@ -2,15 +2,16 @@ const ko = window.ko,
rlContentType = 'snappymail/action',
// In Chrome we have no access to getData unless it's the 'drop' event
getDragAction = e => dragData && e.dataTransfer.types.includes(rlContentType) ? dragData.action : false,
// In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event
// In Chrome Mobile dataTransfer.types.includes(rlContentType) fails, only text/plain is set
getDragAction = () => dragData ? dragData.action : false,
setDragAction = (e, action, effect, data, img) => {
dragData = {
action: action,
data: data
};
e.dataTransfer.setData(rlContentType, action);
e.dataTransfer.setData('Text', rlContentType+'/'+action);
// e.dataTransfer.setData(rlContentType, action);
e.dataTransfer.setData('text/plain', rlContentType+'/'+action);
e.dataTransfer.setDragImage(img, 0, 0);
e.dataTransfer.effectAllowed = effect;
},
@ -205,10 +206,12 @@ ko.bindingHandlers.sortableItem = {
element.addEventListener("dragend", e => {
element.style.opacity = null;
if ('sortable' === getDragAction(e)) {
dragData.data.style.cssText = '';
let row = parent.rows[options.list.indexOf(ko.dataFor(element))];
if (row != dragData.data) {
row.before(dragData.data);
}
dragData = null;
}
});
if (!parent.sortable) {
@ -217,7 +220,6 @@ ko.bindingHandlers.sortableItem = {
parent.addEventListener("dragover", fnHover);
parent.addEventListener("drop", e => {
if ('sortable' === getDragAction(e)) {
dragData.data.style.opacity = null;
e.preventDefault();
let data = ko.dataFor(dragData.data),
from = options.list.indexOf(data),

0
vendors/inputosaurus/.code-changed vendored
View file

44
vendors/inputosaurus/inputosaurus.js vendored
View file

@ -23,23 +23,26 @@ const doc = document,
datalist = createEl('datalist',{id:"inputosaurus-datalist"}),
fakeSpan = createEl('span',{class:"inputosaurus-fake-span"}),
contentType = 'application/x-inputosaurus-item',
getTransferData = data => 'move' === data.dropEffect && data.getData(contentType);
contentType = 'inputosaurus/item';
doc.body.append(fakeSpan, datalist);
let removeDragged = null;
let dragData;
window.Inputosaurus = class {
constructor(element, options) {
var self = this,
els = {};
els = {},
// In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event
// In Chrome Mobile dataTransfer.types.includes(contentType) fails, only text/plain is set
validDropzone = () => dragData && dragData.li.parentNode !== els.ul,
fnDrag = e => validDropzone(e) && e.preventDefault();
self.element = element;
self._focusTriggerTimer = 0;
self._focusTimer = 0;
self.options = Object.assign({
@ -66,12 +69,13 @@ window.Inputosaurus = class {
// Create the elements
els.ul = createEl('ul',{class:"inputosaurus-container"});
els.ul.addEventListener("dragover", e => getTransferData(e.dataTransfer) && e.preventDefault());
els.ul.addEventListener("dragenter", fnDrag);
els.ul.addEventListener("dragover", fnDrag);
els.ul.addEventListener("drop", e => {
let value = getTransferData(e.dataTransfer);
if (value) {
els.input.value = value;
removeDragged();
if (validDropzone(e) && dragData.value) {
e.preventDefault();
dragData.source._removeDraggedTag(dragData.li);
els.input.value = dragData.value;
self.parseInput();
}
});
@ -132,8 +136,8 @@ window.Inputosaurus = class {
_focusTrigger(bValue) {
var self = this;
clearTimeout(self._focusTriggerTimer);
self._focusTriggerTimer = setTimeout(() => {
clearTimeout(self._focusTimer);
self._focusTimer = setTimeout(() => {
self.elements.ul.classList.toggle('inputosaurus-focused', bValue);
self.options.focusCallback(bValue);
}, 10);
@ -400,13 +404,21 @@ window.Inputosaurus = class {
li.inputosaurusValue = v.obj.toLine(false, false, false);
li.addEventListener("dragstart", e => {
e.dataTransfer.setData(contentType, li.inputosaurusValue);
e.dataTransfer.setDragImage(li, 0, 0);
dragData = {
source: self,
li: li,
value: li.inputosaurusValue
};
// e.dataTransfer.setData(contentType, li.inputosaurusValue);
e.dataTransfer.setData('text/plain', contentType);
// e.dataTransfer.setDragImage(li, 0, 0);
e.dataTransfer.effectAllowed = 'move';
li.style.opacity = 0.25;
removeDragged = () => self._removeDraggedTag(li);
});
li.addEventListener("dragend", () => li.style.opacity = null);
li.addEventListener("dragend", () => {
dragData = null;
li.style.cssText = '';
});
els.inputCont.before(li);
}