From cee962ff5038faadeea870211076c14da5e388b9 Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Thu, 24 Nov 2022 20:03:03 +0100
Subject: [PATCH] Slide leaflet controls with panels

---
 masks/project.html | 28 +++++++++++++++++++++++-----
 script/spot.js     |  6 +++++-
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/masks/project.html b/masks/project.html
index 856a533..4e81d99 100644
--- a/masks/project.html
+++ b/masks/project.html
@@ -206,23 +206,41 @@ function initPage(asHash) {
 		//Add "Loading" Post
 		getPost({type: 'loading', headerless: true, formatted_time: '', relative_time: ''}).appendTo($('#loading'));
 
-		//Mobile events
+		//Mobile Touchscreen Events
 		self.tmp('$Feed').onSwipe(
 			(oPos) => {
-				self.tmp('$Feed').css('right', Math.min(oPos.xStart - oPos.xMove, 0)+'px');
+				this.$Panels = $('.leaflet-right').add(self.tmp('$Feed')).each(function() {
+					$(this).data('initial-offset', parseInt($(this).css('right')));
+				});
+			},
+			(oPos) => {
+				this.$Panels.each(function(){
+					$(this).css({'right': ($(this).data('initial-offset') + Math.min(oPos.xStart - oPos.xMove, 0))+'px', 'transition': 'none'});
+				});
 			},
 			(oPos) => {
 				if(oPos.xEnd - oPos.xStart > 100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleFeedPanel(false);
-				self.tmp('$Feed').css('right', '');
+				this.$Panels.each(function(){
+					$(this).css({'right': '', 'transition': ''});
+				});
 			}
 		);
 		self.tmp('$Settings').onSwipe(
 			(oPos) => {
-				self.tmp('$Settings').css('left', Math.min(oPos.xMove - oPos.xStart, 0)+'px');
+				this.$Panels = $('.leaflet-left').add(self.tmp('$Settings')).each(function() {
+					$(this).data('initial-offset', parseInt($(this).css('left')));
+				});
+			},
+			(oPos) => {
+				this.$Panels.each(function(){
+					$(this).css({'left': ($(this).data('initial-offset') + Math.min(oPos.xMove - oPos.xStart, 0))+'px', 'transition': 'none'});
+				});
 			},
 			(oPos) => {
 				if(oPos.xEnd - oPos.xStart < -100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleSettingsPanel(false);
-				self.tmp('$Settings').css('left', '');
+				this.$Panels.each(function(){
+					$(this).css({'left': '', 'transition': ''});
+				});
 			}
 		);
 
diff --git a/script/spot.js b/script/spot.js
index 6e3fc6b..a9656b9 100755
--- a/script/spot.js
+++ b/script/spot.js
@@ -381,7 +381,7 @@ $.prototype.hoverSwap = function(sDefault, sHover)
 		.text(sDefault);
 };
 
-$.prototype.onSwipe = function(fOnMove, fOnEnd){
+$.prototype.onSwipe = function(fOnStart, fOnMove, fOnEnd){
 	return $(this)
 		.on('dragstart', (e) => {
 			e.preventDefault();
@@ -394,6 +394,10 @@ $.prototype.onSwipe = function(fOnMove, fOnEnd){
 			$This.data('x-move', oPos.x);
 			$This.data('y-move', oPos.y);
 			$This.data('moving', true).addClass('moving');
+			fOnStart({
+				xStart: $This.data('x-start'),
+				yStart: $This.data('y-start')
+			});
 		})
 		.on('touchmove mousemove', (e) => {
 			var $This = $(this);