@mjhls/mjh-framework 1.0.691 → 1.0.693

package/dist/cjs/index.js

@@ -65,7 +65,7 @@ require('react-bootstrap');
 require('./timeDifferenceCalc.js');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('./iconBase-68959171.js');
-require('./index.esm-876ca9ff.js');
+require('./index.esm-90433435.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
 var ArticleCarousel = require('./ArticleCarousel.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-44c25825.js');
+var getSerializers = require('./index-59436c13.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');

package/dist/esm/AccordionPanel.js

@@ -6,7 +6,7 @@ import './web.dom.iterable-8956f9a5.js';
 import React__default, { useState } from 'react';
 import { _ as _slicedToArray } from './slicedToArray-7021e5df.js';
 import './iconBase-602d52fe.js';
-import { a as IoMdArrowDropdown } from './index.esm-85cb09e6.js';
+import { a as IoMdArrowDropdown } from './index.esm-29e48d38.js';
 import Accordion from 'react-bootstrap/Accordion';
 import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
 

package/dist/esm/ArticleSeriesListing.js

@@ -15,7 +15,7 @@ import React__default from 'react';
 import { l as lib_3 } from './index-93ec3c59.js';
 import 'prop-types';
 import Container from 'react-bootstrap/Container';
-import './moment-12415288.js';
+import { m as moment } from './moment-12415288.js';
 import { withRouter } from 'next/router';
 import './isSymbol-807e927e.js';
 import { d as debounce_1 } from './debounce-1a993acf.js';
@@ -28,7 +28,7 @@ import './slicedToArray-7021e5df.js';
 import './smoothscroll-4b699764.js';
 import YoutubeGroup from './YoutubeGroup.js';
 import './iconBase-602d52fe.js';
-import { I as IoIosArrowForward } from './index.esm-85cb09e6.js';
+import { I as IoIosArrowForward } from './index.esm-29e48d38.js';
 
 var ArticleSeriesListing = function (_React$Component) {
   _inherits(ArticleSeriesListing, _React$Component);
@@ -44,8 +44,29 @@ var ArticleSeriesListing = function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ArticleSeriesListing.__proto__ || _Object$getPrototypeOf(ArticleSeriesListing)).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.autoScroll = _this.props.autoScroll ? _this.props.autoScroll : false, _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
-      data: _this.dataArr,
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ArticleSeriesListing.__proto__ || _Object$getPrototypeOf(ArticleSeriesListing)).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.autoScroll = _this.props.autoScroll ? _this.props.autoScroll : false, _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) {
+                  return article;
+                }
+              });
+              innerObj.body = filteredArticles;
+              return innerObj;
+            } else {
+              return item;
+            }
+          });
+
+          tempObj.body = filteredBody;
+        }
+        return tempObj;
+      }),
       per: _this.params ? _this.params.to : 2,
       page: _this.props.currentPage || 1,
       from: _this.params ? _this.params.from : 0,

package/dist/esm/ExternalResources.js

@@ -38,9 +38,11 @@ import { B as BlockContent } from './BlockContent-a614acdf.js';
 import './smoothscroll-4b699764.js';
 import './GroupDeck.js';
 import 'react-bootstrap';
+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-8a757d91.js';
+import { g as getSerializers } from './index-a2e78632.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/HamMagazine.js

@@ -15,7 +15,7 @@ import './_set-species-cede29f8.js';
 import Segment from './Segment.js';
 import './react-social-icons-a7d5c5c7.js';
 import './iconBase-602d52fe.js';
-import { b as IoMdLogIn } from './index.esm-85cb09e6.js';
+import { b as IoMdLogIn } from './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
 import 'react-bootstrap/Form';
 import Nav from 'react-bootstrap/Nav';

package/dist/esm/NavMagazine.js

@@ -15,7 +15,7 @@ import './_set-species-cede29f8.js';
 import Segment from './Segment.js';
 import './react-social-icons-a7d5c5c7.js';
 import './iconBase-602d52fe.js';
-import { b as IoMdLogIn } from './index.esm-85cb09e6.js';
+import { b as IoMdLogIn } from './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
 import 'react-bootstrap/Form';
 import Nav from 'react-bootstrap/Nav';

package/dist/esm/NavNative.js

