Mobile page updates

hourglass/client/main/main.css

@@ -383,6 +383,10 @@ input {
 	pointer-events: none;
 }
 
+.sideFilter span {
+	pointer-events: none;
+}
+
 .sideClassName {
 	width: 50%;
 	padding-left: 5%;

hourglass/client/menus/menus.js

@@ -101,10 +101,7 @@ Template.sidebarMenuPlate.events({
         Session.set("classDisp", array);
     },
     'click .sideFilter' (event) {
-        var div = event.target;
+        var type = event.target.getAttribute("type");
-        while (div.getAttribute("type") === null) div = div.parentNode;
-        var type = div.getAttribute("type");
-
         var array = Session.get("typeFilter");
         if (array.indexOf(type) !== -1) {
             array.splice(array.indexOf(type), 1);

hourglass/client/mobile/mobile.css

@@ -51,6 +51,7 @@
 }
 
 .mClassContainer {
+	opacity: 0;
 	border-bottom: 1px solid #AAA;
 	position: relative;
 }
@@ -298,6 +299,20 @@
 	display: none;
 }
 
+#mDisableFilter {
+	font-weight: 200;
+	font-size: 90%;
+	margin-left: 30%;
+	padding: 3%;
+
+	background-color: rgba(255,255,255,0.2);
+
+	display: none;
+	line-height: normal;
+	pointer-events: all;
+	z-index: 2;
+}
+
 #mTypeFilterWrapper {
 	margin-top: 0;
 }
@@ -349,3 +364,9 @@
 #mSettings h3 {
 	padding: 0;
 }
+
+.mNoneText {
+	font-weight: 300;
+	font-style: italic;
+	padding: 5%;
+}

hourglass/client/mobile/mobile.html

@@ -12,12 +12,14 @@
 				{{#each myWork}}
 					{{> mobileClass}}
 				{{/each}}
+				<h3 class="mNoneText" style="display:{{noMain}}">Nothing left here!</h3>
 			{{/if}}
 			{{#if showMode 'done'}}
 				<h4 class="minorHeader">Done</h4>
 				{{#each myWork "done"}}
 					{{> mobileClass}}
 				{{/each}}
+				<h3 class="mNoneText" style="display:{{noDone}}">You... should really get to work.</h3>
 			{{/if}}
 			{{#if showMode 'addWork'}}
 			{{/if}}
@@ -26,7 +28,7 @@
 			<i class="fa fa-pencil" aria-hidden="true"></i>
 		</div>
 		<div id="mOverlay"></div>
-		<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}}">
+		<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}};border-left:3vw solid {{divColor 'sidebarColor'}}">
 			<div class="mSectionTitle downOffset">
 		        <h3>Main</h3>
 		    </div>
@@ -42,6 +44,7 @@
 			</div>
 			<div id="mFilterHead" class="mSectionTitle mOpenable downOffset">
 		        <h3>Filters</h3>
+            	<h3 id="mDisableFilter" style="display:{{filterOn}}">Disable All</h3>
 		        <i class="fa fa-angle-down" aria-hidden="true"></i>
 		    </div>
 		    <div id="mFilterWrapper">

hourglass/client/mobile/mobile.js

@@ -1,6 +1,8 @@
 Session.set("mobileWork", []);
 Session.set("mobileMode", "main");
 Session.set("mobileSidebar", false);
+Session.set("classDisp", []);
+Session.set("typeFilter", []);
 
 var filterOpen = [false, true, true];
 
@@ -29,6 +31,7 @@ Template.mobile.rendered = function() {
 		} else {
 			Session.set("mobileMode","main");
 			toggleSidebar(false);
+			timedPushback();
 		}
 	});
 
@@ -38,6 +41,7 @@ Template.mobile.rendered = function() {
 		} else {
 			Session.set("mobileMode","done");
 			toggleSidebar(false);
+			timedPushback();
 		}
 	});
 
@@ -45,8 +49,8 @@ Template.mobile.rendered = function() {
 		console.log("Go to settings!"); // Render setting template
 	});
 
