WIP linkedin#52

linkedin#52 Using native IntersectionObserver if browser support

Author: SparshithNR

src/index.ts

@@ -46,12 +46,16 @@ import {
   Frame
 } from './metal/index';
 
+import w from './metal/window-proxy';
+
+const IntersectionObserver = !!w.IntersectionObserver ? w.IntersectionObserver : SpanielIntersectionObserver;
+
 export {
   on,
   off,
   scheduleRead,
   scheduleWork,
-  SpanielIntersectionObserver as IntersectionObserver,
+  IntersectionObserver,
   SpanielObserver,
   SpanielTrackedElement,
   setGlobalEngine,

src/metal/window-proxy.ts

@@ -20,6 +20,7 @@ interface WindowProxy {
   getHeight: Function;
   getWidth: Function;
   rAF: Function;
+  IntersectionObserver: IntersectionObserver;
 }
 
 const hasDOM = !!((typeof window !== 'undefined') && window && (typeof document !== 'undefined') && document);
@@ -32,7 +33,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() {

test/headless/specs/intersection-observer.js

@@ -135,7 +135,7 @@ testModule('IntersectionObserver', class extends TestClass {
     .wait(IMPRESSION_THRESHOLD)
     .scrollTo(105)
     .wait(IMPRESSION_THRESHOLD)
-    .scrollTo(95)
+    .scrollTo(40)
     .wait(IMPRESSION_THRESHOLD)
     .getExecution()
     .evaluate(function() {
@@ -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);