@mjhls/mjh-framework 1.0.694 → 1.0.696-1034

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.694
+# mjh-framework v. 1.0.696-1034
 
 > Foundation Framework 
 

package/dist/cjs/ArticleSeriesListing.js

@@ -227,7 +227,7 @@ var ArticleSeriesListing = function (_React$Component) {
             { key: index, counter: itemCounter++ },
             React__default.createElement(
               'h4',
-              { className: 'article-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', borderBottom: '2px solid var(--gold)' } },
+              { className: 'article-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', borderBottom: '2px solid #d4a64d' } },
               React__default.createElement(
                 'a',
                 { href: '/' + _this.props.page + '/' + docSeries.url.current },

package/dist/cjs/ExternalResources.js

@@ -48,7 +48,7 @@ require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 var Button = _interopDefault(require('react-bootstrap/Button'));
 var index$3 = require('./index-5be2866f.js');
-var getSerializers = require('./index-bb6b1bfb.js');
+var getSerializers = require('./index-8e495016.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');
@@ -61,7 +61,11 @@ var ExternalResources = function ExternalResources(props) {
       _props$cta = props.cta,
       cta = _props$cta === undefined ? 'Learn More' : _props$cta,
       _props$url = props.url,
-      url = _props$url === undefined ? 'resources' : _props$url;
+      url = _props$url === undefined ? 'resources' : _props$url,
+      _props$recentTitle = props.recentTitle,
+      recentTitle = _props$recentTitle === undefined ? 'Recent' : _props$recentTitle,
+      _props$archiveTitle = props.archiveTitle,
+      archiveTitle = _props$archiveTitle === undefined ? 'Archive' : _props$archiveTitle;
 
   var _useState = React.useState(display && (display === 'recent' || display === 'archived') ? display : 'recent'),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -85,7 +89,7 @@ var ExternalResources = function ExternalResources(props) {
               return 'recent';
             });
           }, className: active === 'recent' ? 'active' : '' },
-        'Recent'
+        recentTitle
       ),
       React__default.createElement(
         'div',
@@ -94,13 +98,13 @@ var ExternalResources = function ExternalResources(props) {
               return 'archived';
             });
           }, className: active === 'archived' ? 'active' : '' },
-        'Archive'
+        archiveTitle
       )
     ),
