Merge pull request #73 from kshetline/development

Fix forecast day click action for iOS.

Author: kshetline

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 3.1.2
+
+* Fix forecast day click action for iOS. (This fix might also help with other touchscreens.)
+
 ## 3.1.1
 
 * Improved touch/swipe interface for daily forecast.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock-sass",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "SASS builder for aw-clock",
   "keywords": [
     "sass"

sass/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock-server",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "private": true,

sass/package.json

@@ -240,11 +240,13 @@ export class Forecast {
 
     let usingTouch = false;
     let maxInc = 4;
+    let downTime = Number.MIN_SAFE_INTEGER;
     const mouseDown = (x: number): void => {
       dragging = true;
       lastX = downX = x;
       maxMove = 0;
       maxInc = 4;
+      downTime = processMillis();
     };
     window.addEventListener('mousedown', event => eventInside(event, forecastRect) ? usingTouch || mouseDown(event.pageX) : null);
     window.addEventListener('touchstart', event => event.touches.length > 0 && eventInside(event.touches[0], forecastRect) ?
@@ -376,15 +378,31 @@ export class Forecast {
       usingTouch = false;
 
       if (maxMove >= 0) {
-        const dx = (x ?? downX) - downX;
+        if (maxMove < dragStartThreshold && processMillis() < downTime + 500) {
+          const dayClickers = Array.from(document.querySelectorAll('[id$="-clicker"]')).filter(elem => /^day\d-clicker$/.test(elem.id));
+
+          for (const clicker of dayClickers) {
+            const r = clicker.getBoundingClientRect();
+
+            if ((r.left <= x && x <= r.right)) {
+              (clicker as HTMLElement).click();
+              break;
+            }
+          }
 
-        if (abs(dx) >= swipeThreshold)
-          doSwipe(dx);
-        else
           restorePosition();
+        }
+        else {
+          const dx = (x ?? downX) - downX;
+
+          if (abs(dx) >= swipeThreshold)
+            doSwipe(dx);
+          else
+            restorePosition();
 
-        if (maxMove >= dragStartThreshold)
-          dragEndTime = processMillis();
+          if (maxMove >= dragStartThreshold)
+            dragEndTime = processMillis();
+        }
       }
       else
         restorePosition();