fluid-project · klown · Dec 9, 2016 · Dec 9, 2016 · Dec 9, 2016 · Dec 9, 2016
diff --git a/examples/components/statetracker/index.html b/examples/components/statetracker/index.html
@@ -0,0 +1,37 @@
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <title>State Tracker</title>
+
+        <!--  These are the required javascript modules for the Tooltip -->
+        <script type="text/javascript" src="../../../src/lib/jquery/core/js/jquery.js"></script>
+        <script type="text/javascript" src="../../../src/lib/jquery/ui/js/jquery-ui.js"></script>
+        <script type="text/javascript" src="../../../src/framework/core/js/Fluid.js"></script>
+        <script type="text/javascript" src="../../../src/framework/core/js/FluidDocument.js"></script>
+        <script type="text/javascript" src="../../../src/framework/core/js/FluidDOMUtilities.js"></script>
+        <script type="text/javascript" src="../../../src/framework/core/js/FluidIoC.js"></script>
+        <script type="text/javascript" src="../../../src/framework/core/js/DataBinding.js"></script>
+        <script type="text/javascript" src="../../../src/framework/core/js/FluidView.js"></script>
+        <script type="text/javascript" src="../../../src/framework/enhancement/js/ContextAwareness.js"></script>
+        <script type="text/javascript" src="../../../src/components/stateTracker/js/StateTracker.js"></script>
+
+        <script type="text/javascript" src="js/statetracker-example.js"></script>
+</head>
+<body>
+    <p><button  aria-describedby="startDesc">Start Tracking</button></br>
+    <span id="startDesc">Press above to start tracking the state of the checkbox below.</span></p>
+
+    <p><button  aria-describedby="stopDesc">Stop Tracking</button></br>
+    <span id="stopDesc">Press above to stop tracking the state of the checkbox below.</span></p>
+
+    <p><button  aria-describedby="programmaticChange">Wait then change</button><br>
+    <span id="programmaticChange">Press above to change the state of the checkbox below, after one second.</span></p>
+
+    <p>
+        <input id="testCheckBox" type="checkbox" checked>
+        <label for="testCheckBox">Test check box</label>
+    </p>
+    <p id="status">Checkbox status: </p>
+
+</body>
+</html>
diff --git a/examples/components/statetracker/js/statetracker-example.js b/examples/components/statetracker/js/statetracker-example.js
@@ -0,0 +1,114 @@
+/*
+Copyright 2017 OCAD University
+
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+
+/* global fluid */
+
+var example = example || {};
+
+(function ($, fluid) {
+    "use strict";
+
+    fluid.defaults("example.checkboxTracker", {
+        gradeNames: ["fluid.stateTracker"],
+        members: {
+            checkbox: null,
+            statusEl: null
+        },
+        model: {
+            checkboxState: undefined
+        },
+        modelListeners: {
+            checkboxState: {
+                funcName: "example.checkboxTracker.showDetectedThenWipe",
+                excludeSource: "init",
+                args: ["{that}"]
+            }
+        },
+        invokers: {
+            evaluateChange: {
+                funcName: "example.checkboxTracker.evaluateChange",
+                args: ["{that}"]
+            }
+        }
+    });
+
+    /**
+     * Evaluate whether the state being tracked has changed; here, whether
+     * the test checkbox has switched from "checked" to "unchecked" or vice
+     * versa.
+     * @param {Component} that - An instance of example.checkboxTracker
+     * @return {Boolean} - whether the checked state changed.
+     */
+    example.checkboxTracker.evaluateChange = function (that) {
+        if (that.model.checkboxState !== that.checkbox.checked) {
+            that.applier.change("checkboxState", that.checkbox.checked);
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    /**
+     * Update the status line, but then wipe the status after 500 msec.
+     * @param {Component} that - An instance of example.checkboxTracker.
+     */
+    example.checkboxTracker.showDetectedThenWipe = function (that) {
+        that.statusEl.innerHTML = "Checkbox status: STATE CHANGE DETECTED!";
+        setTimeout(function () {
+            that.statusEl.innerHTML = "Checkbox status: ";
+        }, 500);
+    };
+
+    /**
+     * Initialize a tracker instance.
+     */
+    var theTracker = null;
+    var theCheckbox = null;
+    example.start = function () {
+        // Reset any existing tracking.
+        if (theTracker !== null) {
+            theTracker.destroy();
+            theTracker = null;
+        }
+        theCheckbox = document.getElementById("testCheckBox");
+        theTracker = example.checkboxTracker({
+            members: {
+                checkbox: theCheckbox,
+                statusEl: document.getElementById("status")
+            },
+            model: {
+                checkboxState: "{that}.checkbox.checked"
+            }
+        });
+        theTracker.startTracking();
+    };
+
+    /**
+     * Reset the example and remove the tracker instance.
+     */
+    example.stop = function () {
+        theTracker.destroy();
+        theTracker = null;
+    };
+
+    /**
+     * Programmatically change the state of the checkbox with a one
+     * second delay.
+     */
+    example.delayStateChange = function () {
+        if (theCheckbox !== null) {
+            setTimeout(function () {
+                theCheckbox.checked = !(theCheckbox.checked);
+            }, 1000);
+        }
+    };
+
+})(jQuery, fluid);
diff --git a/src/components/stateTracker/js/StateTracker.js b/src/components/stateTracker/js/StateTracker.js
@@ -0,0 +1,72 @@
+/*
+Copyright 2016 OCAD University
+
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+
+var fluid_3_0_0 = fluid_3_0_0 || {};
+(function ($, fluid) {
+    "use strict";
+
+    fluid.registerNamespace("fluid.stateTracker");
+
+    fluid.defaults("fluid.stateTracker", {
+        gradeNames: ["fluid.modelComponent"],
+        members: {
+            // default polling frequency in msec.
+            interval: 10,
+            // reference to timer returned by setInterval()
+            intervalID: -1
+        },
+        invokers: {
+            startTracking: {
+                funcName: "fluid.stateTracker.startTracking",
+                args: ["{that}", "{arguments}.0"]
+                                 // polling interval
+            },
+            stopTracking: {
+                funcName: "fluid.stateTracker.stopTracking",
+                args: ["{that}"]
+            },
+            evaluateChange: {
+                funcName: "fluid.notImplemented"
+            }
+        },
+        listeners: {
+            onDestroy: {
+                funcName: "fluid.stateTracker.stopTracking",
+                args: ["{that}"]
+            }
+        }
+    });
+
+    /**
+     * Initiate polling.  If already polling -- there was a previous call to
+     * startTracking() -- this is a no-op.
+     * @param {Component} that - An instance of fluid.stateTracker
+     * @param {Number} interval - optional delay between calls to check the state's current value (msec).
+     */
+    fluid.stateTracker.startTracking = function (that, interval) {
+        if (that.intervalID === -1) {
+            if (interval) {
+                that.interval = interval;
+            }
+            that.intervalID = setInterval(function () {that.evaluateChange();}, that.interval);
+        }
+    };
+
+    /**
+     * Stop polling.
+     * @param {Component} that - An instance of fluid.stateTracker
+     */
+    fluid.stateTracker.stopTracking = function (that) {
+        clearInterval(that.intervalID);
+        that.intervalID = -1;
+    };
+
+})(jQuery, fluid_3_0_0);
diff --git a/src/components/stateTracker/stateTrackerrDependencies.json b/src/components/stateTracker/stateTrackerrDependencies.json
@@ -0,0 +1,13 @@
+{
+    "stateTracker": {
+        "name": "State Tracker",
+        "description": "A component for tracking the state of another object.",
+        "files": [
+            "./js/StateTracker.js"
+        ],
+        "dependencies": [
+            "normalize",
+            "framework"
+        ]
+    }
+}
diff --git a/tests/all-tests.html b/tests/all-tests.html
@@ -97,7 +97,8 @@
                 "/component-tests/uploader/html/FileQueueView-test.html",
                 "/component-tests/uploader/html/HTML5UploaderSupport-test.html",
                 "/component-tests/uploader/html/Uploader-test.html",
