@mjhls/mjh-framework 1.0.446 → 1.0.448

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.446
+# mjh-framework v. 1.0.448
 
 > Foundation Framework 
 

package/dist/cjs/AD728x90.js

@@ -12,7 +12,7 @@ require('prop-types');
 require('./isSymbol-488934a7.js');
 require('./debounce-32e57002.js');
 var main = require('./main-d76cde9c.js');
-require('./slicedToArray-8063ee51.js');
+var slicedToArray = require('./slicedToArray-8063ee51.js');
 require('./stringify-7c5aff47.js');
 require('./asyncToGenerator-db08763c.js');
 require('./_set-species-4458e975.js');
@@ -28,6 +28,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var AD728x90 = function AD728x90(_ref) {
   var networkID = _ref.networkID,
       adUnit = _ref.adUnit,
+      slotId = _ref.slotId,
       _ref$targeting = _ref.targeting,
       targeting = _ref$targeting === undefined ? {} : _ref$targeting,
       _ref$pos = _ref.pos,
@@ -40,6 +41,12 @@ var AD728x90 = function AD728x90(_ref) {
     pos = 'top-mobile';
     mobileView = true;
   }
+  //If ad rendered, should turn this to true and enable sticky position
+
+  var _useState = React.useState(false),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      stickyAd = _useState2[0],
+      setStickyAd = _useState2[1];
 
   var adTargeting = {
     content_placement: targeting.content_placement,
@@ -54,79 +61,61 @@ var AD728x90 = function AD728x90(_ref) {
 
   var adRef = React.useRef(null);
 
-  // Collapsing the parent wrapper when the ad is not present
-  var collapseAd = function collapseAd() {
-    var parent = document.getElementById('leaderboard-ad-wrapper');
-    parent.style.height = '0%';
-    parent.style.width = '0%';
-    parent.classList.remove('display-leaderboard');
-    parent.classList.add('hide-leaderboard');
-  };
-
-  var checkIsAdFound = function checkIsAdFound(isFound, adData) {
-    //  Check for creativeId related to leaderboard ad
-    if (isFound) {
-      var parent = document.getElementById('leaderboard-ad-wrapper');
-      parent.classList.remove('hide-leaderboard');
-      parent.classList.add('display-leaderboard');
+  //removed this from event listener and made into its own function
+  var applySticky = function applySticky() {
+    var navbar = document.querySelector('.navbar');
+    var AdOffsetTop = adRef.current.getBoundingClientRect().top;
+    if (stickyAd && window.pageYOffset + (AdOffsetTop - navbar.offsetHeight) > AdOffsetTop) {
+      if (adRef.current && adRef.current.style) {
+        adRef.current.style.position = 'fixed';
+        adRef.current.style.top = fixedPos;
+        adRef.current.style.left = '0px';
+        adRef.current.style.zIndex = '9999';
+        adRef.current.style.width = '100%';
+        adRef.current.style.marginTop = '2px';
+      }
     } else {
-      collapseAd();
+      if (adRef.current && adRef.current.style) {
+        adRef.current.style.position = 'relative';
+        adRef.current.style.top = '';
+      }
     }
   };
 
+  //Need to reapply event listener once 'stickyAd' is toggled, will only make leaderboard ad sticky if ad is rendered
+
   React.useEffect(function () {
-    if (window && window.innerWidth && window.innerWidth < 768) {
-      var navbar = document.querySelector('.navbar');
-      var AdOffsetTop = adRef.current.getBoundingClientRect().top;
-      window.addEventListener('scroll', function () {
-        if (window.pageYOffset + (AdOffsetTop - navbar.offsetHeight) > AdOffsetTop) {
-          if (adRef.current && adRef.current.style) {
-            adRef.current.style.position = 'fixed';
-            adRef.current.style.top = fixedPos;
-            adRef.current.style.left = '0px';
-            adRef.current.style.zIndex = '9999';
-            adRef.current.style.width = '100%';
-            adRef.current.style.marginTop = '2px';
-          }
-        } else {
-          if (adRef.current && adRef.current.style) {
-            adRef.current.style.position = 'relative';
-            adRef.current.style.top = '';
-          }
-        }
-      });
+    if (stickyAd && window && window.innerWidth && window.innerWidth < 768) {
+      window.addEventListener('scroll', applySticky);
     }
-  }, []);
+  }, [stickyAd]);
 
   var browserSizes = [[728, 90], [970, 90], [320, 50], [300, 50]];
   var mobileSizes = [[320, 50], [300, 50]];
 
-  return (
-    //  Setting classname for wrapper to set height and width is no creative found.
+  return React__default['default'].createElement(
+    'div',
+    { className: 'leaderboard-ad-wrapper', ref: adRef, style: { backgroundColor: '#fff' } },
+    React__default['default'].createElement(AdSlot, {
+      setStickyAd: setStickyAd,
+      slotId: slotId,
+      networkID: networkID,
+      adUnit: adUnit,
+      targeting: adTargeting,
+      className: 'AD728x90',
+      sizes: mobileView ? mobileSizes : browserSizes,
+      sizeMapping: [{
+        viewport: [768, 1],
+        sizes: [[728, 90], [970, 90]]
+      }, {
+        viewport: [1, 1],
+        sizes: [[320, 50], [300, 50]]
+      }]
+    }),
     React__default['default'].createElement(
-      'div',
-      { id: 'leaderboard-ad-wrapper', className: 'leaderboard-ad-wrapper hide-leaderboard', ref: adRef, style: { backgroundColor: '#fff' } },
-      React__default['default'].createElement(AdSlot, {
-        slotId: 'leaderboard-ad',
-        networkID: networkID,
-        adUnit: adUnit,
-        targeting: adTargeting,
-        className: 'AD728x90',
-        sizes: mobileView ? mobileSizes : browserSizes,
-        sizeMapping: [{
-          viewport: [768, 1],
-          sizes: [[728, 90], [970, 90]]
-        }, {
-          viewport: [1, 1],
-          sizes: [[320, 50], [300, 50]]
-        }],
-        checkIsAdFound: checkIsAdFound
-      }),
-      React__default['default'].createElement(
-        'style',
-        { jsx: 'true' },
-        '\n        .display-leaderboard {\n          display: block;\n        }\n        .hide-leaderboard {\n          display: none;\n        }\n      '
-      )
+      'style',
+      { jsx: 'true' },
+      '\n        .leaderboard-ad-wrapper {\n          min-height: 90px;\n        }\n        @media screen and (max-width: 768px) {\n          .leaderboard-ad-wrapper {\n            min-height: 50px;\n          }\n        }\n      '
     )
   );
 };

package/dist/cjs/AdSlot.js

@@ -35,7 +35,10 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
       targeting = _ref$targeting === undefined ? {} : _ref$targeting,
       _ref$refreshFlag = _ref.refreshFlag,
       refreshFlag = _ref$refreshFlag === undefined ? true : _ref$refreshFlag,
-      checkIsAdFound = _ref.checkIsAdFound;
+      _ref$checkIsAdFound = _ref.checkIsAdFound,
+      checkIsAdFound = _ref$checkIsAdFound === undefined ? function () {} : _ref$checkIsAdFound,
+      _ref$setStickyAd = _ref.setStickyAd,
+      setStickyAd = _ref$setStickyAd === undefined ? function () {} : _ref$setStickyAd;
 
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -77,6 +80,7 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
       sizeMapping: sizeMapping,
       targetingArguments: targeting,
       onSlotIsViewable: function onSlotIsViewable(e) {
+        setStickyAd(true);
         Beam.report_beam_ad('Impression', main.main_16, eventData.cID, eventData.lID, eventData.campID, eventData.adSize, eventData.slot_id);
         Segment.adViewed(eventData.domain, eventData.advertiserId, eventData.campID, eventData.cID, eventData.lID, eventData.adSize, eventData.isEmpty, eventData.sourceAgnosticCreativeId, eventData.sourceAgnosticLineItemId);
       },

package/dist/cjs/DeckContent.js

@@ -40,7 +40,7 @@ require('./promise-074978a7.js');
 require('./Beam.js');
 require('./Segment.js');
 require('./AdSlot.js');
-var ADInfeed = require('./ADInfeed-7609d929.js');
+var ADInfeed = require('./ADInfeed-7b80e936.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/cjs/GridContent.js

@@ -40,9 +40,9 @@ require('./promise-074978a7.js');
 require('./Beam.js');
 require('./Segment.js');
 require('./AdSlot.js');
-var ADInfeed = require('./ADInfeed-7609d929.js');
+var ADInfeed = require('./ADInfeed-7b80e936.js');
 var lodash = require('./lodash-fc2922d0.js');
-var ADlgInfeed = require('./ADlgInfeed-700551ef.js');
+var ADlgInfeed = require('./ADlgInfeed-23bfb514.js');
 require('./_arrayMap-3b4a0f75.js');
 var get = require('./get-5dfcdc33.js');
 require('./AD.js');

package/dist/cjs/IssueLanding.js

@@ -33,9 +33,9 @@ require('./promise-074978a7.js');
 require('./Beam.js');
 require('./Segment.js');
 require('./AdSlot.js');
-require('./ADInfeed-7609d929.js');
+require('./ADInfeed-7b80e936.js');
 require('./lodash-fc2922d0.js');
-require('./ADlgInfeed-700551ef.js');
+require('./ADlgInfeed-23bfb514.js');
 require('./AuthorComponent-5bb8f868.js');
 require('react-bootstrap');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');

package/dist/cjs/NavNative.js

@@ -101,7 +101,7 @@ var NavNative = function NavNative(props) {
         bg: 'primary',
         sticky: 'top',
         ref: navRef,
-        style: { minHeight: '61px' } },
+        style: { minHeight: '65px' } },
       React__default['default'].createElement(
         Container__default['default'],
         { style: { maxHeight: '80vh' }, className: 'mobile-nav' },

package/dist/cjs/QueueDeckExpanded.js

@@ -33,9 +33,9 @@ require('./promise-074978a7.js');
 require('./Beam.js');
 require('./Segment.js');
 require('./AdSlot.js');
-var ADInfeed = require('./ADInfeed-7609d929.js');
+var ADInfeed = require('./ADInfeed-7b80e936.js');
 var lodash = require('./lodash-fc2922d0.js');
-var ADlgInfeed = require('./ADlgInfeed-700551ef.js');
+var ADlgInfeed = require('./ADlgInfeed-23bfb514.js');
 var AuthorComponent = require('./AuthorComponent-5bb8f868.js');
 var reactBootstrap = require('react-bootstrap');
 

package/dist/cjs/index.js

@@ -42,10 +42,10 @@ require('./promise-074978a7.js');
 var Beam = require('./Beam.js');
 var Segment = require('./Segment.js');
 var AdSlot = require('./AdSlot.js');
-require('./ADInfeed-7609d929.js');
+require('./ADInfeed-7b80e936.js');
 var DeckContent = require('./DeckContent.js');
 require('./lodash-fc2922d0.js');
-require('./ADlgInfeed-700551ef.js');
+require('./ADlgInfeed-23bfb514.js');
 require('./_arrayMap-3b4a0f75.js');
 require('./get-5dfcdc33.js');
 var AD = require('./AD.js');

package/dist/esm/AD728x90.js

@@ -4,13 +4,13 @@ import './core.get-iterator-method-f5c0d66a.js';
 import './_library-528f1934.js';
 import './_iter-detect-6e099a34.js';
 import './web.dom.iterable-46c95e52.js';
-import React, { useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import './index-fb49124c.js';
 import 'prop-types';
 import './isSymbol-c1b9be80.js';
 import './debounce-8cd9e09c.js';
 import { m as main_36 } from './main-8c8784b8.js';
-import './slicedToArray-f1e40361.js';
+import { _ as _slicedToArray } from './slicedToArray-f1e40361.js';
 import './stringify-e30bc114.js';
 import './asyncToGenerator-204b5a5c.js';
 import './_set-species-6f64f1c1.js';
@@ -22,6 +22,7 @@ import DFPAdSlot from './AdSlot.js';
 var AD728x90 = function AD728x90(_ref) {
   var networkID = _ref.networkID,
       adUnit = _ref.adUnit,
+      slotId = _ref.slotId,
       _ref$targeting = _ref.targeting,
       targeting = _ref$targeting === undefined ? {} : _ref$targeting,
       _ref$pos = _ref.pos,
@@ -34,6 +35,12 @@ var AD728x90 = function AD728x90(_ref) {
     pos = 'top-mobile';
     mobileView = true;
   }
+  //If ad rendered, should turn this to true and enable sticky position
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      stickyAd = _useState2[0],
+      setStickyAd = _useState2[1];
 
   var adTargeting = {
     content_placement: targeting.content_placement,
@@ -48,79 +55,61 @@ var AD728x90 = function AD728x90(_ref) {
 
   var adRef = useRef(null);
 
-  // Collapsing the parent wrapper when the ad is not present
-  var collapseAd = function collapseAd() {
-    var parent = document.getElementById('leaderboard-ad-wrapper');
-    parent.style.height = '0%';
-    parent.style.width = '0%';
-    parent.classList.remove('display-leaderboard');
-    parent.classList.add('hide-leaderboard');
-  };
-
-  var checkIsAdFound = function checkIsAdFound(isFound, adData) {
-    //  Check for creativeId related to leaderboard ad
-    if (isFound) {
-      var parent = document.getElementById('leaderboard-ad-wrapper');
-      parent.classList.remove('hide-leaderboard');
-      parent.classList.add('display-leaderboard');
+  //removed this from event listener and made into its own function
+  var applySticky = function applySticky() {
+    var navbar = document.querySelector('.navbar');
+    var AdOffsetTop = adRef.current.getBoundingClientRect().top;
+    if (stickyAd && window.pageYOffset + (AdOffsetTop - navbar.offsetHeight) > AdOffsetTop) {
+      if (adRef.current && adRef.current.style) {
+        adRef.current.style.position = 'fixed';
+        adRef.current.style.top = fixedPos;
+        adRef.current.style.left = '0px';
+        adRef.current.style.zIndex = '9999';
+        adRef.current.style.width = '100%';
+        adRef.current.style.marginTop = '2px';
+      }
     } else {
-      collapseAd();
+      if (adRef.current && adRef.current.style) {
+        adRef.current.style.position = 'relative';
+        adRef.current.style.top = '';
+      }
     }
   };
 
+  //Need to reapply event listener once 'stickyAd' is toggled, will only make leaderboard ad sticky if ad is rendered
+
   useEffect(function () {
-    if (window && window.innerWidth && window.innerWidth < 768) {
-      var navbar = document.querySelector('.navbar');
-      var AdOffsetTop = adRef.current.getBoundingClientRect().top;
-      window.addEventListener('scroll', function () {
-        if (window.pageYOffset + (AdOffsetTop - navbar.offsetHeight) > AdOffsetTop) {
-          if (adRef.current && adRef.current.style) {
-            adRef.current.style.position = 'fixed';
-            adRef.current.style.top = fixedPos;
-            adRef.current.style.left = '0px';
-            adRef.current.style.zIndex = '9999';
-            adRef.current.style.width = '100%';
-            adRef.current.style.marginTop = '2px';
-          }
-        } else {
-          if (adRef.current && adRef.current.style) {
-            adRef.current.style.position = 'relative';
-            adRef.current.style.top = '';
-          }
-        }
-      });
+    if (stickyAd && window && window.innerWidth && window.innerWidth < 768) {
+      window.addEventListener('scroll', applySticky);
     }
-  }, []);
+  }, [stickyAd]);
 
   var browserSizes = [[728, 90], [970, 90], [320, 50], [300, 50]];
   var mobileSizes = [[320, 50], [300, 50]];
 
-  return (
-    //  Setting classname for wrapper to set height and width is no creative found.
+  return React.createElement(
+    'div',
+    { className: 'leaderboard-ad-wrapper', ref: adRef, style: { backgroundColor: '#fff' } },
+    React.createElement(DFPAdSlot, {
+      setStickyAd: setStickyAd,
+      slotId: slotId,
+      networkID: networkID,
+      adUnit: adUnit,
+      targeting: adTargeting,
+      className: 'AD728x90',
+      sizes: mobileView ? mobileSizes : browserSizes,
+      sizeMapping: [{
+        viewport: [768, 1],
+        sizes: [[728, 90], [970, 90]]
+      }, {
+        viewport: [1, 1],
+        sizes: [[320, 50], [300, 50]]
+      }]
+    }),
     React.createElement(
-      'div',
-      { id: 'leaderboard-ad-wrapper', className: 'leaderboard-ad-wrapper hide-leaderboard', ref: adRef, style: { backgroundColor: '#fff' } },
-      React.createElement(DFPAdSlot, {
-        slotId: 'leaderboard-ad',
-        networkID: networkID,
-        adUnit: adUnit,
-        targeting: adTargeting,
-        className: 'AD728x90',
-        sizes: mobileView ? mobileSizes : browserSizes,
-        sizeMapping: [{
-          viewport: [768, 1],
-          sizes: [[728, 90], [970, 90]]
-        }, {
-          viewport: [1, 1],
-          sizes: [[320, 50], [300, 50]]
-        }],
-        checkIsAdFound: checkIsAdFound
-      }),
-      React.createElement(
-        'style',
-        { jsx: 'true' },
-        '\n        .display-leaderboard {\n          display: block;\n        }\n        .hide-leaderboard {\n          display: none;\n        }\n      '
-      )
+      'style',
+      { jsx: 'true' },
+      '\n        .leaderboard-ad-wrapper {\n          min-height: 90px;\n        }\n        @media screen and (max-width: 768px) {\n          .leaderboard-ad-wrapper {\n            min-height: 50px;\n          }\n        }\n      '
     )
   );
 };

package/dist/esm/AdSlot.js

@@ -28,7 +28,10 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
       targeting = _ref$targeting === undefined ? {} : _ref$targeting,
       _ref$refreshFlag = _ref.refreshFlag,
       refreshFlag = _ref$refreshFlag === undefined ? true : _ref$refreshFlag,
-      checkIsAdFound = _ref.checkIsAdFound;
+      _ref$checkIsAdFound = _ref.checkIsAdFound,
+      checkIsAdFound = _ref$checkIsAdFound === undefined ? function () {} : _ref$checkIsAdFound,
+      _ref$setStickyAd = _ref.setStickyAd,
+      setStickyAd = _ref$setStickyAd === undefined ? function () {} : _ref$setStickyAd;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -70,6 +73,7 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
       sizeMapping: sizeMapping,
       targetingArguments: targeting,
       onSlotIsViewable: function onSlotIsViewable(e) {
+        setStickyAd(true);
         Beam.report_beam_ad('Impression', main_16, eventData.cID, eventData.lID, eventData.campID, eventData.adSize, eventData.slot_id);
         Segment.adViewed(eventData.domain, eventData.advertiserId, eventData.campID, eventData.cID, eventData.lID, eventData.adSize, eventData.isEmpty, eventData.sourceAgnosticCreativeId, eventData.sourceAgnosticLineItemId);
       },

package/dist/esm/DeckContent.js

@@ -38,7 +38,7 @@ import './promise-53143c9a.js';
 import './Beam.js';
 import './Segment.js';
 import './AdSlot.js';
-import { A as ADInfeed } from './ADInfeed-1c17dc0e.js';
+import { A as ADInfeed } from './ADInfeed-1d67a779.js';
 
 var DeckContent = function (_React$Component) {
   _inherits(DeckContent, _React$Component);

package/dist/esm/GridContent.js

@@ -38,9 +38,9 @@ import './promise-53143c9a.js';
 import './Beam.js';
 import './Segment.js';
 import './AdSlot.js';
-import { A as ADInfeed } from './ADInfeed-1c17dc0e.js';
+import { A as ADInfeed } from './ADInfeed-1d67a779.js';
 import { l as lodash } from './lodash-17fdfebb.js';
-import { A as ADlgInfeed } from './ADlgInfeed-94d7f5dd.js';
+import { A as ADlgInfeed } from './ADlgInfeed-d5161b6e.js';
 import './_arrayMap-a8dd2b2c.js';
 import { g as get_1 } from './get-ae817b75.js';
 import './AD.js';

package/dist/esm/IssueLanding.js

@@ -31,9 +31,9 @@ import './promise-53143c9a.js';
 import './Beam.js';
 import './Segment.js';
 import './AdSlot.js';
-import './ADInfeed-1c17dc0e.js';
+import './ADInfeed-1d67a779.js';
 import './lodash-17fdfebb.js';
-import './ADlgInfeed-94d7f5dd.js';
+import './ADlgInfeed-d5161b6e.js';
 import './AuthorComponent-f67cb027.js';
 import 'react-bootstrap';
 import QueueDeckExpanded from './QueueDeckExpanded.js';

package/dist/esm/NavNative.js

@@ -89,7 +89,7 @@ var NavNative = function NavNative(props) {
         bg: 'primary',
         sticky: 'top',
         ref: navRef,
-        style: { minHeight: '61px' } },
+        style: { minHeight: '65px' } },
       React.createElement(
         Container,
         { style: { maxHeight: '80vh' }, className: 'mobile-nav' },

package/dist/esm/QueueDeckExpanded.js

@@ -31,9 +31,9 @@ import './promise-53143c9a.js';
 import './Beam.js';
 import './Segment.js';
 import './AdSlot.js';
-import { A as ADInfeed } from './ADInfeed-1c17dc0e.js';
+import { A as ADInfeed } from './ADInfeed-1d67a779.js';
 import { l as lodash } from './lodash-17fdfebb.js';
-import { A as ADlgInfeed } from './ADlgInfeed-94d7f5dd.js';
+import { A as ADlgInfeed } from './ADlgInfeed-d5161b6e.js';
 import { A as AuthorComponent } from './AuthorComponent-f67cb027.js';
 import { Container, Media } from 'react-bootstrap';
 

package/dist/esm/index.js

@@ -38,10 +38,10 @@ import './promise-53143c9a.js';
 export { default as Beam } from './Beam.js';
 export { default as Segment } from './Segment.js';
 export { default as AdSlot } from './AdSlot.js';
-import './ADInfeed-1c17dc0e.js';
+import './ADInfeed-1d67a779.js';
 export { default as DeckContent } from './DeckContent.js';
 import './lodash-17fdfebb.js';
-import './ADlgInfeed-94d7f5dd.js';
+import './ADlgInfeed-d5161b6e.js';
 import './_arrayMap-a8dd2b2c.js';
 import './get-ae817b75.js';
 export { default as AD } from './AD.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.446",
+  "version": "1.0.448",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",