@mjhls/mjh-framework 1.0.146 → 1.0.149

package/dist/index.js

@@ -31,6 +31,7 @@ var reactSocialIcons = require('react-social-icons');
 var Nav = _interopDefault(require('react-bootstrap/Nav'));
 var Navbar = _interopDefault(require('react-bootstrap/Navbar'));
 var NavDropdown = _interopDefault(require('react-bootstrap/NavDropdown'));
+var download = _interopDefault(require('downloadjs'));
 var ReactPlayerLoader = _interopDefault(require('@brightcove/react-player-loader'));
 var ReactPlayer = _interopDefault(require('react-player'));
 var Pagination = _interopDefault(require('react-bootstrap/Pagination'));
@@ -3647,8 +3648,8 @@ var ImageUrlBuilder = /** @class */ (function () {
         return this.withOptions({ quality: quality });
     };
     // Make it a download link. Parameter is default filename.
-    ImageUrlBuilder.prototype.forceDownload = function (download) {
-        return this.withOptions({ download: download });
+    ImageUrlBuilder.prototype.forceDownload = function (download$$1) {
+        return this.withOptions({ download: download$$1 });
     };
     // Flip image horizontally
     ImageUrlBuilder.prototype.flipHorizontal = function () {
@@ -6257,6 +6258,8 @@ var GridContent = function (_React$Component) {
           );
         }
       } else return null;
+    }, _this.checkExternalUrl = function (url) {
+      return new RegExp(['http', 'https'].join('|')).test(url);
     }, _this.renderMobileAd = function (index$$1, numberOfItemsBeforeAd) {
       var rightItems = _this.props.rightItems;
 
@@ -6376,10 +6379,68 @@ var GridContent = function (_React$Component) {
         { className: 'grid-container' },
         this.state.data && this.state.data.map(function (row, index$$1) {
           var pageNumber = row.pageNumber || _this2.state.page;
-          var contentCategoryName = row.contentCategory && row.contentCategory.name && _this2.mapping[row.contentCategory.name] ? row.contentCategory.name : 'Articles';
-          var linkHref = _this2.mapping[contentCategoryName] + '/' + row.url.current;
-          if (row.url && row.url.current && row.url.externalUrl) {
-            linkHref = row.url.current;
+          var linkHref = '' + row.url.current;
+          if (row.blank || _this2.checkExternalUrl(row.url.current)) {
+            return React__default.createElement(
+              React__default.Fragment,
+              { key: itemCounter },
+              React__default.createElement(
+                VisibilitySensor,
+                {
+                  onChange: function onChange(isVisible) {
+                    isVisible && _this2.changePageNumber(pageNumber);
+                  } },
+                React__default.createElement(
+                  'div',
+                  { counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
+                  React__default.createElement(
+                    Card,
+                    { className: 'content-card', style: { flexDirection: index$$1 === 0 || index$$1 % 4 === 0 ? 'top' : 'row' } },
+                    (row.thumbnail && row.thumbnail.asset || _this2.props.defaultImage) && React__default.createElement(
+                      'a',
+                      { href: row.url.current, target: '_blank', className: index$$1 === 0 || index$$1 % 4 === 0 ? '' : 'card-image' },
+                      React__default.createElement(
+                        LazyLoad,
+                        { height: _this2.props.imageHeight },
+                        React__default.createElement(Card.Img, {
+                          variant: 'top',
+                          src: _this2.renderCardImage(row, page),
+                          alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : ''
+                        })
+                      )
+                    ),
+                    React__default.createElement(
+                      Card.Body,
+                      null,
+                      React__default.createElement(
+                        'a',
+                        { href: row.url.current, target: '_blank' },
+                        React__default.createElement(
+                          Card.Title,
+                          null,
+                          row.title
+                        )
+                      ),
+                      _this2.props.showPublished && row.published && React__default.createElement(
+                        Card.Subtitle,
+                        { style: { marginTop: 0 } },
+                        moment(row.published).format('MMMM DD, YYYY')
+                      ),
+                      _this2.props.showAuthor && row.authorMapping && row.authorMapping.length > 0 && row.authorMapping.map(function (authorDetail, index$$1) {
+                        return _this2.renderAuthor(authorDetail, index$$1, row.authorMapping.length);
+                      }),
+                      React__default.createElement(
+                        Card.Text,
+                        { className: index$$1 === 0 || index$$1 % 4 === 0 ? '' : 'card-subtext' },
+                        row.summary
+                      )
+                    )
+                  )
+                )
+              ),
+              showVideo && (_this2.state.data.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
+              main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
+            );
           }
           return React__default.createElement(
             React__default.Fragment,
@@ -6401,7 +6462,7 @@ var GridContent = function (_React$Component) {
                     { href: linkHref },
                     React__default.createElement(
                       'a',
-                      { target: row.url && row.url.target ? '_blank' : '_self', className: index$$1 === 0 || index$$1 % 4 === 0 ? '' : 'card-image' },
+                      { className: index$$1 === 0 || index$$1 % 4 === 0 ? '' : 'card-image' },
                       React__default.createElement(
                         LazyLoad,
                         { height: _this2.props.imageHeight },
@@ -6421,7 +6482,7 @@ var GridContent = function (_React$Component) {
                       { href: linkHref },
                       React__default.createElement(
                         'a',
-                        { target: row.url && row.url.target ? '_blank' : '_self' },
+                        null,
                         React__default.createElement(
                           Card.Title,
                           null,
@@ -14071,6 +14132,19 @@ var Media$1 = function Media$$1(_ref) {
           )
         );
       } else if (caption && caption !== '') {
+        if (uploadDoc.downloadMedia) {
+          return React__default.createElement(
+            'a',
+            {
+              href: uploadDoc.asset.url,
+              target: '_blank',
+              className: 'd-block',
+              onClick: function onClick() {
+                download(uploadDoc.asset.url, uploadDoc.asset.originalFilename);
+              } },
+            caption
+          );
+        }
         return React__default.createElement(
           'a',
           { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self', className: 'd-block text-center' },
@@ -14794,6 +14868,68 @@ var html_decode = function html_decode(string) {
 };
 var html_decode_1 = html_decode;
 
+var urlFor$3 = function urlFor(source, builder) {
+  return builder.image(source);
+};
+
+var onChangeSlide$1 = function onChangeSlide(selectedIndex, pageview, setCarouselIndex, asPath) {
+  setCarouselIndex(selectedIndex);
+  lib_3.refresh();
+  if (pageview) pageview(asPath);
+};
+
+var Slideshow$1 = function Slideshow(_ref) {
+  var slides = _ref.node.slides,
+      client = _ref.client,
+      pageview = _ref.pageview,
+      serializerArguments = _ref.serializerArguments;
+
+  console.log(slides);
+  var router$$1 = router.useRouter();
+
+  var _useState = React.useState(0),
+      _useState2 = slicedToArray(_useState, 2),
+      carouselIndex = _useState2[0],
+      setCarouselIndex = _useState2[1];
+
+  var builder = imageUrlBuilder(client);
+
+  return React__default.createElement(
+    'div',
+    { className: 'mt-3 mb-3' },
+    React__default.createElement(
+      reactBootstrap.Carousel,
+      { activeIndex: carouselIndex, onSelect: function onSelect(selectedIndex, e) {
+          return onChangeSlide$1(selectedIndex, pageview, setCarouselIndex, router$$1.asPath);
+        }, indicators: false },
+      slides && slides.map(function (slide) {
+        if (slide.slideshowImage && slide.slideshowImage.asset) {
+          return React__default.createElement(
+            reactBootstrap.Carousel.Item,
+            { key: slide._key },
+            React__default.createElement(
+              'a',
+              { href: slide.slideshowImage.link && slide.slideshowImage.link, target: slide.slideshowImage.blank ? '_blank' : '_self' },
+              React__default.createElement('img', { src: urlFor$3(slide.slideshowImage, builder).url(), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+            ),
+            React__default.createElement(
+              'div',
+              { className: 'p-2' },
+              slide.slideshowImage.caption && React__default.createElement(
+                'h3',
+                null,
+                slide.slideshowImage.caption
+              ),
+              slide.description && React__default.createElement(BlockContent, { blocks: slide.description, serializers: getSerializers$1(serializerArguments) })
+            )
+          );
+        }
+        return null;
+      })
+    )
+  );
+};
+
 var convertEntities = function convertEntities(props) {
   if (typeof props === 'string' || props instanceof String) {
     props = html_decode_1(props);
@@ -14889,6 +15025,11 @@ var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs
 
         var url = '' + drupalLeadSettings.baseUrl + leadID;
         return React__default.createElement(Leads, { url: url });
+      },
+      slideshows: function slideshows(_ref14) {
+        var node = _ref14.node;
+
+        return React__default.createElement(Slideshow$1, { node: node, client: client, pageview: pageview, serializerArguments: (drupalLeadSettings) });
       }
     },
     marks: {
@@ -14918,32 +15059,32 @@ var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs
           children
         );
       },
-      alignleft: function alignleft(_ref14) {
-        var children = _ref14.children;
+      alignleft: function alignleft(_ref15) {
+        var children = _ref15.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'left' } },
           children
         );
       },
-      alignright: function alignright(_ref15) {
-        var children = _ref15.children;
+      alignright: function alignright(_ref16) {
+        var children = _ref16.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'right' } },
           children
         );
       },
-      aligncenter: function aligncenter(_ref16) {
-        var children = _ref16.children;
+      aligncenter: function aligncenter(_ref17) {
+        var children = _ref17.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'center' } },
           children
         );
       },
-      alignjustify: function alignjustify(_ref17) {
-        var children = _ref17.children;
+      alignjustify: function alignjustify(_ref18) {
+        var children = _ref18.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'justify' } },
@@ -15118,13 +15259,13 @@ var SetCookie = function SetCookie(key, value) {
   cookie.set(key, value, { expires: 1, sameSite: 'none', secure: true });
 };
 
-var urlFor$3 = function urlFor(source, client) {
+var urlFor$4 = function urlFor(source, client) {
   var builder = imageUrlBuilder(client);
   return builder.image(source);
 };
 
 var renderCardImage$1 = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
-  var url = urlFor$3(thumbnail, client);
+  var url = urlFor$4(thumbnail, client);
   if (imageHeight) url = url.height(imageHeight);
   if (imageWidth) url = url.width(imageWidth);
   return url.url();
@@ -15372,6 +15513,101 @@ var RelatedTopicsDropdown = function RelatedTopicsDropdown(_ref) {
   }
 };
 
+// THIS FILE IS AUTO GENERATED
+var FaWindowClose = function (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"}}]})(props);
+};
+FaWindowClose.displayName = "FaWindowClose";
+
+/*****UStream Component*****/
+/*
+
+Width and Height(percent or px) prop passed is the floating window, when closed
+it will take 100% of its parent element
+
+You can pass in another SRC for Ustream if needed
+
+If 'close' is passed as prop, the floating window will be removed
+from DOM once close button is hit
+
+Example:
+import { Ustream } from '@mjhls/mjh-framework';
+<Ustream width={'200px'} height={'120px'} close />
+
+*/
+/************************* */
+var Ustream = function Ustream(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === undefined ? '300px' : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === undefined ? '168px' : _ref$height,
+      _ref$close = _ref.close,
+      close = _ref$close === undefined ? false : _ref$close,
+      _ref$src = _ref.src,
+      src = _ref$src === undefined ? 'https://video.ibm.com/embed/23627444?volume=0&autoplay=true' : _ref$src;
+
+  var _useState = React.useState(width),
+      _useState2 = slicedToArray(_useState, 2),
+      currentWidth = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = React.useState(height),
+      _useState4 = slicedToArray(_useState3, 2),
+      currentHeight = _useState4[0],
+      setHeight = _useState4[1];
+
+  var ustreamContainer = React.useRef(null);
+
+  React.useEffect(function () {
+    try {
+      document.querySelector('.ustream-close').addEventListener('click', function (e) {
+        var container = document.getElementById('ustream-container');
+        if (close) {
+          container.remove();
+        } else {
+          container.style.position = 'static';
+          container.style.padding = '0 1rem';
+          container.classList.add('closed');
+          setWidth('100%');
+          //aspect ratio
+          var newHeight = 9 / 16 * ustreamContainer.current.clientWidth;
+          console.log(newHeight);
+          console.log(ustreamContainer);
+          setHeight(newHeight);
+          e.target.remove();
+        }
+      });
+    } catch (err) {}
+  }, []);
+
+  return React__default.createElement(
+    'div',
+    { id: 'ustream-container', ref: ustreamContainer, style: { width: '' + currentWidth, marginBottom: '1rem' } },
+    React__default.createElement(
+      'div',
+      { style: { position: 'relative' } },
+      React__default.createElement(
+        'div',
+        { className: 'ustream-close' },
+        React__default.createElement(FaWindowClose, { style: { fontSize: '1.3rem' } })
+      ),
+      React__default.createElement('iframe', {
+        id: 'ustream-iframe',
+        src: src,
+        webkitallowfullscreen: true,
+        allowFullScreen: true,
+        frameBorder: 'no',
+
+        style: { maxWidth: '100%', height: currentHeight, width: currentWidth } })
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        #ustream-container {\n          position: fixed;\n          bottom: 0;\n          right: 1rem;\n          z-index: 999;\n          max-width: 100%;\n        }\n        .ustream-close {\n          position: absolute;\n          color: white;\n          right: 0.5rem;\n          top: 0.25rem;\n          cursor: pointer;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 768px) {\n          #ustream-container:not(.closed) {\n            width: 231px !important;\n            height: 130px !important;\n          }\n          #ustream-container:not(.closed) iframe {\n            height: 130px !important;\n          }\n        }\n      '
+    )
+  );
+};
+
 exports.DeckContent = ContentCard;
 exports.GridContent = GridContent$1;
 exports.DeckQueue = Queue;
@@ -15412,4 +15648,5 @@ exports.Hero = Hero;
 exports.AlphabeticList = AlphabeticList;
 exports.PdfDownload = PdfDownload;
 exports.RelatedTopicsDropdown = RelatedTopicsDropdown;
+exports.Ustream = Ustream;
 //# sourceMappingURL=index.js.map