Add onLoop service.

renderjs.js

@@ -82,6 +82,19 @@
     return new RSVP.Promise(itsANonResolvableTrap, canceller);
   }
 
+  function promiseAnimationFrame() {
+    var request_id;
+
+    function canceller() {
+      window.cancelAnimationFrame(request_id);
+    }
+
+    function resolver(resolve) {
+      request_id = window.requestAnimationFrame(resolve);
+    }
+    return new RSVP.Promise(resolver, canceller);
+  }
+
   function ajax(url) {
     var xhr;
     function resolver(resolve, reject) {
@@ -494,6 +507,34 @@
     return this;
   };
 
+  RenderJSGadget.onLoop = function (callback, delay) {
+    if (delay === undefined) {
+      delay = 0;
+    }
+    this.__service_list.push(function () {
+      var queue_loop = new RSVP.Queue(),
+        wait = function () {
+          queue_loop
+            .push(function () {
+              return RSVP.delay(delay);
+            })
+            .push(function () {
+              // Only loop when the app has the focus
+              return promiseAnimationFrame();
+            })
+            .push(function () {
+              return callback.apply(this, []);
+            })
+            .push(function () {
+              wait();
+            });
+        };
+      wait();
+      return queue_loop;
+    });
+    return this;
+  };
+
   function runJob(gadget, name, callback, argument_list) {
     var job_promise = new RSVP.Queue()
       .push(function () {
@@ -744,6 +785,8 @@
     RenderJSGadget.declareService;
   RenderJSEmbeddedGadget.onEvent =
     RenderJSGadget.onEvent;
+  RenderJSEmbeddedGadget.onLoop =
+    RenderJSGadget.onLoop;
   RenderJSEmbeddedGadget.prototype = new RenderJSGadget();
   RenderJSEmbeddedGadget.prototype.constructor = RenderJSEmbeddedGadget;
 
@@ -807,6 +850,8 @@
     RenderJSGadget.declareService;
   RenderJSIframeGadget.onEvent =
     RenderJSGadget.onEvent;
+  RenderJSIframeGadget.onLoop =
+    RenderJSGadget.onLoop;
   RenderJSIframeGadget.prototype = new RenderJSGadget();
   RenderJSIframeGadget.prototype.constructor = RenderJSIframeGadget;
 
@@ -1176,6 +1221,8 @@
       RenderJSGadget.declareService;
     tmp_constructor.onEvent =
       RenderJSGadget.onEvent;
+    tmp_constructor.onLoop =
+      RenderJSGadget.onLoop;
     tmp_constructor.prototype = new RenderJSGadget();
     tmp_constructor.prototype.constructor = tmp_constructor;
     tmp_constructor.prototype.__path = url;
@@ -1398,6 +1445,8 @@
           RenderJSGadget.declareService;
         TmpConstructor.onEvent =
           RenderJSGadget.onEvent;
+        TmpConstructor.onLoop =
+          RenderJSGadget.onLoop;
         TmpConstructor.prototype = new RenderJSGadget();
         TmpConstructor.prototype.constructor = TmpConstructor;
         TmpConstructor.prototype.__path = url;
@@ -1526,6 +1575,8 @@
           RenderJSGadget.declareJob;
         TmpConstructor.onEvent =
           RenderJSGadget.onEvent;
+        TmpConstructor.onLoop =
+          RenderJSGadget.onLoop;
         TmpConstructor.declareAcquiredMethod =
           RenderJSGadget.declareAcquiredMethod;
         TmpConstructor.allowPublicAcquisition =

test/renderjs_test.js

@@ -2696,6 +2696,126 @@
       });
   });
 
+  /////////////////////////////////////////////////////////////////
+  // RenderJSGadgetKlass.onLoop
+  /////////////////////////////////////////////////////////////////
+  module("RenderJSGadgetKlass.onLoop", {
+    setup: function () {
+      renderJS.clearGadgetKlassList();
+      this.server = sinon.fakeServer.create();
+
+      this.server.autoRespond = true;
+      this.server.autoRespondAfter = 5;
+    },
+    teardown: function () {
+      this.server.restore();
+      delete this.server;
+    }
+  });
+  test('is chainable', function () {
+    // Check that onLoop is chainable
+
+    // Subclass RenderJSGadget to not pollute its namespace
+    var Klass = function () {
+      RenderJSGadget.call(this);
+    }, result;
+    Klass.prototype = new RenderJSGadget();
+    Klass.prototype.constructor = Klass;
+    Klass.__service_list = [];
+    Klass.onLoop = RenderJSGadget.onLoop;
+
+    result = Klass.onLoop(function () {
+      return;
+    });
+    // onLoop is chainable
+    equal(result, Klass);
+  });
+
+  test('create callback in the service_list property', function () {
+    // Subclass RenderJSGadget to not pollute its namespace
+    var Klass = function () {
+      RenderJSGadget.call(this);
+    },
+      callback = function () {return; };
+    Klass.prototype = new RenderJSGadget();
+    Klass.prototype.constructor = Klass;
+    Klass.__service_list = [];
+    Klass.onLoop = RenderJSGadget.onLoop;
+
+    Klass.onLoop(callback);
+    equal(Klass.__service_list.length, 1);
+  });
+
+  function declareTimeoutToCheck(klass, service_status) {
+    service_status.start_count = 0;
+    service_status.stop_count = 0;
+    service_status.status = undefined;
+
+    klass.onLoop(function (evt) {
+      service_status.start_count += 1;
+      return new RSVP.Queue()
+        .push(function () {
+          service_status.status = "started";
+          service_status.defer = RSVP.defer();
+          return service_status.defer.promise;
+        })
+        .push(function () {
+          service_status.stop_count += 1;
+          service_status.status = "stopped";
+        });
+    });
+  }
+
+  test('callback is triggered on timeout', function () {
+    var service1 = {},
+      gadget = new RenderJSGadget(),
+      html_url = 'https://example.org/files/qunittest/test599.html';
+    gadget.__sub_gadget_dict = {};
+
+    this.server.respondWith("GET", html_url, [200, {
+      "Content-Type": "text/html"
+    }, "<html><body></body></html>"]);
+
+    document.getElementById('qunit-fixture').innerHTML = "<div></div>";
+    stop();
+    renderJS.declareGadgetKlass(html_url)
+      .then(function (Klass) {
+        declareTimeoutToCheck(Klass, service1);
+        return gadget.declareGadget(
+          html_url,
+          {element: document.getElementById('qunit-fixture')
+                            .querySelector("div")}
+        );
+      })
+      .then(function (g) {
+        return RSVP.delay(50);
+      })
+      .then(function () {
+        equal(service1.start_count, 1);
+        equal(service1.stop_count, 0);
+        equal(service1.status, "started");
+        service1.defer.resolve();
+        return RSVP.delay(50);
+      })
+      .then(function () {
+        equal(service1.start_count, 2);
+        equal(service1.stop_count, 1);
+        equal(service1.status, "started");
+        return RSVP.delay(50);
+      })
+      .then(function () {
+        equal(service1.start_count, 2);
+        equal(service1.stop_count, 1);
+        equal(service1.status, "started");
+      })
+      .fail(function (e) {
+        ok(false, e);
+      })
+      .always(function () {
+        start();
+      });
+  });
+
   /////////////////////////////////////////////////////////////////
   // RenderJSGadgetKlass.declareJob
   /////////////////////////////////////////////////////////////////