@mjhls/mjh-framework 1.0.214 → 1.0.215

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.214
+# mjh-framework v. 1.0.215
 
 
 

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ require('react-bootstrap/Row');
 require('react-bootstrap/Col');
 require('react-bootstrap/Card');
 var visibilitySensor = require('./visibility-sensor-bea3105d.js');
-require('next/link');
+var Link = _interopDefault(require('next/link'));
 var Router = require('next/router');
 var Router__default = _interopDefault(Router);
 require('./debounce-a963b136.js');
@@ -11618,7 +11618,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
           ),
           React__default.createElement(
             'p',
-            null,
+            { className: 'top-article-summary' },
             entities.clean_html_1(topArticle.summary)
           )
         )
@@ -11763,7 +11763,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-hero-container {\n          margin: 0 -0.8rem;\n        }\n        @media screen and (min-width: 1400px) {\n          .article-hero-container {\n            display: flex;\n            flex-direction: row;\n          }\n        }\n        .top-article {\n          // width: 50%;\n          margin: 0 1rem;\n          height: 100%;\n          display: block;\n        }\n        .top-article figure {\n          width: 100%;\n          height: 60%;\n        }\n        .top-article figure img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .top-article--body h1 {\n          font-size: 1.4rem;\n          color: black !important;\n          font-weight: bold;\n        }\n        // .sub-articles-container {\n        //   width: 50%;\n        //   flex: 1 1 auto;\n        //   min-width: 350px;\n        // }\n        .sub-article {\n          margin: 0 1rem 1rem;\n          display: flex;\n          flex-direction: row;\n        }\n        .sub-article figure {\n          width: 125px;\n        }\n        .sub-article figure img {\n          width: 125px;\n          height: auto;\n          object-fit: cover;\n        }\n        .sub-article--body {\n          padding-left: 1rem;\n          font-size: 0.9rem;\n        }\n        .sub-article--body h2 {\n          font-size: 1rem;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 1368px) {\n          .article-hero-container {\n            flex-direction: column;\n          }\n          .top-article {\n            // width: unset;\n            flex: 1 1 auto;\n          }\n          .sub-articles-container {\n            width: 100%;\n            margin-top: 1rem;\n            min-width: 280px;\n          }\n        }\n        @media screen and (max-width: 1399px) and (min-width: 992px) {\n          .top-article {\n            // width: 50%;\n            flex: 1 1 auto;\n            margin-bottom: 1rem;\n          }\n          .middle-group {\n            display: none;\n          }\n          .middle-single {\n            display: block !important;\n            margin-top: 0 !important;\n          }\n          .top-article figure img {\n            max-height: 180px !important;\n          }\n        }\n        // @media only screen and (min-width) {\n        //   .sub-outer-container {\n        //     width: 50%;\n        //     flex: 1 1 auto;\n        //     min-width: 350px;\n        //   }\n        // }\n        .middle-single {\n          display: none;\n        }\n        .top-outer {\n          display: flex;\n        }\n      '
+      '\n        .article-hero-container {\n          margin: 0 -0.8rem;\n        }\n        @media screen and (min-width: 1400px) {\n          .article-hero-container {\n            display: flex;\n            flex-direction: row;\n          }\n        }\n        .top-article {\n          // width: 50%;\n          margin: 0 1rem;\n          height: 100%;\n          display: block;\n        }\n        .top-article figure {\n          width: 100%;\n          height: 60%;\n        }\n        .top-article figure img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .top-article--body h1 {\n          font-size: 1.4rem;\n          color: black !important;\n          font-weight: bold;\n        }\n        // .sub-articles-container {\n        //   width: 50%;\n        //   flex: 1 1 auto;\n        //   min-width: 350px;\n        // }\n        .sub-article {\n          margin: 0 1rem 1rem;\n          display: flex;\n          flex-direction: row;\n        }\n        .sub-article figure {\n          width: 125px;\n        }\n        .sub-article figure img {\n          width: 125px;\n          height: auto;\n          object-fit: cover;\n        }\n        .sub-article--body {\n          padding-left: 1rem;\n          font-size: 0.9rem;\n        }\n        .sub-article--body h2 {\n          font-size: 1rem;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 1368px) {\n          .article-hero-container {\n            flex-direction: column;\n          }\n          .top-article {\n            // width: unset;\n            flex: 1 1 auto;\n          }\n          .sub-articles-container {\n            width: 100%;\n            margin-top: 1rem;\n            min-width: 280px;\n          }\n        }\n        @media screen and (max-width: 1399px) and (min-width: 992px) {\n          .top-article {\n            // width: 50%;\n            flex: 1 1 auto;\n            margin-bottom: 1rem;\n          }\n          .middle-group {\n            display: none;\n          }\n          .middle-single {\n            display: block !important;\n            margin-top: 0 !important;\n          }\n          .top-article figure img {\n            max-height: 180px !important;\n          }\n          .top-article-summary {\n            display: none;\n          }\n        }\n        // @media only screen and (min-width) {\n        //   .sub-outer-container {\n        //     width: 50%;\n        //     flex: 1 1 auto;\n        //     min-width: 350px;\n        //   }\n        // }\n        .middle-single {\n          display: none;\n        }\n        .top-outer {\n          display: flex;\n        }\n      '
     )
   );
 };