-                "/component-tests/uploader/html/UploaderCompatibility-test.html"
+                "/component-tests/uploader/html/UploaderCompatibility-test.html",
+                "/component-tests/stateTracker/html/StateTracker-test.html"
             ]
         };
 

diff --git a/tests/component-tests/stateTracker/html/StateTracker-test.html b/tests/component-tests/stateTracker/html/StateTracker-test.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <title>State Tracker Test Suite</title>
+
+        <!--  This is the jqUnit test css file -->
+        <link rel="stylesheet" type="text/css" media="screen" href="../../../lib/qunit/css/qunit.css" />
+
+        <!--  These are the required javascript modules for the Tooltip -->
+        <script type="text/javascript" src="../../../../src/lib/jquery/core/js/jquery.js"></script>
+        <script type="text/javascript" src="../../../../src/lib/jquery/ui/js/jquery-ui.js"></script>
+        <script type="text/javascript" src="../../../../src/framework/core/js/Fluid.js"></script>
+        <script type="text/javascript" src="../../../../src/framework/core/js/FluidDocument.js"></script>
+        <script type="text/javascript" src="../../../../src/framework/core/js/FluidDOMUtilities.js"></script>
+        <script type="text/javascript" src="../../../../src/framework/core/js/FluidIoC.js"></script>
+        <script type="text/javascript" src="../../../../src/framework/core/js/DataBinding.js"></script>
+        <script type="text/javascript" src="../../../../src/framework/core/js/FluidView.js"></script>
+        <script type="text/javascript" src="../../../../src/framework/enhancement/js/ContextAwareness.js"></script>
+        <script type="text/javascript" src="../../../../src/components/stateTracker/js/StateTracker.js"></script>
+
+        <!--  These are the jqUnit test framework js files -->
+        <script type="text/javascript" src="../../../lib/qunit/js/qunit.js"></script>
+        <script type="text/javascript" src="../../../test-core/jqUnit/js/jqUnit.js"></script>
+        <script type="text/javascript" src="../../../test-core/jqUnit/js/jqUnit-browser.js"></script>
+        <script type="text/javascript" src="../../../test-core/utils/js/IoCTestUtils.js"></script>
+
+        <!-- Required to send coverage data at the end of the test run on this page -->
+        <script src="/testem.js"></script>
+        <script src="/coverage/client/coverageSender.js"></script>
+
+        <!--  These are tests that have been written using this page as data and test supports -->
+        <script type="text/javascript" src="../js/StateTrackerTests.js"></script>
+
+    </head>
+    <body id="body">
+      <!-- This is the markup that jqUnit will look for when running tests and displaying the results -->
+      <h1 id="qunit-header">StateTracker Test Suite</h1>
+      <h2 id="qunit-banner"></h2>
+      <div id="qunit-testrunner-toolbar"></div>
+      <h2 id="qunit-userAgent"></h2>
+      <ol id="qunit-tests"></ol>
+
+      <!-- HTML -->
+      <div class="container">
+        <input type="checkbox" id="testCheckBox" checked>
+        <label for="testCheckBox">Checkbox whose 'checked' state is tracked</label>
+      </div>
+    </body>
+</html>