feat: support dragging for touch devices

Signed-off-by: Jonathan <theflametrooper@gmail.com>

package.json

@@ -7,6 +7,7 @@
     "type": "git",
     "url": "git+https://github.com/jonathan-grah/vue-roaster.git"
   },
+  "publishConfig": { "registry": "https://npm.pkg.github.com/" },
   "description": "Toast alerts (initially developed for Vue.js with a material-design style)",
   "devDependencies": {
     "@babel/core": "^7.5.5",

src/toasters.js

@@ -45,6 +45,7 @@ export default class Toast {
 	}
 
 	dragListener() {
+		/** handles mouse drag **/
 		this.element.addEventListener("mousedown", event => {
 			const initialX = this.element.getBoundingClientRect().x;
 			let shiftX = event.clientX - initialX;
@@ -58,18 +59,46 @@ export default class Toast {
 			window.addEventListener("mousemove", move, false);
 
 			window.addEventListener("mouseup", () => {
-				if (this.element.style.opacity < 0.15) return this.clear();
-				else {
-					this.element.style.opacity = 1;
-					this.element.style.left = 0;
-					this.element.style.transition = "opacity .2s linear, left .2s linear";
-					setTimeout(() => {
-						this.element.style.transition = null;
-					}, 200)
-				}
+				this.handleInputLoss();
 				window.removeEventListener("mousemove", move, false);
 			}, false);
 		}, false);
+
+		/** handles touch devices **/
+		this.element.addEventListener("touchstart", event => {
+			const initialX = this.element.getBoundingClientRect().x;
+			let shiftX = event.touches[0].clientX - initialX;
+
+			const move = ({ touches }) => {
+				// if multiple touches on device, none are registered to the toast anymore
+				if (touches.length === 1) {
+					let pageX = touches[0].pageX
+
+					let opacity = 1.2 - Math.abs(pageX - shiftX - initialX) / 100;
+					this.element.style.opacity = opacity;
+					this.element.style.left = `${pageX - shiftX - initialX}px`;
+				}
+			}
+
+			window.addEventListener("touchmove", move, false);
+
+			window.addEventListener("touchend", () => {
+				this.handleInputLoss();
+				window.removeEventListener("touchmove", move, false);
+			}, false);
+		}, false);
+	}
+
+	handleInputLoss() {
+		if (this.element.style.opacity < 0.15) return this.clear();
+		else {
+			this.element.style.opacity = 1;
+			this.element.style.left = 0;
+			this.element.style.transition = "opacity .2s linear, left .2s linear";
+			setTimeout(() => {
+				this.element.style.transition = null;
+			}, 200)
+		}
 	}
 
 	find() {