@@ -12107,6 +12107,499 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
   );
 };
 
+var InscreenSensor = function (_React$Component) {
+    _babelHelpers.inherits(InscreenSensor, _React$Component);
+
+    function InscreenSensor(props) {
+        _babelHelpers.classCallCheck(this, InscreenSensor);
+
+        var _this = _babelHelpers.possibleConstructorReturn(this, (InscreenSensor.__proto__ || Object.getPrototypeOf(InscreenSensor)).call(this, props));
+
+        _this.scrollHandler = function () {
+            // this.checkInside()
+
+            var visible = _this.checkInside();
+            if (visible != _this.visible) {
+                _this.visible = visible;
+                _this.props.onChange(visible);
+            }
+        };
+
+        _this.checkInside = function () {
+            var rect = _this.wraperRef.current.getBoundingClientRect();
+            var _this$props$offSetTop = _this.props.offSetTop,
+                offSetTop = _this$props$offSetTop === undefined ? 0 : _this$props$offSetTop;
+            var top = rect.top,
+                height = rect.height;
+
+            var bottom = top + height;
+            var viewHeight = window.innerHeight;
+            if (bottom < offSetTop) {
+                return false;
+            } else if (top > offSetTop && bottom <= viewHeight) {
+                return true;
+            } else if (top > offSetTop && top <= viewHeight && bottom > viewHeight) {
+                return 'top';
+            } else if (bottom <= viewHeight) {
+                return 'bottom';
+            } else {
+                return false;
+            }
+        };
+
+        _this.wraperRef = React__default.createRef();
+        _this.visible = false;
+        return _this;
+    }
+
+    _babelHelpers.createClass(InscreenSensor, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.visible = this.checkInside();
+            this.props.onChange(this.visible);
+            window.addEventListener('scroll', this.scrollHandler);
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            window.removeEventListener('scroll', this.scrollHandler);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                _props$className = _props.className,
+                className = _props$className === undefined ? '' : _props$className,
+                _props$style = _props.style,
+                style = _props$style === undefined ? {} : _props$style;
+
+            return React__default.createElement(
+                'div',
+                { ref: this.wraperRef, className: className, style: style },
+                this.props.children
+            );
+        }
+    }]);
+    return InscreenSensor;
+}(React__default.Component);
+
+var renderAuthor = function renderAuthor(authorName, authorURL, index, length) {
+  if (authorName && authorURL) return React__default.createElement(
+    Link,
+    { href: '/authors/' + authorURL.current, key: index },
+    React__default.createElement(
+      'a',
+      null,
+      authorName,
+      length !== index + 1 && React__default.createElement('br', null)
+    )
+  );else if (authorName) {
+    return React__default.createElement(
+      'span',
+      { key: index },
+      authorName,
+      length !== index + 1 && React__default.createElement('br', null)
+    );
+  }
+};
+
+var Article = function Article(props) {
+  var client = props.client,
+      pageview = props.pageview,
+      videoAccountIDs = props.videoAccountIDs,
+      _props$article = props.article,
+      title = _props$article.title,
+      passwordLock = _props$article.passwordLock,
+      authorDetails = _props$article.authorDetails,
+      published = _props$article.published,
+      articleBody = _props$article.body,
+      summary = _props$article.summary,
+      thumbnail = _props$article.thumbnail,
+      _props$article$url = _props$article.url;
+  _props$article$url = _props$article$url === undefined ? {
+    current: ''
+  } : _props$article$url;
+  var url = _props$article$url.current,
+      changeUrl = props.changeUrl,
+      isCutomPage = props.isCutomPage,
+      shareOptions = props.shareOptions,
+      renderIsiContent = props.renderIsiContent,
+      urlFor = props.urlFor;
+  var shareVia = shareOptions.shareVia,
+      shareSubject = shareOptions.shareSubject,
+      twitterSiteName = shareOptions.twitterSiteName,
+      shareImageDefault = shareOptions.shareImageDefault;
+
+  var shareUrl = shareOptions.shareBaseUrl + props.url;
+  var shareTitle = title;
+  var shareSummary = summary;
+  var shareImage = thumbnail && thumbnail.asset ? urlFor(thumbnail.asset).url() : shareImageDefault;
+
+  var siteName = props.website.title;
+  return React__default.createElement(
+    InscreenSensor,
+    {
+      offSetTop: 45,
+      onChange: function onChange(visible) {
+        if (visible !== false) {
+          changeUrl(url, visible);
+        }
+      } },
+    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
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) ? '150px' : 0 } },
+        React__default.createElement(
+          'div',
+          null,
+          visibilitySensor.moment(published).format('LL')
+        ),
+        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)
+            );
+          })
+        ),
+        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,
+          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()))
+        )
+      ),
+      renderIsiContent(props.article)
+    )
+  );
+};
+
+var ArticleQueue = function (_React$Component) {
+  _babelHelpers.inherits(ArticleQueue, _React$Component);
+
+  function ArticleQueue(props) {
+    _babelHelpers.classCallCheck(this, ArticleQueue);
+
+    var _this = _babelHelpers.possibleConstructorReturn(this, (ArticleQueue.__proto__ || Object.getPrototypeOf(ArticleQueue)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var _this$props$article$s = _this.props.article.seo;
+    _this$props$article$s = _this$props$article$s === undefined ? {
+      meta_description: null
+    } : _this$props$article$s;
+    var description = _this$props$article$s.meta_description;
+
+    var targeting = _this.getTargeting(_this.props.article);
+    _this.state = {
+      config: {
+        navComponent: _this.props.website.navigation,
+        navItems: _this.props.mainNavCache,
+        columns: '3',
+        leftItems: _this.props.subNavCache,
+        rightItems: _this.props.Ads.getRightItems(targeting),
+        horizontalAD: _this.props.Ads.getHorizontal(targeting),
+        isLiveSite: _this.props.isLiveSite
+      },
+      title: _this.props.article.title,
+      summary: description ? description : _this.props.article.summary,
+      queueData: [_this.props.article],
+      relatedArticles: [],
+      keywords: []
+    }, _this.preVscroll = 0;
+    _this.isScrollDown = true;
+
+    return _this;
+  }
+
+  _babelHelpers.createClass(ArticleQueue, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      window.addEventListener('scroll', this.scrollDirectionDetect);
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.relatedArticles != this.props.relatedArticles) {
+        var relatedArticles = this.props.relatedArticles;
+
+        var queueData = [].concat(_babelHelpers.toConsumableArray(this.state.queueData));
+        if (prevProps.relatedArticles.length == 0) {
+          queueData.push(relatedArticles.shift());
+          this.setState({ queueData: queueData });
+        }
+        this.setState({ relatedArticles: relatedArticles });
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('scroll', this.scrollDirectionDetect);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _state = this.state,
+          config = _state.config,
+          _state$keywords = _state.keywords,
+          keywords = _state$keywords === undefined ? [] : _state$keywords,
+          queueData = _state.queueData,
+          title = _state.title,
+          summary = _state.summary;
+      var _props = this.props,
+          website = _props.website,
+          shareOptions = _props.shareOptions;
+
+
+      return React__default.createElement(
+        TemplateNormal.TemplateNormal,
+        { config: config, website: website, keywords: keywords, description: summary, title: title, showRightAd: true },
+        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, {
+              shareOptions: shareOptions,
+              changeUrl: _this2.changeUrl,
+              article: article
+            }));
+          })
+        )
+      );
+    }
+  }]);
+  return ArticleQueue;
+}(React__default.Component);
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.scrollDirectionDetect = function (e) {
+    var window = e.currentTarget;
+    var isScrollDown = _this3.isScrollDown;
+
+
+    if (_this3.preVscroll > window.scrollY) {
+      if (!isScrollDown) {
+        _this3.isScrollDown = true;
+      }
+    } else if (_this3.preVscroll < window.scrollY) {
+      if (isScrollDown) {
+        _this3.isScrollDown = false;
+      }
+    }
+    _this3.preVscroll = window.scrollY;
+  };
+
+  this.loadmore = function () {
+    var queueData = [].concat(_babelHelpers.toConsumableArray(_this3.state.queueData));
+    var relatedArticles = [].concat(_babelHelpers.toConsumableArray(_this3.state.relatedArticles));
+    if (relatedArticles.length > 0) {
+      queueData.push(relatedArticles.shift());
+      _this3.setState({ queueData: queueData, relatedArticles: relatedArticles });
+    }
+  };
+
+  this.isCutomPage = function (article) {
+    var url = article.url.current;
+    var _props2 = _this3.props,
+        regionalPages = _props2.regionalPages,
+        nationalPage = _props2.nationalPage;
+
+    return regionalPages.includes(url) || nationalPage === url;
+  };
+
+  this.urlFor = function (source) {
+    return index$1.imageUrlBuilder(_this3.props.client).image(source);
+  };
+
+  this.getTargeting = function (article) {
+    var _article$internalTag = article.internalTag,
+        internalTag = _article$internalTag === undefined ? [] : _article$internalTag,
+        _article$userDefinedT = article.userDefinedTag,
+        userDefinedTag = _article$userDefinedT === undefined ? [] : _article$userDefinedT,
+        _article$SponsorshipT = article.SponsorshipTag,
+        SponsorshipTag = _article$SponsorshipT === undefined ? [] : _article$SponsorshipT,
+        _article$seoTag = article.seoTag,
+        seoTag = _article$seoTag === undefined ? [] : _article$seoTag,
+        _article$url = article.url;
+    _article$url = _article$url === undefined ? {
+      current: ''
+    } : _article$url;
+    var url = _article$url.current,
+        _article$documentGrou = article.documentGroup;
+    _article$documentGrou = _article$documentGrou === undefined ? {
+      path: ''
+    } : _article$documentGrou;
+    var document_group = _article$documentGrou.path,
+        content_placement = article.content_placement;
+
+    var context = url;
+    var localHistory = _this3.props.historyCookie ? JSON.parse(_this3.props.historyCookie) : [];
+    if (!context && localHistory) {
+      context = localHistory[localHistory.length - 1];
+    }
+    context = context && context.split('?')[0];
+    context = context && context.split('&')[0];
+    var content_placement_urls = [];
+    if (content_placement) {
+      if (content_placement.some(function (item) {
+        return context === item.path;
+      })) {
+        content_placement_urls = [context];
+      } else if (content_placement.some(function (item) {
+        return context === '/' + item.path;
+      })) {
+        content_placement_urls = [context.slice(1)];
+      } else {
+        content_placement_urls = content_placement.map(function (item) {
+          return item.path;
+        });
+      }
+    }
+    if (document_group.length > 0) {
+      content_placement_urls = [];
+    }
+    var keywords = [].concat(_babelHelpers.toConsumableArray(internalTag), _babelHelpers.toConsumableArray(userDefinedTag), _babelHelpers.toConsumableArray(SponsorshipTag), _babelHelpers.toConsumableArray(seoTag));
+    var targeting = {
+      tags: keywords,
+      document_group: [document_group],
+      document_url: [url],
+      content_placement: content_placement_urls
+    };
+    return targeting;
+  };
+
+  this.checkSponseredArticle = function (article) {
+    var _article$taxonomyMapp = article.taxonomyMapping,
+        taxonomyMapping = _article$taxonomyMapp === undefined ? [] : _article$taxonomyMapp;
+
+    if (_this3.props.checkSponsered) {
+
+      return taxonomyMapping.some(function (item) {
+        return item._ref === 'ict_taxonomy_735_sponsoredresources';
+      });
+    } else {
+      return false;
+    }
+  };
+
+  this.renderIsiContent = function (article) {
+    var url = article.url.current;
+    var _props3 = _this3.props,
+        ISIContent = _props3.iSIContent,
+        regionalPages = _props3.regionalPages,
+        nationalPage = _props3.nationalPage;
+
+    if (regionalPages.includes(url)) {
+      return React__default.createElement(ISIContent, null);
+    } else if (nationalPage === url) {
+      return React__default.createElement(ISIContent, { national: true });
+    }
+    return null;
+  };
+
+  this.refreshAdd = function (path) {
+    var article = _this3.state.queueData.find(function (item) {
+      return item.url.current == path;
+    });
+    var title = article.title,
+        summary = article.summary,
+        _article$seo = article.seo;
+    _article$seo = _article$seo === undefined ? {
+      meta_description: null
+    } : _article$seo;
+    var description = _article$seo.meta_description;
+
+    var config = _babelHelpers._extends({}, _this3.state.config);
+    var targeting = _this3.getTargeting(article);
+    var rightItems = [];
+
+    if (_this3.checkSponseredArticle(article)) {
+      rightItems = [];
+    } else {
+      rightItems = _this3.props.Ads.getRightItems(targeting);
+    }
+    var horizontalAD = _this3.props.Ads.getHorizontal(targeting);
+    config.rightItems = rightItems;
+    config.horizontalAD = horizontalAD;
+    _this3.setState({ config: config, title: title, summary: description ? description : summary }, function () {
+      index.lib_3.refresh();
+    });
+  };
+
+  this.changeUrl = function (path, visibility) {
+    var isScrollDown = _this3.isScrollDown;
+
+    if (!isScrollDown) {
+      if (visibility == 'top') {
+        window.history.pushState({ page: path }, path, '/view/' + path);
+        _this3.setState({ keywords: [1] });
+        _this3.refreshAdd(path);
+        // Router.push('/view/[url]', `/view/${path}`, {shallow:true})
+      }
+    } else {
+      if (visibility == 'bottom') {
+        window.history.pushState({ page: path }, path, '/view/' + path);
+        _this3.setState({ keywords: [1] });
+        _this3.refreshAdd(path);
+        // Router.push('/view/[url]', `/view/${path}`, {shallow:true})
+      }
+    }
+  };
+};
+
 exports.DeckContent = DeckContent;
 exports.AD = GridContent.AD;
 exports.GridContent = GridContent.GridContent;
