WIP linkedin#52

linkedin#52 Using native IntersectionObserver if browser support

Author: SparshithNR

src/index.ts

@@ -22,7 +22,8 @@ import {
   SpanielTrackedElement,
   SpanielObserverEntry,
   DOMString,
-  DOMMargin
+  DOMMargin,
+  IntersectionObserverClass
 } from './interfaces';
 
 export { Watcher, WatcherConfig } from './watcher';
@@ -46,12 +47,16 @@ import {
   Frame
 } from './metal/index';
 
+import w from './metal/window-proxy';
+
+const IntersectionObserver: IntersectionObserverClass  = !!w.IntersectionObserver ? w.IntersectionObserver : SpanielIntersectionObserver;
+
 export {
   on,
   off,
   scheduleRead,
   scheduleWork,
-  SpanielIntersectionObserver as IntersectionObserver,
+  IntersectionObserver,
   SpanielObserver,
   SpanielTrackedElement,
   setGlobalEngine,

src/metal/window-proxy.ts

@@ -12,6 +12,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // detect the presence of DOM
 const nop = () => 0;
 
+import {
+  IntersectionObserverClass
+} from '../interfaces';
+
 interface WindowProxy {
   hasDOM: boolean;
   hasRAF: boolean;
@@ -20,6 +24,7 @@ interface WindowProxy {
   getHeight: Function;
   getWidth: Function;
   rAF: Function;
+  IntersectionObserver: IntersectionObserverClass;
 }
 
 const hasDOM = !!((typeof window !== 'undefined') && window && (typeof document !== 'undefined') && document);
@@ -32,7 +37,8 @@ let W: WindowProxy = {
   getScrollLeft: nop,
   getHeight: nop,
   getWidth: nop,
-  rAF: hasRAF ? window.requestAnimationFrame.bind(window) : (callback: Function) => { callback(); }
+  rAF: hasRAF ? window.requestAnimationFrame.bind(window) : (callback: Function) => { callback(); },
+  IntersectionObserver: hasDOM && (window as any).IntersectionObserver
 };
 
 function hasDomSetup() {

src/spaniel-observer.ts

@@ -36,6 +36,8 @@ import { generateToken, on, scheduleWork } from './metal/index';
 
 let emptyRect = { x: 0, y: 0, width: 0, height: 0 };
 
+const IntersectionObserver = !!w.IntersectionObserver ? w.IntersectionObserver : SpanielIntersectionObserver;
+
 export function DOMMarginToRootMargin(d: DOMMargin): DOMString {
   return `${d.top}px ${d.right}px ${d.bottom}px ${d.left}px`;
 }
@@ -62,7 +64,8 @@ export class SpanielObserver implements SpanielObserverInterface {
       rootMargin: convertedRootMargin,
       threshold: this.thresholds.map((t: SpanielThreshold) => t.ratio)
     };
-    this.observer = new SpanielIntersectionObserver((records: IntersectionObserverEntry[]) => this.internalCallback(records), o);
+
+    this.observer = new IntersectionObserver((records: IntersectionObserverEntry[]) => this.internalCallback(records), o);
 
     if (w.hasDOM) {
       on('unload', this.onWindowClosed.bind(this));

test/app/index.html

@@ -9,6 +9,10 @@
     </div>
     <div id="root">
     </div>
+    <script>
+      // Disable browser default IntersectionObserver so as to use IntersectionObserver of spaniel.
+      window.IntersectionObserver = null; 
+    </script>
     <script type="text/javascript" src="../../exports/spaniel.js"></script>
     <script type="text/javascript" src="setup.js"></script>
     <script type="text/javascript" src="index.js"></script>

test/headless/specs/intersection-observer.js

@@ -177,8 +177,8 @@ testModule('IntersectionObserver', class extends TestClass {
       target1 = document.querySelector('.tracked-item[data-id="1"]');
       target2 = document.querySelector('.tracked-item[data-id="2"]');
       target3 = document.querySelector('.tracked-item[data-id="3"]');
-      window.observer = new spaniel.IntersectionObserver(function() {
-        window.STATE.impressions++;
+      window.observer = new spaniel.IntersectionObserver(function(event) {
+        window.STATE.impressions+= event.length;
       });
       window.observer.observe(target1);
       window.observer.observe(target2);
@@ -207,8 +207,8 @@ testModule('IntersectionObserver', class extends TestClass {
       target1 = document.querySelector('.tracked-item[data-id="1"]');
       target2 = document.querySelector('.tracked-item[data-id="2"]');
       target3 = document.querySelector('.tracked-item[data-id="3"]');
-      window.observer = new spaniel.IntersectionObserver(function() {
-        window.STATE.impressions++;
+      window.observer = new spaniel.IntersectionObserver(function(event) {
+        window.STATE.impressions+= event.length;
       });
       window.observer.observe(target1);
       window.observer.observe(target2);

test/setup/environment.js

@@ -39,10 +39,10 @@ function cleanUp(value) {
   value.observer.disconnect();
 }
 
-function wait50ms(result) {
+function wait100ms(result) {
   return new RSVP.Promise(function(resolve) {
     setTimeout(function() {
       resolve(result);
-    }, 50);
+    }, 100);
   });
 }

test/specs/spaniel-observer.spec.js

@@ -44,15 +44,15 @@ describe('SpanielObserver', function() {
       ratio: 0.5
     }).then(function(result) {
       result.observer.onTabHidden();
-      return wait50ms(result);
+      return wait100ms(result);
     }).then(function(result) {
       expect(result.entries.length).to.equal(2, 'Two events have been fired');
       expect(result.entries[1].entering).to.equal(false, 'Second event is exiting');
       result.observer.onTabShown();
-      return wait50ms(result);
+      return wait100ms(result);
     }).then(function(result) {
       result.observer.onTabHidden();
-      return wait50ms(result);
+      return wait100ms(result);
     }).then(function(result) {
       expect(result.entries.length).to.equal(4, 'Three events have been fired');
       expect(result.entries[2].entering).to.equal(true, 'second to last event is entering');