[MM] Add new configuration for enabling on scroll (#98)

Author: MatthewCMoya

docs/error.md

@@ -18,6 +18,10 @@ Example:
   });
  ```
 
+## Error 3
+Description: Sizes must be of type `Array` unless breakpoints have been specified
+
+  
 ## Error 2
 Description: The Plugin or Network has not been included in your bundle.
 Please manually include the script tag associated with this plugin or network.
@@ -38,10 +42,6 @@ Example:
   </script>
  ```
 
-## Error 3
-Description: Sizes must be of type `Array` unless breakpoints have been specified
-
-  
 ## Error 4
 Description: An ad must be passed into the GenericPlugin class. If your Plugin inherits from GenericPlugin
 		and overrides the constructor make sure you are calling "super" and that you are passing in an

docs/lazy-load-plugin.md

@@ -67,6 +67,7 @@ The Auto Render Plugin adds two options to ad instantiation
 |---|---|---|
 |autoRender|false|When set to true, AdJS will automatically render the ad when it enters the viewport (plus the offset provided if any)|
 |renderOffset|0|A measurement in pixels or percentage that AdJS will use to determine how far away from the viewport to load the ad|
+|enableByScroll|false|If enabled, offsets which evaluate to in view on load will not allow execution until user scrolls|
 
 ## Examples
 
@@ -83,6 +84,7 @@ const page = new AdJS.Page(Network, {
   defaults: {
     autoLoad: true,
     renderOffset: 0,
+    enableByScroll: false,
   }
 });
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adjs",
-  "version": "2.0.0-beta.23",
+  "version": "2.0.0-beta.24",
   "description": "Ad Library to simplify and optimize integration with ad networks such as DFP",
   "main": "./core.js",
   "types": "./types.d.ts",

src/plugins/AutoRender.ts

@@ -9,11 +9,14 @@ class AutoRender extends GenericPlugin {
       return;
     }
 
-    const { container, configuration, el } = this.ad;
+    const {
+      container,
+      configuration: { renderOffset, offset, enableByScroll },
+      el: { id } } = this.ad;
 
-    const renderOffset = configuration.renderOffset || configuration.offset || 0;
+    const finalOffset = renderOffset || offset || 0;
 
-    ScrollMonitor.subscribe(el.id, container, renderOffset, this.onEnterViewport);
+    ScrollMonitor.subscribe(id, container, finalOffset, this.onEnterViewport, undefined, undefined, enableByScroll);
     dispatchEvent(this.ad.id, LOG_LEVELS.INFO, 'AutoRender Plugin', `Ad's scroll monitor has been created.`);
   }
 

src/types.ts

@@ -164,6 +164,7 @@ export interface IAdConfiguration {
   autoRefresh?: boolean;
   autoRender?: boolean;
   sticky?: boolean;
+  enableByScroll?: boolean;
 
   breakpoints?: IAdBreakpoints;
   offset?: number;
@@ -184,6 +185,8 @@ export interface IScrollMonitorRegisteredAd {
   offset: number;
   inView: boolean;
   fullyInView: boolean;
+  enableByScroll?: boolean;
+  hasViewBeenScrolled: boolean;
   onEnterViewport: any[];
   onFullyEnterViewport: any[];
   onExitViewport: any[];

src/utils/scrollMonitor.ts

@@ -25,6 +25,7 @@ class ScrollMonitor {
     onEnterViewport?: () => any,
     onFullyEnterViewport?: () => any,
     onExitViewport?: () => any,
+    enableByScroll?: boolean,
   ) => {
     ScrollMonitor.monitorScroll();
 
@@ -51,6 +52,8 @@ class ScrollMonitor {
       offset,
       inView: false,
       fullyInView: false,
+      enableByScroll,
+      hasViewBeenScrolled: false,
       onEnterViewport: onEnterViewport ? [onEnterViewport] : [],
       onFullyEnterViewport: onFullyEnterViewport ? [onFullyEnterViewport] : [],
       onExitViewport: onExitViewport ? [onExitViewport] : [],
@@ -80,12 +83,17 @@ class ScrollMonitor {
     const windowHeight = window.innerHeight;
 
     Object.entries(ScrollMonitor.registeredAds).forEach(([key, ad]) => {
+      ad.hasViewBeenScrolled = true;
       ScrollMonitor.evaulateCurrentViewability(ad, windowHeight);
     });
 
   }, ScrollMonitor.throttleDuration)
 
   private static evaulateCurrentViewability = (ad: IScrollMonitorRegisteredAd, windowHeight: number) => {
+    if (ad.enableByScroll && !ad.hasViewBeenScrolled) {
+      return;
+    }
+
     const bounding = ad.element.getBoundingClientRect();
 
     const inView = (bounding.top - ad.offset) <= windowHeight && (bounding.top + bounding.height) >= 0;