add mobile swipe event js

index.html

@@ -231,5 +231,7 @@
 	<script src="js/weather-screen.js"></script>
 	<script src="js/weather-settings.js"></script>
 	<script src="js/web-menu.js"></script>
+
+	<script src="js/mobile-swipe-event.js"></script>
 </body>
 </html>

js/mobile-swipe-event.js

@@ -0,0 +1,61 @@
+const swipeEvent = (elementID, callback) => {
+
+	var el = document.getElementById(elementID);
+	var dir;
+
+	el.addEventListener(
+		'touchstart',
+		(event) => {
+			// event.preventDefault();
+			xDown = event.touches[0].clientX;
+    		yDown = event.touches[0].clientY;
+		},
+		{ passive: true }
+	);
+
+	el.addEventListener(
+		'touchmove',
+		(event) => {
+			// event.preventDefault();
+		    if ( ! xDown || ! yDown ) {
+		        return;
+		    }
+
+		    var xUp = event.touches[0].clientX;
+		    var yUp = event.touches[0].clientY;
+		    var xDiff = xDown - xUp;
+		    var yDiff = yDown - yUp;
+
+		    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
+		        if ( xDiff > 0 ) {
+		        	// Left Swipe
+		        	dir = 'left'
+		        } else {
+		        	// Right Swipe
+		        	dir = 'right';
+		        }                       
+		    } else {
+
+		        if ( yDiff > 0 ) {
+		        	// Up Swipe
+		        	dir = 'up';
+		        } else { 
+		        	// Down Swipe
+		        	dir = 'down';
+		        }
+		    }
+		    
+		    /* Reset values */
+		    xDown = null;
+		    yDown = null;
+
+		    if (dir !== ""){
+			    if (typeof callback == "function") {
+			    	callback(el, dir);
+			    }
+		    }
+
+		},
+		{ passive: true }
+	);
+}