FLUID-5542: Queued DataSource

src/framework/core/js/FluidRequests.js

@@ -343,5 +343,197 @@ var fluid_2_0 = fluid_2_0 || {};
         return fluid.NO_VALUE;
     };
 
+    /** Start dataSource **/
+
+    /*
+     * A grade definining an emptyDataSource
+     * The primary reason for this grade is to provide details on the
+     * expected structure a DataSource should have.
+     */
+    fluid.defaults("fluid.emptyDataSource", {
+        gradeNames: ["fluid.eventedComponent", "autoInit"]
+        // Invokers should be defined for the typical HTTP rest requests.
+        // Each method should have the signature (directModel, callback)
+        //
+        // directmodel is a JSON object cotaining the directives and payload
+        // to the request. (e.g. {model: {key: value}} )
+        //
+        // callback is a function that will be called after the request has
+        // returned.
+        //
+        // invokers: {
+        //     "get": {},
+        //     "set": {}, // set should handle POST and PUT requests
+        //     "delete": {}
+        // }
+    });
+
+    /*
+     * A basic request queue that will execute each request, one-by-one
+     * in the order that they are received.
+     */
+    fluid.defaults("fluid.requestQueue", {
+        gradeNames: ["fluid.standardRelayComponent", "autoInit"],
+        events: {
+            queued: null,
+            unqueued: null
+        },
+        model: {
+            isActive: false
+        },
+        members: {
+            queue: []
+        },
+        listeners: {
+            "unqueued": "{that}.start",
+            "queued": "{that}.start"
+        },
+        invokers: {
+            add: {
+                funcName: "fluid.requestQueue.add",
+                args: ["{that}", "{arguments}.0"]
+            },
+            start: {
+                funcName: "fluid.requestQueue.start",
+                args: ["{that}"]
+            }
+        }
+    });
+
+    /*
+     * Adds reqeusts to the queue in the order they are received.
+     *
+     * The request object contains the request function and arguments.
+     * In the form {method: requestFn, directModel: {}, callback: callbackFn}
+     */
+    fluid.requestQueue.add = function (that, request) {
+        that.queue.push(request);
+        that.events.queued.fire(request);
+    };
+
+    fluid.requestQueue.start = function (that) {
+        if (!that.model.isActive && that.queue.length) {
+            var request = that.queue.shift();
+            var callbackProxy = function () {
+                that.applier.change("isActive", false);
+                that.events.unqueued.fire(request);
+                request.callback.apply(null, arguments);
+            };
+
+            that.applier.change("isActive", true);
+            request.method(request.directModel, callbackProxy);
+        }
+    };
+
+    /*
+     * A request queue that will only store the latests request in the queue.
+     * Intermediate requests that are queued but not invoked, will be replaced
+     * by new ones.
+     */
+    fluid.defaults("fluid.requestQueue.debounce", {
+        gradeNames: ["fluid.requestQueue", "autoInit"],
+        invokers: {
+            add: {
+                funcName: "fluid.requestQueue.debounce.add",
+                args: ["{that}", "{arguments}.0"]
+            }
+        }
+    });
+
+    /*
+     * Adds only one item to the queue at a time, new requests replace older ones
+     *
+     * The request object contains the request function and arguments.
+     * In the form {method: requestFn, directModel: {}, callback: callbackFn}
+     */
+    fluid.requestQueue.debounce.add = function (that, request) {
+        that.queue[0] = request;
+        that.events.queued.fire(request);
+    };
+
+    /*
+     * A request queue that will only queue requests that are received after
+     * a specified delay (in milliseconds).
+     */
+    fluid.defaults("fluid.requestQueue.throttle", {
+        gradeNames: ["fluid.requestQueue", "autoInit"],
+        delay: 10, // delay in milliseconds
+        model: {
+            isThrottled: false
+        },
+        invokers: {
+            add: {
+                funcName: "fluid.requestQueue.throttle.add",
+                args: ["{that}", "{arguments}.0"]
+            }
+        }
+    });
+
+    /*
+     * Adds items to the queue after a specified delay.
+     *
+     * The request object contains the request function and arguments.
+     * In the form {method: requestFn, directModel: {}, callback: callbackFn}
+     */
+    fluid.requestQueue.throttle.add = function (that, request) {
+        if (!that.model.isThrottled) {
+            that.applier.change("isThrottled", true);
+            that.queue.push(request);
+            that.events.queued.fire(request);
+            setTimeout(function () {
+                that.applier.change("isThrottled", false);
+            }, that.options.delay);
+        }
+    };
+
+    /*
+     * A dataSource wrapper providing a queuing mechanism for requests.
+     * The queue subcomponents, writeQueue (set/delete) and readQueue (get)
+     * can be configured to use any of the request queue grades.
+     *
+     * A fully implemented dataSource, following the structure oulined by fluid.emptyDataSource,
+     * must be provided in the wrappedDataSource subcomponent. The get, set, and delete methods
+     * found on the queuedDataSource will call thier counterparts in the wrappedDataSource, after
+     * filtering through the appropriate queue.
+     */
+    fluid.defaults("fluid.queuedDataSource", {
+        gradeNames: ["fluid.standardRelayComponent", "autoInit"],
+        components: {
+            writeQueue: {
+                type: "fluid.requestQueue"
+            },
+            readQueue: {
+                type: "fluid.requestQueue"
+            },
+            wrappedDataSource: {
+                // requires a dataSource that implements the standard set, get, and delete methods.
+                type: "fluid.emptyDataSource"
+            }
+        },
+        invokers: {
+            set: {
+                funcName: "fluid.queuedDataSource.set",
+                args: ["{writeQueue}", "{wrappedDataSource}.set", "{arguments}.0", "{arguments}.1"]
+            },
+            get: {
+                funcName: "fluid.queuedDataSource.set",
+                args: ["{readQueue}", "{wrappedDataSource}.get", "{arguments}.0", "{arguments}.1"]
+            },
+            "delete": {
+                funcName: "fluid.queuedDataSource.set",
+                args: ["{writeQueue}", "{wrappedDataSource}.delete", "{arguments}.0", "{arguments}.1"]
+            }
+        }
+    });
+
+    fluid.queuedDataSource.set = function (queue, requestMethod, directModel, callback) {
+        queue.add({
+            method: requestMethod,
+            directModel: directModel,
+            callback: callback
+        });
+    };
+
+    /** End dataSource **/
 
 })(jQuery, fluid_2_0);

