@mjhls/mjh-framework 1.0.272 → 1.0.274

package/dist/esm/DeckContent.js

@@ -18,7 +18,7 @@ import { V as VisibilitySensor, m as moment, I as InfiniteScroll } from './visib
 import 'next/link';
 import { withRouter } from 'next/router';
 import 'react-dom';
-import { i as imageUrlBuilder } from './index-73819142.js';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
 import './slicedToArray-d0a9593a.js';
@@ -165,14 +165,14 @@ var DeckContent = function (_React$Component) {
             var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
 
             // please leave this for later debug purpose : Yong Jun.
-            /* console.log('page change reported', {
-              currentPage: currentPage,
-              pageNumber: pageNumber,
-              pathname: pathname,
-              path: path,
-              newPath: newPath,
-              firstPage: pageNumber === 1,
-              queryString: queryString
+            /* console.log('page change reported', {
+              currentPage: currentPage,
+              pageNumber: pageNumber,
+              pathname: pathname,
+              path: path,
+              newPath: newPath,
+              firstPage: pageNumber === 1,
+              queryString: queryString
             }) */
 
             if (pageview) {

package/dist/esm/DeckQueue.js

@@ -18,7 +18,7 @@ import { V as VisibilitySensor, m as moment, I as InfiniteScroll } from './visib
 import 'next/link';
 import { withRouter } from 'next/router';
 import 'react-dom';
-import { i as imageUrlBuilder } from './index-73819142.js';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
 import { g as get_1 } from './get-b2201dc8.js';

package/dist/esm/Figure-d6e22818.js

@@ -0,0 +1,140 @@
+import './_commonjsHelpers-0c4b6f40.js';
+import './_to-object-b9b796ec.js';
+import './web.dom.iterable-3be50d6c.js';
+import './core.get-iterator-method-31c1fb1a.js';
+import React__default, { useState } from 'react';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
+import { _ as _slicedToArray } from './slicedToArray-d0a9593a.js';
+import { Figure as Figure$1 } from 'react-bootstrap';
+
+var urlFor = function urlFor(source, client) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var compareProps = function compareProps(prevProps, nextProps) {
+  if (nextProps.node.asset && nextProps.node.asset._ref) {
+    return prevProps.node.asset._ref === nextProps.node.asset._ref;
+  }
+};
+
+var FigureComponent = function FigureComponent(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      openImg = _useState2[0],
+      setOpenImg = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      openImgSrc = _useState4[0],
+      setOpenImgSrc = _useState4[1];
+
+  var node = props.node,
+      client = props.client;
+  var caption = node.caption,
+      alt = node.alt,
+      blank = node.blank,
+      link = node.link,
+      _node$alignment = node.alignment,
+      alignment = _node$alignment === undefined ? 'center' : _node$alignment;
+  var _node$widthP = node.widthP,
+      widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
+
+
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  var screenWidth = window.innerWidth;
+
+  if (client.clientConfig && client.clientConfig.defaultImageSize && widthP === 'auto') {
+    widthP = client.clientConfig.defaultImageSize;
+  }
+
+  var imageFloat = null;
+  if (screenWidth > 1000) {
+    var align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
+    imageFloat = align;
+  } else {
+    var _align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
+    imageFloat = _align;
+  }
+
+  var figureMargin = null;
+  if (imageFloat === 'none') {
+    figureMargin = '0 auto 1rem';
+  }
+  if (imageFloat === 'left') {
+    figureMargin = '0 1.5rem 1.5rem 0';
+  }
+  if (imageFloat === 'right') {
+    figureMargin = '0 0 1.5rem 1.5rem';
+  }
+
+  var imageWidth = null;
+  if (screenWidth > 1000) {
+    if (widthP === 'auto') {
+      if (imageFloat === 'none') {
+        imageWidth = 'auto';
+      } else {
+        imageWidth = '30%';
+      }
+    } else {
+      imageWidth = widthP + '%';
+    }
+  } else {
+    imageWidth = '100%';
+  }
+
+  if (!node.asset) return null;
+
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    imageWidth !== null && imageFloat !== null && React__default.createElement(
+      Figure$1,
+      { className: 'd-block', style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: figureMargin } },
+      link ? React__default.createElement(
+        'a',
+        { target: blank ? '_blank' : '_self', href: link },
+        React__default.createElement(Figure$1.Image, { style: { width: '100%' }, className: 'figure-image', src: urlFor(node, client).url(), alt: alt && alt }),
+        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+      ) : React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(Figure$1.Image, {
+          style: { width: '100%' },
+          className: 'figure-image',
+          src: urlFor(node, client).url(),
+          alt: alt && alt,
+          onClick: function onClick() {
+            setOpenImgSrc(urlFor(node, client).url());
+            setOpenImg(true);
+          }
+        }),
+        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+      )
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
+      React__default.createElement('img', { src: openImgSrc }),
+      React__default.createElement('a', {
+        className: 'lightbox-close',
+        onClick: function onClick() {
+          setOpenImgSrc('');
+          setOpenImg(false);
+        }
+      })
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\n\n        /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n        .lightbox-target {\n          position: fixed;\n          top: -100%;\n          width: 100%;\n          background: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          opacity: 0;\n          -webkit-transition: opacity 0.5s ease-in-out;\n          -moz-transition: opacity 0.5s ease-in-out;\n          -o-transition: opacity 0.5s ease-in-out;\n          transition: opacity 0.5s ease-in-out;\n          overflow: hidden;\n        }\n\n        .lightbox-target.close {\n          opacity: 0;\n        }\n\n        /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n        .lightbox-target img {\n          margin: auto;\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          max-height: 0%;\n          max-width: 0%;\n          border: 3px solid white;\n          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n          box-sizing: border-box;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Styles the close link, adds the slide down transition */\n\n        a.lightbox-close {\n          display: block;\n          width: 50px;\n          height: 50px;\n          box-sizing: border-box;\n          background: white;\n          color: black;\n          text-decoration: none;\n          position: absolute;\n          top: -80px;\n          right: 0;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:before {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(45deg);\n          -moz-transform: rotate(45deg);\n          -o-transform: rotate(45deg);\n          transform: rotate(45deg);\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:after {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(-45deg);\n          -moz-transform: rotate(-45deg);\n          -o-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n        }\n\n        /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n        .lightbox-target.open {\n          opacity: 1;\n          top: 0;\n          bottom: 0;\n          right: 0;\n          z-index: 9999;\n        }\n\n        .lightbox-target.open img {\n          max-height: 100%;\n          max-width: 100%;\n        }\n\n        .lightbox-target.open a.lightbox-close {\n          top: 0px;\n        }\n      '
+    )
+  );
+};
+
+var Figure = React__default.memo(FigureComponent, compareProps);
+
+export default Figure;

package/dist/esm/{GridContent-8479e775.js → GridContent-b8b5f361.js}

@@ -12,7 +12,7 @@ import Card from 'react-bootstrap/Card';
 import { m as moment, V as VisibilitySensor, I as InfiniteScroll } from './visibility-sensor-336093e1.js';
 import 'next/link';
 import { withRouter } from 'next/router';
-import { i as imageUrlBuilder } from './index-73819142.js';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
 import { A as ADInfeed } from './ADInfeed-a77b2850.js';

package/dist/esm/GridContent.js

@@ -18,7 +18,7 @@ import './visibility-sensor-336093e1.js';
 import 'next/link';
 import 'next/router';
 import 'react-dom';
-import './index-73819142.js';
+import './index-3849e3fe.js';
 import './index-5f9f807a.js';
 import './entities-7cc3bf45.js';
 import './slicedToArray-d0a9593a.js';
@@ -26,4 +26,4 @@ import './AdSlot-69bf3195.js';
 import './promise-683a9c54.js';
 import './ADInfeed-a77b2850.js';
 import './get-b2201dc8.js';
-export { G as default } from './GridContent-8479e775.js';
+export { G as default } from './GridContent-b8b5f361.js';

package/dist/esm/IssueContentDeck.js

@@ -6,7 +6,7 @@ import Col from 'react-bootstrap/Col';
 import Card from 'react-bootstrap/Card';
 import 'next/link';
 import 'react-dom';
-import { i as imageUrlBuilder } from './index-73819142.js';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import Badge from 'react-bootstrap/Badge';
 

package/dist/esm/IssueDeck.js

@@ -6,7 +6,7 @@ import Col from 'react-bootstrap/Col';
 import Card from 'react-bootstrap/Card';
 import 'next/link';
 import 'react-dom';
-import { i as imageUrlBuilder } from './index-73819142.js';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import Button from 'react-bootstrap/Button';
 

package/dist/esm/MasterDeck.js

@@ -18,7 +18,7 @@ import { V as VisibilitySensor, I as InfiniteScroll } from './visibility-sensor-
 import 'next/link';
 import { withRouter } from 'next/router';
 import 'react-dom';
-import './index-73819142.js';
+import './index-3849e3fe.js';
 import { _ as _Promise } from './promise-683a9c54.js';
 
 var MasterDeck = function (_React$Component) {
@@ -164,14 +164,14 @@ var MasterDeck = function (_React$Component) {
             var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
 
             // please leave this for later debug purpose : Yong Jun.
-            /* console.log('page change reported', {
-              currentPage: currentPage,
-              pageNumber: pageNumber,
-              pathname: pathname,
-              path: path,
-              newPath: newPath,
-              firstPage: pageNumber === 1,
-              queryString: queryString
+            /* console.log('page change reported', {
+              currentPage: currentPage,
+              pageNumber: pageNumber,
+              pathname: pathname,
+              path: path,
+              newPath: newPath,
+              firstPage: pageNumber === 1,
+              queryString: queryString
             }) */
 
             if (pageview) {

package/dist/esm/{Normal-3e5ad3d1.js → Normal-21cfb458.js}

@@ -670,8 +670,8 @@ var renderLink = function renderLink(row) {
 };
 
 var SideFooter = function SideFooter(props) {
-  /*
-  useage example: <SideFooter cache={props.cache} logo='https://mjh-web.s3.amazonaws.com/_media/an_mjhls_brand_logo.png' />
+  /*
+  useage example: <SideFooter cache={props.cache} logo='https://mjh-web.s3.amazonaws.com/_media/an_mjhls_brand_logo.png' />
   */
   var _get = get_1(props, 'cache.siteSettingCache', {}),
       socialLinks = _get.socialLinks,
@@ -1244,15 +1244,15 @@ var SocialNavFooter = function SocialNavFooter(props) {
 };
 
 var NavMagazine = function NavMagazine(props) {
-  /*
-  Example Nav with acceptable props
-   <MagazineNav
-     showLogin
-     logo={props.settings.logo}
-     dataObject={props.cache.mainNavCache}
-     website={website}
-     subNav={props.cache.subNavCache}
-      />
+  /*
+  Example Nav with acceptable props
+    <MagazineNav
+     showLogin
+     logo={props.settings.logo}
+     dataObject={props.cache.mainNavCache}
+     website={website}
+     subNav={props.cache.subNavCache}
+      />
   */
 
   var logo = props.logo,
@@ -1564,15 +1564,15 @@ var NavMagazine = function NavMagazine(props) {
 var MagazineNav = React__default.memo(NavMagazine);
 
 var NavNative = function NavNative(props) {
-  /*
-  Example Nav with acceptable props
-   <MagazineNav
-     showLogin
-     logo={props.settings.logo}
-     dataObject={props.cache.mainNavCache}
-     website={website}
-     subNav={props.cache.subNavCache}
-      />
+  /*
+  Example Nav with acceptable props
+    <MagazineNav
+     showLogin
+     logo={props.settings.logo}
+     dataObject={props.cache.mainNavCache}
+     website={website}
+     subNav={props.cache.subNavCache}
+      />
   */
 
   var logo = props.logo,
@@ -1966,15 +1966,15 @@ var NavDvm = function NavDvm(props) {
 };
 
 var HamMagazine = function HamMagazine(props) {
-  /*
-  Example Nav with acceptable props
-  <MagazineNav
-     showLogin
-     logo={props.settings.logo}
-     dataObject={props.cache.mainNavCache}
-     website={website}
-     subNav={props.cache.subNavCache}
-      />
+  /*
+  Example Nav with acceptable props
+  <MagazineNav
+     showLogin
+     logo={props.settings.logo}
+     dataObject={props.cache.mainNavCache}
+     website={website}
+     subNav={props.cache.subNavCache}
+      />
   */
 
   var logo = props.logo,

package/dist/esm/PublicationDeck.js

@@ -6,7 +6,7 @@ import Col from 'react-bootstrap/Col';
 import Card from 'react-bootstrap/Card';
 import 'next/link';
 import 'react-dom';
-import { i as imageUrlBuilder } from './index-73819142.js';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import Button from 'react-bootstrap/Button';
 

package/dist/esm/QueueDeckExpanded.js

@@ -12,7 +12,7 @@ import { I as InfiniteScroll, V as VisibilitySensor, m as moment } from './visib
 import 'next/link';
 import { useRouter } from 'next/router';
 import 'react-dom';
-import { i as imageUrlBuilder } from './index-73819142.js';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
 import { _ as _slicedToArray } from './slicedToArray-d0a9593a.js';

package/dist/esm/{TaxonomyCard-2d0ab635.js → TaxonomyCard-ee1a22ae.js}

@@ -5,7 +5,7 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Card from 'react-bootstrap/Card';
-import { n as node, i as imageUrlBuilder } from './index-73819142.js';
+import { n as node, i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 
 /*

package/dist/esm/TaxonomyCard.js

@@ -8,6 +8,6 @@ import 'react-bootstrap/Row';
 import 'react-bootstrap/Col';
 import 'react-bootstrap/Card';
 import 'react-dom';
-import './index-73819142.js';
+import './index-3849e3fe.js';
 import './index-5f9f807a.js';
-export { T as default } from './TaxonomyCard-2d0ab635.js';
+export { T as default } from './TaxonomyCard-ee1a22ae.js';

package/dist/esm/TemplateNormal.js

@@ -19,7 +19,7 @@ import './get-b2201dc8.js';
 import 'react-bootstrap';
 import './index.esm-536609db.js';
 import 'react-bootstrap/Button';
-export { T as default } from './Normal-3e5ad3d1.js';
+export { T as default } from './Normal-21cfb458.js';
 import 'react-bootstrap/ListGroup';
 import 'next/head';
 import 'react-bootstrap/Nav';

package/dist/esm/ThumbnailCard.js

@@ -2,7 +2,7 @@ import './_commonjsHelpers-0c4b6f40.js';
 import React__default from 'react';
 import 'prop-types';
 import 'react-dom';
-import { i as imageUrlBuilder } from './index-73819142.js';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
 import Media$1 from 'react-bootstrap/Media';

package/dist/esm/VideoSeriesListing.js

@@ -13,7 +13,8 @@ import 'next/link';
 import { withRouter } from 'next/router';
 import 'react-dom';
 import './index-5f9f807a.js';
-import { Y as YoutubeGroup } from './YoutubeGroup-f59297bb.js';
+import { Y as YoutubeGroup } from './YoutubeGroup-a87b8967.js';
+import 'smoothscroll-polyfill';
 import { a as IoIosArrowForward } from './index.esm-536609db.js';
 
 var VideoSeriesListing = function (_React$Component) {