@@ -150,6 +150,9 @@ var NavNative = function NavNative(props) {
   var toggleClass = function toggleClass(selector, type, addOn) {
     if (type === 'id') {
       var searchBar = document.getElementById(selector);
+      // Aligning search bar below the searchbutton
+      var socialComponent = document.getElementById('search-content-desktop').getBoundingClientRect();
+      searchBar.style.right = window.innerWidth - socialComponent.left + 'px';
       if (searchBar && searchBar.classList && searchBar.classList.contains(addOn)) {
         searchBar.classList.remove(addOn);
       } else if (searchBar && searchBar.classList) {
@@ -219,7 +222,31 @@ var NavNative = function NavNative(props) {
     } else if (type === 'desktop') {
       return React__default.createElement(
         'div',
-        { id: 'search-content-desktop' },
+        null,
+        React__default.createElement(
+          'div',
+          { id: 'search-content-desktop' },
+          React__default.createElement(
+            IconContext.Provider,
+            { value: { color: socialIconVariant === 'light' ? 'white' : 'black', className: 'search-btn-desktop', size: '50px' } },
+            React__default.createElement(GoSearch, {
+              onClick: function onClick() {
+                toggleClass('search-bar-desktop', 'id', 'show');
+                toggleClass('search-btn-desktop', 'class', 'active-search');
+              }
+            })
+          ),
+          website && website.socialLinks && website.socialLinks.length !== 0 && React__default.createElement(
+            'div',
+            { id: 'social-tab-desktop', style: { display: 'flex' } },
+            website.socialLinks && React__default.createElement(SocialIcons, { socialLinks: website.socialLinks, variant: socialIconVariant })
+          ),
+          React__default.createElement(
+            'style',
+            { jsx: 'true' },
+            '\n              #social-tab-desktops {\n                position: relative;\n                display: flex;\n                left: 0px;\n              }\n              #social-tab-desktops svg {\n                height: 25px !important;\n                width: 25px !important;\n              }\n              @media screen and (max-width: 1191px) {\n                #search-content-desktop {\n                  display: none !important;\n                }\n              }\n              @media screen and (min-width: 1199px) {\n                .mobile-nav {\n                  width: 100% !important;\n                }\n              }\n              #search-content-desktop {\n                display: flex;\n                padding-top: 2px;\n                height: 35px;\n                position: relative;\n              }\n              .search-btn-desktop {\n                padding: 5px;\n                height: 35px;\n                width: 35px;\n                margin: -3px 0px 0px 0px;\n                cursor: pointer;\n              }\n              #search-bar-desktop {\n                display: none;\n                background-color: var(--primary);\n                position: fixed;\n                width: 400px;\n                border-radius: 5px;\n                height: 48px;\n                top: 105px;\n              }\n              #search-bar-desktop .form-inline {\n                padding: 5px;\n              }\n              #search-bar-desktop .form-inline .form-control {\n                width: 78%;\n                border-radius: 5px;\n              }\n              #search-bar-desktop .form-inline .btn {\n                width: 20%;\n                border-radius: 5px;\n                padding: 7px;\n                margin-left: 5px;\n              }\n              .show {\n                display: block !important;\n              }\n              .active-search {\n                border-radius: 5px;\n                border: 1px solid var(--secondary);\n                margin-right: 1px !important;\n              }\n              #basic-navbar-nav {\n                margin-right: 20%;\n              }\n            '
+          )
+        ),
         React__default.createElement(
           'div',
           { id: 'search-bar-desktop' },
@@ -239,26 +266,6 @@ var NavNative = function NavNative(props) {
               'Search'
             )
           )
-        ),
-        React__default.createElement(
-          IconContext.Provider,
-          { value: { color: socialIconVariant === 'light' ? 'white' : 'black', className: 'search-btn-desktop', size: '50px' } },
-          React__default.createElement(GoSearch, {
-            onClick: function onClick() {
-              toggleClass('search-bar-desktop', 'id', 'show');
-              toggleClass('search-btn-desktop', 'class', 'active-search');
-            }
-          })
-        ),
-        website && website.socialLinks && website.socialLinks.length !== 0 && React__default.createElement(
-          'div',
-          { id: 'social-tab-desktop', style: { display: 'flex' } },
-          website.socialLinks && React__default.createElement(SocialIcons, { socialLinks: website.socialLinks, variant: socialIconVariant })
-        ),
-        React__default.createElement(
-          'style',
-          { jsx: 'true' },
-          '\n            #social-tab-desktops {\n              position: relative;\n              display: flex;\n              left: 0px;\n            }\n            #social-tab-desktops svg {\n              height: 25px !important;\n              width: 25px !important;\n            }\n            @media screen and (max-width: 1191px) {\n              #search-content-desktop {\n                display: none !important;\n              }\n            }\n            @media screen and (min-width: 1199px) {\n              .mobile-nav {\n                width: 100% !important;\n              }\n            }\n            #search-content-desktop {\n              display: flex;\n              padding-top: 2px;\n              height: 35px;\n              position: fixed;\n              right: 5%;\n              top: 12px;\n            }\n            #search-content-desktop .search-btn-desktop {\n              padding: 5px;\n              height: 35px;\n              width: 35px;\n              margin: -3px 0px 0px 0px;\n              cursor: pointer;\n            }\n            #search-content-desktop #search-bar-desktop {\n              display: none;\n              background-color: var(--primary);\n              position: relative;\n              width: 400px;\n              border-radius: 5px;\n              height: 48px;\n              top: 50px;\n            }\n            #search-content-desktop #search-bar-desktop .form-inline {\n              padding: 5px;\n            }\n            #search-content-desktop #search-bar-desktop .form-inline .form-control {\n              width: 78%;\n              border-radius: 5px;\n            }\n            #search-content-desktop #search-bar-desktop .form-inline .btn {\n              width: 20%;\n              border-radius: 5px;\n              padding: 7px;\n              margin-left: 5px;\n            }\n            .show {\n              display: block !important;\n            }\n            .active-search {\n              border-radius: 5px;\n              border: 1px solid var(--secondary);\n              margin-right: 1px !important;\n            }\n            #basic-navbar-nav {\n              margin-right: 20%;\n            }\n          '
         )
       );
     }

package/dist/esm/PartnerDetailListing.js

@@ -48,8 +48,10 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './timeDifferenceCalc.js';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
+import './iconBase-602d52fe.js';
+import './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
-import { g as getSerializers } from './index-8a757d91.js';
+import { g as getSerializers } from './index-a2e78632.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/TemplateNormal.js

@@ -27,7 +27,7 @@ import './get-5ee14cda.js';
 import './react-social-icons-a7d5c5c7.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
-import './index.esm-85cb09e6.js';
+import './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
 import './defineProperty-b798470d.js';
 import 'react-bootstrap/Form';

package/dist/esm/Ustream.js

@@ -7,7 +7,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import { m as main_39 } from './main-0465b2a0.js';
 import { _ as _slicedToArray } from './slicedToArray-7021e5df.js';
 import './iconBase-602d52fe.js';
-import { c as IoIosOpen } from './index.esm-85cb09e6.js';
+import { c as IoIosOpen } from './index.esm-29e48d38.js';
 import { F as FaRegWindowClose } from './index.esm-cf08bf18.js';
 
 var Ustream = function Ustream(_ref) {

package/dist/esm/VideoSeriesListing.js

@@ -15,6 +15,7 @@ import React__default from 'react';
 import { l as lib_3 } from './index-93ec3c59.js';
 import 'prop-types';
 import Container from 'react-bootstrap/Container';
+import { m as moment } from './moment-12415288.js';
 import { withRouter } from 'next/router';
 import './isSymbol-807e927e.js';
 import { d as debounce_1 } from './debounce-1a993acf.js';
@@ -27,7 +28,7 @@ import './slicedToArray-7021e5df.js';
 import './smoothscroll-4b699764.js';
 import YoutubeGroup from './YoutubeGroup.js';
 import './iconBase-602d52fe.js';
-import { I as IoIosArrowForward } from './index.esm-85cb09e6.js';
+import { I as IoIosArrowForward } from './index.esm-29e48d38.js';
 
 var VideoSeriesListing = function (_React$Component) {
   _inherits(VideoSeriesListing, _React$Component);
@@ -43,8 +44,29 @@ var VideoSeriesListing = function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    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.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
-      data: _this.dataArr,
+    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;
+            }
+          });
+
+          tempObj.body = filteredBody;
+        }
+        return tempObj;
+      }),
       per: _this.params ? _this.params.to : 2,
       page: _this.props.currentPage || 1,
       from: _this.params ? _this.params.from : 0,
