@mjhls/mjh-framework 1.0.515 → 1.0.517

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.515
+# mjh-framework v. 1.0.517
 
 > Foundation Framework 
 

package/dist/cjs/Breadcrumbs.js

@@ -65,7 +65,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .breadcrumb {\n            background: transparent;\n            padding-left: 0.25rem;\n          }\n          .breadcrumb .breadcrumb-item + .breadcrumb-item::before {\n            content: \'' + separator + '\';\n          }\n        '
+        '\n          .breadcrumb {\n            background: transparent;\n            padding-left: 0.25rem;\n          }\n          .breadcrumb .breadcrumb-item + .breadcrumb-item::before {\n            content: \'' + separator + '\';\n          }\n          .breadcrumb-item.active {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            max-width: 40ch;\n          }\n          @media screen and (max-width: 1400px) {\n            .breadcrumb-item.active {\n              max-width: 20ch;\n            }\n          }\n          @media screen and (max-width: 768px) {\n            .breadcrumb-item.active {\n              max-width: 40ch;\n            }\n          }\n        '
       )
     );
   }
@@ -96,7 +96,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        ol.breadcrumb {\n          background: transparent;\n          padding-left: 0.25rem;\n        }\n      '
+      '\n        ol.breadcrumb {\n          background: transparent;\n          padding-left: 0.25rem;\n        }\n        .breadcrumb-item.active {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          max-width: 40ch;\n        }\n        @media screen and (max-width: 1400px) {\n          .breadcrumb-item.active {\n            max-width: 20ch;\n          }\n        }\n        @media screen and (max-width: 768px) {\n          .breadcrumb-item.active {\n            max-width: 40ch;\n          }\n        }\n      '
     )
   );
 };

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/esm/Breadcrumbs.js

@@ -60,7 +60,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .breadcrumb {\n            background: transparent;\n            padding-left: 0.25rem;\n          }\n          .breadcrumb .breadcrumb-item + .breadcrumb-item::before {\n            content: \'' + separator + '\';\n          }\n        '
+        '\n          .breadcrumb {\n            background: transparent;\n            padding-left: 0.25rem;\n          }\n          .breadcrumb .breadcrumb-item + .breadcrumb-item::before {\n            content: \'' + separator + '\';\n          }\n          .breadcrumb-item.active {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            max-width: 40ch;\n          }\n          @media screen and (max-width: 1400px) {\n            .breadcrumb-item.active {\n              max-width: 20ch;\n            }\n          }\n          @media screen and (max-width: 768px) {\n            .breadcrumb-item.active {\n              max-width: 40ch;\n            }\n          }\n        '
       )
     );
   }
@@ -91,7 +91,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        ol.breadcrumb {\n          background: transparent;\n          padding-left: 0.25rem;\n        }\n      '
+      '\n        ol.breadcrumb {\n          background: transparent;\n          padding-left: 0.25rem;\n        }\n        .breadcrumb-item.active {\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          max-width: 40ch;\n        }\n        @media screen and (max-width: 1400px) {\n          .breadcrumb-item.active {\n            max-width: 20ch;\n          }\n        }\n        @media screen and (max-width: 768px) {\n          .breadcrumb-item.active {\n            max-width: 40ch;\n          }\n        }\n      '
     )
   );
 };

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/package.json

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