@mjhls/mjh-framework 1.0.461 → 1.0.463

package/README.md

@@ -1,4 +1,4 @@
-# mjh-framework v. 1.0.461
+# mjh-framework v. 1.0.463
 
 > Foundation Framework 
 

package/dist/cjs/ArticleQueue.js

@@ -160,6 +160,13 @@ var Article = function Article(props) {
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
       contextualADFlag = _useState2[0],
       setContextualADFlag = _useState2[1];
+  //  Setting new Flag 'visibleFlag' to know when the article is visible so that new contextual ad can be appended into DOM.
+
+
+  var _useState3 = React.useState(false),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      visibleFlag = _useState4[0],
+      setVisibleFlag = _useState4[1];
 
   var summary = getArticleSummary(props.article);
 
@@ -323,6 +330,8 @@ var Article = function Article(props) {
         contextualAD: _extends._extends({}, payload.contextualAD, {
           slotId: (payload.contextualAD.slotId || 'contextual_ad') + '-' + payload._id,
           className: 'ADFluid',
+          //  Fetching new contextual targeting based on the current active article.
+          targeting: props.getTargeting(props.article, 'native-ad'),
           // Adding new ad size for large contextual ad for desktop screen width >= 1400
           sizes: lgContextAd ? [[728, 90], 'fluid', [300, 100]] : ['fluid', [300, 100]],
           sizeMapping: lgContextAd ? [{
@@ -368,7 +377,7 @@ var Article = function Article(props) {
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
         contextualADFlag && React__default.createElement('span', { className: 'clearfix' }),
-        React__default.createElement(
+        (visibleFlag || queueData && queueData.length === 1) && React__default.createElement(
           'div',
           { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
           React__default.createElement(AdSlot, _extends._extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound }))
@@ -466,6 +475,8 @@ var Article = function Article(props) {
         onChange: function onChange(visible) {
           if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
             onChangeArticle(url, visible, meta);
+            //  Setting 'visibleFlag' to know that the article is visible.
+            setVisibleFlag(true);
           }
         } },
       React__default.createElement(
@@ -733,10 +744,10 @@ var ArticleQueue = function ArticleQueue(props) {
     return article;
   };
 
-  var _useState3 = React.useState([firstArticle()]),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      queueData = _useState4[0],
-      setQueueData = _useState4[1];
+  var _useState5 = React.useState([firstArticle()]),
+      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+      queueData = _useState6[0],
+      setQueueData = _useState6[1];
 
   var refreshAD = function refreshAD(path) {
     if (!main.main_36) {
@@ -877,6 +888,8 @@ var ArticleQueue = function ArticleQueue(props) {
         article: article,
         cpModificationRequired: cpModificationRequired,
         queueData: queueData
+        // Passing 'getTargeting' so that contextual AD can fetch target based on current active article.
+        , getTargeting: getTargeting
       }));
     })
   );

package/dist/cjs/View.js

@@ -301,30 +301,40 @@ var Article = function Article(props) {
       ISIContent = props.ISIContent,
       shareOptions = props.shareOptions,
       cpModificationRequired = props.cpModificationRequired,
-      authorPrefix = props.authorPrefix;
+      authorPrefix = props.authorPrefix,
+      _props$lgContextAd = props.lgContextAd,
+      lgContextAd = _props$lgContextAd === undefined ? false : _props$lgContextAd,
+      queueData = props.queueData;
   var onChangeArticle = props.onChangeArticle;
 
   var _useState = React.useState(null),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
       contextualADFlag = _useState2[0],
       setContextualADFlag = _useState2[1];
+  //  Setting new Flag 'visibleFlag' to know when the article is visible so that new contextual ad can be appended into DOM.
 
-  var summary = getArticleSummary(props.article);
 
-  var _useState3 = React.useState(1),
+  var _useState3 = React.useState(false),
       _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      auth = _useState4[0],
-      setAuth = _useState4[1];
+      visibleFlag = _useState4[0],
+      setVisibleFlag = _useState4[1];
+
+  var summary = getArticleSummary(props.article);
 
-  var _useState5 = React.useState(''),
+  var _useState5 = React.useState(1),
       _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      passwordKey = _useState6[0],
-      setPasswordKey = _useState6[1];
+      auth = _useState6[0],
+      setAuth = _useState6[1];
 
-  var _useState7 = React.useState(false),
+  var _useState7 = React.useState(''),
       _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      showVotes = _useState8[0],
-      setShowVotes = _useState8[1];
+      passwordKey = _useState8[0],
+      setPasswordKey = _useState8[1];
+
+  var _useState9 = React.useState(false),
+      _useState10 = slicedToArray._slicedToArray(_useState9, 2),
+      showVotes = _useState10[0],
+      setShowVotes = _useState10[1];
 
   var isCutomPage = function isCutomPage(article) {
     var url = article.url.current;
@@ -462,7 +472,6 @@ var Article = function Article(props) {
           setContextualADFlag(true);
         }
       };
-
       return React__default.createElement(
         React__default.Fragment,
         null,
@@ -492,7 +501,15 @@ var Article = function Article(props) {
     } else if (indexes.length >= 2 && body.length > 3 && payload.contextualAD && !payload.contextualVideoAD) {
       payload = _extends._extends({}, payload, {
         contextualAD: _extends._extends({}, payload.contextualAD, {
-          slotId: (payload.contextualAD.slotId || 'native-ad') + '-' + payload._id
+          slotId: (payload.contextualAD.slotId || 'native-ad') + '-' + payload._id,
+          //  Fetching new contextual targeting based on the current active article.
+          targeting: props.getTargeting(props.article, 'native-ad'),
+          // Adding new ad size for large contextual ad for desktop screen width >= 1400
+          sizes: lgContextAd ? [[728, 90], 'fluid', [300, 100]] : ['fluid', [300, 100]],
+          sizeMapping: lgContextAd ? [{
+            viewport: [1400, 0],
+            sizes: [[728, 90], 'fluid', [300, 100]]
+          }, { viewport: [0, 0], sizes: ['fluid', [300, 100]] }] : ['fluid', [300, 100]]
         })
       });
       var _selectedIndex = indexes[1] + 1;
@@ -520,7 +537,7 @@ var Article = function Article(props) {
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
         contextualADFlag && React__default.createElement('span', { className: 'clearfix' }),
-        React__default.createElement(
+        (visibleFlag || queueData && queueData.length === 1) && React__default.createElement(
           'div',
           { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
           React__default.createElement(AdSlot, _extends._extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound }))
@@ -625,6 +642,8 @@ var Article = function Article(props) {
           onChange: function onChange(visible) {
             if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
               onChangeArticle(url, visible, meta);
+              //  Setting 'visibleFlag' to know that the article is visible.
+              setVisibleFlag(true);
             }
           } },
         React__default.createElement(
@@ -1030,7 +1049,16 @@ var ArticleQueue = function ArticleQueue(props) {
       if (!checkSponseredArticle(article) && Ads.getNativeContextualAD) {
         article.contextualAD = Ads.getNativeContextualAD(getTargeting.getTargeting(props));
       }
-      return React__default.createElement(Article, _extends._extends({ key: index }, props, { onChangeArticle: onChangeArticle, authorPrfix: authorPrefix, article: article, cpModificationRequired: cpModificationRequired }));
+      return React__default.createElement(Article, _extends._extends({
+        key: index
+      }, props, {
+        onChangeArticle: onChangeArticle,
+        authorPrfix: authorPrefix,
+        article: article,
+        cpModificationRequired: cpModificationRequired
+        // Passing queueData to check for single article
+        , queueData: queueData
+      }));
     })
   );
 };

package/dist/cjs/getSerializers.js

@@ -2018,7 +2018,7 @@ var Sidebar = function Sidebar(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .sidebar {\n          clear: both;\n          float: right;\n          background-color: #eee;\n          width: 40%;\n          padding: 1rem;\n          margin: 0 0 1rem 1rem;\n        }\n        @media screen and (max-width: 991px) {\n          .sidebar {\n            float: none;\n            width: auto;\n            margin: 1rem 0;\n          }\n        }\n      '
+      '\n        .sidebar {\n          clear: both;\n          float: right;\n          background-color: #eee;\n          width: 40%;\n          padding: 1rem;\n          margin: 0 0 1rem 1rem;\n        }\n        // resolving list items inside sidebar being shifted to center because of unusual margin\n        .sidebar ul {\n          margin-left: 0;\n          padding-left: 2rem;\n        }\n        @media screen and (max-width: 991px) {\n          .sidebar {\n            float: none;\n            width: auto;\n            margin: 1rem 0;\n          }\n        }\n      '
     )
   );
 };

package/dist/esm/ArticleQueue.js

@@ -155,6 +155,13 @@ var Article = function Article(props) {
       _useState2 = _slicedToArray(_useState, 2),
       contextualADFlag = _useState2[0],
       setContextualADFlag = _useState2[1];
+  //  Setting new Flag 'visibleFlag' to know when the article is visible so that new contextual ad can be appended into DOM.
+
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visibleFlag = _useState4[0],
+      setVisibleFlag = _useState4[1];
 
   var summary = getArticleSummary(props.article);
 
@@ -318,6 +325,8 @@ var Article = function Article(props) {
         contextualAD: _extends({}, payload.contextualAD, {
           slotId: (payload.contextualAD.slotId || 'contextual_ad') + '-' + payload._id,
           className: 'ADFluid',
+          //  Fetching new contextual targeting based on the current active article.
+          targeting: props.getTargeting(props.article, 'native-ad'),
           // Adding new ad size for large contextual ad for desktop screen width >= 1400
           sizes: lgContextAd ? [[728, 90], 'fluid', [300, 100]] : ['fluid', [300, 100]],
           sizeMapping: lgContextAd ? [{
@@ -363,7 +372,7 @@ var Article = function Article(props) {
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
         contextualADFlag && React__default.createElement('span', { className: 'clearfix' }),
-        React__default.createElement(
+        (visibleFlag || queueData && queueData.length === 1) && React__default.createElement(
           'div',
           { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
           React__default.createElement(DFPAdSlot, _extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound }))
@@ -461,6 +470,8 @@ var Article = function Article(props) {
         onChange: function onChange(visible) {
           if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
             onChangeArticle(url, visible, meta);
+            //  Setting 'visibleFlag' to know that the article is visible.
+            setVisibleFlag(true);
           }
         } },
       React__default.createElement(
@@ -728,10 +739,10 @@ var ArticleQueue = function ArticleQueue(props) {
     return article;
   };
 
-  var _useState3 = useState([firstArticle()]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      queueData = _useState4[0],
-      setQueueData = _useState4[1];
+  var _useState5 = useState([firstArticle()]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      queueData = _useState6[0],
+      setQueueData = _useState6[1];
 
   var refreshAD = function refreshAD(path) {
     if (!main_36) {
@@ -872,6 +883,8 @@ var ArticleQueue = function ArticleQueue(props) {
         article: article,
         cpModificationRequired: cpModificationRequired,
         queueData: queueData
+        // Passing 'getTargeting' so that contextual AD can fetch target based on current active article.
+        , getTargeting: getTargeting
       }));
     })
   );

package/dist/esm/View.js

@@ -296,30 +296,40 @@ var Article = function Article(props) {
       ISIContent = props.ISIContent,
       shareOptions = props.shareOptions,
       cpModificationRequired = props.cpModificationRequired,
-      authorPrefix = props.authorPrefix;
+      authorPrefix = props.authorPrefix,
+      _props$lgContextAd = props.lgContextAd,
+      lgContextAd = _props$lgContextAd === undefined ? false : _props$lgContextAd,
+      queueData = props.queueData;
   var onChangeArticle = props.onChangeArticle;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       contextualADFlag = _useState2[0],
       setContextualADFlag = _useState2[1];
+  //  Setting new Flag 'visibleFlag' to know when the article is visible so that new contextual ad can be appended into DOM.
 
-  var summary = getArticleSummary(props.article);
 
-  var _useState3 = useState(1),
+  var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      auth = _useState4[0],
-      setAuth = _useState4[1];
+      visibleFlag = _useState4[0],
+      setVisibleFlag = _useState4[1];
+
+  var summary = getArticleSummary(props.article);
 
-  var _useState5 = useState(''),
+  var _useState5 = useState(1),
       _useState6 = _slicedToArray(_useState5, 2),
-      passwordKey = _useState6[0],
-      setPasswordKey = _useState6[1];
+      auth = _useState6[0],
+      setAuth = _useState6[1];
 
-  var _useState7 = useState(false),
+  var _useState7 = useState(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      showVotes = _useState8[0],
-      setShowVotes = _useState8[1];
+      passwordKey = _useState8[0],
+      setPasswordKey = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      showVotes = _useState10[0],
+      setShowVotes = _useState10[1];
 
   var isCutomPage = function isCutomPage(article) {
     var url = article.url.current;
@@ -457,7 +467,6 @@ var Article = function Article(props) {
           setContextualADFlag(true);
         }
       };
-
       return React__default.createElement(
         React__default.Fragment,
         null,
@@ -487,7 +496,15 @@ var Article = function Article(props) {
     } else if (indexes.length >= 2 && body.length > 3 && payload.contextualAD && !payload.contextualVideoAD) {
       payload = _extends({}, payload, {
         contextualAD: _extends({}, payload.contextualAD, {
-          slotId: (payload.contextualAD.slotId || 'native-ad') + '-' + payload._id
+          slotId: (payload.contextualAD.slotId || 'native-ad') + '-' + payload._id,
+          //  Fetching new contextual targeting based on the current active article.
+          targeting: props.getTargeting(props.article, 'native-ad'),
+          // Adding new ad size for large contextual ad for desktop screen width >= 1400
+          sizes: lgContextAd ? [[728, 90], 'fluid', [300, 100]] : ['fluid', [300, 100]],
+          sizeMapping: lgContextAd ? [{
+            viewport: [1400, 0],
+            sizes: [[728, 90], 'fluid', [300, 100]]
+          }, { viewport: [0, 0], sizes: ['fluid', [300, 100]] }] : ['fluid', [300, 100]]
         })
       });
       var _selectedIndex = indexes[1] + 1;
@@ -515,7 +532,7 @@ var Article = function Article(props) {
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
         contextualADFlag && React__default.createElement('span', { className: 'clearfix' }),
-        React__default.createElement(
+        (visibleFlag || queueData && queueData.length === 1) && React__default.createElement(
           'div',
           { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
           React__default.createElement(DFPAdSlot, _extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound }))
@@ -620,6 +637,8 @@ var Article = function Article(props) {
           onChange: function onChange(visible) {
             if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
               onChangeArticle(url, visible, meta);
+              //  Setting 'visibleFlag' to know that the article is visible.
+              setVisibleFlag(true);
             }
           } },
         React__default.createElement(
@@ -1025,7 +1044,16 @@ var ArticleQueue = function ArticleQueue(props) {
       if (!checkSponseredArticle(article) && Ads.getNativeContextualAD) {
         article.contextualAD = Ads.getNativeContextualAD(getTargeting(props));
       }
-      return React__default.createElement(Article, _extends({ key: index }, props, { onChangeArticle: onChangeArticle, authorPrfix: authorPrefix, article: article, cpModificationRequired: cpModificationRequired }));
+      return React__default.createElement(Article, _extends({
+        key: index
+      }, props, {
+        onChangeArticle: onChangeArticle,
+        authorPrfix: authorPrefix,
+        article: article,
+        cpModificationRequired: cpModificationRequired
+        // Passing queueData to check for single article
+        , queueData: queueData
+      }));
     })
   );
 };

package/dist/esm/getSerializers.js

@@ -2012,7 +2012,7 @@ var Sidebar = function Sidebar(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .sidebar {\n          clear: both;\n          float: right;\n          background-color: #eee;\n          width: 40%;\n          padding: 1rem;\n          margin: 0 0 1rem 1rem;\n        }\n        @media screen and (max-width: 991px) {\n          .sidebar {\n            float: none;\n            width: auto;\n            margin: 1rem 0;\n          }\n        }\n      '
+      '\n        .sidebar {\n          clear: both;\n          float: right;\n          background-color: #eee;\n          width: 40%;\n          padding: 1rem;\n          margin: 0 0 1rem 1rem;\n        }\n        // resolving list items inside sidebar being shifted to center because of unusual margin\n        .sidebar ul {\n          margin-left: 0;\n          padding-left: 2rem;\n        }\n        @media screen and (max-width: 991px) {\n          .sidebar {\n            float: none;\n            width: auto;\n            margin: 1rem 0;\n          }\n        }\n      '
     )
   );
 };

package/package.json

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