Revise event handlers

apps/boxclk/app.js

@@ -23,8 +23,9 @@
   let h = g.getHeight();
   let drawTimeout;
 
-  // 3. Touch and drag handlers
-  let touchHandler = function(zone, e) {
+  // 3. Event handlers
+  let eventHandlers = {
+    touchHandler: function(zone, e) {
       let boxTouched = false;
       let touchedBox = null;
     
@@ -74,10 +75,9 @@
           doubleTapTimer = null;
         }, 500);
       }
-  };
+    },
 
-  let dragHandler = function(e) {
-    // Check if any box is being dragged
+    dragHandler: function(e) {
       if (!isDragging) return;
   
     // Stop propagation of the drag event to prevent other handlers
@@ -101,6 +101,22 @@
       }
     
       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();
+      }
+    }
   };
 
   // 4. Font loading function
@@ -396,21 +412,15 @@
 
   // 10. Setup function to configure event handlers
   let setup = function() {
-    Bangle.on('lock', function(isLocked) {
-      if (isLocked) {
-        // Screen is about to lock, deselect all boxes
-        deselectAllBoxes();
-        // Redraw to reflect changes
-        draw();
-      }
-    });
-
-    Bangle.on('touch', touchHandler);
-    Bangle.on('drag', dragHandler);
+    Bangle.on('lock', eventHandlers.lockHandler);
+    Bangle.on('touch', eventHandlers.touchHandler);
+    Bangle.on('drag', eventHandlers.dragHandler);
   
     if (boxes.step) {
       boxes.step.string = formatStr(boxes.step, Bangle.getHealthStatus("day").steps);
+      Bangle.on('step', eventHandlers.stepHandler);
     }
+  
     if (boxes.batt) {
       boxes.batt.lastLevel = E.getBattery();
       boxes.batt.string = formatStr(boxes.batt, boxes.batt.lastLevel);
@@ -421,10 +431,12 @@
       mode: "clock",
       remove: function() {
         // Remove event handlers, stop draw timer, remove custom font
-        Bangle.removeListener('touch', touchHandler);
-        Bangle.removeListener('drag', dragHandler);
-        Bangle.removeListener('step');
-        Bangle.removeAllListeners('lock');
+        Bangle.removeListener('touch', eventHandlers.touchHandler);
+        Bangle.removeListener('drag', eventHandlers.dragHandler);
+        Bangle.removeListener('lock', eventHandlers.lockHandler);
+        if (boxes.step) {
+          Bangle.removeListener('step', eventHandlers.stepHandler);
+        }
         if (drawTimeout) clearTimeout(drawTimeout);
         drawTimeout = undefined;
         delete Graphics.prototype.setFontBrunoAce;
@@ -434,6 +446,7 @@
         widgets.show();
       }
     });
+  
     loadCustomFont();
     draw();
   };
@@ -443,13 +456,4 @@
   widgets.swipeOn();
   modSetColor();
   setup();
-
-  // Event listener for real-time step updates
-  Bangle.on('step', function(up) {
-    if (boxes.step && !isDragging) {
-      boxes.step.string = formatStr(boxes.step, Bangle.getHealthStatus("day").steps);
-      boxes.step.cachedSize = null;
-      draw();
-    }
-  });
 }