-	addMobileButton($("#mFilterHead"), 0.1, "brightness", function() {
+	addMobileButton($("#mFilterHead")[0], 0.1, "brightness", function() {
-		if (event.target.id === "disableFilter") return;
+		if(event.target.id === "mDisableFilter") return;
         if (!filterOpen[0]) {
             $("#mFilterWrapper").slideDown(300);
         } else {
@@ -55,7 +59,7 @@ Template.mobile.rendered = function() {
         filterOpen[0] = !filterOpen[0];
 	});
 
-	addMobileButton($("#mTypeFilterWrapper"), 0.1, "brightness", function() {
+	addMobileButton($("#mTypeFilterWrapper")[0], 0.1, "brightness", function() {
 		if (!filterOpen[1]) {
             $("#mClassFilterHolder").slideDown(300);
         } else {
@@ -64,7 +68,7 @@ Template.mobile.rendered = function() {
         filterOpen[1] = !filterOpen[1];
 	});
 
-	addMobileButton($("#mClassFilterWrapper"), 0.1, "brightness", function() {
+	addMobileButton($("#mClassFilterWrapper")[0], 0.1, "brightness", function() {
 		if (!filterOpen[2]) {
             $("#mClassListHolder").slideDown(300);
         } else {
@@ -73,8 +77,14 @@ Template.mobile.rendered = function() {
         filterOpen[2] = !filterOpen[2];
 	});
 
+	addMobileButton($("#mDisableFilter")[0], -0.1, "brightness", function() {
+        Session.set("typeFilter", []);
+		Session.set("classDisp", []);
+        timedPushback();
+	});
+
 	// FOR SIDEBAR SLIDEBACK
-	/*var deltaX = 0;
+	var deltaX = 0;
 	var sidebar = $("#mSidebar");
 	new Hammer(sidebar[0], {
 		domEvents: true
@@ -84,48 +94,23 @@ Template.mobile.rendered = function() {
 		var dX = deltaX + (e.originalEvent.gesture.deltaX);
 		if(dX > 0) {
 			$.Velocity.hook(jQuery(e.target), 'translateX', dX/70 + 'px');
-			$.Velocity.hook(jQuery)
 		} else {
 			$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
 		}
 	});
 
-	movable.on('panend', function(e) {
+	sidebar.on('panend', function(e) {
-		deltaX = deltaX + (e.originalEvent.gesture.deltaX);
+		deltaX += (e.originalEvent.gesture.deltaX);
-		if(deltaX <= window.innerWidth * 0.3) {
+		if(deltaX >= -window.innerWidth * 0.4) {
 			deltaX = 0;
-			jQuery(e.target).velocity(
+			jQuery(e.target).velocity({'translateX': "0px"}, 150);
-			{
-				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);
+			toggleSidebar(false);
+
 		}
-	});*/
+	});
+	timedPushback();
 }
 
 
@@ -150,7 +135,8 @@ Template.mobileClass.rendered = function() {
 
 	movable.on('panend', function(e) {
 		if(e.target === document.getElementById("mobileBody")) return;
-		deltaX = deltaX + (e.originalEvent.gesture.deltaX);
+		deltaX += (e.originalEvent.gesture.deltaX);
+		var id = this.getAttribute("workid");
 		if(deltaX >= window.innerWidth * 0.5) {
 			deltaX = 0;
 			jQuery(e.target).velocity(
@@ -176,7 +162,7 @@ Template.mobileClass.rendered = function() {
 								container.remove();
 							}
 						});
-					}, 3000);
+					}, 1500);
 				}
 			});
 
@@ -194,6 +180,36 @@ Template.mobileClass.rendered = function() {
 	});
 }
 
+Template.mSidebarClasses.rendered = function() {
+	let div = this.firstNode;
+	addMobileButton(div, 0.1, "brightness", function() {
+       	var classid = div.getAttribute("classid");
+        var array = Session.get("classDisp");
+        if (array.indexOf(classid) !== -1) {
+            array.splice(array.indexOf(classid), 1);
+        } else {
+            array.push(classid);
+        }
+        Session.set("classDisp", array);
+        timedPushback();
+	});
+}
+
+Template.mSideTypeFilter.rendered = function() {
+	let div = this.firstNode;
+	addMobileButton(div, 0.1, "brightness", function() {
+		var type = div.getAttribute("type");
+    	var array = Session.get("typeFilter");
+        if (array.indexOf(type) !== -1) {
+            array.splice(array.indexOf(type), 1);
+        } else {
+            array.push(type);
+        }
+        Session.set("typeFilter", array);
+        timedPushback();
+	});
+}
+
 Template.mobile.helpers({
 	schoolName() { // Finds the name of the user's school.
 		if (Session.get("user").school === undefined || Session.get("user").school === null) return;
@@ -249,8 +265,20 @@ Template.mobile.helpers({
             });
         }
         return array;
+    },
+    filterOn() {
+        return (Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0) ? "inline-block" : "none";
+    },
+    noMain() {
+    	try {
+    		return (Session.get("mobileWork")[0].length === 0) ? "block" : "none";	
+    	} catch(err) {}
+    },
+    noDone() {
+    	try {
+    		return (Session.get("mobileWork")[1].length === 0) ? "block" : "none";
+    	} catch(err) {}
     }
-
 });
 
 function addMobileButton(element, lighten, animateType, completeFunction) {
@@ -268,7 +296,6 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
 	];
 
 	ele.on('touchstart', function(e) {
-		console.log("start!");
 		care = true;
 		switch(type) {
 			case "color":
@@ -336,9 +363,51 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
 function toggleSidebar(open) {
 	if(open) {
 		$("#mOverlay").velocity("fadeIn", 300);
-		$("#mSidebar").velocity({left: '0vw'}, 300);
+		$("#mSidebar").velocity({left: '-3vw'}, 300);
 	} else {
 		$("#mOverlay").velocity("fadeOut", 300);
-		$("#mSidebar").velocity({left: '-100vw'});
+		$("#mSidebar").velocity(
+		{
+			left: '-100vw'
+		}, 
+		{
+			duration: 300,
+			complete: function() {
+				$.Velocity.hook($("#mSidebar"), 'translateX', '0px');
+			}
+		});
+	}
+}
+
+function timedPushback() {
+	$(".mobileClass").velocity("stop", true);
+	if($(".mClassContainer").length === 0) {
+		$(".mNoneText").velocity("fadeOut", {
+			duration: 100,
+			complete: function() {
+				$(".mClassContainer").velocity({left: "-150vw"}, 0);
+				$(".mClassContainer").velocity("fadeIn", 0);
+				var i = 0;
+				var timer = setInterval(function() {
+					$($(".mClassContainer")[i]).velocity({left: ""});
+					if(i === $(".mClassContainer").length - 1) clearInterval(timer);
+					i += 1;
+				}, 100);
+			}
+		});
+	} else {
+		$(".mClassContainer").velocity("fadeOut", {
+			duration: 100,
+			complete: function() {
+				$(".mClassContainer").velocity({left: "-150vw"}, 0);
+				$(".mClassContainer").velocity("fadeIn", 0);
+				var i = 0;
+				var timer = setInterval(function() {
+					$($(".mClassContainer")[i]).velocity({left: ""});
+					if(i === $(".mClassContainer").length - 1) clearInterval(timer);
+					i += 1;
+				}, 100);
+			}
+		});
 	}
 }