@mjhls/mjh-framework 1.0.516 → 1.0.518

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.516
+# mjh-framework v. 1.0.518
 
 > Foundation Framework 
 

package/dist/cjs/MasterDeck.js

@@ -69,7 +69,8 @@ var MasterDeck = function (_React$Component) {
       total_pages: null,
       scrolling: true,
       query: _this.query,
-      currentPage: _this.props.currentPage || 1
+      currentPage: _this.props.currentPage || 1,
+      dataRemapped: false
     }, _this.loadMore = debounce.debounce_1(function () {
       _this.setState(function (state) {
         var page = state.page,
@@ -219,7 +220,9 @@ var MasterDeck = function (_React$Component) {
       var insertBrandInsightAd = function insertBrandInsightAd(arr, index, newElement) {
         return [].concat(toConsumableArray._toConsumableArray(arr.slice(0, index)), [newElement], toConsumableArray._toConsumableArray(arr.slice(index)));
       };
-
+      _this.componentDidMount = function () {
+        _this.setState({ dataRemapped: !showBI || !brandInsightAd ? true : false });
+      };
       //  Need to pass flag "lgInfeedAd={true}" along with brandInsightAd from site level for large infeed-ad to render
       //  Checking lgInfeedAd flag in desktop view ( window >= 1400px ).
       //  Integrating large infeed AD
@@ -250,8 +253,16 @@ var MasterDeck = function (_React$Component) {
           return lodash.lodash.flattenDeep(set);
         });
         data = lodash.lodash.flatten(chunks);
+        !_this.state.dataRemapped && _this.setState({ dataRemapped: true }); // To detect if appending of insights ads are completed
       }
 
+      // set dataRemap to true as there are no infeed or BI ads or window width is less than limit
+      _this.componentDidUpdate = function () {
+        if (typeof window !== 'undefined' && (!lgInfeedAd || !brandInsightAd || window.innerWidth < 1400) && !_this.state.dataRemapped) {
+          !_this.state.dataRemapped && _this.setState({ dataRemapped: true });
+        }
+      };
+
       //  Integrating infeed AD
       if (showBI && brandInsightAd) {
         //  Checking lgInfeedAd flag in desktop view ( window >= 1400px ).
@@ -293,7 +304,8 @@ var MasterDeck = function (_React$Component) {
       return React__default.createElement(
         'div',
         null,
-        data && data.length > 0 ? data.map(function (row, index) {
+        data && _this.state.dataRemapped && data.length > 0 ? // If JS enabled and Data remapped with ads
+        data.map(function (row, index) {
           var pageNumber = row.pageNumber || _this.state.page;
 
           if (row._type === 'lg-infeed' && row.adUnit) {
@@ -301,29 +313,46 @@ var MasterDeck = function (_React$Component) {
             //  Returning view for infeed Ad
           } else if (row._type === 'brandInsightAd' && row.adUnit) {
             return React__default.createElement(ADInfeed.ADInfeed, { index: index, infeedAd: row });
-          } else {
+          } else if (!row._type || !['lg-infeed', 'brandInsightAd'].includes(row._type)) {
             //  Returning view for articles
             return React__default.createElement(
-              React__default.Fragment,
-              { key: index },
+              visibilitySensor.VisibilitySensor,
+              {
+                key: row._id ? row._id : index,
+                onChange: function onChange(isVisible) {
+                  isVisible && _this.changePageNumber(pageNumber);
+                } },
               React__default.createElement(
-                visibilitySensor.VisibilitySensor,
-                {
-                  onChange: function onChange(isVisible) {
-                    isVisible && _this.changePageNumber(pageNumber);
-                  } },
-                React__default.createElement(
+                React__default.Fragment,
+                { key: index },
+                React__default.createElement(_this2.Deck, { data: row, variant: variant, index: index, client: _this.props.client, defaultImage: _this.defaultImage }),
+                main.main_36 && _this.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
                   'div',
-                  null,
-                  React__default.createElement(_this2.Deck, { data: row, variant: variant, index: index, client: _this.props.client, defaultImage: _this.defaultImage }),
-                  main.main_36 && _this.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
-                    'div',
-                    { className: 'ad-container', style: { margin: '0 auto' } },
-                    _this.renderMobileAd(index, numberOfItemsBeforeAd, _this.rightItems)
-                  )
+                  { className: 'ad-container', style: { margin: '0 auto' } },
+                  _this.renderMobileAd(index, numberOfItemsBeforeAd, _this.rightItems)
                 )
               )
             );
+          } else {
+            return null;
+          }
+        }) : data && data.length > 0 ? //For Javascript Disabled Cases. data is not remapped if JS is disabled.
+        data.map(function (row, index) {
+          var pageNumber = row.pageNumber || _this.state.page;
+          if (!row._type || !['lg-infeed', 'brandInsightAd'].includes(row._type)) {
+            return React__default.createElement(
+              visibilitySensor.VisibilitySensor,
+              {
+                key: row._id ? row._id : index,
+                onChange: function onChange(isVisible) {
+                  isVisible && _this.changePageNumber(pageNumber);
+                } },
+              React__default.createElement(
+                React__default.Fragment,
+                { key: index },
+                React__default.createElement(_this2.Deck, { data: row, variant: variant, index: index, client: _this.props.client, defaultImage: _this.defaultImage })
+              )
+            );
           }
         }) : React__default.createElement(
           'div',

package/dist/cjs/VideoSeriesListing.js

@@ -233,32 +233,49 @@ var VideoSeriesListing = function (_React$Component) {
       var _this2 = this;
 
       return React__default.createElement(
-        index_es.InfiniteScroll,
-        { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+        React__default.Fragment,
+        null,
+        this.state.data.length >= 1 && this.state.data[0].length > 0 ? //Check if any Video Groups available
         React__default.createElement(
-          Container,
-          null,
-          this.state.data && this.state.data.map(function (series, index) {
-            var page = series && series.length > 0 && series[0].pageNumber !== 1 ? series[0].pageNumber : 1;
-
-            return React__default.createElement(
-              React__default.Fragment,
-              { key: index },
-              React__default.createElement(
-                visibilitySensor.VisibilitySensor,
-                {
-                  onChange: function onChange(isVisible) {
-                    isVisible && _this2.changePageNumber(page);
-                  } },
-                React__default.createElement('div', { className: 'visibility-sensor', style: { minHeight: '.25rem' } })
-              ),
-              React__default.createElement(
-                'div',
-                null,
-                _this2.renderSeries(series)
-              )
-            );
-          })
+          index_es.InfiniteScroll,
+          { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+          React__default.createElement(
+            Container,
+            null,
+            this.state.data && this.state.data.map(function (series, index) {
+              var page = series && series.length > 0 && series[0].pageNumber !== 1 ? series[0].pageNumber : 1;
+
+              return React__default.createElement(
+                React__default.Fragment,
+                { key: index },
+                React__default.createElement(
+                  visibilitySensor.VisibilitySensor,
+                  {
+                    onChange: function onChange(isVisible) {
+                      isVisible && _this2.changePageNumber(page);
+                    } },
+                  React__default.createElement('div', { className: 'visibility-sensor', style: { minHeight: '.25rem' } })
+                ),
+                React__default.createElement(
+                  'div',
+                  null,
+                  _this2.renderSeries(series)
+                )
+              );
+            })
+          )
+        ) : React__default.createElement(
+          'div',
+          { style: { marginTop: '10px' } },
+          React__default.createElement(
+            'h5',
+            null,
+            React__default.createElement(
+              'em',
+              null,
+              'New content coming soon, please check back later.'
+            )
+          )
         )
       );
     }

package/dist/esm/MasterDeck.js

@@ -63,7 +63,8 @@ var MasterDeck = function (_React$Component) {
       total_pages: null,
       scrolling: true,
       query: _this.query,
-      currentPage: _this.props.currentPage || 1
+      currentPage: _this.props.currentPage || 1,
+      dataRemapped: false
     }, _this.loadMore = debounce_1(function () {
       _this.setState(function (state) {
         var page = state.page,
@@ -213,7 +214,9 @@ var MasterDeck = function (_React$Component) {
       var insertBrandInsightAd = function insertBrandInsightAd(arr, index, newElement) {
         return [].concat(_toConsumableArray(arr.slice(0, index)), [newElement], _toConsumableArray(arr.slice(index)));
       };
-
+      _this.componentDidMount = function () {
+        _this.setState({ dataRemapped: !showBI || !brandInsightAd ? true : false });
+      };
       //  Need to pass flag "lgInfeedAd={true}" along with brandInsightAd from site level for large infeed-ad to render
       //  Checking lgInfeedAd flag in desktop view ( window >= 1400px ).
       //  Integrating large infeed AD
@@ -244,8 +247,16 @@ var MasterDeck = function (_React$Component) {
           return lodash.flattenDeep(set);
         });
         data = lodash.flatten(chunks);
+        !_this.state.dataRemapped && _this.setState({ dataRemapped: true }); // To detect if appending of insights ads are completed
       }
 
+      // set dataRemap to true as there are no infeed or BI ads or window width is less than limit
+      _this.componentDidUpdate = function () {
+        if (typeof window !== 'undefined' && (!lgInfeedAd || !brandInsightAd || window.innerWidth < 1400) && !_this.state.dataRemapped) {
+          !_this.state.dataRemapped && _this.setState({ dataRemapped: true });
+        }
+      };
+
       //  Integrating infeed AD
       if (showBI && brandInsightAd) {
         //  Checking lgInfeedAd flag in desktop view ( window >= 1400px ).
@@ -287,7 +298,8 @@ var MasterDeck = function (_React$Component) {
       return React__default.createElement(
         'div',
         null,
-        data && data.length > 0 ? data.map(function (row, index) {
+        data && _this.state.dataRemapped && data.length > 0 ? // If JS enabled and Data remapped with ads
+        data.map(function (row, index) {
           var pageNumber = row.pageNumber || _this.state.page;
 
           if (row._type === 'lg-infeed' && row.adUnit) {
@@ -295,29 +307,46 @@ var MasterDeck = function (_React$Component) {
             //  Returning view for infeed Ad
           } else if (row._type === 'brandInsightAd' && row.adUnit) {
             return React__default.createElement(ADInfeed, { index: index, infeedAd: row });
-          } else {
+          } else if (!row._type || !['lg-infeed', 'brandInsightAd'].includes(row._type)) {
             //  Returning view for articles
             return React__default.createElement(
-              React__default.Fragment,
-              { key: index },
+              VisibilitySensor,
+              {
+                key: row._id ? row._id : index,
+                onChange: function onChange(isVisible) {
+                  isVisible && _this.changePageNumber(pageNumber);
+                } },
               React__default.createElement(
-                VisibilitySensor,
-                {
-                  onChange: function onChange(isVisible) {
-                    isVisible && _this.changePageNumber(pageNumber);
-                  } },
-                React__default.createElement(
+                React__default.Fragment,
+                { key: index },
+                React__default.createElement(_this2.Deck, { data: row, variant: variant, index: index, client: _this.props.client, defaultImage: _this.defaultImage }),
+                main_36 && _this.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
                   'div',
-                  null,
-                  React__default.createElement(_this2.Deck, { data: row, variant: variant, index: index, client: _this.props.client, defaultImage: _this.defaultImage }),
-                  main_36 && _this.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
-                    'div',
-                    { className: 'ad-container', style: { margin: '0 auto' } },
-                    _this.renderMobileAd(index, numberOfItemsBeforeAd, _this.rightItems)
-                  )
+                  { className: 'ad-container', style: { margin: '0 auto' } },
+                  _this.renderMobileAd(index, numberOfItemsBeforeAd, _this.rightItems)
                 )
               )
             );
+          } else {
+            return null;
+          }
+        }) : data && data.length > 0 ? //For Javascript Disabled Cases. data is not remapped if JS is disabled.
+        data.map(function (row, index) {
+          var pageNumber = row.pageNumber || _this.state.page;
+          if (!row._type || !['lg-infeed', 'brandInsightAd'].includes(row._type)) {
+            return React__default.createElement(
+              VisibilitySensor,
+              {
+                key: row._id ? row._id : index,
+                onChange: function onChange(isVisible) {
+                  isVisible && _this.changePageNumber(pageNumber);
+                } },
+              React__default.createElement(
+                React__default.Fragment,
+                { key: index },
+                React__default.createElement(_this2.Deck, { data: row, variant: variant, index: index, client: _this.props.client, defaultImage: _this.defaultImage })
+              )
+            );
           }
         }) : React__default.createElement(
           'div',

package/dist/esm/VideoSeriesListing.js

@@ -227,32 +227,49 @@ var VideoSeriesListing = function (_React$Component) {
       var _this2 = this;
 
       return React__default.createElement(
-        InfiniteScroll,
-        { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+        React__default.Fragment,
+        null,
+        this.state.data.length >= 1 && this.state.data[0].length > 0 ? //Check if any Video Groups available
         React__default.createElement(
-          Container,
-          null,
-          this.state.data && this.state.data.map(function (series, index) {
-            var page = series && series.length > 0 && series[0].pageNumber !== 1 ? series[0].pageNumber : 1;
+          InfiniteScroll,
+          { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+          React__default.createElement(
+            Container,
+            null,
+            this.state.data && this.state.data.map(function (series, index) {
+              var page = series && series.length > 0 && series[0].pageNumber !== 1 ? series[0].pageNumber : 1;
 
-            return React__default.createElement(
-              React__default.Fragment,
-              { key: index },
-              React__default.createElement(
-                VisibilitySensor,
-                {
-                  onChange: function onChange(isVisible) {
-                    isVisible && _this2.changePageNumber(page);
-                  } },
-                React__default.createElement('div', { className: 'visibility-sensor', style: { minHeight: '.25rem' } })
-              ),
-              React__default.createElement(
-                'div',
-                null,
-                _this2.renderSeries(series)
-              )
-            );
-          })
+              return React__default.createElement(
+                React__default.Fragment,
+                { key: index },
+                React__default.createElement(
+                  VisibilitySensor,
+                  {
+                    onChange: function onChange(isVisible) {
+                      isVisible && _this2.changePageNumber(page);
+                    } },
+                  React__default.createElement('div', { className: 'visibility-sensor', style: { minHeight: '.25rem' } })
+                ),
+                React__default.createElement(
+                  'div',
+                  null,
+                  _this2.renderSeries(series)
+                )
+              );
+            })
+          )
+        ) : React__default.createElement(
+          'div',
+          { style: { marginTop: '10px' } },
+          React__default.createElement(
+            'h5',
+            null,
+            React__default.createElement(
+              'em',
+              null,
+              'New content coming soon, please check back later.'
+            )
+          )
         )
       );
     }

package/package.json

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