@@ -12145,6 +12638,7 @@ exports.AccordionPanel = AccordionPanel;
 exports.AdSlotsProvider = AdSlotsProvider;
 exports.AlphabeticList = AlphabeticList;
 exports.ArticleDetailDropdown = ArticleDetailDropdown;
+exports.ArticleQueue = ArticleQueue;
 exports.Breadcrumbs = Breadcrumbs$1;
 exports.ConferenceArticleCard = ConferenceArticleCard;
 exports.Feature = Feature;

package/dist/esm/index.js

@@ -6,8 +6,8 @@ import 'react-bootstrap/Container';
 import 'react-bootstrap/Row';
 import 'react-bootstrap/Col';
 import 'react-bootstrap/Card';
-import { m as moment } from './visibility-sensor-675d3fa1.js';
-import 'next/link';
+import { m as moment, I as InfiniteScroll } from './visibility-sensor-675d3fa1.js';
+import Link from 'next/link';
 import Router, { useRouter } from 'next/router';
 import './debounce-dc0c02e5.js';
 import 'react-dom';
@@ -15,7 +15,7 @@ import { i as imageUrlBuilder } from './index-ca4ff5cb.js';
 import './index-3c1ee9ab.js';
 import { m as main_35, a as main_36 } from './main-dea495b7.js';
 import { h as html_decode_1, c as clean_html_1 } from './entities-e85d3a4a.js';
