Allow use of breakpoints instead of user-agent sniffing

src/__tests__/util.test.js

@@ -1,3 +1,4 @@
+import { BreakpointDetection } from '../util/breakpoint';
 import { renamePositionKey } from '../util/customTargeting';
 
 describe('The CustomTargeting.js functions', () => {
@@ -17,3 +18,24 @@ describe('The CustomTargeting.js functions', () => {
     expect(updatedTargeting).toEqual(newTargeting);
   });
 });
+
+describe('BreakpointDetection', () => {
+  it('should initialize', () => {
+    const breakpointDetection = new BreakpointDetection(720);
+    expect(breakpointDetection).not.toBeUndefined();
+  });
+
+  it('should detect small devices as mobile', () => {
+    window.innerWidth = 320;
+    const breakpointDetection = new BreakpointDetection(720);
+    const isMobile = breakpointDetection.any();
+    expect(isMobile).toBeTrue();
+  });
+
+  it('should detect large devices as desktop', () => {
+    window.innerWidth = 1044;
+    const breakpointDetection = new BreakpointDetection(720);
+    const isMobile = breakpointDetection.any();
+    expect(isMobile).toBeFalse();
+  });
+});

src/index.js

@@ -1,4 +1,5 @@
 import { MobileDetection } from './util/mobile';
+import { BreakpointDetection } from './util/breakpoint';
 import { fetchBids, initializeBiddingServices } from './services/headerbidding';
 import { initializeGPT, queueGoogletagCommand, refreshSlot, dfpSettings, setTargeting, determineSlotName } from './services/gpt';
 import { queuePrebidCommand, addUnit } from './services/prebid';
@@ -12,7 +13,11 @@ export class ArcAds {
     this.positions = [];
     this.collapseEmptyDivs = options.dfp.collapseEmptyDivs;
 
-    window.isMobile = MobileDetection;
+    if (options.desktopBreakpoint) {
+      window.isMobile = new BreakpointDetection(options.desktopBreakpoint);
+    } else {
+      window.isMobile = MobileDetection;
+    }
 
     if (this.dfpId === '') {
       console.warn(`ArcAds: DFP id is missing from the arcads initialization script. 

src/util/breakpoint.js

@@ -0,0 +1,26 @@
+/** @desc Utility class that determines the breakpoint based on window width. **/
+import MobileDetection from './mobile';
+
+export class BreakpointDetection {
+  /**
+   * @desc Constructor.
+   * @param {number} desktopBreakpoint The minimum width at which the browser is considered desktop.
+   **/
+  constructor(desktopBreakpoint) {
+    this.desktopBreakpoint = desktopBreakpoint;
+  }
+
+  /**
+   * @desc Determines if the user is using a Retina display.
+   **/
+  Retina() {
+    return MobileDetection.Retina();
+  }
+
+  /**
+   * @desc Determines if the user is using a mobile device.
+   **/
+  any() {
+    return (window.innerWidth < this.desktopBreakpoint);
+  }
+}