implement swipe gestures on mobile to go to next and previous articles

themes/_global/js/keyboard.js

@@ -1,27 +1,27 @@
 function navigateKeyboard(leftURL, rightURL) {
   window.addEventListener("keypress", function (event) {
     var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions
-    console.log("key pressed : " + key);
     switch (key) {
       case 37:
-        // left arrow
+       goLeft(leftURL);
-        if (leftURL != "?view=view&id=") {
-          window.location = window.location.origin + window.location.pathname + leftURL;
-        }
       break;
-        /*
+
-        case 38:
-        // top arrow
-        window.location = window.location.origin + window.location.pathname + window.location.search + "#top";
-        break;
-        */
       case 39:
-        //right arrow
+        goRight(rightURL);
-        if (rightURL != "?view=view&id=") {
-        window.location = window.location.origin + window.location.pathname + rightURL;
-        }
       break;
     }
 
   }, false);
 }
+
+function goLeft(leftURL) {
+   if (leftURL != "?view=view&id=") {
+          window.location = window.location.origin + window.location.pathname + leftURL;
+  }
+}
+
+function goRight(rightURL) {
+  if (rightURL != "?view=view&id=") {
+        window.location = window.location.origin + window.location.pathname + rightURL;
+  }
+}

themes/baggy/_head.twig

@@ -31,6 +31,7 @@
         <link rel="stylesheet" href="{{ poche_url }}themes/{{theme}}/css/print.css" media="print">
 
         <script src="{{ poche_url }}themes/_global/js/jquery-2.1.3.min.js"></script>
+        <script src="{{ poche_url }}themes/_global/js/jquery.mobile.events.touch.min.js"></script>
         <script src="{{ poche_url }}themes/_global/js/autoClose.js"></script>
         <script src="{{ poche_url }}themes/{{theme}}/js/jquery.cookie.js"></script>
         <script src="{{ poche_url }}themes/{{theme}}/js/init.js"></script>

themes/baggy/view.twig

@@ -103,6 +103,17 @@
                 retrievePercent({{ entry.id|e }});
             });
         });
+        
+        // Use left and right arrow to navigate on with keyboard
         navigateKeyboard('?view=view&id={{ navigate.nextid|e }}','?view=view&id={{ navigate.previousid|e }}');
+
+        // swipe to right or left on mobile to navigate
+        $('article').on("swiperight", function(){
+            goLeft('?view=view&id={{ navigate.nextid|e }}');
+        });
+        $('article').on("swipeleft", function(){
+            goRight('?view=view&id={{ navigate.previousid|e }}');
+        });
+
         </script>
 {% endblock %}

themes/default/_head.twig

@@ -30,6 +30,7 @@
         <link rel="stylesheet" href="{{ poche_url }}themes/default/css/messages.css" media="all">
         <link rel="stylesheet" href="{{ poche_url }}themes/default/css/print.css" media="print">
         <script src="{{ poche_url }}themes/_global/js/jquery-2.1.3.min.js"></script>
+        <script src="{{ poche_url }}themes/_global/js/jquery.mobile.events.touch.min.js"></script>
         <script src="{{ poche_url }}themes/_global/js/autoClose.js"></script>
         <script src="{{ poche_url }}themes/default/js/closeMessage.js"></script>
         <script src="{{ poche_url }}themes/_global/js/saveLink.js"></script>

themes/default/view.twig

@@ -125,6 +125,17 @@
                 $('#article_toolbar .tool.top').parent().hide();
             }
         });
+
+        // Use left and right arrow to navigate on with keyboard
         navigateKeyboard('?view=view&id={{ navigate.nextid|e }}','?view=view&id={{ navigate.previousid|e }}');
+
+        // swipe to right or left on mobile to navigate
+        $('article').on("swiperight", function(){
+            goLeft('?view=view&id={{ navigate.nextid|e }}');
+        });
+        $('article').on("swipeleft", function(){
+            goRight('?view=view&id={{ navigate.previousid|e }}');
+        });
+
         </script>
 {% endblock %}