@mjhls/mjh-framework 1.0.221 → 1.0.222

package/dist/cjs/index.js

@@ -24,9 +24,10 @@ require('./index-0d0efcfa.js');
 var main = require('./main-58839f4e.js');
 var entities = require('./entities-3e0b4a16.js');
 var _babelHelpers = require('./_babelHelpers-f321c258.js');
+var AdSlot = require('./AdSlot-d87cef08.js');
 var DeckContent = require('./DeckContent.js');
 require('./get-126b1712.js');
-var GridContent = require('./GridContent-089aa22c.js');
+var GridContent = require('./GridContent-1575c8db.js');
 var DeckQueue = require('./DeckQueue.js');
 require('react-bootstrap/Media');
 var ThumbnailCard = require('./ThumbnailCard.js');
@@ -43,7 +44,7 @@ var PublicationDeck = require('./PublicationDeck.js');
 var IssueDeck = require('./IssueDeck.js');
 require('react-bootstrap/Badge');
 var IssueContentDeck = require('./IssueContentDeck.js');
-var TemplateNormal = require('./Normal-47d9e184.js');
+var TemplateNormal = require('./Normal-2886d08f.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -202,7 +203,7 @@ var AD300x250 = function AD300x250(_ref) {
       _ref$targeting = _ref.targeting,
       targeting = _ref$targeting === undefined ? {} : _ref$targeting;
 
-  return React__default.createElement(TemplateNormal.DFPAdSlot, {
+  return React__default.createElement(AdSlot.DFPAdSlot, {
     networkID: networkID,
     adUnit: adUnit,
     slotId: slotId,
@@ -219,7 +220,7 @@ var AD300x250x600 = function AD300x250x600(_ref) {
       _ref$targeting = _ref.targeting,
       targeting = _ref$targeting === undefined ? {} : _ref$targeting;
 
-  return React__default.createElement(TemplateNormal.DFPAdSlot, {
+  return React__default.createElement(AdSlot.DFPAdSlot, {
     networkID: networkID,
     adUnit: adUnit,
     className: 'AD300x250',
@@ -10491,7 +10492,7 @@ var NativeAd = function NativeAd(props) {
   return React__default.createElement(
     'div',
     { className: 'native-ad-wrapper', style: { textAlign: 'center' } },
-    React__default.createElement(GridContent.AD, { networkID: networkID, adUnit: adUnit, slotId: slotId, targeting: targeting, className: className, sizes: sizes, sizeMapping: sizeMapping })
+    React__default.createElement(AdSlot.DFPAdSlot, { networkID: networkID, adUnit: adUnit, slotId: slotId, targeting: targeting, className: className, sizes: sizes, sizeMapping: sizeMapping })
   );
 };
 
@@ -12235,84 +12236,97 @@ var Article = function Article(props) {
 
   var siteName = props.website.title;
   return React__default.createElement(
-    InscreenSensor,
-    {
-      offSetTop: 45,
-      onChange: function onChange(visible) {
-        if (visible !== false) {
-          changeUrl(url, visible);
-        }
-      } },
+    React__default.Fragment,
+    null,
     React__default.createElement(
-      'div',
-      null,
-      React__default.createElement(
-        Head,
-        null,
-        passwordLock && React__default.createElement('meta', { name: 'robots', content: 'noindex, nofollow' })
-      ),
-      React__default.createElement(
-        'h1',
-        { className: 'page-title' },
-        title
-      ),
+      InscreenSensor,
+      {
+        offSetTop: 45,
+        onChange: function onChange(visible) {
+          if (visible !== false) {
+            changeUrl(url, visible);
+          }
+        } },
       React__default.createElement(
         'div',
-        { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) ? '150px' : 0 } },
+        null,
         React__default.createElement(
-          'div',
+          Head,
           null,
-          visibilitySensor.moment(published).format('LL')
+          passwordLock && React__default.createElement('meta', { name: 'robots', content: 'noindex, nofollow' })
         ),
         React__default.createElement(
-          'div',
-          { className: 'mb-3' },
-          authorDetails && authorDetails.map(function (authorDetail, index) {
-            return React__default.createElement(
-              'div',
-              { key: index },
-              renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length)
-            );
-          })
+          'h1',
+          { className: 'page-title' },
+          title
         ),
         React__default.createElement(
-          'p',
-          null,
-          React__default.createElement(SocialShare$1, {
-            shareUrl: shareUrl,
-            shareTitle: shareTitle,
-            shareVia: shareVia,
-            shareSummary: shareSummary,
-            shareSubject: shareSubject,
-            shareImage: shareImage,
-            size: 32,
-            siteName: siteName,
-            twitterSiteName: twitterSiteName
-          })
-        ),
-        React__default.createElement(
-          'p',
-          null,
+          'div',
+          { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) ? '150px' : 0 } },
+          React__default.createElement(
+            'div',
+            null,
+            visibilitySensor.moment(published).format('LL')
+          ),
           React__default.createElement(
-            'em',
+            'div',
+            { className: 'mb-3' },
+            authorDetails && authorDetails.map(function (authorDetail, index) {
+              return React__default.createElement(
+                'div',
+                { key: index },
+                renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length)
+              );
+            })
+          ),
+          React__default.createElement(
+            'p',
             null,
-            summary
+            React__default.createElement(SocialShare$1, {
+              shareUrl: shareUrl,
+              shareTitle: shareTitle,
+              shareVia: shareVia,
+              shareSummary: shareSummary,
+              shareSubject: shareSubject,
+              shareImage: shareImage,
+              size: 32,
+              siteName: siteName,
+              twitterSiteName: twitterSiteName
+            })
           ),
-          React__default.createElement('br', null),
-          React__default.createElement('br', null)
+          React__default.createElement(
+            'p',
+            null,
+            React__default.createElement(
+              'em',
+              null,
+              summary
+            ),
+            React__default.createElement('br', null),
+            React__default.createElement('br', null)
+          ),
+          React__default.createElement(
+            'div',
+            { className: 'block-content' },
+            React__default.createElement(TaxonomyCard.BlockContent, _babelHelpers._extends({
+              serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true),
+              blocks: articleBody,
+              imageOptions: { w: 320, h: 240, fit: 'max' }
+            }, client.config()))
+          )
         ),
-        React__default.createElement(
-          'div',
-          { className: 'block-content' },
-          React__default.createElement(TaxonomyCard.BlockContent, _babelHelpers._extends({
-            serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true),
-            blocks: articleBody,
-            imageOptions: { w: 320, h: 240, fit: 'max' }
-          }, client.config()))
-        )
-      ),
-      renderIsiContent(props.article)
-    )
+        renderIsiContent(props.article)
+      )
+    ),
+    sMobileOnly && React__default.createElement('hr', { className: 'add-seperater' }),
+    main.main_36 && props.article.Ads.map(function (ad, index) {
+      return React__default.createElement(
+        'div',
+        { key: index, id: 'addid-' + index, style: { display: 'flex', flex: '1 0 auto' } },
+        ad.component
+      );
+    }),
+    React__default.createElement('hr', { className: 'article-seperater' })
   );
 };
 
