@mjhls/mjh-framework 1.0.435 → 1.0.437

package/dist/esm/ADlgInfeed-51a2801a.js

@@ -0,0 +1,43 @@
+import React__default from 'react';
+import 'react-bootstrap/Card';
+import { D as DFPAdSlot } from './AdSlot-78e48a2c.js';
+
+var ADlgInfeed = function ADlgInfeed(props) {
+  var className = props.className,
+      slotId = props.slotId,
+      adUnit = props.adUnit,
+      _props$targeting = props.targeting,
+      targeting = _props$targeting === undefined ? {} : _props$targeting,
+      networkID = props.networkID,
+      sizes = props.sizes,
+      index = props.index;
+
+  var collapseAd = function collapseAd() {
+    var parent = document.getElementById('lg-infeed-wrapper-' + (index + 1));
+    parent.style.height = '0%';
+    parent.style.width = '0%';
+    parent.style.display = 'none';
+  };
+
+  var checkIsAdFound = function checkIsAdFound(isFound) {
+    if (isFound) {
+      var parent = document.getElementById('lg-infeed-wrapper-' + (index + 1));
+      parent.style.display = 'flex';
+    } else {
+      collapseAd();
+    }
+  };
+
+  return React__default.createElement(
+    'div',
+    { id: 'lg-infeed-wrapper-' + (index + 1), className: 'lg-infeed-wrapper', style: { display: 'none', flex: '1 0 auto' } },
+    React__default.createElement(DFPAdSlot, { className: className, networkID: networkID, adUnit: adUnit, slotId: slotId, targeting: targeting, sizes: sizes, checkIsAdFound: checkIsAdFound, refreshFlag: false }),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        .lg-infeed-wrapper {\n          flex-direction: row;\n          margin-bottom: 1.25rem;\n          padding-bottom: 1.25rem;\n          border-bottom: 1px solid rgb(221, 221, 221);\n        }\n      '
+    )
+  );
+};
+
+export { ADlgInfeed as A };

package/dist/esm/{GridContent-e3224519.js → GridContent-90c0f8b5.js}

@@ -16,6 +16,8 @@ import { L as LazyLoad } from './index-5f9f807a.js';
 import { m as main_39 } from './main-7d1b3c98.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
 import { A as ADInfeed } from './ADInfeed-e5cefea5.js';
+import { l as lodash } from './lodash-17fdfebb.js';
+import { A as ADlgInfeed } from './ADlgInfeed-51a2801a.js';
 import { g as get_1 } from './get-53653403.js';
 import { A as AuthorComponent } from './AuthorComponent-c9e46673.js';
 
