fixed button handling for mobile

hourglass/client/mobile/mobile.css

@@ -90,7 +90,7 @@
 
 .minorHeader {
 	font-size: 4vw !important;
-	width: 100%;
+	width: 96%;
 	padding: 2%;
 	background-color: rgba(255,255,255,0.15);
 }

hourglass/client/mobile/mobile.js

@@ -5,9 +5,7 @@ Session.set("mobileSidebar", false);
 Template.mobile.rendered = function() {
 	document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
 	
-	addListeners();
+	addMobileButton($("#mAddWork")[0], 50, "color", function() {
-	
-	addMobileButton($("#mAddWork")[0], 50, function() {
 		$("#mAddWork").velocity("fadeOut", 200);
 		$("#mobileBody").velocity("fadeOut", {
 			duration: 200,
@@ -18,21 +16,94 @@ Template.mobile.rendered = function() {
 		});
 	});
 
-	addMobileSideButton($("#mSidebarToggle")[0], 0.2, function() {
+	addMobileButton($("#mSidebarToggle")[0], 0.2, "brightness", function() {
 		Session.set("mobileSidebar", true);
 		toggleSidebar(true);
 	});
 
-	addMobileSideButton($(".mSectionMode")[0], 0.2, function() {
+	addMobileButton($(".mSectionMode")[0], 0.2, "brightness", function() {
+		if(Session.equals("mobileMode", "main")) {
+			toggleSidebar(false);
+		} else {
 			Session.set("mobileMode","main");
 			toggleSidebar(false);
+		}
 	});
 
-	addMobileSideButton($(".mSectionMode")[1], 0.2, function() {
+	addMobileButton($(".mSectionMode")[1], 0.2, "brightness", function() {
+		if(Session.equals("mobileMode", "done")) {
+			toggleSidebar(false);
+		} else {
 			Session.set("mobileMode","done");
 			toggleSidebar(false);
+		}
+	});
+}
+
+Template.mobileClass.rendered = function() {
+	var deltaX = 0;
+	var clearTile;
+	let movable = jQuery(this.firstNode.children[2]);
+	let undo = [jQuery(this.firstNode.children[0]), jQuery(this.firstNode.children[1])]
+
+	new Hammer(movable[0], {
+		domEvents: true
 	});
 
+	movable.on('panmove', function(e) {
+		var dX = deltaX + (e.originalEvent.gesture.deltaX);
+		if(dX < 0) {
+			$.Velocity.hook(jQuery(e.target), 'translateX', dX/45 + 'px');
+		} else {
+			$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
+		}
+		
+	});
+
+	movable.on('panend', function(e) {
+		if(e.target === document.getElementById("mobileBody")) return;
+		deltaX = deltaX + (e.originalEvent.gesture.deltaX);
+		if(deltaX >= window.innerWidth * 0.5) {
+			deltaX = 0;
+			jQuery(e.target).velocity(
+			{
+				translateX: window.innerWidth*1.2+"px"
+			},
+			{
+				duration: 150,
+				complete: function() {
+					undo[0].velocity("fadeIn", {duration: 300});
+					undo[1].velocity("fadeIn", {duration: 300});
+					var container = $(".mClassContainer[workid="+id+"]");
+					clearTile = setTimeout(function() {
+						container.velocity(
+						{
+							height: 0
+						},
+						{
+							duration: 200,
+							complete: function() {
+								serverData = [container[0].getAttribute("workid"), "done"];
+    							sendData("toggleWork");
+								container.remove();
+							}
+						});
+					}, 3000);
+				}
+			});
+
+		} else {
+			deltaX = 0;
+			jQuery(e.target).velocity({translateX: "0px"},300);
+		}
+	});
+
+	addMobileButton(undo[1], 30, "color", function() {
+		clearTimeout(clearTile);
+		movable.velocity({translateX: "0px"},300);
+		undo[0].velocity("fadeOut", {duration: 300});
+		undo[1].velocity("fadeOut", {duration: 300});
+	});
 }
 
 Template.mobile.helpers({
@@ -94,100 +165,40 @@ Template.mobile.helpers({
 
 });
 
-function addListeners() {
+function addMobileButton(element, lighten, animateType, completeFunction) {
-	var deltaX = 0;
-	var clearTile;
-	for(var i = 0; i < $(".mClassContainer").length; i++) {
-		let id = $(".mClassContainer")[i].getAttribute("workid");
-		new Hammer($(".mobileClass")[i], {
-			domEvents: true
-		});
-		$(".mobileClass[workid="+id+"]").on('panmove', function(e) {
-			var dX = deltaX + (e.originalEvent.gesture.deltaX);
-			if(dX < 0) {
-				$.Velocity.hook(jQuery(e.target), 'translateX', dX/45 + 'px');
-			} else {
-				$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
-			}
-			
-		});
-		$(".mobileClass[workid="+id+"]").on('panend', function(e) {
-			if(e.target === document.getElementById("mobileBody")) return;
-			deltaX = deltaX + (e.originalEvent.gesture.deltaX);
-			if(deltaX >= window.innerWidth * 0.5) {
-				deltaX = 0;
-				jQuery(e.target).velocity(
-				{
-					translateX: window.innerWidth*1.2+"px"
-				},
-				{
-					duration: 150,
-					complete: function() {
-						$(".mUndoText[workid="+id+"]").velocity("fadeIn", {duration: 300});
-						$(".mUndo[workid="+id+"]").velocity("fadeIn", {duration: 300});
-						var container = $(".mClassContainer[workid="+id+"]");
-						clearTile = setTimeout(function() {
-							container.velocity(
-							{
-								height: 0
-							},
-							{
-								duration: 200,
-								complete: function() {
-									serverData = [container[0].getAttribute("workid"), "done"];
-        							sendData("toggleWork");
-									container.remove();
-								}
-							});
-						}, 3000);
-					}
-				});
-
-			} else {
-				deltaX = 0;
-				jQuery(e.target).velocity({translateX: "0px"},300);
-			}
-		});
-
-		addMobileButton($(".mUndo[workid="+id+"]")[0], 30, function() {
-			clearTimeout(clearTile);
-			$(".mobileClass[workid="+id+"]").velocity({translateX: "0px"},300);
-			$(".mUndoText[workid="+id+"]").velocity("fadeOut", {duration: 300});
-			$(".mUndo[workid="+id+"]").velocity("fadeOut", {duration: 300});
-		});
-	}
-}
-
-function addMobileButton(element, lighten, thisFunction) {
-	let button = new Hammer.Manager(element);
 	let add = lighten;
+	let type = animateType;
 	let ele = jQuery(element);
-	let execute = thisFunction;
+	let execute = completeFunction;
+	let care = true;
+
 	let colors = [
 		parseFloat($.Velocity.hook(ele, "backgroundColorRed")),
 		parseFloat($.Velocity.hook(ele, "backgroundColorGreen")),
-		parseFloat($.Velocity.hook(ele, "backgroundColorBlue"))
+		parseFloat($.Velocity.hook(ele, "backgroundColorBlue")),
+		parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"))
 	];
-	var press = new Hammer.Press({
-		event: 'press',
-		pointers: 1,
-		time: 0.01,
-		threshold: 3000
-	});
 
-	button.add(press);
+	ele.on('touchstart mousedown', function(e) {
-
+		care = true;
-	button.on('press', function(e) {
+		switch(type) {
+			case "color":
 				ele.velocity(
 				{
 					backgroundColorRed: colors[0] + add,
 					backgroundColorGreen: colors[1] + add,
 					backgroundColorBlue: colors[2] + add,
 				},100);
+			case "brightness":
+				ele.velocity({backgroundColorAlpha: colors[3] + add},100);
+		}
 	});
 
-	ele.bind('touchend', function(e) {
+	ele.on('touchend mouseup', function(e) {
+		if(!care) return;
 		ele.velocity("stop");
+		switch(type) {
+			case "color":
 				ele.velocity(
 				{
 					backgroundColorRed: colors[0],
@@ -198,53 +209,38 @@ function addMobileButton(element, lighten, thisFunction) {
 					duration: 200,
 					complete: execute()
 				});
-	});
+			case "brightness":
-}
-
-function addMobileSideButton(element, lighten, thisFunction) {
-	let button = new Hammer.Manager(element);
-	let add = lighten;
-	let ele = jQuery(element);
-	let execute = thisFunction;
-	let care = true;
-
-	let colors = parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"));
-
-	var press = new Hammer.Press({
-		event: 'press',
-		pointers: 1,
-		time: 0.01
-	});
-
-	var pan = new Hammer.Pan();
-
-	button.add(press);
-	button.add(pan);
-
-	button.on('press', function(e) {
-		care = true;
-		ele.velocity({backgroundColorAlpha: colors + add},100);
-	});
-
-	button.on('pan', function(e) {
-		if(element !== document.elementFromPoint(e.pX, e.pY)) {
-			care = false;
-			ele.velocity("stop");
-			ele.velocity({backgroundColorAlpha: colors}, 200);
-		}
-	});
-
-	ele.bind('touchend', function(e) {
-		if(!care) return;
-		ele.velocity("stop");
 				ele.velocity(
 				{
-			backgroundColorAlpha: colors
+					backgroundColorAlpha: colors[3]
 				},
 				{
 					duration: 200,
 					complete: execute()
 				});
+		}
+	});
+
+	ele.on('touchmove', function(e) {
+	    if (element !== document.elementFromPoint(e.originalEvent.touches[0].pageX,e.originalEvent.touches[0].pageY)) {
+	        ele.mouseleave();
+	    }
+	})
+
+	ele.on('mouseleave', function(e) {
+		if(!care) return;
+		care = false;
+		switch(type) {
+			case "color":
+				ele.velocity(
+				{
+					backgroundColorRed: colors[0],
+					backgroundColorGreen: colors[1],
+					backgroundColorBlue: colors[2],
+				},200);
+			case "brightness":
+				ele.velocity({backgroundColorAlpha: colors[3]},200);
+		}
 	});
 }