@@ -12336,6 +12350,8 @@ var ArticleQueue = function (_React$Component) {
 
     var targeting = _this.getTargeting(_this.props.article);
     var metaDescription = description ? description : summary ? summary : _this.getFirstLine(_this.props.article);
+    var article = _this.props.article;
+    article.Ads = _this.props.Ads.getRightItems(targeting);
 
     _this.state = {
       config: {
@@ -12349,7 +12365,7 @@ var ArticleQueue = function (_React$Component) {
       },
       title: _this.props.article.title,
       summary: metaDescription,
-      queueData: [_this.props.article],
+      queueData: [article],
       relatedArticles: [],
       keywords: []
     }, _this.preVscroll = 0;
@@ -12366,9 +12382,14 @@ var ArticleQueue = function (_React$Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate(prevProps) {
-      if (prevProps.relatedArticles != this.props.relatedArticles) {
-        var relatedArticles = this.props.relatedArticles;
+      var _this2 = this;
 
+      if (prevProps.relatedArticles != this.props.relatedArticles) {
+        var relatedArticles = this.props.relatedArticles.map(function (article) {
+          var targeting = _this2.getTargeting(_this2.props.article);
+          var Ads = _this2.props.Ads.getRightItems(targeting);
+          return _babelHelpers._extends({}, article, { Ads: Ads });
+        });
         var queueData = [].concat(_babelHelpers.toConsumableArray(this.state.queueData));
         if (prevProps.relatedArticles.length == 0) {
           queueData.push(relatedArticles.shift());
@@ -12387,7 +12408,7 @@ var ArticleQueue = function (_React$Component) {
   }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _state = this.state,
           config = _state.config,
@@ -12403,19 +12424,19 @@ var ArticleQueue = function (_React$Component) {
 
       return React__default.createElement(
         TemplateNormal.TemplateNormal,
-        { config: config, website: website, keywords: keywords, description: summary, title: title, showRightAd: true },
+        { config: config, website: website, keywords: keywords, description: summary, title: title, showRightAd: !main.main_36 },
         React__default.createElement(
           visibilitySensor.InfiniteScroll,
           { dataLength: queueData.length, next: this.loadmore, scrollThreshold: '200px', hasMore: true },
           queueData.map(function (article, index) {
             return React__default.createElement(Article, _babelHelpers._extends({
               key: index,
-              urlFor: _this2.urlFor,
-              isCutomPage: _this2.isCutomPage,
-              renderIsiContent: _this2.renderIsiContent
-            }, _this2.props, {
+              urlFor: _this3.urlFor,
+              isCutomPage: _this3.isCutomPage,
+              renderIsiContent: _this3.renderIsiContent
+            }, _this3.props, {
               shareOptions: shareOptions,
-              changeUrl: _this2.changeUrl,
+              changeUrl: _this3.changeUrl,
               article: article
             }));
           })
@@ -12427,37 +12448,37 @@ var ArticleQueue = function (_React$Component) {
 }(React__default.Component);
 
 var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
+  var _this4 = this;
 
   this.scrollDirectionDetect = function (e) {
     var window = e.currentTarget;
-    var isScrollDown = _this3.isScrollDown;
+    var isScrollDown = _this4.isScrollDown;
 
 
-    if (_this3.preVscroll > window.scrollY) {
+    if (_this4.preVscroll > window.scrollY) {
       if (!isScrollDown) {
-        _this3.isScrollDown = true;
+        _this4.isScrollDown = true;
       }
-    } else if (_this3.preVscroll < window.scrollY) {
+    } else if (_this4.preVscroll < window.scrollY) {
       if (isScrollDown) {
-        _this3.isScrollDown = false;
+        _this4.isScrollDown = false;
       }
     }
-    _this3.preVscroll = window.scrollY;
+    _this4.preVscroll = window.scrollY;
   };
 
   this.loadmore = function () {
-    var queueData = [].concat(_babelHelpers.toConsumableArray(_this3.state.queueData));
-    var relatedArticles = [].concat(_babelHelpers.toConsumableArray(_this3.state.relatedArticles));
+    var queueData = [].concat(_babelHelpers.toConsumableArray(_this4.state.queueData));
+    var relatedArticles = [].concat(_babelHelpers.toConsumableArray(_this4.state.relatedArticles));
     if (relatedArticles.length > 0) {
       queueData.push(relatedArticles.shift());
-      _this3.setState({ queueData: queueData, relatedArticles: relatedArticles });
+      _this4.setState({ queueData: queueData, relatedArticles: relatedArticles });
     }
   };
 
   this.isCutomPage = function (article) {
     var url = article.url.current;
-    var _props2 = _this3.props,
+    var _props2 = _this4.props,
         regionalPages = _props2.regionalPages,
         nationalPage = _props2.nationalPage;
 
@@ -12465,7 +12486,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.urlFor = function (source) {
-    return index$1.imageUrlBuilder(_this3.props.client).image(source);
+    return index$1.imageUrlBuilder(_this4.props.client).image(source);
   };
 
   this.getTargeting = function (article) {
@@ -12490,7 +12511,7 @@ var _initialiseProps = function _initialiseProps() {
         content_placement = article.content_placement;
 
     var context = url;
-    var localHistory = _this3.props.historyCookie ? JSON.parse(_this3.props.historyCookie) : [];
+    var localHistory = _this4.props.historyCookie ? JSON.parse(_this4.props.historyCookie) : [];
     if (!context && localHistory) {
       context = localHistory[localHistory.length - 1];
     }
@@ -12529,7 +12550,7 @@ var _initialiseProps = function _initialiseProps() {
     var _article$taxonomyMapp = article.taxonomyMapping,
         taxonomyMapping = _article$taxonomyMapp === undefined ? [] : _article$taxonomyMapp;
 
-    if (_this3.props.checkSponsered) {
+    if (_this4.props.checkSponsered) {
 
       return taxonomyMapping.some(function (item) {
         return item._ref === 'ict_taxonomy_735_sponsoredresources';
@@ -12541,7 +12562,7 @@ var _initialiseProps = function _initialiseProps() {
 
   this.renderIsiContent = function (article) {
     var url = article.url.current;
-    var _props3 = _this3.props,
+    var _props3 = _this4.props,
         ISIContent = _props3.iSIContent,
         regionalPages = _props3.regionalPages,
         nationalPage = _props3.nationalPage;
@@ -12575,7 +12596,7 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.refreshAdd = function (path) {
-    var article = _this3.state.queueData.find(function (item) {
+    var article = _this4.state.queueData.find(function (item) {
       return item.url.current == path;
     });
     var title = article.title,
@@ -12595,52 +12616,53 @@ var _initialiseProps = function _initialiseProps() {
     var description = _article$seo.meta_description;
 
     var keywords = [].concat(_babelHelpers.toConsumableArray(internalTag), _babelHelpers.toConsumableArray(userDefinedTag), _babelHelpers.toConsumableArray(SponsorshipTag), _babelHelpers.toConsumableArray(seoTag));
-    var config = _babelHelpers._extends({}, _this3.state.config);
-    var targeting = _this3.getTargeting(article);
+    var config = _babelHelpers._extends({}, _this4.state.config);
+    var targeting = _this4.getTargeting(article);
     var rightItems = [];
 
-    if (_this3.checkSponseredArticle(article)) {
+    if (_this4.checkSponseredArticle(article)) {
       rightItems = [];
     } else {
-      rightItems = _this3.props.Ads.getRightItems(targeting);
+      rightItems = _this4.props.Ads.getRightItems(targeting);
     }
-    var horizontalAD = _this3.props.Ads.getHorizontal(targeting);
+    var horizontalAD = _this4.props.Ads.getHorizontal(targeting);
     config.rightItems = rightItems;
     config.horizontalAD = horizontalAD;
-    var metaDescription = description ? description : summary ? summary : _this3.getFirstLine(article);
-    _this3.setState({ config: config, title: title, summary: metaDescription }, function () {
+    var metaDescription = description ? description : summary ? summary : _this4.getFirstLine(article);
+    _this4.setState({ config: config, title: title, summary: metaDescription }, function () {
       index.lib_3.refresh();
     });
   };
 
   this.changeUrl = function (path, visibility) {
-    var isScrollDown = _this3.isScrollDown;
+    var isScrollDown = _this4.isScrollDown;
 
     var newPath = '/view/' + path;
     if (!isScrollDown) {
       if (visibility == 'top') {
         // Router.push('/view/[url]', newPath, {shallow:true})
         window.history.pushState({ page: path }, path, newPath);
-        if (_this3.props.pageview) {
-          _this3.props.pageview(newPath);
+        if (_this4.props.pageview) {
+          _this4.props.pageview(newPath);
         }
 
-        _this3.refreshAdd(path);
+        _this4.refreshAdd(path);
       }
     } else {
       if (visibility == 'bottom') {
         // Router.push('/view/[url]', newPath, {shallow:true})
         window.history.pushState({ page: path }, path, newPath);
-        if (_this3.props.pageview) {
-          _this3.props.pageview(newPath);
+        if (_this4.props.pageview) {
+          _this4.props.pageview(newPath);
         }
 
-        _this3.refreshAdd(path);
+        _this4.refreshAdd(path);
       }
     }
   };
 };
 
+exports.AdSlot = AdSlot.DFPAdSlot;
 exports.DeckContent = DeckContent;
 exports.AD = GridContent.AD;
 exports.GridContent = GridContent.GridContent;
@@ -12656,7 +12678,6 @@ exports.PublicationDeck = PublicationDeck;
 exports.IssueDeck = IssueDeck;
 exports.IssueContentDeck = IssueContentDeck;
 exports.AD728x90 = TemplateNormal.AD728x90;
-exports.AdSlot = TemplateNormal.DFPAdSlot;
 exports.Column1 = TemplateNormal.Column1;
 exports.Column2 = TemplateNormal.Column2;
 exports.Column3 = TemplateNormal.Column3;

package/dist/esm/AdSlot-b67f8534.js

@@ -0,0 +1,64 @@
+import React__default, { useState } from 'react';
+import { b as lib_2 } from './index-6a79dad6.js';
+import PropTypes from 'prop-types';
+import { d as debounce_1 } from './debounce-dc0c02e5.js';
+import { s as slicedToArray } from './_babelHelpers-67c05996.js';
+
+var DFPAdSlot = function DFPAdSlot(_ref) {
+  var adUnit = _ref.adUnit,
+      sizeMapping = _ref.sizeMapping,
+      className = _ref.className,
+      slotId = _ref.slotId,
+      sizes = _ref.sizes,
+      _ref$targeting = _ref.targeting,
+      targeting = _ref$targeting === undefined ? {} : _ref$targeting;
+
+  var _useState = useState(false),
+      _useState2 = slicedToArray(_useState, 2),
+      adRendered = _useState2[0],
+      setAdRendered = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = slicedToArray(_useState3, 2),
+      adRefreshable = _useState4[0],
+      setAdRefreshable = _useState4[1];
+
+  var handleVisibilityChange = debounce_1(function (_ref2) {
+    var event = _ref2.event;
+
+    if (event.inViewPercentage <= 0) {
+      setAdRefreshable(false);
+    } else {
+      setAdRefreshable(true);
+    }
+  }, 500);
+
+  return React__default.createElement(
+    'div',
+    { className: className },
+    React__default.createElement(lib_2, {
+      slotId: slotId,
+      sizes: sizes,
+      adUnit: adUnit,
+      sizeMapping: sizeMapping,
+      targetingArguments: targeting,
+      onSlotRender: function onSlotRender(eventData) {
+        setAdRendered(true);
+      },
+      onSlotVisibilityChanged: handleVisibilityChange,
+      shouldRefresh: function shouldRefresh() {
+        if (adRendered && adRefreshable) return true;else return false;
+      }
+    })
+  );
+};
+
+DFPAdSlot.propTypes = {
+  adUnit: PropTypes.string.isRequired,
+  slotId: PropTypes.string,
+  className: PropTypes.string,
+  sizeMapping: PropTypes.array,
+  sizes: PropTypes.array
+};
+
+export { DFPAdSlot as D };