From c33e848e0707288ad1d8dcfd63374ba3f15be3a2 Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Mon, 26 Sep 2022 16:47:36 +0200
Subject: [PATCH] Close menus by sliding objects on mobile

---
 masks/project.html       |  9 +++------
 script/spot.js           | 43 +++++++++++++++++++++++++++++++---------
 style/_common.scss       |  2 +-
 style/_fa.scss           |  1 -
 style/_mask_project.scss |  5 +++++
 5 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/masks/project.html b/masks/project.html
index c5fd5d3..f1ebb8d 100644
--- a/masks/project.html
+++ b/masks/project.html
@@ -206,12 +206,9 @@ function initPage(asHash) {
 		//Add "Loading" Post
 		getPost({type: 'loading', headerless: true, formatted_time: '', relative_time: ''}).appendTo($('#loading'));
 
-		/*
 		//Mobile events
-		$("#feed").onSwipe(function(aiDelta){
-			if(aiDelta.x > self.tmp('$Feed').outerWidth(true)/3 && aiDelta.x > Math.abs(aiDelta.y)) toggleFeedPanel(false);
-		});
-		*/
+		self.tmp('$Feed').onSwipe((oPos) => {if(oPos.xEnd - oPos.xStart > 100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleFeedPanel(false);});
+		self.tmp('$Settings').onSwipe((oPos) => {if(oPos.xEnd - oPos.xStart < -100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleSettingsPanel(false);});
 
 		//Feed Panel
 		initPosts();
@@ -932,7 +929,7 @@ function getPost(asPost) {
 				.hover(
 					function(){
 						var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
-						if(oSpot.tmp('map').getBounds().contains(oMarker.getLatLng()) && !oMarker.isPopupOpen()) oMarker.openPopup();
+						if(oSpot.tmp('map') && oSpot.tmp('map').getBounds().contains(oMarker.getLatLng()) && !oMarker.isPopupOpen()) oMarker.openPopup();
 					},
 					function(){
 						var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
diff --git a/script/spot.js b/script/spot.js
index 45b2c99..de5da1c 100755
--- a/script/spot.js
+++ b/script/spot.js
@@ -381,21 +381,46 @@ $.prototype.hoverSwap = function(sDefault, sHover)
 		.text(sDefault);
 };
 
-$.prototype.onSwipe = function(fCallBack){
+$.prototype.onSwipe = function(fOnEnd){
 	return $(this)
-		.on('mousedown touchstart', function(e) {
-			var $This = $(this);
-			$This.data('x-down', e.pageX);
-			$This.data('y-down', e.pageY);
+		.on('dragstart', (e) => {
+			e.preventDefault();
 		})
-		.on('mouseup touchend',function (e) {
+		.on('mousedown touchstart', (e) => {
 			var $This = $(this);
-			var iDeltaX = e.pageX - $This.data('x-down');
-			var iDeltaY = e.pageY - $This.data('y-down');
-			fCallBack({x:iDeltaX, y:iDeltaY});
+			var oPos = getDragPosition(e);
+			$This.data('x-start', oPos.x);
+			$This.data('y-start', oPos.y);
+			$This.data('moving', true).addClass('moving');
+		})
+		.on('touchmove mousemove', (e) => {
+			var $This = $(this);
+			if($This.data('moving')) {
+				var oPos = getDragPosition(e);
+				$This.data('x-move', oPos.x);
+				$This.data('y-move', oPos.y);
+			}
+		})
+		.on('mouseup mouseleave touchend', (e) => {
+			var $This = $(this);
+			$This.data('moving', false).removeClass('moving');
+			fOnEnd({
+				xStart: $This.data('x-start'),
+				yStart: $This.data('y-start'),
+				xEnd: $This.data('x-move'),
+				yEnd: $This.data('y-move')
+			});
 		});
 };
 
+function getDragPosition(oEvent) {
+	let bMouse = oEvent.type.includes('mouse');
+	return {
+		x: bMouse?oEvent.pageX:oEvent.touches[0].clientX, 
+		y: bMouse?oEvent.pageY:oEvent.touches[0].clientY
+	};
+}
+
 function copyTextToClipboard(text) {
 	if(!navigator.clipboard) {
 		var textArea = document.createElement('textarea');
diff --git a/style/_common.scss b/style/_common.scss
index 47ccdd5..7db5ae3 100644
--- a/style/_common.scss
+++ b/style/_common.scss
@@ -73,7 +73,7 @@
 }
 
 [title]:not(a):not(.clickable) {
-	cursor: default;
+	cursor: inherit;
 }
 
 .clickable {
diff --git a/style/_fa.scss b/style/_fa.scss
index 60f8eac..da422f5 100644
--- a/style/_fa.scss
+++ b/style/_fa.scss
@@ -93,7 +93,6 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }
 .#{$fa-css-prefix}-drill-image:before { content: fa-content($fa-var-search); }
 .#{$fa-css-prefix}-drill-message:before { content: fa-content($fa-var-search-location); }
-.#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-cloud-upload); }
 .#{$fa-css-prefix}-video-shot:before { content: fa-content($fa-var-camcorder); }
 .#{$fa-css-prefix}-image-shot:before { content: fa-content($fa-var-camera-alt); }
 .#{$fa-css-prefix}-link:before { content: fa-content($fa-var-link); }
diff --git a/style/_mask_project.scss b/style/_mask_project.scss
index 622d6d6..1a8cdd3 100644
--- a/style/_mask_project.scss
+++ b/style/_mask_project.scss
@@ -371,6 +371,11 @@ $legend-color: $post-color;
 		bottom: 0;
 		overflow: hidden;
 		z-index: 999;
+		cursor: grab;
+
+		&.moving {
+			cursor: grabbing;
+		}
 
 		input, textarea {
 			background-color: $post-input-bg;