-import { s as slicedToArray, _ as _extends$2, t as toConsumableArray } from './_babelHelpers-67c05996.js';
+import { s as slicedToArray, _ as _extends$2, t as toConsumableArray, i as inherits$2, c as createClass, a as classCallCheck, p as possibleConstructorReturn } from './_babelHelpers-67c05996.js';
 export { default as DeckContent } from './DeckContent.js';
 import './get-b074314b.js';
 import { A as AD } from './GridContent-214acb61.js';
@@ -39,7 +39,7 @@ export { default as PublicationDeck } from './PublicationDeck.js';
 export { default as IssueDeck } from './IssueDeck.js';
 import 'react-bootstrap/Badge';
 export { default as IssueContentDeck } from './IssueContentDeck.js';
-import { D as DFPAdSlot, M as MdPictureAsPdf } from './Normal-be430fa9.js';
+import { D as DFPAdSlot, M as MdPictureAsPdf, T as TemplateNormal } from './Normal-be430fa9.js';
 export { A as AD728x90, D as AdSlot, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-be430fa9.js';
 import 'react-bootstrap/ListGroup';
 import Head from 'next/head';
@@ -11616,7 +11616,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
           ),
           React__default.createElement(
             'p',
-            null,
+            { className: 'top-article-summary' },
             clean_html_1(topArticle.summary)
           )
         )
