Touch controls for swiping between events in the popup

KirstieJane · Apr 7, 2016 · 2ab2fe3 · 2ab2fe3
1 parent 29df34a
commit 2ab2fe3
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -6,8 +6,9 @@
     <link href='https://fonts.googleapis.com/css?family=Fira+Sans:100,300,400,400italic,500,500italic,700' rel='stylesheet' type='text/css'>
     <title>Mozilla Club Events</title>
 
-    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
-    <script src="app.js" type="text/javascript" charset="utf-8"></script>
+    <script src="js/hammer.js" type="text/javascript" charset="utf-8"></script>
+    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
+    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
     <script>
       less = {
         env: "development",

diff --git a/app.js → js/app.js b/app.js → js/app.js
@@ -24,6 +24,19 @@ var dataKeys = {
 
 $(document).ready(function(){
 
+  var myElement = $(".event-popup")[0];
+  var hammertime = new Hammer(myElement, {});
+  hammertime.on('swipe', function(ev) {
+    var delta = ev.deltaX;
+    if(Math.abs(delta) > 100) {
+      if(delta > 0) {
+        navigatePopup("next");
+      } else {
+        navigatePopup("previous");
+      }
+    }
+  });
+
   var eventId = parseInt(getUrlParameter("event"));
 
   if(!localStorage.getItem("data")) {
@@ -133,6 +146,8 @@ function navigatePopup(direction) {
 
 function showPop(id){
   var pop = $(".event-popup-wrapper");
+
+  pop.find(".event-popup").scrollTop("0");
   pop.show();
 
   for(var k in data){