@mjhls/mjh-framework 1.0.697 → 1.0.698

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.697
+# mjh-framework v. 1.0.698
 
 > Foundation Framework 
 

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-a9422f8a.js');
+var getSerializers = require('./index-0c398de9.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

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-a9422f8a.js');
+var getSerializers = require('./index-0c398de9.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/VideoSeriesListing.js

@@ -52,25 +52,27 @@ var VideoSeriesListing = function (_React$Component) {
 
     return _ret = (_temp = (_this = inherits._possibleConstructorReturn(this, (_ref = VideoSeriesListing.__proto__ || inherits._Object$getPrototypeOf(VideoSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.today = moment.moment().utc().format(), _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
       data: _this.dataArr.map(function (item) {
-        var tempObj = item;
-        if (tempObj.body) {
-          var filteredBody = tempObj.body.map(function (item) {
-            if (item._type === 'articleSeries') {
-              var innerObj = item;
-              var filteredArticles = innerObj.articles.filter(function (article) {
-                if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && (_this.today >= article.published || !article.hasOwnProperty('published'))) {
-                  return article;
-                }
-              });
-              innerObj.body = filteredArticles;
-              return innerObj;
-            } else {
-              return item;
-            }
-          });
+        var tempObj = item.map(function (arrItem) {
+          if (arrItem.body) {
+            var filteredBody = arrItem.body.map(function (item) {
+              if (item._type === 'youtubeGallery') {
+                var innerObj = item;
+                var filteredArticles = innerObj.videos.filter(function (video) {
+                  if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (_this.today >= video.published || !video.hasOwnProperty('published'))) {
+                    return video;
+                  }
+                });
+                innerObj.videos = filteredArticles;
+                return innerObj;
+              } else {
+                return item;
+              }
+            });
 
-          tempObj.body = filteredBody;
-        }
+            arrItem.body = filteredBody;
+          }
+          return arrItem;
+        });
         return tempObj;
       }),
       per: _this.params ? _this.params.to : 2,

package/dist/cjs/View.js

@@ -50,7 +50,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-a9422f8a.js');
+var getSerializers = require('./index-0c398de9.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/YoutubeGroup.js

@@ -74,7 +74,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
     var tileHeight = tileArray.current.map(function (tile) {
       return tile.scrollHeight;
     });
-    console.log(tileArray.current);
+
     for (var ele in tileArray.current) {
       var eleHeight = tileHeight[ele] < 185 ? 185 : tileHeight[ele];
       tileArray.current[ele].style.height = eleHeight + 'px';

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-a9422f8a.js');
+var getSerializers = require('./index-0c398de9.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/cjs/{index-a9422f8a.js → index-0c398de9.js}

@@ -7069,6 +7069,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   var today = moment.moment().utc().format();
 
   var Videos = nodes.videos.filter(function (video) {
+    console.dir(video);
     if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (today >= video.published || !video.hasOwnProperty('published'))) {
       return video;
     }
@@ -8052,12 +8053,65 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var articleContainerRef = React.useRef(null);
   var arrowRef = React.useRef(null);
 
-  var _useState = React.useState(0),
+  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? React.useState(router.asPath.split('=')[1]) : React.useState(null),
+      _ref3 = slicedToArray._slicedToArray(_ref2, 2),
+      selectedArticle = _ref3[0],
+      setSelectedArticle = _ref3[1];
+
+  var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      contentWidth = _useState2[0],
-      setContentWidth = _useState2[1];
+      firstLoad = _useState2[0],
+      setFirstLoad = _useState2[1];
+
+  var _useState3 = React.useState(null),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      currentURL = _useState4[0],
+      setCurrentURL = _useState4[1];
 
-  var upArrowClicked = false;
+  var _useState5 = React.useState(null),
+      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+      currentTitle = _useState6[0],
+      setCurrentTitle = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+      currentSummary = _useState8[0],
+      setCurrentSummary = _useState8[1];
+
+  var _useState9 = React.useState(null),
+      _useState10 = slicedToArray._slicedToArray(_useState9, 2),
+      currentThumbnail = _useState10[0],
+      setCurrentThumbnail = _useState10[1];
+
+  var _useState11 = React.useState(null),
+      _useState12 = slicedToArray._slicedToArray(_useState11, 2),
+      sensorVisible = _useState12[0],
+      setSensorVisible = _useState12[1];
+
+  var _useState13 = React.useState(0),
+      _useState14 = slicedToArray._slicedToArray(_useState13, 2),
+      contentWidth = _useState14[0],
+      setContentWidth = _useState14[1];
+
+  var _useState15 = React.useState(false),
+      _useState16 = slicedToArray._slicedToArray(_useState15, 2),
+      upArrowClicked = _useState16[0],
+      setUpArrowClicked = _useState16[1];
+
+  var _useState17 = React.useState(null),
+      _useState18 = slicedToArray._slicedToArray(_useState17, 2),
+      articleScrollHeight = _useState18[0],
+      setArticleScrollHeight = _useState18[1];
+
+  var _useState19 = React.useState(false),
+      _useState20 = slicedToArray._slicedToArray(_useState19, 2),
+      articleClicked = _useState20[0],
+      setArticleClicked = _useState20[1];
+
+  var _useState21 = React.useState(null),
+      _useState22 = slicedToArray._slicedToArray(_useState21, 2),
+      articleIndex = _useState22[0],
+      setArticleIndex = _useState22[1];
 
   var Articles = nodes.articles.filter(function (article) {
     if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && today >= article.published) {
@@ -8090,7 +8144,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           'a',
           { onClick: function onClick(e) {
               return articleCardClickHandler(e);
-            }, 'data-articleid': '' + article.param.current },
+            }, 'data-cardlabel': '' + articleLabel, 'data-articleIndex': '' + index, 'data-articleid': '' + article.param.current },
           React__default.createElement(
             'div',
             { className: 'prevNext-thumbnail' },
@@ -8120,43 +8174,17 @@ var ArticleSeries = function ArticleSeries(_ref) {
     });
   };
 
-  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? React.useState(router.asPath.split('=')[1]) : React.useState(null),
-      _ref3 = slicedToArray._slicedToArray(_ref2, 2),
-      selectedArticle = _ref3[0],
-      setSelectedArticle = _ref3[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      firstLoad = _useState4[0],
-      setFirstLoad = _useState4[1];
-
-  var _useState5 = React.useState(null),
-      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      currentURL = _useState6[0],
-      setCurrentURL = _useState6[1];
-
-  var _useState7 = React.useState(null),
-      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      currentTitle = _useState8[0],
-      setCurrentTitle = _useState8[1];
-
-  var _useState9 = React.useState(null),
-      _useState10 = slicedToArray._slicedToArray(_useState9, 2),
-      currentSummary = _useState10[0],
-      setCurrentSummary = _useState10[1];
-
-  var _useState11 = React.useState(null),
-      _useState12 = slicedToArray._slicedToArray(_useState11, 2),
-      currentThumbnail = _useState12[0],
-      setCurrentThumbnail = _useState12[1];
-
   var articleCardClickHandler = function articleCardClickHandler(e) {
     e.preventDefault();
     var articleClicked = e.currentTarget.dataset.articleid;
+    setArticleClicked(true);
+    setArticleIndex(e.currentTarget.dataset.articleindex);
+    setSensorVisible(false);
     setSelectedArticle(articleClicked);
-    scrollToArticle(articleClicked);
+    scrollToArticle(articleClicked, e.currentTarget.dataset.cardlabel);
+    arrowRef.current.style.visibility = 'hidden';
   };
-  var scrollToArticle = function scrollToArticle(id) {
+  var scrollToArticle = function scrollToArticle(id, cardLabel) {
     var localArticleID = id ? id : selectedArticle;
     var findArticle = function findArticle(ref) {
       if (ref) {
@@ -8164,13 +8192,18 @@ var ArticleSeries = function ArticleSeries(_ref) {
       }
       return false;
     };
+    console.log('cardLabel', cardLabel);
+    var isNextPrev = cardLabel === 'Next' || 'Previous' ? true : false;
+    console.log(isNextPrev);
     var indexOfRef = refArray.current.findIndex(findArticle);
-
     if (indexOfRef >= 0) {
       var newOffsetTop = !firstLoad ? refArray.current[indexOfRef].wraperRef.current.offsetTop : refArray.current[indexOfRef].wraperRef.current.offsetTop + document.getElementsByTagName('header')[0].clientHeight;
       // console.dir(refArray.current[indexOfRef].wraperRef.current)
       // console.log(document.getElementsByTagName('header')[0].clientHeight)
       // console.log(refArray.current[indexOfRef].wraperRef.current.offsetTop)
+
+      setArticleScrollHeight(newOffsetTop);
+
       window.scrollTo({ top: newOffsetTop, behavior: 'smooth' });
       //refArray.current[indexOfRef].wraperRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
@@ -8183,6 +8216,12 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
+  React.useEffect(function () {
+    if (articleClicked === true) {
+      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor(Articles[articleIndex].thumbnail.asset).url());
+    }
+  }, [articleClicked]);
+
   var onChangeArticle = function onChangeArticle(path, visibility, title, summary, shareImage) {
     var currentPath = window && window.location && window.location.pathname ? window.location.pathname.replace('?seriesArticle=', '') : '';
     var newPath = (router && router.asPath && router.asPath.split('?')[0]) + '?seriesArticle=' + path;
@@ -8222,7 +8261,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
     var window = e.currentTarget;
     if (preVscroll > window.scrollY) {
       isScrollDown = false;
-      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && !upArrowClicked) {
+      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && upArrowClicked === false && articleClicked === false) {
         arrowRef.current.style.visibility = 'visible';
       }
     } else if (preVscroll < window.scrollY) {
@@ -8236,8 +8275,15 @@ var ArticleSeries = function ArticleSeries(_ref) {
     if (preVscroll <= articleContainerRef.current.offsetTop) {
       arrowRef.current.style.visibility = 'hidden';
     }
+    if (window.scrollY >= articleScrollHeight && articleClicked === true) {
+      setArticleClicked(false);
+      setSensorVisible(true);
+      setUpArrowClicked(false);
+    }
     if (window.scrollY === 0 && upArrowClicked === true) {
-      upArrowClicked = false;
+      setUpArrowClicked(false);
+      setSensorVisible(true);
+      setArticleClicked(false);
     }
   };
 
@@ -8251,6 +8297,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
   React.useLayoutEffect(function () {
     //console.log('useLayoutEffect')
     if (!firstLoad) {
+      setUpArrowClicked(false);
       if (main.main_39) {
         grabLoadedAds();
       } else {
@@ -8293,26 +8340,34 @@ 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({}, '', newPath);
-    document.title = title;
+  React.useEffect(function () {
+    console.log('sensorVisible Effect');
+    if (sensorVisible === false && articleClicked === false) {
+      var newPath = router.asPath.split('?')[0];
+      var title = nodes.seriesTitle;
+      isScrollDown = true;
+      setUpArrowClicked(true);
+      arrowRef.current.style.visibility = 'hidden';
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      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('');
+      setCurrentURL(newPath);
+      setCurrentTitle(title);
+      if (rootArticle) {
+        setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
+        setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
+      } else {
+        setCurrentSummary('');
+        setCurrentThumbnail('');
+      }
+      refreshAD(newPath);
     }
-    refreshAD(newPath);
+  }, [sensorVisible]);
+
+  var handleArrowClick = function handleArrowClick() {
+    console.log('handleArrowClick');
+    setSensorVisible(false);
   };
 
   return React__default.createElement(
@@ -8376,6 +8431,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           React__default.createElement(
             InscreenSensor,
             {
+              visible: sensorVisible,
               offSetTop: 120,
               className: 'inscreen-wrapper',
               key: '' + article.param.current,
@@ -8384,7 +8440,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
                 return refArray.current[index] = ele;
               },
               onChange: function onChange(visible) {
-                if (!upArrowClicked) {
+                if (upArrowClicked === false && articleClicked === false) {
                   if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
                     onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor(article.thumbnail.asset).url());
                   }

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-a9422f8a.js');
+var getSerializers = require('./index-0c398de9.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

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-ea6b6891.js';
+import { g as getSerializers } from './index-9c5bdccd.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

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-ea6b6891.js';
+import { g as getSerializers } from './index-9c5bdccd.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/VideoSeriesListing.js

@@ -46,25 +46,27 @@ var VideoSeriesListing = function (_React$Component) {
 
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = VideoSeriesListing.__proto__ || _Object$getPrototypeOf(VideoSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.today = moment().utc().format(), _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
       data: _this.dataArr.map(function (item) {
-        var tempObj = item;
-        if (tempObj.body) {
-          var filteredBody = tempObj.body.map(function (item) {
-            if (item._type === 'articleSeries') {
-              var innerObj = item;
-              var filteredArticles = innerObj.articles.filter(function (article) {
-                if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && (_this.today >= article.published || !article.hasOwnProperty('published'))) {
-                  return article;
-                }
-              });
-              innerObj.body = filteredArticles;
-              return innerObj;
-            } else {
-              return item;
-            }
-          });
+        var tempObj = item.map(function (arrItem) {
+          if (arrItem.body) {
+            var filteredBody = arrItem.body.map(function (item) {
+              if (item._type === 'youtubeGallery') {
+                var innerObj = item;
+                var filteredArticles = innerObj.videos.filter(function (video) {
+                  if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (_this.today >= video.published || !video.hasOwnProperty('published'))) {
+                    return video;
+                  }
+                });
+                innerObj.videos = filteredArticles;
+                return innerObj;
+              } else {
+                return item;
+              }
+            });
 
-          tempObj.body = filteredBody;
-        }
+            arrItem.body = filteredBody;
+          }
+          return arrItem;
+        });
         return tempObj;
       }),
       per: _this.params ? _this.params.to : 2,

package/dist/esm/View.js

@@ -44,7 +44,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-ea6b6891.js';
+import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-9c5bdccd.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/YoutubeGroup.js

@@ -69,7 +69,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
     var tileHeight = tileArray.current.map(function (tile) {
       return tile.scrollHeight;
     });
-    console.log(tileArray.current);
+
     for (var ele in tileArray.current) {
       var eleHeight = tileHeight[ele] < 185 ? 185 : tileHeight[ele];
       tileArray.current[ele].style.height = eleHeight + 'px';

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-ea6b6891.js';
+export { g as default } from './index-9c5bdccd.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/{index-ea6b6891.js → index-9c5bdccd.js}

@@ -7062,6 +7062,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   var today = moment().utc().format();
 
   var Videos = nodes.videos.filter(function (video) {
+    console.dir(video);
     if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (today >= video.published || !video.hasOwnProperty('published'))) {
       return video;
     }
@@ -8045,12 +8046,65 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var articleContainerRef = useRef(null);
   var arrowRef = useRef(null);
 
-  var _useState = useState(0),
+  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? useState(router.asPath.split('=')[1]) : useState(null),
+      _ref3 = _slicedToArray(_ref2, 2),
+      selectedArticle = _ref3[0],
+      setSelectedArticle = _ref3[1];
+
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      contentWidth = _useState2[0],
-      setContentWidth = _useState2[1];
+      firstLoad = _useState2[0],
+      setFirstLoad = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentURL = _useState4[0],
+      setCurrentURL = _useState4[1];
 
-  var upArrowClicked = false;
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentTitle = _useState6[0],
+      setCurrentTitle = _useState6[1];
+
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentSummary = _useState8[0],
+      setCurrentSummary = _useState8[1];
+
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      currentThumbnail = _useState10[0],
+      setCurrentThumbnail = _useState10[1];
+
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      sensorVisible = _useState12[0],
+      setSensorVisible = _useState12[1];
+
+  var _useState13 = useState(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      contentWidth = _useState14[0],
+      setContentWidth = _useState14[1];
+
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      upArrowClicked = _useState16[0],
+      setUpArrowClicked = _useState16[1];
+
+  var _useState17 = useState(null),
+      _useState18 = _slicedToArray(_useState17, 2),
+      articleScrollHeight = _useState18[0],
+      setArticleScrollHeight = _useState18[1];
+
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      articleClicked = _useState20[0],
+      setArticleClicked = _useState20[1];
+
+  var _useState21 = useState(null),
+      _useState22 = _slicedToArray(_useState21, 2),
+      articleIndex = _useState22[0],
+      setArticleIndex = _useState22[1];
 
   var Articles = nodes.articles.filter(function (article) {
     if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && today >= article.published) {
@@ -8083,7 +8137,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           'a',
           { onClick: function onClick(e) {
               return articleCardClickHandler(e);
-            }, 'data-articleid': '' + article.param.current },
+            }, 'data-cardlabel': '' + articleLabel, 'data-articleIndex': '' + index, 'data-articleid': '' + article.param.current },
           React__default.createElement(
             'div',
             { className: 'prevNext-thumbnail' },
@@ -8113,43 +8167,17 @@ var ArticleSeries = function ArticleSeries(_ref) {
     });
   };
 
-  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? useState(router.asPath.split('=')[1]) : useState(null),
-      _ref3 = _slicedToArray(_ref2, 2),
-      selectedArticle = _ref3[0],
-      setSelectedArticle = _ref3[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      firstLoad = _useState4[0],
-      setFirstLoad = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      currentURL = _useState6[0],
-      setCurrentURL = _useState6[1];
-
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      currentTitle = _useState8[0],
-      setCurrentTitle = _useState8[1];
-
-  var _useState9 = useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      currentSummary = _useState10[0],
-      setCurrentSummary = _useState10[1];
-
-  var _useState11 = useState(null),
-      _useState12 = _slicedToArray(_useState11, 2),
-      currentThumbnail = _useState12[0],
-      setCurrentThumbnail = _useState12[1];
-
   var articleCardClickHandler = function articleCardClickHandler(e) {
     e.preventDefault();
     var articleClicked = e.currentTarget.dataset.articleid;
+    setArticleClicked(true);
+    setArticleIndex(e.currentTarget.dataset.articleindex);
+    setSensorVisible(false);
     setSelectedArticle(articleClicked);
-    scrollToArticle(articleClicked);
+    scrollToArticle(articleClicked, e.currentTarget.dataset.cardlabel);
+    arrowRef.current.style.visibility = 'hidden';
   };
-  var scrollToArticle = function scrollToArticle(id) {
+  var scrollToArticle = function scrollToArticle(id, cardLabel) {
     var localArticleID = id ? id : selectedArticle;
     var findArticle = function findArticle(ref) {
       if (ref) {
@@ -8157,13 +8185,18 @@ var ArticleSeries = function ArticleSeries(_ref) {
       }
       return false;
     };
+    console.log('cardLabel', cardLabel);
+    var isNextPrev = cardLabel === 'Next' || 'Previous' ? true : false;
+    console.log(isNextPrev);
     var indexOfRef = refArray.current.findIndex(findArticle);
-
     if (indexOfRef >= 0) {
       var newOffsetTop = !firstLoad ? refArray.current[indexOfRef].wraperRef.current.offsetTop : refArray.current[indexOfRef].wraperRef.current.offsetTop + document.getElementsByTagName('header')[0].clientHeight;
       // console.dir(refArray.current[indexOfRef].wraperRef.current)
       // console.log(document.getElementsByTagName('header')[0].clientHeight)
       // console.log(refArray.current[indexOfRef].wraperRef.current.offsetTop)
+
+      setArticleScrollHeight(newOffsetTop);
+
       window.scrollTo({ top: newOffsetTop, behavior: 'smooth' });
       //refArray.current[indexOfRef].wraperRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
@@ -8176,6 +8209,12 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
+  useEffect(function () {
+    if (articleClicked === true) {
+      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor(Articles[articleIndex].thumbnail.asset).url());
+    }
+  }, [articleClicked]);
+
   var onChangeArticle = function onChangeArticle(path, visibility, title, summary, shareImage) {
     var currentPath = window && window.location && window.location.pathname ? window.location.pathname.replace('?seriesArticle=', '') : '';
     var newPath = (router && router.asPath && router.asPath.split('?')[0]) + '?seriesArticle=' + path;
@@ -8215,7 +8254,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
     var window = e.currentTarget;
     if (preVscroll > window.scrollY) {
       isScrollDown = false;
-      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && !upArrowClicked) {
+      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && upArrowClicked === false && articleClicked === false) {
         arrowRef.current.style.visibility = 'visible';
       }
     } else if (preVscroll < window.scrollY) {
@@ -8229,8 +8268,15 @@ var ArticleSeries = function ArticleSeries(_ref) {
     if (preVscroll <= articleContainerRef.current.offsetTop) {
       arrowRef.current.style.visibility = 'hidden';
     }
+    if (window.scrollY >= articleScrollHeight && articleClicked === true) {
+      setArticleClicked(false);
+      setSensorVisible(true);
+      setUpArrowClicked(false);
+    }
     if (window.scrollY === 0 && upArrowClicked === true) {
-      upArrowClicked = false;
+      setUpArrowClicked(false);
+      setSensorVisible(true);
+      setArticleClicked(false);
     }
   };
 
@@ -8244,6 +8290,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
   useLayoutEffect(function () {
     //console.log('useLayoutEffect')
     if (!firstLoad) {
+      setUpArrowClicked(false);
       if (main_39) {
         grabLoadedAds();
       } else {
@@ -8286,26 +8333,34 @@ 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({}, '', newPath);
-    document.title = title;
+  useEffect(function () {
+    console.log('sensorVisible Effect');
+    if (sensorVisible === false && articleClicked === false) {
+      var newPath = router.asPath.split('?')[0];
+      var title = nodes.seriesTitle;
+      isScrollDown = true;
+      setUpArrowClicked(true);
+      arrowRef.current.style.visibility = 'hidden';
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      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('');
+      setCurrentURL(newPath);
+      setCurrentTitle(title);
+      if (rootArticle) {
+        setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
+        setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
+      } else {
+        setCurrentSummary('');
+        setCurrentThumbnail('');
+      }
+      refreshAD(newPath);
     }
-    refreshAD(newPath);
+  }, [sensorVisible]);
+
+  var handleArrowClick = function handleArrowClick() {
+    console.log('handleArrowClick');
+    setSensorVisible(false);
   };
 
   return React__default.createElement(
@@ -8369,6 +8424,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           React__default.createElement(
             InscreenSensor,
             {
+              visible: sensorVisible,
               offSetTop: 120,
               className: 'inscreen-wrapper',
               key: '' + article.param.current,
@@ -8377,7 +8433,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
                 return refArray.current[index] = ele;
               },
               onChange: function onChange(visible) {
-                if (!upArrowClicked) {
+                if (upArrowClicked === false && articleClicked === false) {
                   if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
                     onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor(article.thumbnail.asset).url());
                   }

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-ea6b6891.js';
+export { g as getSerializers } from './index-9c5bdccd.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.697",
+  "version": "1.0.698",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",