@mjhls/mjh-framework 1.0.357 → 1.0.358

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.357
+# mjh-framework v. 1.0.358
 
 
 > Foundation Framework

package/dist/cjs/index.js

@@ -5879,7 +5879,13 @@ var Media = function Media(_ref) {
   var uploadDoc = node.upload_doc,
       poster = node.poster,
       blank = node.blank,
-      caption = node.caption;
+      caption = node.caption,
+      _node$alignment = node.alignment,
+      alignment = _node$alignment === undefined ? 'center' : _node$alignment,
+      alt = node.alt,
+      className = node.class,
+      _node$widthP = node.widthP,
+      widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
 
   var builder = index.imageUrlBuilder(client);
 
@@ -5887,64 +5893,85 @@ var Media = function Media(_ref) {
     return builder.image(source).auto('format');
   };
 
-  var renderFigure = function renderFigure(uploadDoc, poster, blank, caption) {
-    if (uploadDoc && uploadDoc.asset) {
-      if (poster && poster.asset && caption && caption !== '') {
-        return React__default.createElement(
-          reactBootstrap.Figure,
-          { className: 'mb-3' },
-          React__default.createElement(
-            'a',
-            { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-            React__default.createElement(reactBootstrap.Figure.Image, { src: urlFor(poster).url(), fluid: true }),
-            React__default.createElement(
-              reactBootstrap.Figure.Caption,
-              { className: 'text-center' },
-              caption
-            )
-          )
-        );
-      } else if (poster && poster.asset) {
-        return React__default.createElement(
-          reactBootstrap.Figure,
-          { className: 'mb-3' },
-          React__default.createElement(
-            'a',
-            { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-            React__default.createElement(reactBootstrap.Figure.Image, { src: urlFor(poster).url(), fluid: true })
-          )
-        );
-      } else if (caption && caption !== '') {
-        if (uploadDoc.downloadMedia) {
-          return React__default.createElement(
-            'a',
-            {
-              href: uploadDoc.asset.url,
-              target: '_blank',
-              rel: 'noopener noreferrer',
-              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' },
-          caption
-        );
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  React.useEffect(function () {
+    var mediaLink = document.getElementById('media-link');
+    if (mediaLink) {
+      var prevSibling = mediaLink.previousSibling;
+      if (prevSibling) prevSibling.style.display = 'inline';
+      var nextSibling = mediaLink.nextSibling;
+      if (nextSibling) nextSibling.style.display = 'inline';
+    }
+  }, []);
+
+  var screenWidth = window.innerWidth;
+  var imageFloat = 'none';
+  if (screenWidth > 1000) {
+    var align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
+    imageFloat = align;
+  }
+
+  var imageMargin = null;
+  if (imageFloat === 'none') {
+    imageMargin = '0 auto 1rem';
+  }
+  if (imageFloat === 'left') {
+    imageMargin = '0 1.5rem 1.5rem 0';
+  }
+  if (imageFloat === 'right') {
+    imageMargin = '0 0 1.5rem 1.5rem';
+  }
+
+  var imageWidth = null;
+  if (screenWidth > 1000) {
+    if (widthP === 'auto') {
+      if (imageFloat === 'none') {
+        imageWidth = 'auto';
+      } else {
+        imageWidth = '30%';
       }
-      return null;
+    } else {
+      imageWidth = widthP + '%';
     }
-    return null;
-  };
+  } else {
+    imageWidth = '100%';
+  }
 
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    renderFigure(uploadDoc, poster, blank, caption)
-  );
+  if (!uploadDoc || !uploadDoc.asset) return null;
+
+  if (poster && poster.asset && imageFloat && imageMargin && imageWidth) {
+    return React__default.createElement(
+      reactBootstrap.Figure,
+      { className: 'd-block ' + className, style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: imageMargin } },
+      React__default.createElement(
+        'a',
+        { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
+        React__default.createElement(reactBootstrap.Figure.Image, _extends$2._extends({ className: 'media-image', style: { width: '100%' }, src: urlFor(poster).url() }, alt && { alt: alt })),
+        caption && React__default.createElement(
+          reactBootstrap.Figure.Caption,
+          { className: 'media-caption' },
+          caption
+        )
+      )
+    );
+  } else if (caption && caption !== '') {
+    return React__default.createElement(
+      'a',
+      _extends$2._extends({}, uploadDoc.downloadMedia ? {
+        onClick: function onClick() {
+          download(uploadDoc.asset.url, uploadDoc.asset.originalFilename);
+        }
+      } : { href: uploadDoc.asset.url, target: '_blank', rel: 'noopener noreferrer' }, {
+        style: { paddingLeft: '4px', paddingRight: '4px' },
+        id: 'media-link' }),
+      caption
+    );
+  } else {
+    return null;
+  }
 };
 
 var IFrame = function IFrame(_ref) {

package/dist/esm/index.js

@@ -5876,7 +5876,13 @@ var Media = function Media(_ref) {
   var uploadDoc = node.upload_doc,
       poster = node.poster,
       blank = node.blank,
-      caption = node.caption;
+      caption = node.caption,
+      _node$alignment = node.alignment,
+      alignment = _node$alignment === undefined ? 'center' : _node$alignment,
+      alt = node.alt,
+      className = node.class,
+      _node$widthP = node.widthP,
+      widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
 
   var builder = imageUrlBuilder(client);
 
@@ -5884,64 +5890,85 @@ var Media = function Media(_ref) {
     return builder.image(source).auto('format');
   };
 
-  var renderFigure = function renderFigure(uploadDoc, poster, blank, caption) {
-    if (uploadDoc && uploadDoc.asset) {
-      if (poster && poster.asset && caption && caption !== '') {
-        return React__default.createElement(
-          Figure$1,
-          { className: 'mb-3' },
-          React__default.createElement(
-            'a',
-            { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-            React__default.createElement(Figure$1.Image, { src: urlFor(poster).url(), fluid: true }),
-            React__default.createElement(
-              Figure$1.Caption,
-              { className: 'text-center' },
-              caption
-            )
-          )
-        );
-      } else if (poster && poster.asset) {
-        return React__default.createElement(
-          Figure$1,
-          { className: 'mb-3' },
-          React__default.createElement(
-            'a',
-            { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-            React__default.createElement(Figure$1.Image, { src: urlFor(poster).url(), fluid: true })
-          )
-        );
-      } else if (caption && caption !== '') {
-        if (uploadDoc.downloadMedia) {
-          return React__default.createElement(
-            'a',
-            {
-              href: uploadDoc.asset.url,
-              target: '_blank',
-              rel: 'noopener noreferrer',
-              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' },
-          caption
-        );
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  useEffect(function () {
+    var mediaLink = document.getElementById('media-link');
+    if (mediaLink) {
+      var prevSibling = mediaLink.previousSibling;
+      if (prevSibling) prevSibling.style.display = 'inline';
+      var nextSibling = mediaLink.nextSibling;
+      if (nextSibling) nextSibling.style.display = 'inline';
+    }
+  }, []);
+
+  var screenWidth = window.innerWidth;
+  var imageFloat = 'none';
+  if (screenWidth > 1000) {
+    var align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
+    imageFloat = align;
+  }
+
+  var imageMargin = null;
+  if (imageFloat === 'none') {
+    imageMargin = '0 auto 1rem';
+  }
+  if (imageFloat === 'left') {
+    imageMargin = '0 1.5rem 1.5rem 0';
+  }
+  if (imageFloat === 'right') {
+    imageMargin = '0 0 1.5rem 1.5rem';
+  }
+
+  var imageWidth = null;
+  if (screenWidth > 1000) {
+    if (widthP === 'auto') {
+      if (imageFloat === 'none') {
+        imageWidth = 'auto';
+      } else {
+        imageWidth = '30%';
       }
-      return null;
+    } else {
+      imageWidth = widthP + '%';
     }
-    return null;
-  };
+  } else {
+    imageWidth = '100%';
+  }
 
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    renderFigure(uploadDoc, poster, blank, caption)
-  );
+  if (!uploadDoc || !uploadDoc.asset) return null;
+
+  if (poster && poster.asset && imageFloat && imageMargin && imageWidth) {
+    return React__default.createElement(
+      Figure$1,
+      { className: 'd-block ' + className, style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: imageMargin } },
+      React__default.createElement(
+        'a',
+        { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
+        React__default.createElement(Figure$1.Image, _extends$2({ className: 'media-image', style: { width: '100%' }, src: urlFor(poster).url() }, alt && { alt: alt })),
+        caption && React__default.createElement(
+          Figure$1.Caption,
+          { className: 'media-caption' },
+          caption
+        )
+      )
+    );
+  } else if (caption && caption !== '') {
+    return React__default.createElement(
+      'a',
+      _extends$2({}, uploadDoc.downloadMedia ? {
+        onClick: function onClick() {
+          download(uploadDoc.asset.url, uploadDoc.asset.originalFilename);
+        }
+      } : { href: uploadDoc.asset.url, target: '_blank', rel: 'noopener noreferrer' }, {
+        style: { paddingLeft: '4px', paddingRight: '4px' },
+        id: 'media-link' }),
+      caption
+    );
+  } else {
+    return null;
+  }
 };
 
 var IFrame = function IFrame(_ref) {

package/package.json

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