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

web/src/app/js/base.js

@@ -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 (

web/src/app/js/pages/meet.js

@@ -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) });
 			});
 		});
 	},