tests/all-tests.html

@@ -27,6 +27,7 @@
         "./framework-tests/core/html/FluidIoC-test.html",
         "./framework-tests/core/html/FluidIoCStandalone-test.html",
         "./framework-tests/core/html/FluidIoCView-test.html",
+        "./framework-tests/core/html/DataSource-test.html",
         "./framework-tests/enhancement/html/ProgressiveEnhancement-test.html",
         "./framework-tests/renderer/html/RendererUtilities-test.html",
         "./framework-tests/preferences/html/AuxBuilder-test.html",

tests/framework-tests/core/html/DataSource-test.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <title>DataSource Tests</title>
+
+        <!--  This is the jqUnit test css file -->
+        <link rel="stylesheet" media="screen" href="../../../lib/qunit/css/qunit.css" />
+
+        <script type="text/javascript" src="../../../../src/lib/jquery/core/js/jquery.js"></script>
+        <script type="text/javascript" src="../../../../src/framework/core/js/Fluid.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/FluidRequests.js"></script>
+
+        <!--  These are the jqUnit test 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>
+
+        <!--  These are tests that have been written using this page as data -->
+        <script type="text/javascript" src="../js/DataSourceTests.js"></script>
+
+    </head>
+    <body>
+    <h1 id="qunit-header">DataSource Test Suite</h1>
+    <h2 id="qunit-banner"></h2>
+    <div id="qunit-testrunner-toolbar"></div>
+    <h2 id="qunit-userAgent"></h2>
+    <ol id="qunit-tests"></ol>
+
+    </body>
+</html>