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

Improved Firefox Mobile drag&drop

Browse source
This commit is contained in:
djmaze 2021-03-05 11:35:00 +01:00
parent b86ad88472
commit b6d1df2f82
2 changed files with 28 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

5
dev/Styles/Settings.less
View file

@ -123,3 +123,8 @@
html.rl-mobile .rl-settings-view-model { html.rl-mobile .rl-settings-view-model {
margin-right: 15px; margin-right: 15px;
} }
.firefox-drag .b-settins-right .b-content,
.firefox-drag .modal-body {
overflow: hidden;
}

39
dev/dragdropgecko.js
View file

@ -20,7 +20,7 @@
lastTouch, lastTouch,
holdInterval, holdInterval,
img, imgCustom, imgOffset; img;
/* /*
class DataTransferItem class DataTransferItem
@ -57,13 +57,25 @@
data[type] = value; data[type] = value;
} }
setDragImage(img, xOffset, yOffset) { constructor() {
imgCustom = img; this.setDragImage = setDragImage;
imgOffset = { x: xOffset, y: yOffset };
} }
} }
const const
htmlDrag = b => doc.documentElement.classList.toggle('firefox-drag', b),
setDragImage = (src, xOffset, yOffset) => {
img && img.remove();
if (src) {
// create drag image from custom element or drag source
img = src.cloneNode(true);
copyStyle(src, img);
img._x = xOffset == null ? src.clientWidth / 2 : xOffset;
img._y = yOffset == null ? src.clientHeight / 2 : yOffset;
}
},
// clear all members // clear all members
reset = () => { reset = () => {
if (dragSource) { if (dragSource) {
@ -71,8 +83,9 @@
// dispose of drag image element // dispose of drag image element
img && img.remove(); img && img.remove();
isDragging && dispatchEvent(lastTouch, 'dragend', dragSource); isDragging && dispatchEvent(lastTouch, 'dragend', dragSource);
img = imgCustom = dragSource = lastTouch = lastTarget = dataTransfer = holdInterval = null; img = dragSource = lastTouch = lastTarget = dataTransfer = holdInterval = null;
isDragging = allowDrop = false; isDragging = allowDrop = false;
htmlDrag(false);
} }
}, },
@ -103,8 +116,8 @@
moveImage = pt => { moveImage = pt => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (img) { if (img) {
img.style.left = Math.round(pt.x - imgOffset.x) + 'px'; img.style.left = Math.round(pt.x - img._x) + 'px';
img.style.top = Math.round(pt.y - imgOffset.y) + 'px'; img.style.top = Math.round(pt.y - img._y) + 'px';
} }
}); });
}, },
@ -173,22 +186,17 @@
// start dragging // start dragging
dataTransfer = new DataTransfer(); dataTransfer = new DataTransfer();
if ((isDragging = dispatchEvent(e, 'dragstart', dragSource))) { if ((isDragging = dispatchEvent(e, 'dragstart', dragSource))) {
htmlDrag(true);
let pt = getPoint(e); let pt = getPoint(e);
// create drag image from custom element or drag source // create drag image from custom element or drag source
let src = imgCustom || dragSource; img || setDragImage(dragSource);
img = src.cloneNode(true);
copyStyle(src, img);
let style = img.style; let style = img.style;
style.top = style.left = '-9999px'; style.top = style.left = '-9999px';
style.position = 'fixed'; style.position = 'fixed';
style.pointerEvents = 'none'; style.pointerEvents = 'none';
style.zIndex = '999999999'; style.zIndex = '999999999';
// if creating from drag source, apply offset and opacity
if (!imgCustom) {
imgOffset = { x: src.clientWidth / 2, y: src.clientHeight / 2 };
style.opacity = 0.75;
}
// add image to document // add image to document
moveImage(pt); moveImage(pt);
doc.body.append(img); doc.body.append(img);
@ -208,7 +216,6 @@
let pt = getPoint(e), let pt = getPoint(e),
target = getTarget(pt); target = getTarget(pt);
lastTouch = e; lastTouch = e;
e.preventDefault(); // prevent scrolling
if (target != lastTarget) { if (target != lastTarget) {
dispatchEvent(e, 'dragleave', lastTarget); dispatchEvent(e, 'dragleave', lastTarget);
dispatchEvent(e, 'dragenter', target); dispatchEvent(e, 'dragenter', target);