@@ -65,7 +67,9 @@ var GridContent = function (_React$Component) {
       total_pages: null,
       scrolling: true,
       query: _this.query,
-      currentPage: _this.props.currentPage || 1
+      currentPage: _this.props.currentPage || 1,
+      lgInfeedAd: _this.props.lgInfeedAd ? _this.props.lgInfeedAd : false,
+      desktopView: false
     }, _this.loadMore = debounce_1(function () {
       _this.setState(function (state) {
         var page = state.page,
@@ -80,6 +84,13 @@ var GridContent = function (_React$Component) {
         };
       }, _this.loadData);
     }, 0), _this.componentDidMount = function () {
+      if (_this.state.lgInfeedAd && window && window.innerWidth >= 1200) {
+        _this.setState(function (state) {
+          return _extends({}, state, {
+            desktopView: true
+          });
+        });
+      }
       document.addEventListener('scroll', _this.trackScrolling);
     }, _this.componentWillUnmount = function () {
       document.removeEventListener('scroll', _this.trackScrolling);
@@ -240,7 +251,7 @@ var GridContent = function (_React$Component) {
 
   _createClass(GridContent, [{
     key: 'cardLoader',
-    value: function cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight) {
+    value: function cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight, desktopView) {
       var _this2 = this;
 
       var lgVar = Math.floor(12 / columns);
@@ -330,32 +341,74 @@ var GridContent = function (_React$Component) {
         return [].concat(_toConsumableArray(arr.slice(0, index)), [newElement], _toConsumableArray(arr.slice(index)));
       };
       var posts = [];
-      if (showBI) {
-        var data = this.state.data;
-        posts = data;
-        var pos = 3;
-        for (var i = 1; pos < posts.length; i++) {
-          var inFeedAd = {
+      if (brandInsight && (desktopView || showBI)) {
+        var firstThree = this.state.data.slice(0, 3);
+        var data = this.state.data.slice(3);
+
+        if (desktopView) {
+          var lgInFeedAd = {
+            _type: 'lg-infeed',
             adUnit: brandInsight.adUnit,
-            className: brandInsight.className,
+            className: 'lg-infeed',
             networkID: brandInsight.networkID,
-            sizes: brandInsight.sizes,
-            slotId: brandInsight.slotId + '_' + i,
+            sizes: [728, 90],
             targeting: {
-              pos: 'article' + i,
               content_placement: brandInsight.targeting.content_placement,
               document_url: brandInsight.targeting.document_url
-            },
-            _type: 'BrandInsight'
+            }
           };
+          var chunks = lodash.chunk(data, 6).map(function (chunk) {
+            var set = lodash.chunk(chunk, 2);
+            for (var i = 0; i < set.length; i++) {
+              if (i !== set.length - 1) {
+                set[i].push(lgInFeedAd);
+              }
+            }
+            return lodash.flattenDeep(set);
+          });
 
-          posts = insert(posts, pos, inFeedAd);
-          pos += brandInsight.interval + 1;
+          posts = lodash.flatten(chunks);
         }
+
+        if (showBI) {
+          if (desktopView) {
+            brandInsight.interval = 8;
+          } else {
+            brandInsight.interval = 5;
+            posts = data;
+          }
+
+          var pos = 0;
+          for (var i = 1; pos < posts.length; i++) {
+            var inFeedAd = {
+              adUnit: brandInsight.adUnit,
+              className: brandInsight.className,
+              networkID: brandInsight.networkID,
+              sizes: brandInsight.sizes,
+              slotId: brandInsight.slotId + '_' + i,
+              targeting: {
+                pos: 'article' + i,
+                content_placement: brandInsight.targeting.content_placement,
+                document_url: brandInsight.targeting.document_url
+              },
+              _type: 'BrandInsight'
+            };
+
+            posts = insert(posts, pos, inFeedAd);
+            pos += brandInsight.interval + 1;
+          }
+        }
+        posts = firstThree.concat(posts);
+        posts = posts.map(function (ele, i) {
+          if (ele._type === 'lg-infeed') {
+            return _extends({}, ele, { slotId: 'lg-infeed_' + i, targeting: _extends({}, ele.targeting, { pos: 'lg-infeed_' + i }) });
+          } else {
+            return ele;
+          }
+        });
       } else {
         posts = this.state.data;
       }
-
       var itemsPerPage = this.props.params && this.props.params.itemsPerPage ? this.props.params.itemsPerPage : 10;
       var heroContent = this.props.heroContent ? this.props.heroContent : 0;
       var featureCount = 0;
@@ -497,10 +550,12 @@ var GridContent = function (_React$Component) {
                 main_39 && _this2.props.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index, numberOfItemsBeforeAd)
               );
             }
+          } else if (row._type === 'lg-infeed' && row.adUnit) {
+            return React__default.createElement(ADlgInfeed, _extends({ index: index }, row));
           } else if (row._type === 'BrandInsight' && row.adUnit) {
             return React__default.createElement(ADInfeed, { index: index, infeedAd: row });
           }
-          if (index + 1 > heroContent + featureCount) {
+          if (index + 1 > heroContent + featureCount && row._type && !['lg-infeed', 'brandInsightAd'].includes(row._type)) {
             return React__default.createElement(
               React__default.Fragment,
               { key: itemCounter },
@@ -604,7 +659,7 @@ var GridContent = function (_React$Component) {
           React__default.createElement(
             Container,
             null,
-            this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight)
+            this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight, this.state.desktopView)
           )
         ) : React__default.createElement(
           React__default.Fragment,
@@ -612,7 +667,7 @@ var GridContent = function (_React$Component) {
           React__default.createElement(
             Container,
             null,
-            this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight)
+            this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight, this.state.desktopView)
           ),
           React__default.createElement(
             'div',

package/dist/esm/GridContent.js

@@ -28,6 +28,8 @@ import './slicedToArray-04e02710.js';
 import './AdSlot-78e48a2c.js';
 import './promise-2592a80a.js';
 import './ADInfeed-e5cefea5.js';
+import './lodash-17fdfebb.js';
+import './ADlgInfeed-51a2801a.js';
 import './get-53653403.js';
-export { G as default } from './GridContent-e3224519.js';
+export { G as default } from './GridContent-90c0f8b5.js';
 import './AuthorComponent-c9e46673.js';

package/dist/esm/{Normal-0095df68.js → Normal-6eba8168.js}

@@ -2081,7 +2081,6 @@ var AD728x90 = function AD728x90(_ref) {
       _ref$fixedPos = _ref.fixedPos,
       fixedPos = _ref$fixedPos === undefined ? '60px' : _ref$fixedPos;
 
-
   var mobileView = false;
   if (main_39) {
     pos = 'top-mobile';