Merge pull request #84 from raytiley/work-without-raf

Fallback to setTimeout if requestAnimationFrame is not present

addon/components/ember-native-scrollable.js

@@ -76,13 +76,21 @@ export default Ember.Component.extend({
       nextStep();
     }
     function nextStep() {
-      component._animationFrame = requestAnimationFrame(step);
+      if (window.requestAnimationFrame) {
+        component._animationFrame = requestAnimationFrame(step);
+      } else {
+        component._animationFrame = setTimeout(step, 16);
+      }
     }
     nextStep();
   },
   cancelScrollCheck() {
     if (this._animationFrame) {
-      cancelAnimationFrame(this._animationFrame);
+      if (window.requestAnimationFrame) {
+        cancelAnimationFrame(this._animationFrame);
+      } else {
+        clearTimeout(this._animationFrame);
+      }
       this._animationFrame = undefined;
     }
   },

testem.json

@@ -4,11 +4,13 @@
   "disable_watching": true,
   "launch_in_ci": [
     "Chrome",
-    "Firefox"
+    "Firefox",
+    "PhantomJS"
   ],
   "launch_in_dev": [
     "Chrome",
     "Firefox",
-    "Safari"
+    "Safari",
+    "PhantomJS"
   ]
 }

tests/unit/raf-test.js

@@ -0,0 +1,52 @@
+import Ember from 'ember';
+import { test, moduleForComponent } from 'ember-qunit';
+import { generateContent, sortItemsByPosition } from '../helpers/helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+let originalRaf = window.requestAnimationFrame;
+
+let template = hbs`{{#if showComponent}}
+<div style={{size-to-style width height}}>
+{{#ember-collection
+    items=content
+    cell-layout=(fixed-grid-layout itemWidth itemHeight)
+    estimated-width=width
+    estimated-height=height
+    scroll-left=offsetX
+    scroll-top=offsetY
+    buffer=buffer
+    class="ember-collection"
+    as |item| ~}}
+  <div class="list-item">{{item.name}}</div>
+{{~/ember-collection~}}
+</div>
+{{/if}}`;
+
+moduleForComponent('ember-collection', 'raf', {
+  integration: true,
+  setup: function() {
+    window.requestAnimationFrame = undefined;
+  },
+  teardown: function() {
+    window.requestAnimationFrame = originalRaf;
+  }
+});
+
+test('works without requestAnimationFrame', function(assert) {
+
+  var width = 150, height = 500, itemWidth = 50, itemHeight = 50;
+  var offsetY = 100;
+  var content = generateContent(5);
+
+  this.setProperties({ width, height, itemWidth, itemHeight, content, offsetY, showComponent: true });
+  this.render(template);
+  var positionSorted = sortItemsByPosition(this);
+
+  assert.equal(
+    Ember.$(positionSorted[0]).text().trim(),
+    "Item 1", "We rendered without requestAnimationFrame"
+  );
+
+  // Force the component to be torn down.
+  this.setProperties({showComponent: false});
+});

tests/unit/scroll-top-test.js

@@ -1,9 +1,15 @@
-/* global requestAnimationFrame */
 import Ember from 'ember';
 import { test, moduleForComponent } from 'ember-qunit';
 import { findScrollable, generateContent, sortItemsByPosition, checkContent } from '../helpers/helpers';
 import template from '../templates/fixed-grid';
 
+var raf = window.requestAnimationFrame;
+if (raf === undefined) {
+    raf = function(callback) {
+        setTimeout(callback, 16);
+    };
+}
+
 var RSVP = Ember.RSVP;
 
 var size;
@@ -76,7 +82,7 @@ test("scroll but within content length", function(assert){
   });
 
   return new RSVP.Promise(function (resolve) {
-    requestAnimationFrame(() => {
+    raf(() => {
       Ember.run(resolve);
     });
   }).then(() => {
@@ -112,7 +118,7 @@ test("scroll within content length, beyond buffer", function(assert){
 
   findScrollable(this).prop('scrollTop', 150);
   return new RSVP.Promise(function (resolve) {
-    requestAnimationFrame(() => {
+    raf(() => {
       Ember.run(resolve);
     });
   }).then(() => {
@@ -130,7 +136,7 @@ test("scroll within content length, beyond buffer", function(assert){
       this.set('width', 200+scrollbarSize());
     });
     return new RSVP.Promise(function (resolve) {
-      requestAnimationFrame(() => {
+      raf(() => {
         Ember.run(resolve);
       });
     });