@@ -11761,7 +11761,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-hero-container {\n          margin: 0 -0.8rem;\n        }\n        @media screen and (min-width: 1400px) {\n          .article-hero-container {\n            display: flex;\n            flex-direction: row;\n          }\n        }\n        .top-article {\n          // width: 50%;\n          margin: 0 1rem;\n          height: 100%;\n          display: block;\n        }\n        .top-article figure {\n          width: 100%;\n          height: 60%;\n        }\n        .top-article figure img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .top-article--body h1 {\n          font-size: 1.4rem;\n          color: black !important;\n          font-weight: bold;\n        }\n        // .sub-articles-container {\n        //   width: 50%;\n        //   flex: 1 1 auto;\n        //   min-width: 350px;\n        // }\n        .sub-article {\n          margin: 0 1rem 1rem;\n          display: flex;\n          flex-direction: row;\n        }\n        .sub-article figure {\n          width: 125px;\n        }\n        .sub-article figure img {\n          width: 125px;\n          height: auto;\n          object-fit: cover;\n        }\n        .sub-article--body {\n          padding-left: 1rem;\n          font-size: 0.9rem;\n        }\n        .sub-article--body h2 {\n          font-size: 1rem;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 1368px) {\n          .article-hero-container {\n            flex-direction: column;\n          }\n          .top-article {\n            // width: unset;\n            flex: 1 1 auto;\n          }\n          .sub-articles-container {\n            width: 100%;\n            margin-top: 1rem;\n            min-width: 280px;\n          }\n        }\n        @media screen and (max-width: 1399px) and (min-width: 992px) {\n          .top-article {\n            // width: 50%;\n            flex: 1 1 auto;\n            margin-bottom: 1rem;\n          }\n          .middle-group {\n            display: none;\n          }\n          .middle-single {\n            display: block !important;\n            margin-top: 0 !important;\n          }\n          .top-article figure img {\n            max-height: 180px !important;\n          }\n        }\n        // @media only screen and (min-width) {\n        //   .sub-outer-container {\n        //     width: 50%;\n        //     flex: 1 1 auto;\n        //     min-width: 350px;\n        //   }\n        // }\n        .middle-single {\n          display: none;\n        }\n        .top-outer {\n          display: flex;\n        }\n      '
+      '\n        .article-hero-container {\n          margin: 0 -0.8rem;\n        }\n        @media screen and (min-width: 1400px) {\n          .article-hero-container {\n            display: flex;\n            flex-direction: row;\n          }\n        }\n        .top-article {\n          // width: 50%;\n          margin: 0 1rem;\n          height: 100%;\n          display: block;\n        }\n        .top-article figure {\n          width: 100%;\n          height: 60%;\n        }\n        .top-article figure img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .top-article--body h1 {\n          font-size: 1.4rem;\n          color: black !important;\n          font-weight: bold;\n        }\n        // .sub-articles-container {\n        //   width: 50%;\n        //   flex: 1 1 auto;\n        //   min-width: 350px;\n        // }\n        .sub-article {\n          margin: 0 1rem 1rem;\n          display: flex;\n          flex-direction: row;\n        }\n        .sub-article figure {\n          width: 125px;\n        }\n        .sub-article figure img {\n          width: 125px;\n          height: auto;\n          object-fit: cover;\n        }\n        .sub-article--body {\n          padding-left: 1rem;\n          font-size: 0.9rem;\n        }\n        .sub-article--body h2 {\n          font-size: 1rem;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 1368px) {\n          .article-hero-container {\n            flex-direction: column;\n          }\n          .top-article {\n            // width: unset;\n            flex: 1 1 auto;\n          }\n          .sub-articles-container {\n            width: 100%;\n            margin-top: 1rem;\n            min-width: 280px;\n          }\n        }\n        @media screen and (max-width: 1399px) and (min-width: 992px) {\n          .top-article {\n            // width: 50%;\n            flex: 1 1 auto;\n            margin-bottom: 1rem;\n          }\n          .middle-group {\n            display: none;\n          }\n          .middle-single {\n            display: block !important;\n            margin-top: 0 !important;\n          }\n          .top-article figure img {\n            max-height: 180px !important;\n          }\n          .top-article-summary {\n            display: none;\n          }\n        }\n        // @media only screen and (min-width) {\n        //   .sub-outer-container {\n        //     width: 50%;\n        //     flex: 1 1 auto;\n        //     min-width: 350px;\n        //   }\n        // }\n        .middle-single {\n          display: none;\n        }\n        .top-outer {\n          display: flex;\n        }\n      '
     )
   );
 };
