Merge pull request #3561 from stweedo/boxclk

Update Boxclk to V0.09
espruino · Sep 7, 2024 · 87a9fb2 · 87a9fb2
2 parents 2a7da3a + 4287509
commit 87a9fb2
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 86 deletions.
diff --git a/apps/boxclk/ChangeLog b/apps/boxclk/ChangeLog
@@ -11,4 +11,5 @@
 - [+] Improved battery level update logic to reduce unnecessary refreshes
 - [+] Fixed optional seconds not displaying in time
 - [+] Fixed drag handler by adding E.stopEventPropagation()
-- [+] General code optimization and cleanup
+- [+] General code optimization and cleanup
+0.09: Revised event handler code
diff --git a/apps/boxclk/app.js b/apps/boxclk/app.js
@@ -24,98 +24,96 @@
   let drawTimeout;
 
   // 3. Event handlers
-  let eventHandlers = {
-    touchHandler: function(zone, e) {
-      let boxTouched = false;
-      let touchedBox = null;
-
-      for (let boxKey in boxes) {
-        if (touchInText(e, boxes[boxKey])) {
-          touchedBox = boxKey;
-          boxTouched = true;
-          break;
-        }
+  let touchHandler = function(zone, e) {
+    let boxTouched = false;
+    let touchedBox = null;
+
+    for (let boxKey in boxes) {
+      if (touchInText(e, boxes[boxKey])) {
+        touchedBox = boxKey;
+        boxTouched = true;
+        break;
       }
-
-      if (boxTouched) {
+    }
+
+    if (boxTouched) {
       // Toggle the selected state of the touched box
-        boxes[touchedBox].selected = !boxes[touchedBox].selected;
+      boxes[touchedBox].selected = !boxes[touchedBox].selected;
 
       // Update isDragging based on whether any box is selected
-        isDragging = Object.values(boxes).some(box => box.selected);
-
-        if (isDragging) {
-          widgets.hide();
-        } else {
-          deselectAllBoxes();
-        }
+      isDragging = Object.values(boxes).some(box => box.selected);
+
+      if (isDragging) {
+        widgets.hide();
       } else {
-      // If tapped outside any box, deselect all boxes
         deselectAllBoxes();
       }
-
+    } else {
+      // If tapped outside any box, deselect all boxes
+      deselectAllBoxes();
+    }
+
     // Always redraw after a touch event
-      draw();
-    
+    draw();
+
     // Handle double tap for saving
-      if (!boxTouched && !isDragging) {
-        if (doubleTapTimer) {
-          clearTimeout(doubleTapTimer);
-          doubleTapTimer = null;
-          for (let boxKey in boxes) {
-            boxesConfig[boxKey].boxPos.x = (boxes[boxKey].pos.x / w).toFixed(3);
-            boxesConfig[boxKey].boxPos.y = (boxes[boxKey].pos.y / h).toFixed(3);
-          }
-          storage.write(fileName, JSON.stringify(boxesConfig));
-          displaySaveIcon();
-          return;
+    if (!boxTouched && !isDragging) {
+      if (doubleTapTimer) {
+        clearTimeout(doubleTapTimer);
+        doubleTapTimer = null;
+        for (let boxKey in boxes) {
+          boxesConfig[boxKey].boxPos.x = (boxes[boxKey].pos.x / w).toFixed(3);
+          boxesConfig[boxKey].boxPos.y = (boxes[boxKey].pos.y / h).toFixed(3);
         }
-
-        doubleTapTimer = setTimeout(() => {
-          doubleTapTimer = null;
-        }, 500);
+        storage.write(fileName, JSON.stringify(boxesConfig));
+        displaySaveIcon();
+        return;
       }
-    },
-
-    dragHandler: function(e) {
-      if (!isDragging) return;
+
+      doubleTapTimer = setTimeout(() => {
+        doubleTapTimer = null;
+      }, 500);
+    }
+  };
+
+  let dragHandler = function(e) {
+    if (!isDragging) return;
 
     // Stop propagation of the drag event to prevent other handlers
-      E.stopEventPropagation();
-
-      for (let key in boxes) {
-        if (boxes[key].selected) {
-          let boxItem = boxes[key];
-          calcBoxSize(boxItem);
-          let newX = boxItem.pos.x + e.dx;
-          let newY = boxItem.pos.y + e.dy;
-
-          if (newX - boxItem.cachedSize.width / 2 >= 0 &&
-              newX + boxItem.cachedSize.width / 2 <= w &&
-              newY - boxItem.cachedSize.height / 2 >= 0 &&
-              newY + boxItem.cachedSize.height / 2 <= h) {
-            boxItem.pos.x = newX;
-            boxItem.pos.y = newY;
-          }
+    E.stopEventPropagation();
+
+    for (let key in boxes) {
+      if (boxes[key].selected) {
+        let boxItem = boxes[key];
+        calcBoxSize(boxItem);
+        let newX = boxItem.pos.x + e.dx;
+        let newY = boxItem.pos.y + e.dy;
+
+        if (newX - boxItem.cachedSize.width / 2 >= 0 &&
+            newX + boxItem.cachedSize.width / 2 <= w &&
+            newY - boxItem.cachedSize.height / 2 >= 0 &&
+            newY + boxItem.cachedSize.height / 2 <= h) {
+          boxItem.pos.x = newX;
+          boxItem.pos.y = newY;
         }
       }
-
+    }
+
+    draw();
+  };
+
+  let stepHandler = function(up) {
+    if (boxes.step && !isDragging) {
+      boxes.step.string = formatStr(boxes.step, Bangle.getHealthStatus("day").steps);
+      boxes.step.cachedSize = null;
+      draw();
+    }
+  };
+
+  let lockHandler = function(isLocked) {
+    if (isLocked) {
+      deselectAllBoxes();
       draw();
-    },
-
-    stepHandler: function(up) {
-      if (boxes.step && !isDragging) {
-        boxes.step.string = formatStr(boxes.step, Bangle.getHealthStatus("day").steps);
-        boxes.step.cachedSize = null;
-        draw();
-      }
-    },
-
-    lockHandler: function(isLocked) {
-      if (isLocked) {
-        deselectAllBoxes();
-        draw();
-      }
     }
   };
 
@@ -412,13 +410,13 @@
 
   // 10. Setup function to configure event handlers
   let setup = function() {
-    Bangle.on('lock', eventHandlers.lockHandler);
-    Bangle.on('touch', eventHandlers.touchHandler);
-    Bangle.on('drag', eventHandlers.dragHandler);
+    Bangle.on('lock', lockHandler);
+    Bangle.on('touch', touchHandler);
+    Bangle.on('drag', dragHandler);
 
     if (boxes.step) {
       boxes.step.string = formatStr(boxes.step, Bangle.getHealthStatus("day").steps);
-      Bangle.on('step', eventHandlers.stepHandler);
+      Bangle.on('step', stepHandler);
     }
 
     if (boxes.batt) {
@@ -431,11 +429,11 @@
       mode: "clock",
       remove: function() {
         // Remove event handlers, stop draw timer, remove custom font
-        Bangle.removeListener('touch', eventHandlers.touchHandler);
-        Bangle.removeListener('drag', eventHandlers.dragHandler);
-        Bangle.removeListener('lock', eventHandlers.lockHandler);
+        Bangle.removeListener('touch', touchHandler);
+        Bangle.removeListener('drag', dragHandler);
+        Bangle.removeListener('lock', lockHandler);
         if (boxes.step) {
-          Bangle.removeListener('step', eventHandlers.stepHandler);
+          Bangle.removeListener('step', stepHandler);
         }
         if (drawTimeout) clearTimeout(drawTimeout);
         drawTimeout = undefined;

diff --git a/apps/boxclk/metadata.json b/apps/boxclk/metadata.json
@@ -1,7 +1,7 @@
 {
   "id": "boxclk",
   "name": "Box Clock",
-  "version": "0.08",
+  "version": "0.09",
   "description": "A customizable clock with configurable text boxes that can be positioned to show your favorite background",
   "icon": "app.png",
   "dependencies" : { "clockbg":"module" },