Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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', rlContentType = 'snappymail/action',
// In Chrome we have no access to getData unless it's the 'drop' event // In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event
getDragAction = e => dragData && e.dataTransfer.types.includes(rlContentType) ? dragData.action : false, // In Chrome Mobile dataTransfer.types.includes(rlContentType) fails, only text/plain is set
getDragAction = () => dragData ? dragData.action : false,
setDragAction = (e, action, effect, data, img) => { setDragAction = (e, action, effect, data, img) => {
dragData = { dragData = {
action: action, action: action,
data: data data: data
}; };
e.dataTransfer.setData(rlContentType, action); // e.dataTransfer.setData(rlContentType, action);
e.dataTransfer.setData('Text', rlContentType+'/'+action); e.dataTransfer.setData('text/plain', rlContentType+'/'+action);
e.dataTransfer.setDragImage(img, 0, 0); e.dataTransfer.setDragImage(img, 0, 0);
e.dataTransfer.effectAllowed = effect; e.dataTransfer.effectAllowed = effect;
}, },
@ -205,10 +206,12 @@ ko.bindingHandlers.sortableItem = {
element.addEventListener("dragend", e => { element.addEventListener("dragend", e => {
element.style.opacity = null; element.style.opacity = null;
if ('sortable' === getDragAction(e)) { if ('sortable' === getDragAction(e)) {
dragData.data.style.cssText = '';
let row = parent.rows[options.list.indexOf(ko.dataFor(element))]; let row = parent.rows[options.list.indexOf(ko.dataFor(element))];
if (row != dragData.data) { if (row != dragData.data) {
row.before(dragData.data); row.before(dragData.data);
} }
dragData = null;
} }
}); });
if (!parent.sortable) { if (!parent.sortable) {
@ -217,7 +220,6 @@ ko.bindingHandlers.sortableItem = {
parent.addEventListener("dragover", fnHover); parent.addEventListener("dragover", fnHover);
parent.addEventListener("drop", e => { parent.addEventListener("drop", e => {
if ('sortable' === getDragAction(e)) { if ('sortable' === getDragAction(e)) {
dragData.data.style.opacity = null;
e.preventDefault(); e.preventDefault();
let data = ko.dataFor(dragData.data), let data = ko.dataFor(dragData.data),
from = options.list.indexOf(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"}), datalist = createEl('datalist',{id:"inputosaurus-datalist"}),
fakeSpan = createEl('span',{class:"inputosaurus-fake-span"}), fakeSpan = createEl('span',{class:"inputosaurus-fake-span"}),
contentType = 'application/x-inputosaurus-item', contentType = 'inputosaurus/item';
getTransferData = data => 'move' === data.dropEffect && data.getData(contentType);
doc.body.append(fakeSpan, datalist); doc.body.append(fakeSpan, datalist);
let removeDragged = null; let dragData;
window.Inputosaurus = class { window.Inputosaurus = class {
constructor(element, options) { constructor(element, options) {
var self = this, 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.element = element;
self._focusTriggerTimer = 0; self._focusTimer = 0;
self.options = Object.assign({ self.options = Object.assign({
@ -66,12 +69,13 @@ window.Inputosaurus = class {
// Create the elements // Create the elements
els.ul = createEl('ul',{class:"inputosaurus-container"}); 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 => { els.ul.addEventListener("drop", e => {
let value = getTransferData(e.dataTransfer); if (validDropzone(e) && dragData.value) {
if (value) { e.preventDefault();
els.input.value = value; dragData.source._removeDraggedTag(dragData.li);
removeDragged(); els.input.value = dragData.value;
self.parseInput(); self.parseInput();
} }
}); });
@ -132,8 +136,8 @@ window.Inputosaurus = class {
_focusTrigger(bValue) { _focusTrigger(bValue) {
var self = this; var self = this;
clearTimeout(self._focusTriggerTimer); clearTimeout(self._focusTimer);
self._focusTriggerTimer = setTimeout(() => { self._focusTimer = setTimeout(() => {
self.elements.ul.classList.toggle('inputosaurus-focused', bValue); self.elements.ul.classList.toggle('inputosaurus-focused', bValue);
self.options.focusCallback(bValue); self.options.focusCallback(bValue);
}, 10); }, 10);
@ -400,13 +404,21 @@ window.Inputosaurus = class {
li.inputosaurusValue = v.obj.toLine(false, false, false); li.inputosaurusValue = v.obj.toLine(false, false, false);
li.addEventListener("dragstart", e => { li.addEventListener("dragstart", e => {
e.dataTransfer.setData(contentType, li.inputosaurusValue); dragData = {
e.dataTransfer.setDragImage(li, 0, 0); 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'; e.dataTransfer.effectAllowed = 'move';
li.style.opacity = 0.25; 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); els.inputCont.before(li);
} }