prop types and first scroll

Author: Matthew Moya

docs/error.md

@@ -77,11 +77,11 @@ Description: Parent element required for sticky plugin.
 Description: Ad does not have an id
 
 
-## Error 8
-Description: Ad Path must be defined.
-
-  
 ## Error 7
 Description: Sizes must be defined.
 
+  
+## Error 8
+Description: Ad Path must be defined.
+
 

src/types.ts

@@ -181,13 +181,12 @@ export interface IAdConfiguration {
   targeting?: IAdTargeting;
 }
 
-export interface IScrollMonitorRegisteredAd {
+export interface IIntersectionObserverRegisteredAd {
   element: HTMLElement;
   offset: number;
   inView: boolean;
   fullyInView: boolean;
   enableByScroll?: boolean;
-  hasViewBeenScrolled: boolean;
   onEnterViewport: any[];
   onFullyEnterViewport: any[];
   onExitViewport: any[];

src/utils/intersectionObserver.ts

@@ -1,19 +1,20 @@
-import { IIntersectionObserver, IIntersectionObserverEntry, IScrollMonitorRegisteredAd } from '../types';
+import { IIntersectionObserver, IIntersectionObserverEntry, IIntersectionObserverRegisteredAd } from '../types';
 
 const MONITORING = Symbol('MONITORING');
 
-// TODO: ad.hasViewBeenScrolled = true;
-
 class ITXObserver {
   public static observer: IIntersectionObserver;
-  public static registeredAds: { [key: string]: IScrollMonitorRegisteredAd } = {};
+  public static registeredAds: { [key: string]: IIntersectionObserverRegisteredAd } = {};
   public static adCount: number = 0;
+  public static hasViewBeenScrolled: boolean = false;
 
   public static monitorViewport() {
     if (ITXObserver[MONITORING]) {
       return;
     }
 
+    window.addEventListener('scroll', ITXObserver.onFirstScroll, false);
+
     ITXObserver.observer = new IntersectionObserver((entries: any) => {
       ITXObserver.handleIntersect(entries);
     }, { threshold: [0, 0.25, 1] });
@@ -25,7 +26,7 @@ class ITXObserver {
     entries.forEach((event: IIntersectionObserverEntry) => {
       const ad = ITXObserver.registeredAds[event.target.id];
 
-      if (ad.enableByScroll && !ad.hasViewBeenScrolled) {
+      if (ad.enableByScroll && !ITXObserver.hasViewBeenScrolled) {
         return;
       }
 
@@ -79,13 +80,12 @@ class ITXObserver {
       return;
     }
 
-    const ad: IScrollMonitorRegisteredAd = {
+    const ad: IIntersectionObserverRegisteredAd = {
       element,
       offset,
       inView: false,
       fullyInView: false,
       enableByScroll,
-      hasViewBeenScrolled: false,
       onEnterViewport: onEnterViewport ? [onEnterViewport] : [],
       onFullyEnterViewport: onFullyEnterViewport ? [onFullyEnterViewport] : [],
       onExitViewport: onExitViewport ? [onExitViewport] : [],
@@ -116,6 +116,10 @@ class ITXObserver {
     return ITXObserver.registeredAds[id];
   }
 
+  private static onFirstScroll = () => {
+    ITXObserver.hasViewBeenScrolled = true;
+    window.removeEventListener('scroll', ITXObserver.onFirstScroll, false);
+  }
 }
 
 export default ITXObserver;