Close menus by sliding objects on mobile

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')]);

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');

style/_common.scss

@@ -73,7 +73,7 @@
 }
 
 [title]:not(a):not(.clickable) {
-	cursor: default;
+	cursor: inherit;
 }
 
 .clickable {

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); }

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;