@@ -12105,4 +12105,497 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
   );
 };
 
-export { AD300x250, AD300x250x600, ADFooter, AccordionPanel, AdSlotsProvider, AlphabeticList, ArticleDetailDropdown, Breadcrumbs$1 as Breadcrumbs, ConferenceArticleCard, Feature, fbsHero as ForbesHero, Hero, HorizontalHero, OncliveHero, OncliveLargeHero, PdfDownload, RelatedContent, RelatedTopicsDropdown, SetCookie, SocialShare$1 as SocialShare, VerticalHero, YahooHero, getSerializers };
+var InscreenSensor = function (_React$Component) {
+    inherits$2(InscreenSensor, _React$Component);
+
+    function InscreenSensor(props) {
+        classCallCheck(this, InscreenSensor);
+
+        var _this = possibleConstructorReturn(this, (InscreenSensor.__proto__ || Object.getPrototypeOf(InscreenSensor)).call(this, props));
+
+        _this.scrollHandler = function () {
+            // this.checkInside()
+
+            var visible = _this.checkInside();
+            if (visible != _this.visible) {
+                _this.visible = visible;
+                _this.props.onChange(visible);
+            }
+        };
+
+        _this.checkInside = function () {
+            var rect = _this.wraperRef.current.getBoundingClientRect();
+            var _this$props$offSetTop = _this.props.offSetTop,
+                offSetTop = _this$props$offSetTop === undefined ? 0 : _this$props$offSetTop;
+            var top = rect.top,
+                height = rect.height;
+
+            var bottom = top + height;
+            var viewHeight = window.innerHeight;
+            if (bottom < offSetTop) {
+                return false;
+            } else if (top > offSetTop && bottom <= viewHeight) {
+                return true;
+            } else if (top > offSetTop && top <= viewHeight && bottom > viewHeight) {
+                return 'top';
+            } else if (bottom <= viewHeight) {
+                return 'bottom';
+            } else {
+                return false;
+            }
+        };
+
+        _this.wraperRef = React__default.createRef();
+        _this.visible = false;
+        return _this;
+    }
+
+    createClass(InscreenSensor, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.visible = this.checkInside();
+            this.props.onChange(this.visible);
+            window.addEventListener('scroll', this.scrollHandler);
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            window.removeEventListener('scroll', this.scrollHandler);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                _props$className = _props.className,
+                className = _props$className === undefined ? '' : _props$className,
+                _props$style = _props.style,
+                style = _props$style === undefined ? {} : _props$style;
+
+            return React__default.createElement(
+                'div',
+                { ref: this.wraperRef, className: className, style: style },
+                this.props.children
+            );
+        }
+    }]);
+    return InscreenSensor;
+}(React__default.Component);
+
+var renderAuthor = function renderAuthor(authorName, authorURL, index, length) {
+  if (authorName && authorURL) return React__default.createElement(
+    Link,
+    { href: '/authors/' + authorURL.current, key: index },
+    React__default.createElement(
+      'a',
+      null,
+      authorName,
+      length !== index + 1 && React__default.createElement('br', null)
+    )
+  );else if (authorName) {
+    return React__default.createElement(
+      'span',
+      { key: index },
+      authorName,
+      length !== index + 1 && React__default.createElement('br', null)
+    );
+  }
+};
+
+var Article = function Article(props) {
+  var client = props.client,
+      pageview = props.pageview,
+      videoAccountIDs = props.videoAccountIDs,
+      _props$article = props.article,
+      title = _props$article.title,
+      passwordLock = _props$article.passwordLock,
+      authorDetails = _props$article.authorDetails,
+      published = _props$article.published,
+      articleBody = _props$article.body,
+      summary = _props$article.summary,
+      thumbnail = _props$article.thumbnail,
+      _props$article$url = _props$article.url;
+  _props$article$url = _props$article$url === undefined ? {
+    current: ''
+  } : _props$article$url;
+  var url = _props$article$url.current,
+      changeUrl = props.changeUrl,
+      isCutomPage = props.isCutomPage,
+      shareOptions = props.shareOptions,
+      renderIsiContent = props.renderIsiContent,
+      urlFor = props.urlFor;
+  var shareVia = shareOptions.shareVia,
+      shareSubject = shareOptions.shareSubject,
+      twitterSiteName = shareOptions.twitterSiteName,
+      shareImageDefault = shareOptions.shareImageDefault;
+
+  var shareUrl = shareOptions.shareBaseUrl + props.url;
+  var shareTitle = title;
+  var shareSummary = summary;
+  var shareImage = thumbnail && thumbnail.asset ? urlFor(thumbnail.asset).url() : shareImageDefault;
+
+  var siteName = props.website.title;
+  return React__default.createElement(
+    InscreenSensor,
+    {
+      offSetTop: 45,
+      onChange: function onChange(visible) {
+        if (visible !== false) {
+          changeUrl(url, visible);
+        }
+      } },
+    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
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'video-detail', style: { marginBottom: isCutomPage(props.article) ? '150px' : 0 } },
+        React__default.createElement(
+          'div',
+          null,
+          moment(published).format('LL')
+        ),
+        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)
+            );
+          })
+        ),
+        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,
+          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(BlockContent, _extends$2({
+            serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true),
+            blocks: articleBody,
+            imageOptions: { w: 320, h: 240, fit: 'max' }
+          }, client.config()))
+        )
+      ),
+      renderIsiContent(props.article)
+    )
+  );
+};
+
+var ArticleQueue = function (_React$Component) {
+  inherits$2(ArticleQueue, _React$Component);
+
+  function ArticleQueue(props) {
+    classCallCheck(this, ArticleQueue);
+
+    var _this = possibleConstructorReturn(this, (ArticleQueue.__proto__ || Object.getPrototypeOf(ArticleQueue)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var _this$props$article$s = _this.props.article.seo;
+    _this$props$article$s = _this$props$article$s === undefined ? {
+      meta_description: null
+    } : _this$props$article$s;
+    var description = _this$props$article$s.meta_description;
+
+    var targeting = _this.getTargeting(_this.props.article);
+    _this.state = {
+      config: {
+        navComponent: _this.props.website.navigation,
+        navItems: _this.props.mainNavCache,
+        columns: '3',
+        leftItems: _this.props.subNavCache,
+        rightItems: _this.props.Ads.getRightItems(targeting),
+        horizontalAD: _this.props.Ads.getHorizontal(targeting),
+        isLiveSite: _this.props.isLiveSite
+      },
+      title: _this.props.article.title,
+      summary: description ? description : _this.props.article.summary,
+      queueData: [_this.props.article],
+      relatedArticles: [],
+      keywords: []
+    }, _this.preVscroll = 0;
+    _this.isScrollDown = true;
+
+    return _this;
+  }
+
+  createClass(ArticleQueue, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      window.addEventListener('scroll', this.scrollDirectionDetect);
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.relatedArticles != this.props.relatedArticles) {
+        var relatedArticles = this.props.relatedArticles;
+
+        var queueData = [].concat(toConsumableArray(this.state.queueData));
+        if (prevProps.relatedArticles.length == 0) {
+          queueData.push(relatedArticles.shift());
+          this.setState({ queueData: queueData });
+        }
+        this.setState({ relatedArticles: relatedArticles });
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('scroll', this.scrollDirectionDetect);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _state = this.state,
+          config = _state.config,
+          _state$keywords = _state.keywords,
+          keywords = _state$keywords === undefined ? [] : _state$keywords,
+          queueData = _state.queueData,
+          title = _state.title,
+          summary = _state.summary;
+      var _props = this.props,
+          website = _props.website,
+          shareOptions = _props.shareOptions;
+
+
+      return React__default.createElement(
+        TemplateNormal,
+        { config: config, website: website, keywords: keywords, description: summary, title: title, showRightAd: true },
+        React__default.createElement(
+          InfiniteScroll,
+          { dataLength: queueData.length, next: this.loadmore, scrollThreshold: '200px', hasMore: true },
+          queueData.map(function (article, index) {
+            return React__default.createElement(Article, _extends$2({
+              key: index,
+              urlFor: _this2.urlFor,
+              isCutomPage: _this2.isCutomPage,
+              renderIsiContent: _this2.renderIsiContent
+            }, _this2.props, {
+              shareOptions: shareOptions,
+              changeUrl: _this2.changeUrl,
+              article: article
+            }));
+          })
+        )
+      );
+    }
+  }]);
+  return ArticleQueue;
+}(React__default.Component);
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.scrollDirectionDetect = function (e) {
+    var window = e.currentTarget;
+    var isScrollDown = _this3.isScrollDown;
+
+
+    if (_this3.preVscroll > window.scrollY) {
+      if (!isScrollDown) {
+        _this3.isScrollDown = true;
+      }
+    } else if (_this3.preVscroll < window.scrollY) {
+      if (isScrollDown) {
+        _this3.isScrollDown = false;
+      }
+    }
+    _this3.preVscroll = window.scrollY;
+  };
+
+  this.loadmore = function () {
+    var queueData = [].concat(toConsumableArray(_this3.state.queueData));
+    var relatedArticles = [].concat(toConsumableArray(_this3.state.relatedArticles));
+    if (relatedArticles.length > 0) {
+      queueData.push(relatedArticles.shift());
+      _this3.setState({ queueData: queueData, relatedArticles: relatedArticles });
+    }
+  };
+
+  this.isCutomPage = function (article) {
+    var url = article.url.current;
+    var _props2 = _this3.props,
+        regionalPages = _props2.regionalPages,
+        nationalPage = _props2.nationalPage;
+
+    return regionalPages.includes(url) || nationalPage === url;
+  };
+
+  this.urlFor = function (source) {
+    return imageUrlBuilder(_this3.props.client).image(source);
+  };
+
+  this.getTargeting = function (article) {
+    var _article$internalTag = article.internalTag,
+        internalTag = _article$internalTag === undefined ? [] : _article$internalTag,
+        _article$userDefinedT = article.userDefinedTag,
+        userDefinedTag = _article$userDefinedT === undefined ? [] : _article$userDefinedT,
+        _article$SponsorshipT = article.SponsorshipTag,
+        SponsorshipTag = _article$SponsorshipT === undefined ? [] : _article$SponsorshipT,
+        _article$seoTag = article.seoTag,
+        seoTag = _article$seoTag === undefined ? [] : _article$seoTag,
+        _article$url = article.url;
+    _article$url = _article$url === undefined ? {
+      current: ''
+    } : _article$url;
+    var url = _article$url.current,
+        _article$documentGrou = article.documentGroup;
+    _article$documentGrou = _article$documentGrou === undefined ? {
+      path: ''
+    } : _article$documentGrou;
+    var document_group = _article$documentGrou.path,
+        content_placement = article.content_placement;
+
+    var context = url;
+    var localHistory = _this3.props.historyCookie ? JSON.parse(_this3.props.historyCookie) : [];
+    if (!context && localHistory) {
+      context = localHistory[localHistory.length - 1];
+    }
+    context = context && context.split('?')[0];
+    context = context && context.split('&')[0];
+    var content_placement_urls = [];
+    if (content_placement) {
+      if (content_placement.some(function (item) {
+        return context === item.path;
+      })) {
+        content_placement_urls = [context];
+      } else if (content_placement.some(function (item) {
+        return context === '/' + item.path;
+      })) {
+        content_placement_urls = [context.slice(1)];
+      } else {
+        content_placement_urls = content_placement.map(function (item) {
+          return item.path;
+        });
+      }
+    }
+    if (document_group.length > 0) {
+      content_placement_urls = [];
+    }
+    var keywords = [].concat(toConsumableArray(internalTag), toConsumableArray(userDefinedTag), toConsumableArray(SponsorshipTag), toConsumableArray(seoTag));
+    var targeting = {
+      tags: keywords,
+      document_group: [document_group],
+      document_url: [url],
+      content_placement: content_placement_urls
+    };
+    return targeting;
+  };
+
+  this.checkSponseredArticle = function (article) {
+    var _article$taxonomyMapp = article.taxonomyMapping,
+        taxonomyMapping = _article$taxonomyMapp === undefined ? [] : _article$taxonomyMapp;
+
+    if (_this3.props.checkSponsered) {
+
+      return taxonomyMapping.some(function (item) {
+        return item._ref === 'ict_taxonomy_735_sponsoredresources';
+      });
+    } else {
+      return false;
+    }
+  };
+
+  this.renderIsiContent = function (article) {
+    var url = article.url.current;
+    var _props3 = _this3.props,
+        ISIContent = _props3.iSIContent,
+        regionalPages = _props3.regionalPages,
+        nationalPage = _props3.nationalPage;
+
+    if (regionalPages.includes(url)) {
+      return React__default.createElement(ISIContent, null);
+    } else if (nationalPage === url) {
+      return React__default.createElement(ISIContent, { national: true });
+    }
+    return null;
+  };
+
+  this.refreshAdd = function (path) {
+    var article = _this3.state.queueData.find(function (item) {
+      return item.url.current == path;
+    });
+    var title = article.title,
+        summary = article.summary,
+        _article$seo = article.seo;
+    _article$seo = _article$seo === undefined ? {
+      meta_description: null
+    } : _article$seo;
+    var description = _article$seo.meta_description;
+
+    var config = _extends$2({}, _this3.state.config);
+    var targeting = _this3.getTargeting(article);
+    var rightItems = [];
+
+    if (_this3.checkSponseredArticle(article)) {
+      rightItems = [];
+    } else {
+      rightItems = _this3.props.Ads.getRightItems(targeting);
+    }
+    var horizontalAD = _this3.props.Ads.getHorizontal(targeting);
+    config.rightItems = rightItems;
+    config.horizontalAD = horizontalAD;
+    _this3.setState({ config: config, title: title, summary: description ? description : summary }, function () {
+      lib_3.refresh();
+    });
+  };
+
+  this.changeUrl = function (path, visibility) {
+    var isScrollDown = _this3.isScrollDown;
+
+    if (!isScrollDown) {
+      if (visibility == 'top') {
+        window.history.pushState({ page: path }, path, '/view/' + path);
+        _this3.setState({ keywords: [1] });
+        _this3.refreshAdd(path);
+        // Router.push('/view/[url]', `/view/${path}`, {shallow:true})
+      }
+    } else {
+      if (visibility == 'bottom') {
+        window.history.pushState({ page: path }, path, '/view/' + path);
+        _this3.setState({ keywords: [1] });
+        _this3.refreshAdd(path);
+        // Router.push('/view/[url]', `/view/${path}`, {shallow:true})
+      }
+    }
+  };
+};
+
+export { AD300x250, AD300x250x600, ADFooter, AccordionPanel, AdSlotsProvider, AlphabeticList, ArticleDetailDropdown, ArticleQueue, Breadcrumbs$1 as Breadcrumbs, ConferenceArticleCard, Feature, fbsHero as ForbesHero, Hero, HorizontalHero, OncliveHero, OncliveLargeHero, PdfDownload, RelatedContent, RelatedTopicsDropdown, SetCookie, SocialShare$1 as SocialShare, VerticalHero, YahooHero, getSerializers };

package/package.json

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