Standardize event system, build a user activity monitor

src/resources/javascript/main.js

@@ -6,7 +6,9 @@
         grapher = require("./modules/logic/grapher.js"),
         renderer = require("./modules/logic/renderer.js"),
         profiling = require("./modules/utils/profiling.js"),
-        random = require("./modules/utils/random.js");
+        random = require("./modules/utils/random.js"),
+        HexEvent = require("./modules/logic/events.js"),
+        ActivityMonitor = require("./modules/logic/activity-monitor.js");
 
     var canvasId = "hexagonif",
         canvasContainerId = "hexagonif-container";
@@ -71,6 +73,8 @@
             profiledRenderer = profiling.wrap("renderer", function profiledRendererWrapper() {
                 return renderer(canvasId, canvasArea, graphObjects.lines);
             }),
+            hexEvent = new HexEvent(canvas),
+            activityMonitor = new ActivityMonitor(hexEvent),
             getRandomObject = function(objects) {
                 var keys = Object.keys(objects),
                     count = keys.length,
@@ -106,13 +110,13 @@
                     highlightCounter = Math.max(0, highlightCounter - 1);
                 }
 
-                document.addEventListener("hexagonif.line.highlight", function hexagonifLineHighlightEventListener() {
+                hexEvent.listen("line.highlight", function hexagonifLineHighlightEventListener() {
                     if (!isAutomatedHighlight) {
                         highlightCounter = Math.min(Number.MAX_VALUE - 1, highlightCounter + 1, MAX_AUTO_HIGHLIGHT_DELAY);
                     }
                 });
 
-                document.addEventListener("hexagonif.line.unhighlight", function hexagonifLineUnhighlightEventListener() {
+                hexEvent.listen("line.unhighlight", function hexagonifLineUnhighlightEventListener() {
                     // Something
                 });
 
@@ -193,12 +197,23 @@
                     });
                 });
             },
+            setupActivityMonitor = function() {
+                hexEvent.listen("user.activity", function() {
+                    // TODO DEBUG REMOVE
+                    console.log("User activity!");
+                });
+                hexEvent.listen("user.inactivity", function() {
+                    // TODO DEBUG REMOVE
+                    console.log("User inactivity!");
+                });
+                activityMonitor.start();
+            },
             scene;
 
         // addGonifNeighborDebugLines();
 
         scene = profiledRenderer();
-
+        setupActivityMonitor();
         highlightOnInterval();
     }
 

src/resources/javascript/modules/logic/activity-monitor.js

@@ -0,0 +1,88 @@
+var HexEvent = require("./events.js"),
+    activityEventName = "user.activity",
+    inactivityEventName = "user.inactivity";
+
+function ActivityMonitor(hexEvent, limit) {
+    this.hexEvent = hexEvent;
+    this.limitMilliseconds = limit || 60 * 1000;
+
+	this.checkingIntervalMilliseconds = Math.floor(this.limitMilliseconds / 2);
+    this.latestActivityTimestamp = null;
+    this.activityInterval = null;
+    this.isMonitorStarted = false;
+    this.isUserIsActive = false;
+}
+
+ActivityMonitor.prototype.getTimestamp = function() {
+    return new Date().valueOf();
+};
+
+ActivityMonitor.prototype.resetActivityInterval = function() {
+    this.latestActivityTimestamp = this.getTimestamp();
+};
+
+ActivityMonitor.prototype.startActivityInterval = function() {
+    this.activityInterval = setInterval(this.checkActivityInterval.bind(this), this.checkingIntervalMilliseconds);
+};
+
+ActivityMonitor.prototype.stopActivityInterval = function() {
+    clearInterval(this.activityInterval);
+
+    this.activityInterval = null;
+};
+
+ActivityMonitor.prototype.checkActivityInterval = function() {
+    if (Math.abs(this.getTimestamp() - this.latestActivityTimestamp) > this.limitMilliseconds) {
+        this.inactivityDetected();
+    }
+};
+
+ActivityMonitor.prototype.activityDetected = function() {
+	this.isUserIsActive = true;
+    this.resetActivityInterval();
+
+    if (this.activityInterval === null) {
+        this.startActivityInterval();
+    }
+
+    this.hexEvent.fire(activityEventName);
+};
+
+ActivityMonitor.prototype.inactivityDetected = function() {
+    this.stopActivityInterval();
+    this.isUserIsActive = false;
+
+    this.hexEvent.fire(inactivityEventName);
+};
+
+ActivityMonitor.prototype.isStarted = function() {
+    return this.isMonitorStarted === true;
+};
+
+ActivityMonitor.prototype.isUserIsActive = function() {
+    return this.isUserIsActive === true;
+};
+
+ActivityMonitor.prototype.start = function() {
+    if (this.isStarted()) {
+        throw new Error("Was already started.");
+    }
+
+    this.resetActivityInterval();
+    this.startActivityInterval();
+
+    // TODO: use hexagonif triggered events?
+    document.addEventListener("mousemove", this.activityDetected.bind(this));
+};
+
+ActivityMonitor.prototype.stop = function() {
+    if (this.isStarted()) {
+        throw new Error("Was not started.");
+    }
+
+    document.removeEventListener("mousemove", this.activityDetected.bind(this));
+
+    this.stopActivityInterval();
+};
+
+module.exports = ActivityMonitor;