-    resources[active].length > 0 ? resources[active].map(function (r, i) {
+    resources[active].length > 0 ? resources[active].map(function (r) {
       return React__default.createElement(
         'div',
-        { key: i, className: 'resource' },
+        { key: r._id, className: 'resource' },
         React__default.createElement(
           'div',
           { id: 'thumb' },
@@ -181,7 +185,7 @@ var ExternalResources = function ExternalResources(props) {
     }) : React__default.createElement(
       'p',
       null,
-      'No ' + active + ' resources available. '
+      'No content available.'
     ),
     React__default.createElement(
       'style',

package/dist/cjs/PartnerDetailListing.js

@@ -57,7 +57,7 @@ var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-bb6b1bfb.js');
+var getSerializers = require('./index-8e495016.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/VideoSeriesListing.js

@@ -227,7 +227,7 @@ var VideoSeriesListing = function (_React$Component) {
             { key: index, counter: itemCounter++ },
             React__default.createElement(
               'h4',
-              { className: 'video-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', borderBottom: '2px solid var(--gold)' } },
+              { className: 'video-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', borderBottom: '2px solid #d4a64d' } },
               React__default.createElement(
                 'a',
                 { href: '/' + _this.props.page + '/' + docSeries.url.current },

package/dist/cjs/View.js

@@ -30,6 +30,7 @@ require('./isSymbol-04666465.js');
 require('./debounce-eb287781.js');
 var index_es = require('./index.es-ab3f2690.js');
 require('react-dom');
+var visibilitySensor = require('./visibility-sensor-0c45a583.js');
 require('./index-b5eb3ff8.js');
 require('./index-da796b8c.js');
 var main = require('./main-b6c96c8d.js');
@@ -50,7 +51,7 @@ require('./index.esm-90433435.js');
 var Button = _interopDefault(require('react-bootstrap/Button'));
 var defineProperty$1 = require('./defineProperty-55548b25.js');
 var Form = _interopDefault(require('react-bootstrap/Form'));
-var getSerializers = require('./index-bb6b1bfb.js');
+var getSerializers = require('./index-8e495016.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');
@@ -396,7 +397,10 @@ var Article = function Article(props) {
       _props$sponsoredFlag = props.sponsoredFlag,
       sponsoredFlag = _props$sponsoredFlag === undefined ? false : _props$sponsoredFlag,
       _props$authorImgHeigh = props.authorImgHeight,
-      authorImgHeight = _props$authorImgHeigh === undefined ? 270 : _props$authorImgHeigh;
+      authorImgHeight = _props$authorImgHeigh === undefined ? 270 : _props$authorImgHeigh,
+      active = props.active,
+      containerHeight = props.containerHeight;
+
 
   var targeting = getTargeting.getTargeting(props);
   var onChangeArticle = props.onChangeArticle;
@@ -769,7 +773,7 @@ var Article = function Article(props) {
       );
     } else {
       return React__default.createElement(BlockContent.BlockContent, _extends._extends({
-        serializers: getSerializers.getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, false, null, props.article.Ads, targeting),
+        serializers: getSerializers.getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, false, null, props.article.Ads, targeting, article),
         blocks: articleBody,
         imageOptions: { w: 320, h: 240, fit: 'max' }
       }, client.config()));
@@ -810,16 +814,16 @@ var Article = function Article(props) {
       React__default.Fragment,
       null,
       React__default.createElement(
-        getSerializers.InscreenSensor,
+        visibilitySensor.VisibilitySensor,
         {
-          offSetTop: 120,
-          className: 'inscreen-wrapper',
-          id: 'article-' + title,
-          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);
+          partialVisibility: true,
+          offset: { bottom: 100, top: containerHeight - 100 },
+          onChange: function onChange(isVisible) {
+            if (isVisible) {
+              onChangeArticle(url, meta);
+              setVisibleFlag(function () {
+                return true;
+              });
             }
           } },
         React__default.createElement(
@@ -1023,16 +1027,16 @@ var Article = function Article(props) {
             )
           ),
           renderIsiContent(props.article)
-        ),
-        showIsi && Array.isArray(isi) && isi.length > 0 && React__default.createElement(
-          ISI,
-          null,
-          React__default.createElement(BlockContent.BlockContent, {
-            serializers: getSerializers.getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, false, null, props.article.Ads, targeting),
-            blocks: isi
-          })
         )
       ),
+      showIsi && Array.isArray(isi) && isi.length > 0 && React__default.createElement(
+        ISI,
+        null,
+        React__default.createElement(BlockContent.BlockContent, {
+          serializers: getSerializers.getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, false, null, props.article.Ads, targeting),
+          blocks: isi
+        })
+      ),
       main.main_39 && !sponsoredFlag && props.article.Ads && props.article.Ads.length > 0 && props.article.Ads.map(function (ad, index) {
         if (index > 0) {
           return React__default.createElement(
@@ -1087,7 +1091,25 @@ var ArticleQueue = function ArticleQueue(props) {
       showRelatedArticles = props.showRelatedArticles,
       canonicalTag = props.canonicalTag;
 
+  var _useState = React.useState(0),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      containerHeight = _useState2[0],
+      setContainerHeight = _useState2[1];
 
+  React.useEffect(function () {
+    setContainerHeight(function () {
+      return window.innerHeight;
+    });
+    var handleResize = function handleResize() {
+      return setContainerHeight(function () {
+        return window.innerHeight;
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   var firstArticle = function firstArticle() {
     var article = _extends._Object$assign({}, props.article);
     var targeting = getTargeting.getTargeting(props);
@@ -1095,10 +1117,15 @@ var ArticleQueue = function ArticleQueue(props) {
     return article;
   };
 
-  var _useState = React.useState([firstArticle()]),
-      _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      queueData = _useState2[0],
-      setQueueData = _useState2[1];
+  var _useState3 = React.useState([firstArticle()]),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      queueData = _useState4[0],
+      setQueueData = _useState4[1];
+
+  var _useState5 = React.useState(queueData[0]._id),
+      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+      active = _useState6[0],
+      setActive = _useState6[1];
 
   var refreshAD = function refreshAD(path) {
     var activeArticle = queueData.find(function (item) {
@@ -1148,16 +1175,11 @@ var ArticleQueue = function ArticleQueue(props) {
   };
 
   var preVscroll = 0;
-  var isScrollDown = true;
 
   var scrollDirectionDetect = function scrollDirectionDetect(e) {
     var window = e.currentTarget;
 
-    if (preVscroll > window.scrollY) {
-      isScrollDown = false;
-    } else if (preVscroll < window.scrollY) {
-      isScrollDown = true;
-    }
+    if (preVscroll > window.scrollY) ; else if (preVscroll < window.scrollY) ;
     preVscroll = window.scrollY;
   };
 
@@ -1247,38 +1269,23 @@ var ArticleQueue = function ArticleQueue(props) {
     }
   };
 
-  var onChangeArticle = function onChangeArticle(path, visibility, meta) {
+  var onChangeArticle = function onChangeArticle(path, meta) {
     var currentPath = window && window.location && window.location.pathname ? window.location.pathname.replace('/view/', '') : '';
     var newPath = '/view/' + path;
-
+    var activeArticle = queueData.find(function (item) {
+      return item.url.current === path;
+    });
+    setActive(function () {
+      return activeArticle._id;
+    });
     // Change URL and do other changes
-    var doChanges = function doChanges() {
-      window.history.pushState({ page: path }, meta.shareTitle, newPath);
-      changeMeta(meta);
-      if (props.setCustomDimensions) {
-        var activeArticle = queueData.find(function (item) {
-          return item.url.current === path;
-        });
-        props.setCustomDimensions(activeArticle, '200', prevUrl);
-      }
-      if (props.pageview) props.pageview(newPath);
-      refreshAD(path);
-    };
-
-    if (currentPath !== path) {
-      if (isScrollDown) {
-        if (visibility === 'top') {
-          doChanges();
-        }
-      } else {
-        if (visibility === 'bottom') {
-          doChanges();
-        }
-      }
-      if (visibility === 'small-top') {
-        doChanges();
-      }
+    window.history.pushState({ page: path }, meta.shareTitle, newPath);
+    changeMeta(meta);
+    if (props.setCustomDimensions) {
+      props.setCustomDimensions(activeArticle, '200', prevUrl);
     }
+    if (props.pageview) props.pageview(newPath);
+    refreshAD(path);
   };
 
   return React__default.createElement(
@@ -1288,10 +1295,12 @@ var ArticleQueue = function ArticleQueue(props) {
       return React__default.createElement(Article, _extends._extends({
         key: index
       }, props, {
+        containerHeight: containerHeight,
         onChangeArticle: onChangeArticle,
         authorPrfix: authorPrefix,
         article: article,
-        cpModificationRequired: cpModificationRequired
+        cpModificationRequired: cpModificationRequired,
+        active: active === article._id
         // Passing queueData to check for single article
         , queueData: queueData,
         showRelatedArticles: showRelatedArticles

package/dist/cjs/getSerializers.js

@@ -43,7 +43,7 @@ require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-bb6b1bfb.js');
+var getSerializers = require('./index-8e495016.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/{index-bb6b1bfb.js → index-8e495016.js}

@@ -7065,6 +7065,14 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     return null;
   }
 
+  var today = moment.moment().utc().format();
+
+  var Videos = nodes.videos.filter(function (video) {
+    if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (today >= video.published || !video.hasOwnProperty('published'))) {
+      return video;
+    }
+  });
+
   var builder = index$1.imageUrlBuilder(client);
   function urlFor(source) {
     return builder.image(source);
@@ -7133,7 +7141,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var seriesVid = params.get('seriesVid') || 1;
     var data = [];
 
-    nodes.videos.forEach(function (vid) {
+    Videos.forEach(function (vid) {
       if (vid.type == 'mp4') {
         data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset).url(), url: vid.url });
       } else {
@@ -7148,10 +7156,10 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
     if (data.length < seriesVid) {
       setSeries(1);
-      setVidUrl(nodes.videos[0].url);
-      setVidThumbnail(nodes.videos[0].thumbnail && nodes.videos[0].thumbnail.asset ? urlFor(nodes.videos[0].thumbnail.asset).url() : '');
-      if (nodes.videos[0].type) {
-        setVidType(nodes.videos[0].type);
+      setVidUrl(Videos[0].url);
+      setVidThumbnail(Videos[0].thumbnail && Videos[0].thumbnail.asset ? urlFor(Videos[0].thumbnail.asset).url() : '');
+      if (Videos[0].type) {
+        setVidType(Videos[0].type);
       }
 
       var newPath = '/' + get2 + '/' + get3 + '?seriesVid=1';
@@ -7159,10 +7167,10 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       window.history.pushState(vidState, '', newPath);
     } else {
       setSeries(seriesVid);
-      setVidUrl(nodes.videos[seriesVid - 1].url);
-      setVidThumbnail(nodes.videos[seriesVid - 1].thumbnail && nodes.videos[seriesVid - 1].thumbnail.asset ? urlFor(nodes.videos[seriesVid - 1].thumbnail.asset).url() : '');
-      if (nodes.videos[0].type) {
-        setVidType(nodes.videos[seriesVid - 1].type);
+      setVidUrl(Videos[seriesVid - 1].url);
+      setVidThumbnail(Videos[seriesVid - 1].thumbnail && Videos[seriesVid - 1].thumbnail.asset ? urlFor(Videos[seriesVid - 1].thumbnail.asset).url() : '');
+      if (Videos[0].type) {
+        setVidType(Videos[seriesVid - 1].type);
       }
       setVidLoaded(true);
     }
@@ -7173,7 +7181,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     if (vidLoaded == true) {
       var params = new URL(document.location).searchParams;
       var seriesVid = params.get('seriesVid');
-      var vidTitle = nodes.videos[series - 1].title;
+      var vidTitle = Videos[series - 1].title;
       var originalTitle = document.title;
       if (seriesVid) {
         document.title = vidTitle + ' | ' + originalTitle;
@@ -7235,7 +7243,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       nextVid = currentVid + 1;
     }
     // set the new Video URL
-    setState(nodes.videos[nextVid].url, '', nextVid + 1);
+    setState(Videos[nextVid].url, '', nextVid + 1);
   }
 
   var autoplayNextVideo = function autoplayNextVideo(e) {
@@ -7256,7 +7264,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       nextVid = currentVid + 1;
     }
     // set the new Video URL
-    setState(nodes.videos[nextVid].url, '', nextVid + 1);
+    setState(Videos[nextVid].url, '', nextVid + 1);
   };
 
   var handlePlayPercent = function handlePlayPercent(player) {
@@ -7364,26 +7372,26 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         'Episode ',
         series
       ),
-      nodes.videos[series - 1] && React__default.createElement(
+      Videos[series - 1] && React__default.createElement(
         'h2',
         { className: 'mb-3' },
-        nodes.videos[series - 1].title
+        Videos[series - 1].title
       ),
-      nodes.videos[series - 1] && nodes.videos[series - 1].intro && React__default.createElement(
+      Videos[series - 1] && Videos[series - 1].intro && React__default.createElement(
         'p',
         { className: 'mb-3' },
         React__default.createElement(
           'em',
           null,
-          nodes.videos[series - 1].intro
+          Videos[series - 1].intro
         )
       ),
-      nodes.videos[series - 1] && nodes.videos[series - 1].text && React__default.createElement(BlockContent.BlockContent, _extends._extends({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
+      Videos[series - 1] && Videos[series - 1].text && React__default.createElement(BlockContent.BlockContent, _extends._extends({ serializers: getSerializers, blocks: Videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
     ),
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n     \n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n       \n       \n      '
+      '\n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n      '
     )
   );
 };
@@ -8019,9 +8027,11 @@ var InscreenSensor = function (_React$Component) {
 var ArticleSeries = function ArticleSeries(_ref) {
   var nodes = _ref.nodes,
       client = _ref.client,
+      pageview = _ref.pageview,
       getSerializers = _ref.getSerializers,
       accountIDs = _ref.accountIDs,
-      Ads = _ref.Ads;
+      Ads = _ref.Ads,
+      rootArticle = _ref.rootArticle;
 
   if (!nodes || !nodes.articles) {
     return null;
@@ -8182,7 +8192,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
     // Change URL and do other changes
     var doChanges = function doChanges() {
       if (firstLoad) {
-        refreshAD();
+        refreshAD(newPath);
       }
       window.history.pushState({ page: path }, '', newPath);
       document.title = title;
@@ -8262,6 +8272,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var refreshAD = function refreshAD(path) {
     //const activeArticle = path
     //let targeting = getTargeting({ article: activeArticle, cpModificationRequired, position: props.position, prevUrl })
+    if (pageview) pageview(path);
 
     if (!main.main_39) {
       index.lib_3.getGoogletag().then(function (googletag) {
@@ -8282,12 +8293,25 @@ var ArticleSeries = function ArticleSeries(_ref) {
   };
 
   var handleArrowClick = function handleArrowClick() {
+    var newPath = router.asPath.split('?')[0];
+    var title = nodes.seriesTitle;
     isScrollDown = true;
     upArrowClicked = true;
     arrowRef.current.style.visibility = 'hidden';
     window.scrollTo({ top: 0, behavior: 'smooth' });
-    window.history.pushState({}, '', router.asPath.split('?')[0]);
-    document.title = nodes.seriesTitle;
+    window.history.pushState({}, '', newPath);
+    document.title = title;
+
+    setCurrentURL(newPath);
+    setCurrentTitle(title);
+    if (rootArticle) {
+      setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
+      setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
+    } else {
+      setCurrentSummary('');
+      setCurrentThumbnail('');
+    }
+    refreshAD(newPath);
   };
 
   return React__default.createElement(
@@ -8295,10 +8319,10 @@ var ArticleSeries = function ArticleSeries(_ref) {
     null,
     React__default.createElement(
       'div',
-      { ref: arrowRef, className: 'scrollToTopArrow', onClick: function onClick() {
+      { ref: arrowRef, className: 'scrollToTopArrow' },
+      React__default.createElement(index_esm.IoIosArrowDropupCircle, { style: { cursor: 'pointer' }, onClick: function onClick() {
           return handleArrowClick();
-        } },
-      React__default.createElement(index_esm.IoIosArrowDropupCircle, null)
+        } })
     ),
     React__default.createElement('hr', { className: 'article-seperater my-4' }),
     React__default.createElement(
@@ -8468,7 +8492,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .scrollToTopArrow {\n            position: fixed;\n            top: 150px;\n            display: flex;\n            justify-content: center;\n            width: ' + contentWidth + 'px;\n            opacity: 1;\n            z-index: 99999999999;\n            cursor: pointer;\n            visibility: hidden;\n          }\n          .scrollToTopArrow > svg {\n            min-height: 50px;\n            min-width: 50px;\n            max-height: 50px;\n            max-width: 50px;\n          }\n          .block-content > div p {\n            padding: 0;\n          }\n\n          h2.article-title {\n            padding: 0;\n            font-weight: 500;\n          }\n          h4.article-title {\n            padding: 0;\n            font-weight: 500;\n          }\n          h4.prevNext-title {\n            padding: 0;\n            font-size: 1rem;\n            font-weight: 500;\n          }\n          .article-wrapper {\n            border: 1px solid #252525;\n            border-radius: 5px;\n            padding: 1rem 1rem 0 1rem;\n            margin-bottom: 1rem;\n          }\n          .prevNext-reading {\n            margin-top: -10px;\n            width: 75%;\n            text-align: center;\n            background: white;\n            border: 1px solid #252525;\n            align-self: center;\n            display: none;\n          }\n          .showReading {\n            display: block;\n          }\n          .author-details-wrapper a {\n            color: #252525;\n          }\n          .objective-prevNext-Wrapper {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n          }\n          .objective-title {\n            padding: 0 !important;\n          }\n          .prevNext-thumbnail {\n            display: flex;\n            flex-direction: column;\n            min-width: 225px;\n            max-width: 225px;\n            overflow: hidden;\n            align-items: center;\n            object-fit: contain;\n            border-radius: 15px;\n          }\n          .prevNext-thumbnail img {\n            height: 125px;\n            object-fit: contain;\n            border-radius: 15px;\n          }\n          .prevNext-summary {\n            text-align: center;\n          }\n          .prevNext-publishDate {\n            font-size: 0.75rem;\n            margin-top: 0.5rem;\n          }\n          .prevNext-title {\n            padding: 0 !important;\n            line-height: 1 !important;\n            font-weight: 500;\n          }\n          .prevNextWrapper {\n            display: flex;\n            flex-direction: row;\n            justify-content: space-evenly;\n            flex-wrap: wrap;\n          }\n          .prevNextWrapper a {\n            display: flex;\n            flex-direction: column;\n            color: #252525;\n            align-items: center;\n          }\n          .prevNextCards {\n            max-width: 250px;\n            margin-bottom: 1rem;\n          }\n          @media only screen and (max-width: 568px) {\n            .prevNextWrapper {\n              flex-direction: column;\n              align-items: center;\n            }\n            .prevNextCards {\n              margin-bottom: 2rem;\n            }\n          }\n          @media only screen and (max-width: 568px) {\n          }\n        '
+        '\n          .scrollToTopArrow {\n            position: fixed;\n            top: 150px;\n            display: flex;\n            justify-content: center;\n            width: ' + contentWidth + 'px;\n            opacity: 1;\n            z-index: 99999999999;\n            visibility: hidden;\n          }\n          .scrollToTopArrow > svg {\n            min-height: 50px;\n            min-width: 50px;\n            max-height: 50px;\n            max-width: 50px;\n          }\n          .block-content > div p {\n            padding: 0;\n          }\n\n          h2.article-title {\n            padding: 0;\n            font-weight: 500;\n          }\n          h4.article-title {\n            padding: 0;\n            font-weight: 500;\n          }\n          h4.prevNext-title {\n            padding: 0;\n            font-size: 1rem;\n            font-weight: 500;\n          }\n          .article-wrapper {\n            border: 1px solid #252525;\n            border-radius: 5px;\n            padding: 1rem 1rem 0 1rem;\n            margin-bottom: 1rem;\n          }\n          .prevNext-reading {\n            margin-top: -10px;\n            width: 75%;\n            text-align: center;\n            background: white;\n            border: 1px solid #252525;\n            align-self: center;\n            display: none;\n          }\n          .showReading {\n            display: block;\n          }\n          .author-details-wrapper a {\n            color: #252525;\n          }\n          .objective-prevNext-Wrapper {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n          }\n          .objective-title {\n            padding: 0 !important;\n          }\n          .prevNext-thumbnail {\n            display: flex;\n            flex-direction: column;\n            min-width: 225px;\n            max-width: 225px;\n            overflow: hidden;\n            align-items: center;\n            object-fit: contain;\n            border-radius: 15px;\n          }\n          .prevNext-thumbnail img {\n            height: 125px;\n            object-fit: contain;\n            border-radius: 15px;\n          }\n          .prevNext-summary {\n            text-align: center;\n          }\n          .prevNext-publishDate {\n            font-size: 0.75rem;\n            margin-top: 0.5rem;\n          }\n          .prevNext-title {\n            padding: 0 !important;\n            line-height: 1 !important;\n            font-weight: 500;\n          }\n          .prevNextWrapper {\n            display: flex;\n            flex-direction: row;\n            justify-content: space-evenly;\n            flex-wrap: wrap;\n          }\n          .prevNextWrapper a {\n            display: flex;\n            flex-direction: column;\n            color: #252525;\n            align-items: center;\n          }\n          .prevNextCards {\n            max-width: 250px;\n            margin-bottom: 1rem;\n          }\n          @media only screen and (max-width: 568px) {\n            .prevNextWrapper {\n              flex-direction: column;\n              align-items: center;\n            }\n            .prevNextCards {\n              margin-bottom: 2rem;\n            }\n          }\n          @media only screen and (max-width: 568px) {\n          }\n        '
       )
     )
   );
@@ -8822,7 +8846,8 @@ var getSerializers = function getSerializers() {
       contextualADFlag = _props$2 === undefined ? false : _props$2,
       articleId = props[9],
       Ads = props[10],
-      targeting = props[11];
+      targeting = props[11],
+      article = props[12];
 
   return {
     types: {
@@ -8844,7 +8869,7 @@ var getSerializers = function getSerializers() {
       articleSeries: function articleSeries(_ref3) {
         var node = _ref3.node;
 
-        return React__default.createElement(ArticleSeries, { nodes: node, accountIDs: videoAccountIDs || {}, client: client, getSerializers: getSerializers.apply(undefined, props), Ads: Ads || null });
+        return React__default.createElement(ArticleSeries, { nodes: node, accountIDs: videoAccountIDs || {}, pageview: pageview, client: client, getSerializers: getSerializers.apply(undefined, props), Ads: Ads || null, rootArticle: article || null });
       },
       figure: function figure(_ref4) {
         var node = _ref4.node;
@@ -9034,6 +9059,5 @@ var getSerializers = function getSerializers() {
   };
 };
 
-exports.InscreenSensor = InscreenSensor;
 exports.getSerializers = getSerializers;
 exports.renderAuthor = renderAuthor;

package/dist/cjs/index.js

@@ -83,7 +83,7 @@ require('react-bootstrap/Form');
 require('./index-5be2866f.js');
 require('./js.cookie-a511c430.js');
 var CMEDeck = require('./CMEDeck.js');
-var getSerializers = require('./index-bb6b1bfb.js');
+var getSerializers = require('./index-8e495016.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/esm/ArticleSeriesListing.js

@@ -221,7 +221,7 @@ var ArticleSeriesListing = function (_React$Component) {
             { key: index, counter: itemCounter++ },
             React__default.createElement(
               'h4',
-              { className: 'article-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', borderBottom: '2px solid var(--gold)' } },
+              { className: 'article-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', borderBottom: '2px solid #d4a64d' } },
               React__default.createElement(
                 'a',
                 { href: '/' + _this.props.page + '/' + docSeries.url.current },

package/dist/esm/ExternalResources.js

@@ -42,7 +42,7 @@ import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import Button from 'react-bootstrap/Button';
 import { m as momentTimezone } from './index-d2f90501.js';
-import { g as getSerializers } from './index-74d46cc5.js';
+import { g as getSerializers } from './index-6a239712.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
@@ -55,7 +55,11 @@ var ExternalResources = function ExternalResources(props) {
       _props$cta = props.cta,
       cta = _props$cta === undefined ? 'Learn More' : _props$cta,
       _props$url = props.url,
-      url = _props$url === undefined ? 'resources' : _props$url;
+      url = _props$url === undefined ? 'resources' : _props$url,
+      _props$recentTitle = props.recentTitle,
+      recentTitle = _props$recentTitle === undefined ? 'Recent' : _props$recentTitle,
+      _props$archiveTitle = props.archiveTitle,
+      archiveTitle = _props$archiveTitle === undefined ? 'Archive' : _props$archiveTitle;
 
   var _useState = useState(display && (display === 'recent' || display === 'archived') ? display : 'recent'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -79,7 +83,7 @@ var ExternalResources = function ExternalResources(props) {
               return 'recent';
             });
           }, className: active === 'recent' ? 'active' : '' },
-        'Recent'
+        recentTitle
       ),
       React__default.createElement(
         'div',
@@ -88,13 +92,13 @@ var ExternalResources = function ExternalResources(props) {
               return 'archived';
             });
           }, className: active === 'archived' ? 'active' : '' },
-        'Archive'
+        archiveTitle
       )
     ),
-    resources[active].length > 0 ? resources[active].map(function (r, i) {
+    resources[active].length > 0 ? resources[active].map(function (r) {
       return React__default.createElement(
         'div',
-        { key: i, className: 'resource' },
+        { key: r._id, className: 'resource' },
         React__default.createElement(
           'div',
           { id: 'thumb' },
@@ -175,7 +179,7 @@ var ExternalResources = function ExternalResources(props) {
     }) : React__default.createElement(
       'p',
       null,
-      'No ' + active + ' resources available. '
+      'No content available.'
     ),
     React__default.createElement(
       'style',

package/dist/esm/PartnerDetailListing.js

@@ -51,7 +51,7 @@ import QueueDeckExpanded from './QueueDeckExpanded.js';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
-import { g as getSerializers } from './index-74d46cc5.js';
+import { g as getSerializers } from './index-6a239712.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/VideoSeriesListing.js

@@ -221,7 +221,7 @@ var VideoSeriesListing = function (_React$Component) {
             { key: index, counter: itemCounter++ },
             React__default.createElement(
               'h4',
-              { className: 'video-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', borderBottom: '2px solid var(--gold)' } },
+              { className: 'video-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', borderBottom: '2px solid #d4a64d' } },
               React__default.createElement(
                 'a',
                 { href: '/' + _this.props.page + '/' + docSeries.url.current },

package/dist/esm/View.js

@@ -24,6 +24,7 @@ import './isSymbol-807e927e.js';
 import './debounce-1a993acf.js';
 import { I as InfiniteScroll } from './index.es-938a3a58.js';
 import 'react-dom';
+import { V as VisibilitySensor } from './visibility-sensor-0baa4eea.js';
 import './index-51a80699.js';
 import './index-5f9f807a.js';
 import { m as main_39 } from './main-0465b2a0.js';
@@ -44,7 +45,7 @@ import './index.esm-29e48d38.js';
 import Button from 'react-bootstrap/Button';
 import { _ as _defineProperty } from './defineProperty-b798470d.js';
 import Form from 'react-bootstrap/Form';
-import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-74d46cc5.js';
+import { r as renderAuthor, g as getSerializers } from './index-6a239712.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
@@ -390,7 +391,10 @@ var Article = function Article(props) {
       _props$sponsoredFlag = props.sponsoredFlag,
       sponsoredFlag = _props$sponsoredFlag === undefined ? false : _props$sponsoredFlag,
       _props$authorImgHeigh = props.authorImgHeight,
-      authorImgHeight = _props$authorImgHeigh === undefined ? 270 : _props$authorImgHeigh;
+      authorImgHeight = _props$authorImgHeigh === undefined ? 270 : _props$authorImgHeigh,
+      active = props.active,
+      containerHeight = props.containerHeight;
+
 
   var targeting = getTargeting(props);
   var onChangeArticle = props.onChangeArticle;
@@ -763,7 +767,7 @@ var Article = function Article(props) {
       );
     } else {
       return React__default.createElement(BlockContent, _extends({
-        serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, false, null, props.article.Ads, targeting),
+        serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, false, null, props.article.Ads, targeting, article),
         blocks: articleBody,
         imageOptions: { w: 320, h: 240, fit: 'max' }
       }, client.config()));
@@ -804,16 +808,16 @@ var Article = function Article(props) {
       React__default.Fragment,
       null,
       React__default.createElement(
-        InscreenSensor,
+        VisibilitySensor,
         {
-          offSetTop: 120,
-          className: 'inscreen-wrapper',
-          id: 'article-' + title,
-          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);
+          partialVisibility: true,
+          offset: { bottom: 100, top: containerHeight - 100 },
+          onChange: function onChange(isVisible) {
+            if (isVisible) {
+              onChangeArticle(url, meta);
+              setVisibleFlag(function () {
+                return true;
+              });
             }
           } },
         React__default.createElement(
@@ -1017,16 +1021,16 @@ var Article = function Article(props) {
             )
           ),
           renderIsiContent(props.article)
-        ),
-        showIsi && Array.isArray(isi) && isi.length > 0 && React__default.createElement(
-          ISI,
-          null,
-          React__default.createElement(BlockContent, {
-            serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, false, null, props.article.Ads, targeting),
-            blocks: isi
-          })
         )
       ),
+      showIsi && Array.isArray(isi) && isi.length > 0 && React__default.createElement(
+        ISI,
+        null,
+        React__default.createElement(BlockContent, {
+          serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, false, null, props.article.Ads, targeting),
+          blocks: isi
+        })
+      ),
       main_39 && !sponsoredFlag && props.article.Ads && props.article.Ads.length > 0 && props.article.Ads.map(function (ad, index) {
         if (index > 0) {
           return React__default.createElement(
@@ -1081,7 +1085,25 @@ var ArticleQueue = function ArticleQueue(props) {
       showRelatedArticles = props.showRelatedArticles,
       canonicalTag = props.canonicalTag;
 
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      containerHeight = _useState2[0],
+      setContainerHeight = _useState2[1];
 
+  useEffect(function () {
+    setContainerHeight(function () {
+      return window.innerHeight;
+    });
+    var handleResize = function handleResize() {
+      return setContainerHeight(function () {
+        return window.innerHeight;
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   var firstArticle = function firstArticle() {
     var article = _Object$assign({}, props.article);
     var targeting = getTargeting(props);
@@ -1089,10 +1111,15 @@ var ArticleQueue = function ArticleQueue(props) {
     return article;
   };
 
-  var _useState = useState([firstArticle()]),
-      _useState2 = _slicedToArray(_useState, 2),
-      queueData = _useState2[0],
-      setQueueData = _useState2[1];
+  var _useState3 = useState([firstArticle()]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      queueData = _useState4[0],
+      setQueueData = _useState4[1];
+
+  var _useState5 = useState(queueData[0]._id),
+      _useState6 = _slicedToArray(_useState5, 2),
+      active = _useState6[0],
+      setActive = _useState6[1];
 
   var refreshAD = function refreshAD(path) {
     var activeArticle = queueData.find(function (item) {
@@ -1142,16 +1169,11 @@ var ArticleQueue = function ArticleQueue(props) {
   };
 
   var preVscroll = 0;
-  var isScrollDown = true;
 
   var scrollDirectionDetect = function scrollDirectionDetect(e) {
     var window = e.currentTarget;
 
-    if (preVscroll > window.scrollY) {
-      isScrollDown = false;
-    } else if (preVscroll < window.scrollY) {
-      isScrollDown = true;
-    }
+    if (preVscroll > window.scrollY) ; else if (preVscroll < window.scrollY) ;
     preVscroll = window.scrollY;
   };
 
@@ -1241,38 +1263,23 @@ var ArticleQueue = function ArticleQueue(props) {
     }
   };
 
-  var onChangeArticle = function onChangeArticle(path, visibility, meta) {
+  var onChangeArticle = function onChangeArticle(path, meta) {
     var currentPath = window && window.location && window.location.pathname ? window.location.pathname.replace('/view/', '') : '';
     var newPath = '/view/' + path;
-
+    var activeArticle = queueData.find(function (item) {
+      return item.url.current === path;
+    });
+    setActive(function () {
+      return activeArticle._id;
+    });
     // Change URL and do other changes
-    var doChanges = function doChanges() {
-      window.history.pushState({ page: path }, meta.shareTitle, newPath);
-      changeMeta(meta);
-      if (props.setCustomDimensions) {
-        var activeArticle = queueData.find(function (item) {
-          return item.url.current === path;
-        });
-        props.setCustomDimensions(activeArticle, '200', prevUrl);
-      }
-      if (props.pageview) props.pageview(newPath);
-      refreshAD(path);
-    };
-
-    if (currentPath !== path) {
-      if (isScrollDown) {
-        if (visibility === 'top') {
-          doChanges();
-        }
-      } else {
-        if (visibility === 'bottom') {
-          doChanges();
-        }
-      }
-      if (visibility === 'small-top') {
-        doChanges();
-      }
+    window.history.pushState({ page: path }, meta.shareTitle, newPath);
+    changeMeta(meta);
+    if (props.setCustomDimensions) {
+      props.setCustomDimensions(activeArticle, '200', prevUrl);
     }
+    if (props.pageview) props.pageview(newPath);
+    refreshAD(path);
   };
 
   return React__default.createElement(
@@ -1282,10 +1289,12 @@ var ArticleQueue = function ArticleQueue(props) {
       return React__default.createElement(Article, _extends({
         key: index
       }, props, {
+        containerHeight: containerHeight,
         onChangeArticle: onChangeArticle,
         authorPrfix: authorPrefix,
         article: article,
-        cpModificationRequired: cpModificationRequired
+        cpModificationRequired: cpModificationRequired,
+        active: active === article._id
         // Passing queueData to check for single article
         , queueData: queueData,
         showRelatedArticles: showRelatedArticles

package/dist/esm/getSerializers.js

@@ -41,7 +41,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
-export { g as default } from './index-74d46cc5.js';
+export { g as default } from './index-6a239712.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/{index-74d46cc5.js → index-6a239712.js}

@@ -7058,6 +7058,14 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     return null;
   }
 
+  var today = moment().utc().format();
+
+  var Videos = nodes.videos.filter(function (video) {
+    if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (today >= video.published || !video.hasOwnProperty('published'))) {
+      return video;
+    }
+  });
+
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
     return builder.image(source);
@@ -7126,7 +7134,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var seriesVid = params.get('seriesVid') || 1;
     var data = [];
 
-    nodes.videos.forEach(function (vid) {
+    Videos.forEach(function (vid) {
       if (vid.type == 'mp4') {
         data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset).url(), url: vid.url });
       } else {
@@ -7141,10 +7149,10 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
     if (data.length < seriesVid) {
       setSeries(1);
-      setVidUrl(nodes.videos[0].url);
-      setVidThumbnail(nodes.videos[0].thumbnail && nodes.videos[0].thumbnail.asset ? urlFor(nodes.videos[0].thumbnail.asset).url() : '');
-      if (nodes.videos[0].type) {
-        setVidType(nodes.videos[0].type);
+      setVidUrl(Videos[0].url);
+      setVidThumbnail(Videos[0].thumbnail && Videos[0].thumbnail.asset ? urlFor(Videos[0].thumbnail.asset).url() : '');
+      if (Videos[0].type) {
+        setVidType(Videos[0].type);
       }
 
       var newPath = '/' + get2 + '/' + get3 + '?seriesVid=1';
@@ -7152,10 +7160,10 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       window.history.pushState(vidState, '', newPath);
     } else {
       setSeries(seriesVid);
-      setVidUrl(nodes.videos[seriesVid - 1].url);
-      setVidThumbnail(nodes.videos[seriesVid - 1].thumbnail && nodes.videos[seriesVid - 1].thumbnail.asset ? urlFor(nodes.videos[seriesVid - 1].thumbnail.asset).url() : '');
-      if (nodes.videos[0].type) {
-        setVidType(nodes.videos[seriesVid - 1].type);
+      setVidUrl(Videos[seriesVid - 1].url);
+      setVidThumbnail(Videos[seriesVid - 1].thumbnail && Videos[seriesVid - 1].thumbnail.asset ? urlFor(Videos[seriesVid - 1].thumbnail.asset).url() : '');
+      if (Videos[0].type) {
+        setVidType(Videos[seriesVid - 1].type);
       }
       setVidLoaded(true);
     }
@@ -7166,7 +7174,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     if (vidLoaded == true) {
       var params = new URL(document.location).searchParams;
       var seriesVid = params.get('seriesVid');
-      var vidTitle = nodes.videos[series - 1].title;
+      var vidTitle = Videos[series - 1].title;
       var originalTitle = document.title;
       if (seriesVid) {
         document.title = vidTitle + ' | ' + originalTitle;
@@ -7228,7 +7236,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       nextVid = currentVid + 1;
     }
     // set the new Video URL
-    setState(nodes.videos[nextVid].url, '', nextVid + 1);
+    setState(Videos[nextVid].url, '', nextVid + 1);
   }
 
   var autoplayNextVideo = function autoplayNextVideo(e) {
@@ -7249,7 +7257,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       nextVid = currentVid + 1;
     }
     // set the new Video URL
-    setState(nodes.videos[nextVid].url, '', nextVid + 1);
+    setState(Videos[nextVid].url, '', nextVid + 1);
   };
 
   var handlePlayPercent = function handlePlayPercent(player) {
@@ -7357,26 +7365,26 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         'Episode ',
         series
       ),
-      nodes.videos[series - 1] && React__default.createElement(
+      Videos[series - 1] && React__default.createElement(
         'h2',
         { className: 'mb-3' },
-        nodes.videos[series - 1].title
+        Videos[series - 1].title
       ),
-      nodes.videos[series - 1] && nodes.videos[series - 1].intro && React__default.createElement(
+      Videos[series - 1] && Videos[series - 1].intro && React__default.createElement(
         'p',
         { className: 'mb-3' },
         React__default.createElement(
           'em',
           null,
-          nodes.videos[series - 1].intro
+          Videos[series - 1].intro
         )
       ),
-      nodes.videos[series - 1] && nodes.videos[series - 1].text && React__default.createElement(BlockContent, _extends({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
+      Videos[series - 1] && Videos[series - 1].text && React__default.createElement(BlockContent, _extends({ serializers: getSerializers, blocks: Videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
     ),
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n     \n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n       \n       \n      '
+      '\n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n      '
     )
   );
 };
@@ -8012,9 +8020,11 @@ var InscreenSensor = function (_React$Component) {
 var ArticleSeries = function ArticleSeries(_ref) {
   var nodes = _ref.nodes,
       client = _ref.client,
+      pageview = _ref.pageview,
       getSerializers = _ref.getSerializers,
       accountIDs = _ref.accountIDs,
-      Ads = _ref.Ads;
+      Ads = _ref.Ads,
+      rootArticle = _ref.rootArticle;
 
   if (!nodes || !nodes.articles) {
     return null;
@@ -8175,7 +8185,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
     // Change URL and do other changes
     var doChanges = function doChanges() {
       if (firstLoad) {
-        refreshAD();
+        refreshAD(newPath);
       }
       window.history.pushState({ page: path }, '', newPath);
       document.title = title;
@@ -8255,6 +8265,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var refreshAD = function refreshAD(path) {
     //const activeArticle = path
     //let targeting = getTargeting({ article: activeArticle, cpModificationRequired, position: props.position, prevUrl })
+    if (pageview) pageview(path);
 
     if (!main_39) {
       lib_3.getGoogletag().then(function (googletag) {
@@ -8275,12 +8286,25 @@ var ArticleSeries = function ArticleSeries(_ref) {
   };
 
   var handleArrowClick = function handleArrowClick() {
+    var newPath = router.asPath.split('?')[0];
+    var title = nodes.seriesTitle;
     isScrollDown = true;
     upArrowClicked = true;
     arrowRef.current.style.visibility = 'hidden';
     window.scrollTo({ top: 0, behavior: 'smooth' });
-    window.history.pushState({}, '', router.asPath.split('?')[0]);
-    document.title = nodes.seriesTitle;
+    window.history.pushState({}, '', newPath);
+    document.title = title;
+
+    setCurrentURL(newPath);
+    setCurrentTitle(title);
+    if (rootArticle) {
+      setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
+      setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
+    } else {
+      setCurrentSummary('');
+      setCurrentThumbnail('');
+    }
+    refreshAD(newPath);
   };
 
   return React__default.createElement(
@@ -8288,10 +8312,10 @@ var ArticleSeries = function ArticleSeries(_ref) {
     null,
     React__default.createElement(
       'div',
-      { ref: arrowRef, className: 'scrollToTopArrow', onClick: function onClick() {
+      { ref: arrowRef, className: 'scrollToTopArrow' },
+      React__default.createElement(IoIosArrowDropupCircle, { style: { cursor: 'pointer' }, onClick: function onClick() {
           return handleArrowClick();
-        } },
-      React__default.createElement(IoIosArrowDropupCircle, null)
+        } })
     ),
     React__default.createElement('hr', { className: 'article-seperater my-4' }),
     React__default.createElement(
@@ -8461,7 +8485,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .scrollToTopArrow {\n            position: fixed;\n            top: 150px;\n            display: flex;\n            justify-content: center;\n            width: ' + contentWidth + 'px;\n            opacity: 1;\n            z-index: 99999999999;\n            cursor: pointer;\n            visibility: hidden;\n          }\n          .scrollToTopArrow > svg {\n            min-height: 50px;\n            min-width: 50px;\n            max-height: 50px;\n            max-width: 50px;\n          }\n          .block-content > div p {\n            padding: 0;\n          }\n\n          h2.article-title {\n            padding: 0;\n            font-weight: 500;\n          }\n          h4.article-title {\n            padding: 0;\n            font-weight: 500;\n          }\n          h4.prevNext-title {\n            padding: 0;\n            font-size: 1rem;\n            font-weight: 500;\n          }\n          .article-wrapper {\n            border: 1px solid #252525;\n            border-radius: 5px;\n            padding: 1rem 1rem 0 1rem;\n            margin-bottom: 1rem;\n          }\n          .prevNext-reading {\n            margin-top: -10px;\n            width: 75%;\n            text-align: center;\n            background: white;\n            border: 1px solid #252525;\n            align-self: center;\n            display: none;\n          }\n          .showReading {\n            display: block;\n          }\n          .author-details-wrapper a {\n            color: #252525;\n          }\n          .objective-prevNext-Wrapper {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n          }\n          .objective-title {\n            padding: 0 !important;\n          }\n          .prevNext-thumbnail {\n            display: flex;\n            flex-direction: column;\n            min-width: 225px;\n            max-width: 225px;\n            overflow: hidden;\n            align-items: center;\n            object-fit: contain;\n            border-radius: 15px;\n          }\n          .prevNext-thumbnail img {\n            height: 125px;\n            object-fit: contain;\n            border-radius: 15px;\n          }\n          .prevNext-summary {\n            text-align: center;\n          }\n          .prevNext-publishDate {\n            font-size: 0.75rem;\n            margin-top: 0.5rem;\n          }\n          .prevNext-title {\n            padding: 0 !important;\n            line-height: 1 !important;\n            font-weight: 500;\n          }\n          .prevNextWrapper {\n            display: flex;\n            flex-direction: row;\n            justify-content: space-evenly;\n            flex-wrap: wrap;\n          }\n          .prevNextWrapper a {\n            display: flex;\n            flex-direction: column;\n            color: #252525;\n            align-items: center;\n          }\n          .prevNextCards {\n            max-width: 250px;\n            margin-bottom: 1rem;\n          }\n          @media only screen and (max-width: 568px) {\n            .prevNextWrapper {\n              flex-direction: column;\n              align-items: center;\n            }\n            .prevNextCards {\n              margin-bottom: 2rem;\n            }\n          }\n          @media only screen and (max-width: 568px) {\n          }\n        '
+        '\n          .scrollToTopArrow {\n            position: fixed;\n            top: 150px;\n            display: flex;\n            justify-content: center;\n            width: ' + contentWidth + 'px;\n            opacity: 1;\n            z-index: 99999999999;\n            visibility: hidden;\n          }\n          .scrollToTopArrow > svg {\n            min-height: 50px;\n            min-width: 50px;\n            max-height: 50px;\n            max-width: 50px;\n          }\n          .block-content > div p {\n            padding: 0;\n          }\n\n          h2.article-title {\n            padding: 0;\n            font-weight: 500;\n          }\n          h4.article-title {\n            padding: 0;\n            font-weight: 500;\n          }\n          h4.prevNext-title {\n            padding: 0;\n            font-size: 1rem;\n            font-weight: 500;\n          }\n          .article-wrapper {\n            border: 1px solid #252525;\n            border-radius: 5px;\n            padding: 1rem 1rem 0 1rem;\n            margin-bottom: 1rem;\n          }\n          .prevNext-reading {\n            margin-top: -10px;\n            width: 75%;\n            text-align: center;\n            background: white;\n            border: 1px solid #252525;\n            align-self: center;\n            display: none;\n          }\n          .showReading {\n            display: block;\n          }\n          .author-details-wrapper a {\n            color: #252525;\n          }\n          .objective-prevNext-Wrapper {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n          }\n          .objective-title {\n            padding: 0 !important;\n          }\n          .prevNext-thumbnail {\n            display: flex;\n            flex-direction: column;\n            min-width: 225px;\n            max-width: 225px;\n            overflow: hidden;\n            align-items: center;\n            object-fit: contain;\n            border-radius: 15px;\n          }\n          .prevNext-thumbnail img {\n            height: 125px;\n            object-fit: contain;\n            border-radius: 15px;\n          }\n          .prevNext-summary {\n            text-align: center;\n          }\n          .prevNext-publishDate {\n            font-size: 0.75rem;\n            margin-top: 0.5rem;\n          }\n          .prevNext-title {\n            padding: 0 !important;\n            line-height: 1 !important;\n            font-weight: 500;\n          }\n          .prevNextWrapper {\n            display: flex;\n            flex-direction: row;\n            justify-content: space-evenly;\n            flex-wrap: wrap;\n          }\n          .prevNextWrapper a {\n            display: flex;\n            flex-direction: column;\n            color: #252525;\n            align-items: center;\n          }\n          .prevNextCards {\n            max-width: 250px;\n            margin-bottom: 1rem;\n          }\n          @media only screen and (max-width: 568px) {\n            .prevNextWrapper {\n              flex-direction: column;\n              align-items: center;\n            }\n            .prevNextCards {\n              margin-bottom: 2rem;\n            }\n          }\n          @media only screen and (max-width: 568px) {\n          }\n        '
       )
     )
   );
@@ -8815,7 +8839,8 @@ var getSerializers = function getSerializers() {
       contextualADFlag = _props$2 === undefined ? false : _props$2,
       articleId = props[9],
       Ads = props[10],
-      targeting = props[11];
+      targeting = props[11],
+      article = props[12];
 
   return {
     types: {
@@ -8837,7 +8862,7 @@ var getSerializers = function getSerializers() {
       articleSeries: function articleSeries(_ref3) {
         var node = _ref3.node;
 
-        return React__default.createElement(ArticleSeries, { nodes: node, accountIDs: videoAccountIDs || {}, client: client, getSerializers: getSerializers.apply(undefined, props), Ads: Ads || null });
+        return React__default.createElement(ArticleSeries, { nodes: node, accountIDs: videoAccountIDs || {}, pageview: pageview, client: client, getSerializers: getSerializers.apply(undefined, props), Ads: Ads || null, rootArticle: article || null });
       },
       figure: function figure(_ref4) {
         var node = _ref4.node;
@@ -9027,4 +9052,4 @@ var getSerializers = function getSerializers() {
   };
 };
 
-export { InscreenSensor as I, getSerializers as g, renderAuthor as r };
+export { getSerializers as g, renderAuthor as r };

package/dist/esm/index.js

@@ -79,7 +79,7 @@ import 'react-bootstrap/Form';
 import './index-d2f90501.js';
 import './js.cookie-6874175c.js';
 export { default as CMEDeck } from './CMEDeck.js';
-export { g as getSerializers } from './index-74d46cc5.js';
+export { g as getSerializers } from './index-6a239712.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/package.json

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