@mjhls/mjh-framework 1.0.404 → 1.0.406

package/dist/esm/{GridContent-cafb2fe4.js → GridContent-2cabe342.js}

@@ -79,7 +79,22 @@ var GridContent = function (_React$Component) {
           to: to + per
         };
       }, _this.loadData);
-    }, 0), _this.loadData = function () {
+    }, 0), _this.componentDidMount = function () {
+      document.addEventListener('scroll', _this.trackScrolling);
+    }, _this.componentWillUnmount = function () {
+      document.removeEventListener('scroll', _this.trackScrolling);
+    }, _this.componentDidUpdate = function (prevProps, prevState) {
+      if (prevState.currentPage !== _this.state.currentPage) {
+        document.addEventListener('scroll', _this.trackScrolling);
+      }
+    }, _this.trackScrolling = function () {
+      var itemsPerPage = _this.props.params.itemsPerPage;
+      if (window.pageYOffset === 0) {
+        if (_this.state.currentPage > 1) {
+          _this.changePageNumber(1, itemsPerPage, 1);
+        }
+      }
+    }, _this.loadData = function () {
       var _this$state = _this.state,
           from = _this$state.from,
           to = _this$state.to,
@@ -129,7 +144,7 @@ var GridContent = function (_React$Component) {
       } else {
         return _this.defaultImage;
       }
-    }, _this.changePageNumber = function (pageNumber) {
+    }, _this.changePageNumber = function (pageNumber, itemsPerPage, itemIndex) {
       var _this$props = _this.props,
           seoPaginate = _this$props.seoPaginate,
           pageview = _this$props.pageview,
@@ -164,7 +179,12 @@ var GridContent = function (_React$Component) {
           path += '?' + queryString;
         }
 
-        pageNumber = parseInt(pageNumber);
+        // pageNumber = parseInt(pageNumber)
+
+        var index = Number(itemIndex);
+        var perPage = Number(itemsPerPage);
+
+        pageNumber = Math.ceil((index + 1) / perPage);
 
         if (currentPage !== pageNumber) {
           lib_3.refresh();
@@ -336,6 +356,9 @@ var GridContent = function (_React$Component) {
         posts = this.state.data;
       }
 
+      var itemsPerPage = this.props.params.itemsPerPage;
+      var heroContent = this.props.heroContent ? this.props.heroContent : 0;
+      var featureCount = 0;
       return React__default.createElement(
         'div',
         { className: 'grid-container' },
@@ -344,6 +367,7 @@ var GridContent = function (_React$Component) {
           var contentCategoryName = row.contentCategory && row.contentCategory.name && _this2.mapping[row.contentCategory.name] ? row.contentCategory.name : 'Articles';
           var linkHref = row.url && row.url.current ? _this2.mapping[contentCategoryName] + '/' + row.url.current : '';
           if (row._type === 'feature') {
+            featureCount++;
             if (row.blank || _this2.checkExternalUrl(row.url.current)) {
               return React__default.createElement(
                 React__default.Fragment,
@@ -353,7 +377,7 @@ var GridContent = function (_React$Component) {
                   {
                     partialVisibility: true,
                     onChange: function onChange(isVisible) {
-                      isVisible && _this2.changePageNumber(1);
+                      isVisible && _this2.changePageNumber(1, itemsPerPage, index);
                     } },
                   React__default.createElement(
                     'div',
@@ -417,7 +441,7 @@ var GridContent = function (_React$Component) {
                   {
                     partialVisibility: true,
                     onChange: function onChange(isVisible) {
-                      isVisible && _this2.changePageNumber(1);
+                      isVisible && _this2.changePageNumber(1, itemsPerPage, index);
                     } },
                   React__default.createElement(
                     'div',
@@ -476,64 +500,70 @@ var GridContent = function (_React$Component) {
           } else if (row._type === 'BrandInsight' && row.adUnit) {
             return React__default.createElement(ADInfeed, { index: index, infeedAd: row });
           }
-          return React__default.createElement(
-            React__default.Fragment,
-            { key: itemCounter },
-            React__default.createElement(
-              VisibilitySensor,
-              {
-                onChange: function onChange(isVisible) {
-                  isVisible && _this2.changePageNumber(pageNumber);
-                } },
+          if (index + 1 > heroContent + featureCount) {
+            return React__default.createElement(
+              React__default.Fragment,
+              { key: itemCounter },
               React__default.createElement(
-                'div',
-                { counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
+                VisibilitySensor,
+                {
+                  onChange: function onChange(isVisible) {
+                    isVisible && _this2.changePageNumber(pageNumber, itemsPerPage, index);
+                  } },
                 React__default.createElement(
-                  Card,
-                  { className: 'content-card', style: { flexDirection: index === 0 || index % 4 === 0 ? 'top' : 'row' } },
-                  (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default.createElement(
-                    'a',
-                    { href: linkHref, className: index === 0 || index % 4 === 0 ? '' : 'card-image' },
-                    React__default.createElement(
-                      LazyLoad,
-                      { height: _this2.props.imageHeight },
-                      React__default.createElement(Card.Img, { variant: 'top', src: _this2.renderCardImage(row, page), alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : '' })
-                    )
-                  ),
+                  'div',
+                  { counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
                   React__default.createElement(
-                    Card.Body,
-                    null,
-                    React__default.createElement(
+                    Card,
+                    { className: 'content-card', style: { flexDirection: index === 0 || index % 4 === 0 ? 'top' : 'row' } },
+                    (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default.createElement(
                       'a',
-                      { href: linkHref },
+                      { href: linkHref, className: index === 0 || index % 4 === 0 ? '' : 'card-image' },
                       React__default.createElement(
-                        Card.Title,
-                        null,
-                        row.title
+                        LazyLoad,
+                        { height: _this2.props.imageHeight },
+                        React__default.createElement(Card.Img, {
+                          variant: 'top',
+                          src: _this2.renderCardImage(row, page),
+                          alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : ''
+                        })
                       )
                     ),
-                    _this2.props.showPublished && row.published && React__default.createElement(
-                      Card.Subtitle,
-                      { style: { marginTop: 0 } },
-                      moment(row.published).format('MMMM DD, YYYY')
-                    ),
-                    _this2.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && React__default.createElement(
-                      LazyLoad,
-                      { height: 50 },
-                      React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: row.authorMapping })
-                    ),
                     React__default.createElement(
-                      Card.Text,
-                      { className: index === 0 || index % 4 === 0 ? '' : 'card-subtext' },
-                      clean_html_1(row.summary)
+                      Card.Body,
+                      null,
+                      React__default.createElement(
+                        'a',
+                        { href: linkHref },
+                        React__default.createElement(
+                          Card.Title,
+                          null,
+                          row.title
+                        )
+                      ),
+                      _this2.props.showPublished && row.published && React__default.createElement(
+                        Card.Subtitle,
+                        { style: { marginTop: 0 } },
+                        moment(row.published).format('MMMM DD, YYYY')
+                      ),
+                      _this2.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && React__default.createElement(
+                        LazyLoad,
+                        { height: 50 },
+                        React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: row.authorMapping })
+                      ),
+                      React__default.createElement(
+                        Card.Text,
+                        { className: index === 0 || index % 4 === 0 ? '' : 'card-subtext' },
+                        clean_html_1(row.summary)
+                      )
                     )
                   )
                 )
-              )
-            ),
-            showVideo && (posts.length < numberOfItemsBeforeVideo || index + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
-            main_39 && _this2.props.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index, numberOfItemsBeforeAd)
-          );
+              ),
+              showVideo && (posts.length < numberOfItemsBeforeVideo || index + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
+              main_39 && _this2.props.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index, numberOfItemsBeforeAd)
+            );
+          } else return null;
         }) : React__default.createElement(
           'div',
           null,

package/dist/esm/GridContent.js

@@ -29,5 +29,5 @@ import './AdSlot-78e48a2c.js';
 import './promise-2592a80a.js';
 import './ADInfeed-e5cefea5.js';
 import './get-53653403.js';
-export { G as default } from './GridContent-cafb2fe4.js';
+export { G as default } from './GridContent-2cabe342.js';
 import './AuthorComponent-c9e46673.js';

package/dist/esm/QueueDeckExpanded.js

@@ -77,7 +77,7 @@ var loadData = function loadData(values, query, client, params, setData, setScro
   });
 };
 
-var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage) {
+var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage, itemsPerPage, itemIndex) {
   if (seoPaginate) {
     var path = router.asPath;
     var qrIndex = path.indexOf('?');
@@ -106,7 +106,12 @@ var changePageNumber = function changePageNumber(pageNumber, seoPaginate, pagevi
       path += '?' + queryString;
     }
 
-    pageNumber = parseInt(pageNumber);
+    // pageNumber = parseInt(pageNumber)
+
+    var index = Number(itemIndex);
+    var perPage = Number(itemsPerPage);
+
+    pageNumber = Math.ceil((index + 1) / perPage);
 
     if (currentPage !== pageNumber) {
       lib_3.refresh();
@@ -132,7 +137,7 @@ var checkExternalUrl = function checkExternalUrl(url) {
   return new RegExp(['http', 'https'].join('|')).test(url);
 };
 
-var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems, brandInsightAd, showBI) {
+var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent) {
   var numberOfItemsBeforeAd = 6;
 
   var insertBrandInsightAd = function insertBrandInsightAd(arr, index, newElement) {
@@ -160,6 +165,8 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
     }
   }
 
+  var featureCount = 0;
+
   return React__default.createElement(
     'div',
     null,
@@ -168,6 +175,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
       var contentCategoryName = article.contentCategory ? article.contentCategory.name : 'Articles';
 
       if (article._type === 'feature') {
+        featureCount++;
         if (article.blank || checkExternalUrl(article.url.current)) {
           return React__default.createElement(
             VisibilitySensor,
@@ -175,7 +183,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
               key: article._id ? article._id : index,
               partialVisibility: true,
               onChange: function onChange(isVisible) {
-                isVisible && changePageNumber(1, seoPaginate, pageview, router, currentPage, setCurrentPage);
+                isVisible && changePageNumber(1, seoPaginate, pageview, router, currentPage, setCurrentPage, itemsPerPage, index);
               } },
             React__default.createElement(
               React__default.Fragment,
@@ -252,7 +260,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
               key: article._id ? article._id : index,
               partialVisibility: true,
               onChange: function onChange(isVisible) {
-                isVisible && changePageNumber(1, seoPaginate, pageview, router, currentPage, setCurrentPage);
+                isVisible && changePageNumber(1, seoPaginate, pageview, router, currentPage, setCurrentPage, itemsPerPage, index);
               } },
             React__default.createElement(
               React__default.Fragment,
@@ -328,81 +336,86 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
       if (main_39 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0) {
         return renderMobileAd(index, numberOfItemsBeforeAd, rightItems);
       }
-      return React__default.createElement(
-        VisibilitySensor,
-        {
-          key: article._id ? article._id : index,
-          onChange: function onChange(isVisible) {
-            isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage);
-          } },
-        React__default.createElement(
-          React__default.Fragment,
-          null,
+
+      if (index + 1 > heroContent + featureCount) {
+        return React__default.createElement(
+          VisibilitySensor,
+          {
+            key: article._id ? article._id : index,
+            onChange: function onChange(isVisible) {
+              isVisible && changePageNumber(pageNumber, seoPaginate, pageview, router, currentPage, setCurrentPage, itemsPerPage, index);
+            } },
           React__default.createElement(
-            Media,
-            { key: article._id ? article._id : index, style: { flexDirection: 'row', marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
-            (article.thumbnail && article.thumbnail.asset || defaultImage) && React__default.createElement(
-              'a',
-              { href: mapping[contentCategoryName] + '/' + article.url.current, className: 'img-wrapper' },
-              React__default.createElement(
-                LazyLoad,
-                { height: imageHeight },
-                article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
-              )
-            ),
+            React__default.Fragment,
+            null,
             React__default.createElement(
-              Media.Body,
-              null,
-              React__default.createElement(
+              Media,
+              {
+                key: article._id ? article._id : index,
+                style: { flexDirection: 'row', marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
+              (article.thumbnail && article.thumbnail.asset || defaultImage) && React__default.createElement(
                 'a',
-                { href: mapping[contentCategoryName] + '/' + article.url.current },
-                article.title && React__default.createElement(
-                  'h4',
-                  { className: 'card-title', style: { fontWeight: '500', color: 'var(--gray-dark)', marginBottom: '.5rem' } },
-                  article.title
+                { href: mapping[contentCategoryName] + '/' + article.url.current, className: 'img-wrapper' },
+                React__default.createElement(
+                  LazyLoad,
+                  { height: imageHeight },
+                  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
                 )
               ),
-              showPublished && article.published && React__default.createElement(
-                'p',
-                { className: 'card-text', style: { color: 'var(--dark)', marginBottom: '.25rem' } },
-                moment(article.published).format('MMMM DD, YYYY')
-              ),
               React__default.createElement(
-                'div',
-                { className: 'author-sec', style: { lineHeight: 1.5 } },
-                showAuthor && article.authorMapping && article.authorMapping.length > 0 && React__default.createElement(
-                  LazyLoad,
-                  { height: 50 },
-                  React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
+                Media.Body,
+                null,
+                React__default.createElement(
+                  'a',
+                  { href: mapping[contentCategoryName] + '/' + article.url.current },
+                  article.title && React__default.createElement(
+                    'h4',
+                    { className: 'card-title', style: { fontWeight: '500', color: 'var(--gray-dark)', marginBottom: '.5rem' } },
+                    article.title
+                  )
+                ),
+                showPublished && article.published && React__default.createElement(
+                  'p',
+                  { className: 'card-text', style: { color: 'var(--dark)', marginBottom: '.25rem' } },
+                  moment(article.published).format('MMMM DD, YYYY')
+                ),
+                React__default.createElement(
+                  'div',
+                  { className: 'author-sec', style: { lineHeight: 1.5 } },
+                  showAuthor && article.authorMapping && article.authorMapping.length > 0 && React__default.createElement(
+                    LazyLoad,
+                    { height: 50 },
+                    React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
+                  )
+                ),
+                article.source && React__default.createElement(
+                  'p',
+                  { className: 'p-0 mb-1' },
+                  article.source
+                ),
+                showCategory && article.contentCategory && React__default.createElement(
+                  'p',
+                  {
+                    style: {
+                      background: '#3FB618',
+                      color: '#ffffff',
+                      marginBottom: '.25rem',
+                      display: 'inline-block',
+                      padding: '0 .25rem',
+                      fontSize: '.8rem'
+                    } },
+                  article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
+                ),
+                article.summary && React__default.createElement(
+                  'p',
+                  { className: 'pt-2 card-text' },
+                  clean_html_1(article.summary)
                 )
-              ),
-              article.source && React__default.createElement(
-                'p',
-                { className: 'p-0 mb-1' },
-                article.source
-              ),
-              showCategory && article.contentCategory && React__default.createElement(
-                'p',
-                {
-                  style: {
-                    background: '#3FB618',
-                    color: '#ffffff',
-                    marginBottom: '.25rem',
-                    display: 'inline-block',
-                    padding: '0 .25rem',
-                    fontSize: '.8rem'
-                  } },
-                article.contentCategory.name.slice(0, article.contentCategory.name.length - 1)
-              ),
-              article.summary && React__default.createElement(
-                'p',
-                { className: 'pt-2 card-text' },
-                clean_html_1(article.summary)
               )
             )
           )
-        )
-      );
+        );
+      } else return null;
     }) : React__default.createElement(
       'div',
       null,
@@ -478,7 +491,9 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       rightItems = props.rightItems,
       brandInsightAd = props.brandInsightAd,
       _props$showBI = props.showBI,
-      showBI = _props$showBI === undefined ? false : _props$showBI;
+      showBI = _props$showBI === undefined ? false : _props$showBI,
+      _props$heroContent = props.heroContent,
+      heroContent = _props$heroContent === undefined ? 0 : _props$heroContent;
   var initialCurrentPage = props.currentPage,
       showPublished = props.showPublished;
 
@@ -512,6 +527,8 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       values = _useState10[0],
       setValues = _useState10[1];
 
+  var itemsPerPage = params.itemsPerPage;
+
   var prevValues = usePrevious(values);
 
   useEffect(function () {
@@ -522,6 +539,21 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
     }
   }, [values, prevValues, query, client, params, setData, setScrolling, pointer, pointerArray]);
 
+  useEffect(function () {
+    document.addEventListener('scroll', trackScrolling);
+    return function () {
+      document.removeEventListener('scroll', trackScrolling);
+    };
+  }, [currentPage]);
+
+  var trackScrolling = function trackScrolling(current) {
+    if (window.pageYOffset === 0) {
+      if (currentPage > 1) {
+        changePageNumber(1, seoPaginate, pageview, router, currentPage, setCurrentPage, itemsPerPage, 1);
+      }
+    }
+  };
+
   return React__default.createElement(
     'div',
     null,
@@ -536,7 +568,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
         React__default.createElement(
           Container,
           null,
-          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems, brandInsightAd, showBI)
+          cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, imageHeight, imageWidth, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent)
         )
       ),
       React__default.createElement(
@@ -550,7 +582,7 @@ var QueueDeckExpanded = function QueueDeckExpanded(props) {
       React__default.createElement(
         Container,
         null,
-        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, rightItems, brandInsightAd, showBI)
+        cardLoader(data, builder, mapping, values, seoPaginate, pageview, router, currentPage, setCurrentPage, showPublished, defaultImage, showAuthor, showCategory, rightItems, brandInsightAd, showBI, itemsPerPage, heroContent)
       ),
       React__default.createElement(
         'div',