50

linkedin#50 : Added Root implementation. Added couple of addtional changes, 1)few CSS, logging changes. 2) extended watcher feature to watch WRT root element, added usage information to usage.md file

Author: SparshithNR

USAGE.md

@@ -106,6 +106,7 @@ The `Watcher` constructor can be passed 3 different options:
 * `time` - The time threshold
 * `ratio` - The ratio threshold
 * `rootMargin` - The [rootMargin](https://wicg.github.io/IntersectionObserver/#dom-intersectionobserverinit-rootmargin) in object form.
+* `root` - The [root](https://wicg.github.io/IntersectionObserver/#intersectionobserver-intersection-root) element with respect to which we want to watch the target. By default it is window.
 
 ## Utility API
 

src/intersection-observer.ts

@@ -132,14 +132,15 @@ export class SpanielIntersectionObserver implements IntersectionObserver {
     this.id = generateToken();
     options.threshold = options.threshold || 0;
     this.rootMarginObj = rootMarginToDOMMargin(options.rootMargin || '0px');
+    this.root = options.root;
 
     if (Array.isArray(options.threshold)) {
       this.thresholds = <Array<number>>options.threshold;
     } else {
       this.thresholds = [<number>options.threshold];
     }
 
-    this.scheduler = new ElementScheduler();
+    this.scheduler = new ElementScheduler(null, this.root);
   }
 };
 
@@ -182,8 +183,8 @@ export class IntersectionObserverEntry implements IntersectionObserverEntryInit
 export function generateEntry(frame: Frame, bcr: DOMRectReadOnly, el: Element, rootMargin: DOMMargin): IntersectionObserverEntry {
   let { top, bottom, left, right } = bcr;
   let rootBounds: ClientRect = {
-    left: rootMargin.left,
-    top: rootMargin.top,
+    left: frame.x + rootMargin.left,
+    top: frame.y + rootMargin.top,
     bottom: rootMargin.bottom,
     right: rootMargin.right,
     width: frame.width - (rootMargin.right + rootMargin.left),

src/metal/interfaces.ts

@@ -49,6 +49,8 @@ export interface FrameInterface {
   timestamp: number;
   scrollTop: number;
   scrollLeft: number;
+  x: number;
+  y: number;
   width: number;
   height: number;
 }

src/metal/scheduler.ts

@@ -32,14 +32,30 @@ export class Frame implements FrameInterface {
     public timestamp: number,
     public scrollTop: number,
     public scrollLeft: number,
+    public x: number,
+    public y: number,
     public width: number,
     public height: number
   ) {}
-  static generate(): Frame {
+  static generate(root?: Element): Frame {
+    if (root && document.documentElement.contains(root)) {
+      let rootBcr = root.getBoundingClientRect();
+      return new Frame(
+        Date.now(),
+        root.scrollTop,
+        root.scrollLeft,
+        rootBcr.left,
+        rootBcr.top,
+        rootBcr.width,
+        rootBcr.height
+      );
+    }
     return new Frame(
       Date.now(),
       W.getScrollTop(),
       W.getScrollLeft(),
+      0,
+      0,
       W.getWidth(),
       W.getHeight()
     );
@@ -51,16 +67,20 @@ export function generateToken() {
 }
 
 export abstract class BaseScheduler {
+  protected root: Element;
   protected engine: EngineInterface;
   protected queue: QueueInterface;
   protected isTicking: Boolean = false;
   protected toRemove: Array<string| Element | Function> = [];
-  constructor(customEngine?: EngineInterface) {
+  constructor(customEngine?: EngineInterface, root?: Element) {
     if (customEngine) {
       this.engine = customEngine;
     } else {
       this.engine = getGlobalEngine();
     }
+    if (root) {
+       this.root = root;
+    }
   }
   protected abstract applyQueue(frame: Frame): void;
 
@@ -74,7 +94,7 @@ export abstract class BaseScheduler {
         }
         this.toRemove = [];
       }
-      this.applyQueue(Frame.generate());
+      this.applyQueue(Frame.generate(this.root));
       this.engine.scheduleRead(this.tick.bind(this));
     }
   }
@@ -143,8 +163,8 @@ export class PredicatedScheduler extends Scheduler implements SchedulerInterface
 
 export class ElementScheduler extends BaseScheduler implements ElementSchedulerInterface {
   protected queue: DOMQueue;
-  constructor(customEngine?: EngineInterface) {
-    super(customEngine);
+  constructor(customEngine?: EngineInterface, root?: Element) {
+    super(customEngine, root);
     this.queue = new DOMQueue();
   }
   applyQueue(frame: Frame) {

src/native-watcher.ts

@@ -25,6 +25,7 @@ export interface WatcherConfig {
   ratio?: number;
   time?: number;
   rootMargin?: DOMString | DOMMargin;
+  root?: SpanielTrackedElement;
 }
 
 export type EventName = 'impressed' | 'exposed' | 'visible' | 'impression-complete';
@@ -60,7 +61,7 @@ function onEntry(entries: SpanielObserverEntry[]) {
 export class Watcher {
   observer: SpanielObserver;
   constructor(ObserverClass: IntersectionObserverClass, config: WatcherConfig = {}) {
-    let { time, ratio, rootMargin } = config;
+    let { time, ratio, rootMargin, root } = config;
 
     let threshold: Threshold[] = [
       {
@@ -88,7 +89,8 @@ export class Watcher {
 
     this.observer = new SpanielObserver(ObserverClass, onEntry, {
       rootMargin,
-      threshold
+      threshold,
+      root
    });
   }
   watch(el: Element, callback: WatcherCallback) {

src/watcher.ts

@@ -24,6 +24,7 @@ export interface WatcherConfig {
   ratio?: number;
   time?: number;
   rootMargin?: DOMString | DOMMargin;
+  root?: SpanielTrackedElement;
 }
 
 export type EventName = 'impressed' | 'exposed' | 'visible' | 'impression-complete';
@@ -59,7 +60,7 @@ function onEntry(entries: SpanielObserverEntry[]) {
 export class Watcher {
   observer: SpanielObserver;
   constructor(config: WatcherConfig = {}) {
-    let { time, ratio, rootMargin } = config;
+    let { time, ratio, rootMargin, root } = config;
 
     let threshold: Threshold[] = [
       {
@@ -87,7 +88,8 @@ export class Watcher {
 
     this.observer = new SpanielObserver(onEntry, {
       rootMargin,
-      threshold
+      threshold,
+      root
    });
   }
   watch(el: Element, callback: WatcherCallback) {

test/app/index.html

@@ -7,7 +7,8 @@
     <div id="app">
 
     </div>
-
+    <div id="root">
+    </div>
     <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/app/index.js

@@ -59,3 +59,45 @@ let observer = new spaniel.SpanielObserver(function(changes) {
   }]
 });
 observer.observe(target);
+
+//Example usage of SpanielObserver with a custom root element
+var root = document.getElementById('root');
+var rootTarget = document.querySelector('.tracked-item-root[data-root-target-id="5"]');
+var rootObserver = new spaniel.SpanielObserver(function(changes) {
+  console.log(changes[0]);
+}, {
+  root: root,
+  rootMargin: '0px 0px',
+  threshold: [{
+    label: 'impressed',
+    ratio: 0.5,
+    time: 1000
+  }]
+});
+
+//Sample usage of watcher with Root element
+window.rootWatcher = new spaniel.Watcher({
+  time: 100,
+  ratio: 0.8,
+  root: root
+});
+rootObserver.observe(rootTarget);
+
+var elements = document.getElementsByClassName('tracked-item-root');
+
+for (var i = 0; i < elements.length; i++) {
+  (function(el) {
+    if (i < 6) {
+      var id = el.getAttribute('data-root-target-id');
+      window.rootWatcher.watch(el, function(e, meta) {
+        var end = meta && meta.duration ? ' for ' + meta.duration + ' milliseconds' : '';
+        console.log('root: '+id + ' ' + e + end);
+        GLOBAL_TEST_EVENTS.push({
+          id: parseInt(id),
+          e: e,
+          meta: meta || {}
+        });
+      });
+    }
+  })(elements[i]);
+}

test/app/setup.js

@@ -15,3 +15,14 @@ for (var i = 0;  i < 100; i++) {
   app.appendChild(el);
 }
 
+/* Root feature test div */
+var root = document.getElementById('root');
+for (var i = 0;  i < 30; i++) {
+   var id = i + 1;
+   var content = Math.random(0, 100);
+   var el = document.createElement('div');
+   el.setAttribute('class', 'tracked-item-root');
+   el.setAttribute('data-root-target-id', id);
+   el.innerHTML = 'ID: ' + id + ' = ' + content;
+   root.appendChild(el);
+}

test/app/style.css

@@ -3,14 +3,15 @@ html, body {
   padding: 0px;
 }
 
-.tracked-item {
+.tracked-item, .tracked-item-root {
   height: 100px;
   background-color: #EEE;
   margin: 0;
   padding: 0;
+  width: 150px;
 }
 
-.tracked-item:nth-child(even) {
+.tracked-item:nth-child(even), .tracked-item-root:nth-child(even) {
   background-color: #DDD;
 }
 
@@ -39,3 +40,14 @@ nav {
   width: 100%;
   height: 100px;
 }
+#app {
+   float: left;
+ }
+#root {
+  top: 100px;
+  left: 200px;
+  height: 250px;
+  width: 150px;
+  overflow-y: scroll;
+  position: absolute;
+} 

test/headless/specs/intersection-observer.js

@@ -10,6 +10,10 @@ import {
   TestClass
 } from './../test-module';
 
+import constants from './../../constants.js';
+
+const { time: { IMPRESSION_THRESHOLD } } = constants;
+
 testModule('IntersectionObserver', class extends TestClass {
   ['@test observing a visible element should fire callback immediately']() {
     return this.context.evaluate(() => {
@@ -81,9 +85,9 @@ testModule('IntersectionObserver', class extends TestClass {
       });
       observer.observe(target);
     })
-    .wait(100)
+    .wait(IMPRESSION_THRESHOLD)
     .scrollTo(80)
-    .wait(100)
+    .wait(IMPRESSION_THRESHOLD)
     .getExecution()
     .evaluate(function() {
       return window.STATE.impressions;
@@ -103,11 +107,11 @@ testModule('IntersectionObserver', class extends TestClass {
       });
       observer.observe(target);
     })
-    .wait(100)
+    .wait(IMPRESSION_THRESHOLD)
     .scrollTo(80)
-    .wait(100)
+    .wait(IMPRESSION_THRESHOLD)
     .scrollTo(70)
-    .wait(100)
+    .wait(IMPRESSION_THRESHOLD)
     .getExecution()
     .evaluate(function() {
       return window.STATE.impressions;
@@ -128,11 +132,11 @@ testModule('IntersectionObserver', class extends TestClass {
       });
       observer.observe(target);
     })
-    .wait(100)
+    .wait(IMPRESSION_THRESHOLD)
     .scrollTo(105)
-    .wait(100)
+    .wait(IMPRESSION_THRESHOLD)
     .scrollTo(95)
-    .wait(100)
+    .wait(IMPRESSION_THRESHOLD)
     .getExecution()
     .evaluate(function() {
       return window.STATE.impressions;
@@ -230,4 +234,35 @@ testModule('IntersectionObserver', class extends TestClass {
       assert.equal(result, 6, 'Callback fired 6 times');
     });
   }
+
+  /* Root inlcusion test case */
+  ['@test observing a non visible element within a root and then scrolling should fire callbacks']() {
+    return this.context.evaluate(function() {
+      window.STATE.impressions = 0;
+      let root = document.getElementById('root');
+      let target = document.querySelector('.tracked-item-root[data-root-target-id="5"]');
+      let observer = new spaniel.IntersectionObserver(function() {
+        window.STATE.impressions++;
+      }, {
+        root: root,
+        threshold: 0.6
+      });
+      observer.observe(target);
+    })
+    .wait(IMPRESSION_THRESHOLD)
+    .evaluate(function() {
+      root.scrollTop = 300;
+    })
+    .wait(IMPRESSION_THRESHOLD)
+    .evaluate(function() {
+      root.scrollTop = 180;
+    })
+    .wait(IMPRESSION_THRESHOLD)
+    .getExecution()
+    .evaluate(function() {
+      return window.STATE.impressions;
+      }).then(function(result) {
+        assert.equal(result, 2, 'Callback fired twice');
+      });
+  }
 });