Added swipeL + swipeR + arrowL + arrowR events to DailyCharts form (#22)

* Added swipeL + swipeR + arrowL + arrowR events to DailyCharts form * Added swipeL + swipeR + arrowL + arrowR events to DailyCharts form * changed indicator from div to img, using spinner.gif * changed indicator from div to img, using spinner.gif * invert swipe directions --------- Co-authored-by: Louis Croisez <louis.croisez@gmail.com>
2024-03-17 09:34:56 +01:00
parent 141fb67653
commit 26311d4cd1
2 changed files with 55 additions and 0 deletions
@@ -436,6 +436,60 @@ window.onbeforeunload = function(event) {
    audioelement.volume = 1
  }
 }
+
+function getTheDate(increment) {
+  var theDate = "<?php echo $theDate;?>";
+
+  d = new Date(theDate);
+  d.setDate(d.getDate(theDate) + increment);
+  yyyy = d.getFullYear();
+  mm = d.getMonth() + 1; if (mm < 10) mm = "0" + mm;
+  dd = d.getDate(); if (dd < 10) dd = "0" + dd;
+
+  swipeSpinner=document.getElementById("SwipeSpinner");
+  swipeSpinner.setAttribute("src","images/spinner.gif");
+  
+  window.location = "/views.php?date="+yyyy+"-"+mm+"-"+dd+"&view=Daily+Charts";
+}
+
+function installKeyAndSwipeEventHandler() {
+  for (var i = 0; i < topbuttons.length; i++) {
+    if (topbuttons[i].textContent == "Daily Charts" && 
+        topbuttons[i].className == "button-hover") {
+
+      document.onkeydown = function(event) {
+        switch (event.keyCode) {
+          case 37: //Left key
+            getTheDate(-1);
+            break;
+          case 39: //Right key
+            getTheDate(+1);
+            break;
+        }
+      }
+
+      // https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
+      let touchstartX = 0
+      let touchendX = 0
+    
+      function checkDirection() {
+        if (touchendX < touchstartX) getTheDate(+1);
+        if (touchendX > touchstartX) getTheDate(-1);
+      }
+
+      document.addEventListener('touchstart', e => {
+        touchstartX = e.changedTouches[0].screenX
+      })
+
+      document.addEventListener('touchend', e => {
+        touchendX = e.changedTouches[0].screenX
+        checkDirection()
+      })
+    }
+  }
+}
+
+installKeyAndSwipeEventHandler();
 </script>
 </div>
 </body>