[widclkinfo] Keeps focus when widget_utils.swipeOn()

apps/clock_info/lib.js

@@ -299,12 +299,15 @@ exports.addInteractive = function(menu, options) {
   const blur = () => {
     options.focus=false;
     Bangle.CLKINFO_FOCUS--;
+    // if (Bangle.CLKINFO_FOCUS < 0) Bangle.CLKINFO_FOCUS = 0;
     const itm = menu[options.menuA].items[options.menuB];
     let redraw = true;
     if (itm.blur && itm.blur(options) === false)
       redraw = false;
     if (redraw) options.redraw();
   };
+  // better to only call blur when we know it's focused. Maybe we can rename force_blur to ensure_blur.
+  options.force_blur = blur;
   const focus = () => {
     let redraw = true;
     Bangle.CLKINFO_FOCUS = (0 | Bangle.CLKINFO_FOCUS) + 1;

apps/widclkinfo/widget.js

@@ -1,20 +1,30 @@
 if (!require("clock_info").loadCount) { // don't load if a clock_info was already loaded
   // Load the clock infos
-  let clockInfoItems = require("clock_info").load();
-  // Add the
-  let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, {
-    app : "widclkinfo",
+  let clockInfoItems = clock_info.load();
+
+  // TODO only do checks if widget_utils.swipeOn is being used
+  let wuo = widget_utils.offset;
+
+  let clockInfoMenu = clock_info.addInteractive(clockInfoItems, {
+    app: "widclkinfo",
     // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
-    x : 0, y: 0, w: 72, h:24,
+    x: 0,
+    y: 0, // maybe set offset to initial offset
+    w: 72,
+    h: 24,
     // You can add other information here you want to be passed into 'options' in 'draw'
     // This function draws the info
-    draw : (itm, info, options) => {
+    draw: (itm, info, options) => {
       // itm: the item containing name/hasRange/etc
       // info: data returned from itm.get() containing text/img/etc
       // options: options passed into addInteractive
       clockInfoInfo = info;
-      if (WIDGETS["clkinfo"])
+      wuo = 0 | widget_utils.offset;
+      clockInfoMenu.y = options.y + wuo;
+      if (WIDGETS["clkinfo"]) {
         WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
+        console.log("Clock Info was updated, thus drawing widget.");
+      }
     }
   });
   let clockInfoInfo; // when clockInfoMenu.draw is called we set this up
@@ -25,12 +35,12 @@ if (!require("clock_info").loadCount) { // don't load if a clock_info was alread
     width: clockInfoMenu.w,
     draw:function(e) {
       clockInfoMenu.x = e.x;
-      clockInfoMenu.y = e.y;
+      wuo = 0 | widget_utils.offset;
+      clockInfoMenu.y = e.y + wuo;
       var o = clockInfoMenu;
       // Clear the background
       g.reset();
-      // indicate focus - make background reddish
-      //if (clockInfoMenu.focus) g.setBgColor(g.blendColor(g.theme.bg, "#f00", 0.25));
+      // indicate focus
       if (clockInfoMenu.focus) g.setColor("#f00");
       g.clearRect(o.x, o.y, o.x+o.w-1, o.y+o.h-1);
       if (clockInfoInfo) {
@@ -47,4 +57,20 @@ if (!require("clock_info").loadCount) { // don't load if a clock_info was alread
       }
     }
   };
-}
+
+  widget_utils.on("hidden", () => {
+    console.log("hidden");
+    clockInfoMenu.y = -24;
+    if (clockInfoMenu.focus) {
+      clockInfoMenu.force_blur();
+      console.log("Forced blur bc hidden");
+    }
+  });
+
+  widget_utils.on("shown", () => {
+    clockInfoMenu.y = 0;
+    console.log("shown");
+    if (WIDGETS["clkinfo"]) {
+      WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
+    }
+  });

modules/widget_utils.js

@@ -11,6 +11,7 @@ exports.hide = function() {
     w.area = "";
     if (w.x!=undefined) g.clearRect(w.x,w.y,w.x+w.width-1,w.y+23);
   }
+  // TODO: do we need to emit event here too?
 };
 
 /// Show any hidden widgets
@@ -132,9 +133,11 @@ exports.swipeOn = function(autohide) {
       if (dir>0 && exports.offset>=0) { // fully down
         stop = true;
         exports.offset = 0;
+        Bangle.emit("widgets-shown");
       } else if (dir<0 && exports.offset<-23) { // fully up
         stop = true;
         exports.offset = -24;
+        Bangle.emit("widgets-hidden");
       }
       if (stop) {
         clearInterval(exports.animInterval);
@@ -153,12 +156,19 @@ exports.swipeOn = function(autohide) {
     let cb;
     if (exports.autohide > 0) cb = function() {
       exports.hideTimeout = setTimeout(function() {
+        Bangle.emit("widgets-start-hide");
         anim(-4);
       }, exports.autohide);
     };
-    if (ud>0 && exports.offset<0) anim(4, cb);
-    if (ud<0 && exports.offset>-24) anim(-4);
+    if (ud>0 && exports.offset<0) {
+      Bangle.emit("widgets-start-show");
+      anim(4, cb);
+    }
+    if (ud<0 && exports.offset>-24) {
+      Bangle.emit("widgets-start-hide");
+      anim(-4);
+    }
   };
   Bangle.on("swipe", exports.swipeHandler);
   Bangle.drawWidgets();
-};
+};