Wrap program in IIFE so variables don't leak

apps/boxclk/app.js

@@ -1,19 +1,20 @@
-let w = g.getWidth();
-let h = g.getHeight();
-let totalWidth, totalHeight;
-let touchHandler;
-let dragHandler;
-let drawTimeout;
-let enableSuffix = true;
-let storage = require("Storage");
-let locale = require("locale");
-let date = new Date();
+(function() {
+  let w = g.getWidth();
+  let h = g.getHeight();
+  let totalWidth, totalHeight;
+  let touchHandler;
+  let dragHandler;
+  let drawTimeout;
+  let enableSuffix = true;
+  let storage = require("Storage");
+  let locale = require("locale");
+  let date = new Date();
 
-let bgImage;
-let boxesConfig = storage.readJSON('boxclk.json', 1) || {};
-let boxes = {};
+  let bgImage;
+  let boxesConfig = storage.readJSON('boxclk.json', 1) || {};
+  let boxes = {};
 
-function loadCustomFont() {
+  function loadCustomFont() {
     Graphics.prototype.setFontBrunoAce = function() {
       // Actual height 23 (24 - 2)
       return this.setFontCustom(
@@ -23,21 +24,21 @@ function loadCustomFont() {
         32|65536
       );
     };
-}
+  }
 
-for (let key in boxesConfig) {
+  for (let key in boxesConfig) {
     if (key === 'bg' && boxesConfig[key].img) {
       bgImage = storage.read(boxesConfig[key].img);
     } else {
       boxes[key] = Object.assign({}, boxesConfig[key]);
     }
-}
+  }
 
-let boxPos = {};
-let isDragging = {};
-let wasDragging = {};
+  let boxPos = {};
+  let isDragging = {};
+  let wasDragging = {};
 
-Object.keys(boxes).forEach((boxKey) => {
+  Object.keys(boxes).forEach((boxKey) => {
     let boxConfig = boxes[boxKey];
     boxPos[boxKey] = {
       x: w * boxConfig.boxPos.x,
@@ -45,16 +46,16 @@ Object.keys(boxes).forEach((boxKey) => {
     };
     isDragging[boxKey] = false;
     wasDragging[boxKey] = false;
-});
+  });
 
-let g_drawString = g.drawString;
-g.drawString = function(box, str, x, y) {
+  let g_drawString = g.drawString;
+  g.drawString = function(box, str, x, y) {
     outlineText(box, str, x, y);
     g.setColor(box.color);
     g_drawString.call(g, str, x, y);
-};
+  };
 
-function outlineText(box, str, x, y) {
+  function outlineText(box, str, x, y) {
     let px = box.outline;
     let dx = [-px, 0, px, -px, px, -px, 0, px];
     let dy = [-px, -px, -px, 0, 0, px, px, px];
@@ -62,9 +63,9 @@ function outlineText(box, str, x, y) {
     for (let i = 0; i < dx.length; i++) {
       g_drawString.call(g, str, x + dx[i], y + dy[i]);
     }
-}
+  }
 
-function calcBoxSize(boxItem) {
+  function calcBoxSize(boxItem) {
     g.reset();
     g.setFontAlign(0,0);
     g.setFont(boxItem.font, boxItem.fontSize);
@@ -72,18 +73,18 @@ function calcBoxSize(boxItem) {
     let fontHeight = g.getFontHeight() + 2 * boxItem.outline;
     totalWidth = strWidth + 2 * boxItem.xPadding;
     totalHeight = fontHeight + 2 * boxItem.yPadding;
-}
+  }
 
-function calcBoxPos(boxKey) {
+  function calcBoxPos(boxKey) {
     return {
       x1: boxPos[boxKey].x - totalWidth / 2,
       y1: boxPos[boxKey].y - totalHeight / 2,
       x2: boxPos[boxKey].x + totalWidth / 2,
       y2: boxPos[boxKey].y + totalHeight / 2
     };
-}
+  }
 
-function getDate() {
+  function getDate() {
     const date = new Date();
     const dayOfMonth = date.getDate();
     const month = locale.month(date, 1);
@@ -100,13 +101,13 @@ function getDate() {
     }
     let dayOfMonthStr = enableSuffix ? dayOfMonth + suffix : dayOfMonth;
     return month + " " + dayOfMonthStr + ", " + year;
-}
+  }
 
-function getDayOfWeek(date) {
+  function getDayOfWeek(date) {
     return locale.dow(date, 0);
-}
+  }
 
-function draw(boxes) {
+  function draw(boxes) {
     date = new Date();
     g.clear();
     if (bgImage) {
@@ -143,9 +144,9 @@ function draw(boxes) {
       if (drawTimeout) clearTimeout(drawTimeout);
       drawTimeout = setTimeout(() => draw(boxes), 60000 - (Date.now() % 60000));
     }
-}
+  }
 
-function setup() {
+  function setup() {
     // Define the touchHandler function
     touchHandler = function(zone, e) {
       wasDragging = Object.assign({}, isDragging);
@@ -207,17 +208,18 @@ function setup() {
     });
     loadCustomFont();
     draw(boxes);
-}
+  }
 
-function touchInText(e, boxItem, boxKey) {
+  function touchInText(e, boxItem, boxKey) {
     calcBoxSize(boxItem);
     const pos = calcBoxPos(boxKey);
     return e.x >= pos.x1 &&
           e.x <= pos.x2 &&
           e.y >= pos.y1 &&
           e.y <= pos.y2;
-}
+  }
 
-Bangle.loadWidgets();
-require("widget_utils").swipeOn();
-setup();
+  Bangle.loadWidgets();
+  require("widget_utils").swipeOn();
+  setup();
+})();