Replace Page Visibility API with focus event listener for dashboard refreshes.

This is a bit of a testing phase to see if the focus event listerner behaves any better than the Page Visibility API, particularly in mobile browsers.

dashboard/static_src/js/dashboard.js

@@ -6,7 +6,7 @@
 BabyBuddy.Dashboard = function ($) {
     var runIntervalId = null;
     var dashboardElement = null;
-    var lastUpdate = moment();
+    var hidden = null;
 
     var Dashboard = {
         watch: function(element_id, refresh_rate) {
@@ -17,13 +17,30 @@ BabyBuddy.Dashboard = function ($) {
                 return false;
             }
 
-            runIntervalId = setInterval(this.update, refresh_rate);
+            if (typeof document.hidden !== "undefined") {
+                hidden = "hidden";
+            }
+            else if (typeof document.msHidden !== "undefined") {
+                hidden = "msHidden";
+            }
+            else if (typeof document.webkitHidden !== "undefined") {
+                hidden = "webkitHidden";
+            }
 
-            Visibility.change(function (e, state) {
+            if (typeof window.addEventListener === "undefined" || typeof document.hidden === "undefined") {
-                if (state == 'visible' && moment().diff(lastUpdate) > 60000) {
+                if (refresh_rate) {
-                    Dashboard.update();
+                    runIntervalId = setInterval(this.update, refresh_rate);
                 }
-            });
+            }
+            else {
+                window.addEventListener('focus', Dashboard.handleVisibilityChange, false);
+            }
+        },
+
+        handleVisibilityChange: function() {
+            if (!document[hidden]) {
+                Dashboard.update();
+            }
         },
 
         update: function() {

dashboard/templates/dashboard/child.html

@@ -35,5 +35,9 @@
         <script type="application/javascript">
             BabyBuddy.Dashboard.watch('dashboard-child', {{ user.settings.dashboard_refresh_rate_milliseconds }});
         </script>
+    {% else %}
+        <script type="application/javascript">
+            BabyBuddy.Dashboard.watch('dashboard-child', false);
+        </script>
     {% endif %}
 {% endblock %}

package-lock.json

@@ -7730,11 +7730,6 @@
         "source-map": "0.5.6"
       }
     },
-    "visibilityjs": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/visibilityjs/-/visibilityjs-1.2.7.tgz",
-      "integrity": "sha512-+5bhYUd8JtXVkUiWDSatVMqo+Zw1dnn+5BU6UaifKfy88Q1bfKTi4x2OdW/n0TBGHdK7ol25/p+7qwbsljbWwQ=="
-    },
     "vlq": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz",

package.json

@@ -25,9 +25,8 @@
     "pump": "^3.0.0",
     "require-dir": "^1.0.0",
     "run-sequence": "^2.2.1",
-    "tempusdominus-core": "latest",
     "tempusdominus-bootstrap-4": "latest",
-    "visibilityjs": "^1.2.7"
+    "tempusdominus-core": "latest"
   },
   "scripts": {
     "heroku-postbuild": "npm rebuild node-sass && gulp build"