Add a transition on panel closing (swipe close)

masks/project.html

@@ -207,8 +207,24 @@ function initPage(asHash) {
 		getPost({type: 'loading', headerless: true, formatted_time: '', relative_time: ''}).appendTo($('#loading'));
 
 		//Mobile events
-		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);});
+		self.tmp('$Feed').onSwipe(
+			(oPos) => {
+				self.tmp('$Feed').css('right', Math.min(oPos.xStart - oPos.xMove, 0)+'px');
+			},
+			(oPos) => {
+				if(oPos.xEnd - oPos.xStart > 100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleFeedPanel(false);
+				self.tmp('$Feed').css('right', '');
+			}
+		);
+		self.tmp('$Settings').onSwipe(
+			(oPos) => {
+				self.tmp('$Settings').css('left', Math.min(oPos.xMove - oPos.xStart, 0)+'px');
+			},
+			(oPos) => {
+				if(oPos.xEnd - oPos.xStart < -100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleSettingsPanel(false);
+				self.tmp('$Settings').css('left', '');
+			}
+		);
 
 		//Feed Panel
 		initPosts();
@@ -933,7 +949,7 @@ function getPost(asPost) {
 					},
 					function(){
 						var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
-						if(oMarker.isPopupOpen() && !$(this).data('clicked')) oMarker.closePopup();
+						if(oMarker && oMarker.isPopupOpen() && !$(this).data('clicked')) oMarker.closePopup();
 						$(this).data('clicked', false);
 					}
 				);

script/spot.js

@@ -381,7 +381,7 @@ $.prototype.hoverSwap = function(sDefault, sHover)
 		.text(sDefault);
 };
 
-$.prototype.onSwipe = function(fOnEnd){
+$.prototype.onSwipe = function(fOnMove, fOnEnd){
 	return $(this)
 		.on('dragstart', (e) => {
 			e.preventDefault();
@@ -399,17 +399,25 @@ $.prototype.onSwipe = function(fOnEnd){
 				var oPos = getDragPosition(e);
 				$This.data('x-move', oPos.x);
 				$This.data('y-move', oPos.y);
+				fOnMove({
+					xStart: $This.data('x-start'),
+					yStart: $This.data('y-start'),
+					xMove: $This.data('x-move'),
+					yMove: $This.data('y-move')
+				});
 			}
 		})
 		.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')
-			});
+			if($This.data('moving')) {
+				$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')
+				});
+			}
 		});
 };
 

style/_mask_project.scss

@@ -372,9 +372,11 @@ $legend-color: $post-color;
 		overflow: hidden;
 		z-index: 999;
 		cursor: grab;
+		user-select: none;
 
 		&.moving {
 			cursor: grabbing;
+			transition: none;
 		}
 
 		input, textarea {