@mjhls/mjh-framework 1.0.644 → 1.0.646

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.644
+# mjh-framework v. 1.0.646
 
 > Foundation Framework 
 

package/dist/cjs/MasterDeck.js

@@ -481,7 +481,8 @@ var MasterDeck = function (_React$Component) {
             this.state.scrolling ? React__default.createElement(
               'button',
               {
-                style: { margin: 'auto', width: '100%' },
+                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' },
                 onClick: function onClick(e) {
                   _this3.loadMore();
                 } },

package/dist/cjs/RelatedContent.js

@@ -5,8 +5,11 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 require('./_commonjsHelpers-06173234.js');
 var React = require('react');
 var React__default = _interopDefault(React);
+require('prop-types');
 var moment = require('./moment-66a6a284.js');
+require('react-dom');
 var index$1 = require('./index-b5eb3ff8.js');
+var index$2 = require('./index-da796b8c.js');
 require('react-bootstrap/Media');
 
 /*
@@ -67,10 +70,14 @@ var RelatedContent = function RelatedContent(props) {
           React__default.createElement(
             'figure',
             null,
-            React__default.createElement('img', {
-              src: article.thumbnail ? urlFor(article.thumbnail.asset).width(500).url() : defaultImage,
-              alt: article.title
-            })
+            React__default.createElement(
+              index$2.LazyLoad,
+              { once: true },
+              React__default.createElement('img', {
+                src: article.thumbnail ? urlFor(article.thumbnail.asset).width(500).url() : defaultImage,
+                alt: article.title
+              })
+            )
           ),
           React__default.createElement(
             'div',

package/dist/cjs/VideoSeriesListing.js

@@ -229,17 +229,74 @@ var VideoSeriesListing = function (_React$Component) {
   }
 
   inherits._createClass(VideoSeriesListing, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      console.log(this.state);
+    }
+  }, {
     key: 'render',
     value: function render() {
       var _this2 = this;
 
-      return React__default.createElement(
-        React__default.Fragment,
-        null,
-        this.state.data.length >= 1 && this.state.data[0].length > 0 ? //Check if any Video Groups available
-        React__default.createElement(
-          index_es.InfiniteScroll,
-          { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+      var _props$autoScroll = this.props.autoScroll,
+          autoScroll = _props$autoScroll === undefined ? true : _props$autoScroll;
+
+
+      if (autoScroll) {
+        return React__default.createElement(
+          React__default.Fragment,
+          null,
+          this.state.data.length >= 1 && this.state.data[0].length > 0 ?
+          //Check if any Video Groups available
+          React__default.createElement(
+            index_es.InfiniteScroll,
+            { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+            React__default.createElement(
+              Container,
+              null,
+              this.state.data && this.state.data.map(function (series, index) {
+                var page = series && series.length > 0 && series[0].pageNumber !== 1 ? series[0].pageNumber : 1;
+
+                return React__default.createElement(
+                  React__default.Fragment,
+                  { key: index },
+                  React__default.createElement(
+                    visibilitySensor.VisibilitySensor,
+                    {
+                      onChange: function onChange(isVisible) {
+                        isVisible && _this2.changePageNumber(page);
+                      } },
+                    React__default.createElement('div', { className: 'visibility-sensor', style: { minHeight: '.25rem' } })
+                  ),
+                  React__default.createElement(
+                    'div',
+                    null,
+                    _this2.renderSeries(series)
+                  )
+                );
+              })
+            )
+          ) : React__default.createElement(
+            'div',
+            { style: { marginTop: '10px' } },
+            React__default.createElement(
+              'h5',
+              null,
+              React__default.createElement(
+                'em',
+                null,
+                'New content coming soon, please check back later.'
+              )
+            )
+          )
+        );
+      }
+      if (!autoScroll) {
+        return React__default.createElement(
+          React__default.Fragment,
+          null,
+          this.state.data.length >= 1 && this.state.data[0].length > 0 ?
+          //Check if any Video Groups available
           React__default.createElement(
             Container,
             null,
@@ -261,24 +318,43 @@ var VideoSeriesListing = function (_React$Component) {
                   'div',
                   null,
                   _this2.renderSeries(series)
+                ),
+                _this2.state.scrolling ? React__default.createElement(
+                  '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' },
+                    onClick: function onClick(e) {
+                      e.target.style.display = 'none';
+                      _this2.loadMore();
+                    } },
+                  'Load More'
+                ) : React__default.createElement(
+                  'p',
+                  { style: { textAlign: 'center' } },
+                  React__default.createElement(
+                    'b',
+                    null,
+                    'End of data'
+                  )
                 )
               );
             })
-          )
-        ) : React__default.createElement(
-          'div',
-          { style: { marginTop: '10px' } },
-          React__default.createElement(
-            'h5',
-            null,
+          ) : React__default.createElement(
+            'div',
+            { style: { marginTop: '10px' } },
             React__default.createElement(
-              'em',
+              'h5',
               null,
-              'New content coming soon, please check back later.'
+              React__default.createElement(
+                'em',
+                null,
+                'New content coming soon, please check back later.'
+              )
             )
           )
-        )
-      );
+        );
+      }
     }
   }]);
 

package/dist/cjs/View.js

@@ -1282,7 +1282,9 @@ var View = function View(props) {
       _props$showRelatedArt = props.showRelatedArticles,
       showRelatedArticles = _props$showRelatedArt === undefined ? false : _props$showRelatedArt,
       _props$canonicalTag = props.canonicalTag,
-      canonicalTag = _props$canonicalTag === undefined ? true : _props$canonicalTag;
+      canonicalTag = _props$canonicalTag === undefined ? true : _props$canonicalTag,
+      _props$infiniteScroll = props.infiniteScrollFlag,
+      infiniteScrollFlag = _props$infiniteScroll === undefined ? true : _props$infiniteScroll;
   var _props$article = props.article,
       _props$article$passwo = _props$article.passwordLock,
       passwordLock = _props$article$passwo === undefined ? false : _props$article$passwo,
@@ -1340,7 +1342,7 @@ var View = function View(props) {
 
   var isVideoSeries = checkVideoSeries(props.article);
   var isArticleSeries = checkArticleSeries(props.article);
-  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !isVideoSeries && !isArticleSeries && !article.ExcludeFromInfiniteScroll && !sponsoredFlag;
+  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !isVideoSeries && !isArticleSeries && !article.ExcludeFromInfiniteScroll && !sponsoredFlag && infiniteScrollFlag;
 
   if (['Articles', 'Videos', 'Podcasts'].includes(article.category.name)) {
     description = null;

package/dist/esm/MasterDeck.js

@@ -475,7 +475,8 @@ var MasterDeck = function (_React$Component) {
             this.state.scrolling ? React__default.createElement(
               'button',
               {
-                style: { margin: 'auto', width: '100%' },
+                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' },
                 onClick: function onClick(e) {
                   _this3.loadMore();
                 } },

package/dist/esm/RelatedContent.js

@@ -1,7 +1,10 @@
 import './_commonjsHelpers-0c4b6f40.js';
 import React__default from 'react';
+import 'prop-types';
 import { m as moment } from './moment-12415288.js';
+import 'react-dom';
 import { i as imageUrlBuilder } from './index-51a80699.js';
+import { L as LazyLoad } from './index-5f9f807a.js';
 import 'react-bootstrap/Media';
 
 /*
@@ -62,10 +65,14 @@ var RelatedContent = function RelatedContent(props) {
           React__default.createElement(
             'figure',
             null,
-            React__default.createElement('img', {
-              src: article.thumbnail ? urlFor(article.thumbnail.asset).width(500).url() : defaultImage,
-              alt: article.title
-            })
+            React__default.createElement(
+              LazyLoad,
+              { once: true },
+              React__default.createElement('img', {
+                src: article.thumbnail ? urlFor(article.thumbnail.asset).width(500).url() : defaultImage,
+                alt: article.title
+              })
+            )
           ),
           React__default.createElement(
             'div',

package/dist/esm/VideoSeriesListing.js

@@ -223,17 +223,74 @@ var VideoSeriesListing = function (_React$Component) {
   }
 
   _createClass(VideoSeriesListing, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      console.log(this.state);
+    }
+  }, {
     key: 'render',
     value: function render() {
       var _this2 = this;
 
-      return React__default.createElement(
-        React__default.Fragment,
-        null,
-        this.state.data.length >= 1 && this.state.data[0].length > 0 ? //Check if any Video Groups available
-        React__default.createElement(
-          InfiniteScroll,
-          { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+      var _props$autoScroll = this.props.autoScroll,
+          autoScroll = _props$autoScroll === undefined ? true : _props$autoScroll;
+
+
+      if (autoScroll) {
+        return React__default.createElement(
+          React__default.Fragment,
+          null,
+          this.state.data.length >= 1 && this.state.data[0].length > 0 ?
+          //Check if any Video Groups available
+          React__default.createElement(
+            InfiniteScroll,
+            { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.8 },
+            React__default.createElement(
+              Container,
+              null,
+              this.state.data && this.state.data.map(function (series, index) {
+                var page = series && series.length > 0 && series[0].pageNumber !== 1 ? series[0].pageNumber : 1;
+
+                return React__default.createElement(
+                  React__default.Fragment,
+                  { key: index },
+                  React__default.createElement(
+                    VisibilitySensor,
+                    {
+                      onChange: function onChange(isVisible) {
+                        isVisible && _this2.changePageNumber(page);
+                      } },
+                    React__default.createElement('div', { className: 'visibility-sensor', style: { minHeight: '.25rem' } })
+                  ),
+                  React__default.createElement(
+                    'div',
+                    null,
+                    _this2.renderSeries(series)
+                  )
+                );
+              })
+            )
+          ) : React__default.createElement(
+            'div',
+            { style: { marginTop: '10px' } },
+            React__default.createElement(
+              'h5',
+              null,
+              React__default.createElement(
+                'em',
+                null,
+                'New content coming soon, please check back later.'
+              )
+            )
+          )
+        );
+      }
+      if (!autoScroll) {
+        return React__default.createElement(
+          React__default.Fragment,
+          null,
+          this.state.data.length >= 1 && this.state.data[0].length > 0 ?
+          //Check if any Video Groups available
           React__default.createElement(
             Container,
             null,
@@ -255,24 +312,43 @@ var VideoSeriesListing = function (_React$Component) {
                   'div',
                   null,
                   _this2.renderSeries(series)
+                ),
+                _this2.state.scrolling ? React__default.createElement(
+                  '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' },
+                    onClick: function onClick(e) {
+                      e.target.style.display = 'none';
+                      _this2.loadMore();
+                    } },
+                  'Load More'
+                ) : React__default.createElement(
+                  'p',
+                  { style: { textAlign: 'center' } },
+                  React__default.createElement(
+                    'b',
+                    null,
+                    'End of data'
+                  )
                 )
               );
             })
-          )
-        ) : React__default.createElement(
-          'div',
-          { style: { marginTop: '10px' } },
-          React__default.createElement(
-            'h5',
-            null,
+          ) : React__default.createElement(
+            'div',
+            { style: { marginTop: '10px' } },
             React__default.createElement(
-              'em',
+              'h5',
               null,
-              'New content coming soon, please check back later.'
+              React__default.createElement(
+                'em',
+                null,
+                'New content coming soon, please check back later.'
+              )
             )
           )
-        )
-      );
+        );
+      }
     }
   }]);
 

package/dist/esm/View.js

@@ -1276,7 +1276,9 @@ var View = function View(props) {
       _props$showRelatedArt = props.showRelatedArticles,
       showRelatedArticles = _props$showRelatedArt === undefined ? false : _props$showRelatedArt,
       _props$canonicalTag = props.canonicalTag,
-      canonicalTag = _props$canonicalTag === undefined ? true : _props$canonicalTag;
+      canonicalTag = _props$canonicalTag === undefined ? true : _props$canonicalTag,
+      _props$infiniteScroll = props.infiniteScrollFlag,
+      infiniteScrollFlag = _props$infiniteScroll === undefined ? true : _props$infiniteScroll;
   var _props$article = props.article,
       _props$article$passwo = _props$article.passwordLock,
       passwordLock = _props$article$passwo === undefined ? false : _props$article$passwo,
@@ -1334,7 +1336,7 @@ var View = function View(props) {
 
   var isVideoSeries = checkVideoSeries(props.article);
   var isArticleSeries = checkArticleSeries(props.article);
-  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !isVideoSeries && !isArticleSeries && !article.ExcludeFromInfiniteScroll && !sponsoredFlag;
+  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !isVideoSeries && !isArticleSeries && !article.ExcludeFromInfiniteScroll && !sponsoredFlag && infiniteScrollFlag;
 
   if (['Articles', 'Videos', 'Podcasts'].includes(article.category.name)) {
     description = null;

package/package.json

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