@@ -317,7 +339,16 @@ var VideoSeriesListing = function (_React$Component) {
                   'button',
                   {
                     className: 'btn',
-                    style: { margin: '0 auto 2rem', display: 'block', fontSize: '18px', padding: '.5rem 1.5rem', boxShadow: '1px 2px 4px 4px rgba(0,0,0,.15)', background: 'var(--primary)', color: '#fff', borderRadius: '5px' },
+                    style: {
+                      margin: '0 auto 2rem',
+                      display: 'block',
+                      fontSize: '18px',
+                      padding: '.5rem 1.5rem',
+                      boxShadow: '1px 2px 4px 4px rgba(0,0,0,.15)',
+                      background: 'var(--primary)',
+                      color: '#fff',
+                      borderRadius: '5px'
+                    },
                     onClick: function onClick(e) {
                       e.target.style.display = 'none';
                       _this2.loadMore();

package/dist/esm/View.js

@@ -40,10 +40,11 @@ import './smoothscroll-4b699764.js';
 import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
+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-8a757d91.js';
+import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-a2e78632.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/getSerializers.js

@@ -38,8 +38,10 @@ import './BlockContent-a614acdf.js';
 import './smoothscroll-4b699764.js';
 import './GroupDeck.js';
 import 'react-bootstrap';
+import './iconBase-602d52fe.js';
+import './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
-export { g as default } from './index-8a757d91.js';
+export { g as default } from './index-a2e78632.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';

package/dist/esm/{index-8a757d91.js → index-a2e78632.js}

@@ -3,7 +3,7 @@ import { a as _Array$from, _ as _toConsumableArray } from './toConsumableArray-7
 import { _ as _extends } from './extends-cc5da797.js';
 import { _ as _inherits$1, a as _classCallCheck$1, b as _possibleConstructorReturn$1, c as _Object$getPrototypeOf, d as _createClass$1 } from './inherits-7ee3e0c1.js';
 import { _ as _typeof$1 } from './typeof-08f2c380.js';
-import React__default, { useState, useEffect, useRef, useCallback } from 'react';
+import React__default, { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
 import { l as lib_3 } from './index-93ec3c59.js';
 import PropTypes from 'prop-types';
 import Row from 'react-bootstrap/Row';
@@ -22,6 +22,7 @@ import { B as BlockContent } from './BlockContent-a614acdf.js';
 import { g as getYoutubeId } from './smoothscroll-4b699764.js';
 import GroupDeck from './GroupDeck.js';
 import { Carousel, Table, Figure as Figure$1, Button, ProgressBar, Card, Row as Row$1, Col as Col$1 } from 'react-bootstrap';
+import { d as IoIosArrowDropupCircle } from './index.esm-29e48d38.js';
 import Button$1 from 'react-bootstrap/Button';
 import { u as util } from './util-7700fc59.js';
 import { R as ReactPlayerLoader } from './brightcove-react-player-loader.es-83f53e4e.js';
@@ -8019,6 +8020,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
     return null;
   }
   nodes.seriesTitle = !nodes.seriesTitle ? 'Learning Objectives' : nodes.seriesTitle;
+  var today = moment().utc().format();
 
   var authorPrefix = 'authors';
   var builder = imageUrlBuilder(client);
@@ -8029,28 +8031,38 @@ var ArticleSeries = function ArticleSeries(_ref) {
 
   var refArray = useRef([]);
   var adRefArray = useRef([]);
+  var articleContainerRef = useRef(null);
+  var arrowRef = useRef(null);
 
-  var _ref2 = main_39 ? useState(100) : useState(-25),
-      _ref3 = _slicedToArray(_ref2, 2),
-      NavoffsetTop = _ref3[0],
-      setNavoffsetTop = _ref3[1];
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentWidth = _useState2[0],
+      setContentWidth = _useState2[1];
+
+  var upArrowClicked = false;
+
+  var Articles = nodes.articles.filter(function (article) {
+    if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && today >= article.published) {
+      return article;
+    }
+  });
 
   var PrevNextCards = function PrevNextCards(show, articleNum) {
     var articles = [];
     if (articleNum >= 0) {
       if (articleNum == 0) {
-        articles.push(nodes.articles[1]);
-      } else if (articleNum == nodes.articles.length - 1) {
-        articles.push(nodes.articles[articleNum - 1]);
+        articles.push(Articles[1]);
+      } else if (articleNum == Articles.length - 1) {
+        articles.push(Articles[articleNum - 1]);
       } else {
-        articles.push(nodes.articles[articleNum - 1]);
-        articles.push(nodes.articles[articleNum + 1]);
+        articles.push(Articles[articleNum - 1]);
+        articles.push(Articles[articleNum + 1]);
       }
     } else {
-      articles = [].concat(_toConsumableArray(nodes.articles));
+      articles = [].concat(_toConsumableArray(Articles));
     }
     return articles.map(function (article, index) {
-      if (!article) return null;
+      if (!article || !article.is_visible && article.hasOwnProperty('is_visible') || today < article.published) return null;
       var showReading = show ? 'showReading' : '';
       var articleLabel = articles.length == 1 && articleNum != 0 || articles.length > 1 && index == 0 ? 'Previous' : 'Next';
       return React__default.createElement(
@@ -8090,35 +8102,35 @@ var ArticleSeries = function ArticleSeries(_ref) {
     });
   };
 
-  var _ref4 = router && router.asPath && router.asPath.split('?')[1] ? useState(router.asPath.split('=')[1]) : useState(null),
-      _ref5 = _slicedToArray(_ref4, 2),
-      selectedArticle = _ref5[0],
-      setSelectedArticle = _ref5[1];
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      firstLoad = _useState2[0],
-      setFirstLoad = _useState2[1];
+  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(null),
+  var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      currentURL = _useState4[0],
-      setCurrentURL = _useState4[1];
+      firstLoad = _useState4[0],
+      setFirstLoad = _useState4[1];
 
   var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
-      currentTitle = _useState6[0],
-      setCurrentTitle = _useState6[1];
+      currentURL = _useState6[0],
+      setCurrentURL = _useState6[1];
 
   var _useState7 = useState(null),
       _useState8 = _slicedToArray(_useState7, 2),
-      currentSummary = _useState8[0],
-      setCurrentSummary = _useState8[1];
+      currentTitle = _useState8[0],
+      setCurrentTitle = _useState8[1];
 
   var _useState9 = useState(null),
       _useState10 = _slicedToArray(_useState9, 2),
-      currentThumbnail = _useState10[0],
-      setCurrentThumbnail = _useState10[1];
+      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();
@@ -8126,15 +8138,6 @@ var ArticleSeries = function ArticleSeries(_ref) {
     setSelectedArticle(articleClicked);
     scrollToArticle(articleClicked);
   };
-
-  useEffect(function () {
-    try {
-      if (main_39) {
-        setNavoffsetTop(document.getElementById('navbar-ham').offsetHeight - 15);
-      }
-    } catch (e) {}
-  }, []);
-
   var scrollToArticle = function scrollToArticle(id) {
     var localArticleID = id ? id : selectedArticle;
     var findArticle = function findArticle(ref) {
@@ -8146,8 +8149,12 @@ var ArticleSeries = function ArticleSeries(_ref) {
     var indexOfRef = refArray.current.findIndex(findArticle);
 
     if (indexOfRef >= 0) {
-      //refArray.current[indexOfRef].wraperRef.current.scrollIntoView({ behavior: 'smooth' })
-      window.scrollTo({ top: refArray.current[indexOfRef].wraperRef.current.offsetTop - NavoffsetTop, behavior: 'smooth' });
+      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);
+      window.scrollTo({ top: newOffsetTop, behavior: 'smooth' });
+      //refArray.current[indexOfRef].wraperRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
     setFirstLoad(true);
   };
@@ -8195,13 +8202,24 @@ var ArticleSeries = function ArticleSeries(_ref) {
 
   var scrollDirectionDetect = function scrollDirectionDetect(e) {
     var window = e.currentTarget;
-
     if (preVscroll > window.scrollY) {
       isScrollDown = false;
-    } else if (preVscroll < window.scrollY) {
+      if (window.scrollY > articleContainerRef.current.offsetTop) {
+        arrowRef.current.classList.add('showArrow');
+        arrowRef.current.classList.remove('hideArrow');
+      }
+    } else if (preVscroll > window.scrollY) {
       isScrollDown = true;
     }
     preVscroll = window.scrollY;
+    setContentWidth(articleContainerRef.current.offsetWidth);
+    if (preVscroll <= articleContainerRef.current.offsetTop) {
+      arrowRef.current.classList.remove('showArrow');
+      arrowRef.current.classList.add('hideArrow');
+    }
+    if (window.scrollY === 0 && upArrowClicked === true) {
+      upArrowClicked = false;
+    }
   };
 
   useEffect(function () {
@@ -8211,7 +8229,8 @@ var ArticleSeries = function ArticleSeries(_ref) {
     };
   });
 
-  useEffect(function () {
+  useLayoutEffect(function () {
+    console.log('useLayoutEffect');
     if (!firstLoad) {
       if (main_39) {
         grabLoadedAds();
@@ -8219,10 +8238,9 @@ var ArticleSeries = function ArticleSeries(_ref) {
         scrollToArticle();
       }
     }
-  }, []);
+  });
 
   var grabLoadedAds = function grabLoadedAds() {
-    console.dir(lib_3);
     lib_3.getGoogletag().then(function (googletag) {
       var checkIfReady = window.setInterval(function () {
         if (window.googletag && googletag.pubadsReady) {
@@ -8255,9 +8273,26 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
+  var handleArrowClick = function handleArrowClick() {
+    isScrollDown = true;
+    upArrowClicked = true;
+    arrowRef.current.classList.add('hideArrow');
+    arrowRef.current.classList.remove('showArrow');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    window.history.pushState({}, '', router.asPath.split('?')[0]);
+    document.title = nodes.seriesTitle;
+  };
+
   return React__default.createElement(
     React__default.Fragment,
     null,
+    React__default.createElement(
+      'div',
+      { ref: arrowRef, className: 'scrollToTopArrow hideArrow', onClick: function onClick() {
+          return handleArrowClick();
+        } },
+      React__default.createElement(IoIosArrowDropupCircle, null)
+    ),
     React__default.createElement('hr', { className: 'article-seperater my-4' }),
     React__default.createElement(
       'div',
@@ -8301,8 +8336,8 @@ var ArticleSeries = function ArticleSeries(_ref) {
     ),
     React__default.createElement(
       'div',
-      { className: 'article-container', style: { marginBottom: '2rem' } },
-      nodes.articles.map(function (article, index) {
+      { ref: articleContainerRef, className: 'article-container', style: { marginBottom: '2rem' } },
+      Articles.map(function (article, index) {
         return React__default.createElement(
           'div',
           { key: article.title },
@@ -8317,8 +8352,10 @@ var ArticleSeries = function ArticleSeries(_ref) {
                 return refArray.current[index] = ele;
               },
               onChange: function onChange(visible) {
-                if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
-                  onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor(article.thumbnail.asset).url());
+                if (!upArrowClicked) {
+                  if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
+                    onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor(article.thumbnail.asset).url());
+                  }
                 }
               } },
             React__default.createElement(
@@ -8373,26 +8410,30 @@ var ArticleSeries = function ArticleSeries(_ref) {
                 }, client.config())),
                 React__default.createElement('hr', { className: 'article-seperater my-4' })
               ),
-              React__default.createElement(
-                'div',
-                { className: 'objective-prevNext-Wrapper' },
-                React__default.createElement(
-                  'h5',
-                  { className: 'objective-title' },
-                  nodes.seriesTitle
-                ),
+              Articles.length > 1 && React__default.createElement(
+                React__default.Fragment,
+                null,
                 React__default.createElement(
                   'div',
-                  { className: 'prevNextWrapper' },
-                  PrevNextCards(true, index)
-                )
-              ),
-              React__default.createElement('hr', { className: 'article-seperater' })
+                  { className: 'objective-prevNext-Wrapper' },
+                  React__default.createElement(
+                    'h5',
+                    { className: 'objective-title' },
+                    nodes.seriesTitle
+                  ),
+                  React__default.createElement(
+                    'div',
+                    { className: 'prevNextWrapper' },
+                    PrevNextCards(true, index)
+                  )
+                ),
+                React__default.createElement('hr', { className: 'article-seperater' })
+              )
             ),
             React__default.createElement(
               'div',
               { className: 'ad-box', style: { textAlign: 'center' } },
-              main_39 && nodes.articles.length - 1 !== index && Ads.map(function (ad, innerIndex) {
+              main_39 && Articles.length - 1 !== index && Ads.map(function (ad, innerIndex) {
                 if (innerIndex === 0) {
                   return React__default.createElement(
                     'div',
@@ -8420,7 +8461,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\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: 0;\n            z-index: 99999999999;\n            cursor: pointer;\n          }\n          .showArrow {\n            opacity: 1;\n          }\n          .hideArrow {\n            opacity: 0;\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        '
       )
     )
   );