src/resources/javascript/modules/logic/events.js

@@ -0,0 +1,32 @@
+function HexEvents(canvasElement, namespacePrefix) {
+    this.canvasElement = canvasElement;
+    this.namespacePrefix = namespacePrefix || 'hexagonif.';
+}
+
+HexEvents.prototype.getEventName = function(name) {
+    return this.namespacePrefix + name;
+}
+
+HexEvents.prototype.fire = function(name, graphic, object) {
+    var event = document.createEvent('HTMLEvents'),
+        namespacedName = this.getEventName(name);
+
+    event.initEvent(namespacedName, true, true);
+    event.graphic = graphic;
+    event.object = object;
+    return this.canvasElement.dispatchEvent(event);
+}
+
+HexEvents.prototype.listen = function(name, fn) {
+    var namespacedName = this.getEventName(name);
+
+    this.canvasElement.addEventListener(namespacedName, fn);
+}
+
+HexEvents.prototype.cancel = function(name, fn) {
+    var namespacedName = this.getEventName(name);
+
+    this.canvasElement.removeEventListener(namespacedName, fn);
+}
+
+module.exports = HexEvents;

src/resources/javascript/modules/logic/renderer.js

@@ -1,13 +1,16 @@
 function renderer(canvasId, canvasArea, lines) {
     var random = require("../utils/random.js"),
-        Hexagon = require("../objects/hexagon.js");
+        Hexagon = require("../objects/hexagon.js"),
+        HexEvent = require("./events.js");
 
     // TODO: use hidpi-canvas-polyfill
     // https://github.com/jondavidjohn/hidpi-canvas-polyfill
     var canvasElement = document.getElementById(canvasId);
     canvasElement.width = canvasArea.x;
     canvasElement.height = canvasArea.y;
 
+    var hexEvent = new HexEvent(canvasElement);
+
     var canvas = oCanvas.create({
         canvas: "#" + canvasId
     }),
@@ -42,15 +45,6 @@ function renderer(canvasId, canvasArea, lines) {
         strokeColor: getDefaultStrokeColor(),
     });
 
-    function fire(name, graphic, object) {
-        // TODO: custom event structure
-        var event = document.createEvent('HTMLEvents');
-        event.initEvent('hexagonif.' + name, true, true);
-        event.graphic = graphic;
-        event.object = object;
-        return canvasElement.dispatchEvent(event);
-    }
-
     function onLineMouseEnter(event) {
         lineHighlight.call(this);
     }
@@ -60,7 +54,7 @@ function renderer(canvasId, canvasArea, lines) {
     }
 
     function lineReset() {
-        var lineEvent = fire("line.reset", this, this.tag);
+        var lineEvent = hexEvent.fire("line.reset", this, this.tag);
 
         if (lineEvent.defaultPrevented) {
             return;
@@ -72,7 +66,7 @@ function renderer(canvasId, canvasArea, lines) {
     }
 
     function lineHighlight() {
-        var lineEvent = fire("line.highlight", this, this.tag);
+        var lineEvent = hexEvent.fire("line.highlight", this, this.tag);
 
         if (lineEvent.defaultPrevented) {
             return;
@@ -84,7 +78,7 @@ function renderer(canvasId, canvasArea, lines) {
     }
 
     function lineUnhighlight(event) {
-        var lineEvent = fire("line.unhighlight", this, this.tag);
+        var lineEvent = hexEvent.fire("line.unhighlight", this, this.tag);
 
         if (lineEvent.defaultPrevented) {
             return;