widclkinfo: Make clockInfoMenu part of the widget

Author: Corwin Kerr

apps/widclkinfo/widget.js

@@ -1,93 +1,101 @@
-if (!require("clock_info").loadCount) { // don't load if a clock_info was already loaded
-  // Load the clock infos
-  let clockInfoItems = clock_info.load();
+(() => {
+  if (!require("clock_info").loadCount) { // don't load if a clock_info was already loaded
+  //WIDGETS = {};
+  const clock_info = require("clock_info");
 
-  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: -24, // TODO how know if offscreen to start?
-    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) => {
-      // itm: the item containing name/hasRange/etc
-      // info: data returned from itm.get() containing text/img/etc
-      // options: options passed into addInteractive
-      clockInfoInfo = info;
-      clockInfoMenu.y = options.y;
-      if (WIDGETS["clkinfo"] && clockInfoMenu.y > -24) {
-        WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
+  WIDGETS["clkinfo"] = {
+    area: "tl",
+    width: 0, //this.clockInfoMenu.w,
+    init: function() {
+      this.width = this.clockInfoMenu.w;
+      delete this.init;
+      return this;
+    },
+    clockInfoInfo: undefined, // defined during clockInfoMenu.draw()
+    clockInfoMenu: clock_info.addInteractive(clock_info.load(), {
+      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, // TODO how know if offscreen to start?
+      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) => {
+        // itm: the item containing name/hasRange/etc
+        // info: data returned from itm.get() containing text/img/etc
+        // options: options passed into addInteractive
+        var wi = WIDGETS["clkinfo"];
+        wi.clockInfoInfo = info;
+        wi.clockInfoMenu.y = options.y;
+        if (WIDGETS["clkinfo"] && wi.clockInfoMenu.y > -24) {
+          WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
+        }
       }
-    }
-  });
-
-  let clockInfoInfo; // when clockInfoMenu.draw is called we set this up
-  let draw = function(e) {
-    clockInfoMenu.x = e.x;
-    var o = clockInfoMenu;
-    // Clear the background
-    g.reset();
-    // 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) {
-      var x = o.x;
-      if (clockInfoInfo.img) {
-        g.drawImage(clockInfoInfo.img, x, o.y); // draw the image
-        x += 24;
+    }),
+    draw: function(e) {
+      this.clockInfoMenu.x = e.x;
+      var o = this.clockInfoMenu;
+      g.reset();
+      // indicate focus
+      if (this.clockInfoMenu.focus) {
+        g.setColor("#f00");
+      }
+      g.clearRect(o.x, o.y, o.x + o.w - 1, o.y + o.h - 1);
+      if (this.clockInfoInfo) {
+        var x = o.x;
+        if (this.clockInfoInfo.img) {
+          g.drawImage(this.clockInfoInfo.img, x, o.y); // draw the image
+          x += 24;
+        }
+        var availableWidth = o.x + this.clockInfoMenu.w - (x + 2);
+        g.setFont("6x8:2").setFontAlign(-1, 0);
+        if (g.stringWidth(this.clockInfoInfo.text) > availableWidth)
+          g.setFont("6x8:1x2");
+        g.drawString(this.clockInfoInfo.text, x + 2, o.y + 12); // draw the text
       }
-      var availableWidth = o.x + clockInfoMenu.w - (x + 2);
-      g.setFont("6x8:2").setFontAlign(-1, 0);
-      if (g.stringWidth(clockInfoInfo.text) > availableWidth)
-        g.setFont("6x8:1x2");
-      g.drawString(clockInfoInfo.text, x + 2, o.y + 12); // draw the text
     }
-  };
-
-  // The actual widget we're displaying
-  WIDGETS["clkinfo"] = {
-    area: "tl",
-    width: clockInfoMenu.w,
-    draw: draw
-  };
+  }.init();
 
   Bangle.on("widgets-start-show", () => {
-    clockInfoMenu.y = 0;
-    if (WIDGETS["clkinfo"]) {
-      WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
+    var wi = WIDGETS["clkinfo"];
+    if (wi) {
+      wi.clockInfoMenu.y = 0;
+      wi.draw(wi);
     }
-  })
+  });
 
   Bangle.on("widgets-shown", () => {
-    clockInfoMenu.y = 0;
-    if (WIDGETS["clkinfo"]) {
-      WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
+    var wi = WIDGETS["clkinfo"];
+    if (wi) {
+      wi.clockInfoMenu.y = 0;
+      wi.draw(wi);
     }
   });
 
   Bangle.on("widgets-start-hide", () => {
-    clockInfoMenu.y = -24;
-    if (WIDGETS["clkinfo"]) {
-      WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
-    }
-    if (clockInfoMenu.focus) {
-      clockInfoMenu.blur();
+    var wi = WIDGETS["clkinfo"];
+    if (wi) {
+      if (wi.clockInfoMenu.focus) wi.clockInfoMenu.blur();
+      wi.clockInfoMenu.y = -24;
+      wi.draw(wi);
     }
   });
 
   Bangle.on("widgets-hidden", () => {
-    clockInfoMenu.y = -24;
-    if (WIDGETS["clkinfo"]) {
-      WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
-    }
-    // check here too in case widget_utils.hide() is called
-    if (clockInfoMenu.focus) {
-      clockInfoMenu.blur();
+    var wi = WIDGETS["clkinfo"];
+    if (wi) {
+      if (wi.clockInfoMenu.focus) wi.clockInfoMenu.blur();
+      wi.clockInfoMenu.y = -24;
+      wi.draw(wi);
     }
   });
-}
+}})()
+
+/*
+const widget_utils = require("widget_utils");
+g.clear();
+Bangle.loadWidgets();
+widget_utils.swipeOn();
+Bangle.drawWidgets();
+*/