nobigtech
/
fedilove
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added draggable method for posts in carousel (or any other place)

This commit is contained in:
Niko 2022-02-14 15:12:32 +01:00
parent 9dbc43298d
commit 4e83fcefb5
2 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/app/js/base.js
View File

@ -1,4 +1,66 @@
function dragElement(elmnt, options, onStopDrag) {
onStopDrag = onStopDrag || function() {};
options = options || {};
var ipos3 = 0, ipos4 = 0;
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
elmnt.ontouchstart = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
const isMobile = e.touches !== undefined;
const cx = !isMobile ? e.clientX : e.touches[0].clientX * 2;
const cy = !isMobile ? e.clientY : e.touches[0].clientY * 2;
// get the mouse cursor position at startup:
if (options.x === undefined || options.x === true)
pos3 = cx;
if (options.y === undefined || options.y === true)
pos4 = cy;
ipos3 = pos3;
ipos4 = pos4;
document.onmouseup = closeDragElement;
document.ontouchend = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
document.ontouchmove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
const isMobile = e.touches !== undefined;
const cx = !isMobile ? e.clientX : e.touches[0].clientX * 2;
const cy = !isMobile ? e.clientY : e.touches[0].clientY * 2;
if (options.x === undefined || options.x === true)
pos1 = pos3 - cx;
if (options.y === undefined || options.y === true)
pos2 = pos4 - cy;
pos3 = cx;
pos4 = cy;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
if (options.rotate) {
const d = (ipos3 - pos3);
var n = d < 0 ? Math.abs(d) : Math.abs(d) - Math.abs(d)*2;
n = n / 20;
elmnt.style.transform = 'rotate('+n+'deg)';
const mu = !isMobile ? 8 : 4;
elmnt.style.top = parseInt(Math.abs(n)*mu) + "px"
}
}
function closeDragElement() {
// stop moving when mouse button is released:
onStopDrag([ipos3, ipos4], [pos3, pos4]);
document.onmouseup = null;
document.onmousemove = null;
if (options.return2start)
elmnt.removeAttribute('style');
}
}
function isVisible(element) {
const rect = element.getBoundingClientRect();
return (

2
web/src/app/js/pages/meet.js
View File

@ -33,6 +33,8 @@ app.pages.meet = {
// TODO: just for testing
app.pages.meet.carousel.set(2);
dragElement(app.pages.meet.carousel._elements()[app.pages.meet.carousel._current],
{y: false, return2start: true, rotate: true}, function(a1, a2) { console.log(a1); console.log(a2) });
});
});
},