@parameter1/base-cms-marko-web 2.92.0 → 2.95.0

package/components/document/index.marko

@@ -28,6 +28,11 @@ $ const wrapper = getAsObject(input, "bodyWrapper");
     </script>
     <!-- load lazysizes -->
     <script src="/dist/js/lazysizes/v5.3.2.js" async></script>
+    <!-- load picturefill -->
+    <script>
+      document.createElement( "picture" );
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js" async></script>
 
     <${input.head} />
   </head>

package/components/element/components/image.marko

@@ -3,7 +3,7 @@ import { getAsArray } from "@parameter1/base-cms-object-path";
 $ const { config } = out.global;
 $ const { src, alt } = input;
 $ const lazyload = config.lazyloadImages() && input.lazyload !== false
-$ const srcset = getAsArray(input.srcset).join(",") || null;
+$ const srcset = getAsArray(input.srcset).join(", ") || null;
 
 $ const classNames = [input.class];
 $ if (lazyload) classNames.push("lazyload");

package/components/element/marko.json

@@ -162,5 +162,40 @@
     "@class": "string",
     "@attrs": "object",
     "@modifiers": "array"
+  },
+  "<marko-web-picture>": {
+    "template": "./picture.marko",
+    "<image>": {
+      "@src": "string",
+      "@srcset": "array",
+      "@alt": "string",
+      "@lazyload": {
+        "type": "boolean",
+        "default-value": true
+      },
+      "@class": "string",
+      "@attrs": "object",
+      "@link": "object"
+    },
+    "<link>": {
+      "<before>": {},
+      "<after>": {},
+      "@href": "string",
+      "@target": "string",
+      "@title": "string",
+      "@rel": "string",
+      "@class": "string",
+      "@attrs": "object"
+    },
+    "@sources <source>[]": {
+      "@media": {
+        "type": "string",
+        "required": true
+      },
+      "@srcset": {
+        "type": "array",
+        "required": true
+      }
+    }
   }
 }

package/components/element/picture.marko

@@ -0,0 +1,36 @@
+import { getAsArray } from "@parameter1/base-cms-object-path";
+
+$ const { link, sources = [], image } = input;
+
+$ const hasImage = Boolean(image.src);
+
+<if(hasImage)>
+  <if(link)>
+    <marko-core-link
+      before=link.before
+      after=link.after
+      href=link.href
+      target=link.target
+      title=link.title
+      rel=link.rel
+      class=link.class
+      attrs=link.attrs
+    >
+      <marko-web-picture image=image sources=sources />
+    </marko-core-link>
+  </if>
+  <else>
+    <picture>
+      <for|s| of=sources>
+        $ const srcset = image.lazyload ? null : s.srcset.join(", ");
+        $ const dataSrcset = image.lazyload ? s.srcset.join(", ") : null;
+        <source
+          srcset=srcset
+          data-srcset=dataSrcset
+          media=s.media
+        >
+      </for>
+      <image ...image />
+    </picture>
+  </else>
+</if>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parameter1/base-cms-marko-web",
-  "version": "2.92.0",
+  "version": "2.95.0",
   "description": "Core Marko+Express components for BaseCMS websites",
   "author": "Jacob Bare <jacob@parameter1.com>",
   "main": "index.js",
@@ -16,10 +16,10 @@
   "dependencies": {
     "@godaddy/terminus": "^4.9.0",
     "@parameter1/base-cms-apollo-ssr": "^2.45.0",
-    "@parameter1/base-cms-embedded-media": "^2.92.0",
+    "@parameter1/base-cms-embedded-media": "^2.95.0",
     "@parameter1/base-cms-express-apollo": "^2.45.0",
     "@parameter1/base-cms-graphql-fragment-types": "^2.45.0",
-    "@parameter1/base-cms-image": "^2.92.0",
+    "@parameter1/base-cms-image": "^2.95.0",
     "@parameter1/base-cms-inflector": "^2.0.0",
     "@parameter1/base-cms-marko-node-require": "^2.57.0",
     "@parameter1/base-cms-object-path": "^2.75.1",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "99378331c8289f5c92f25f70341b94bb719b83db"
+  "gitHead": "486e5673fdb30c56c5196d6fdac7092552a04e87"
 }

package/utils/embedded-media/image.js

@@ -1,3 +1,5 @@
+const { buildImgixUrl } = require('@parameter1/base-cms-image');
+
 const stringifyAttrs = attrs => Object.keys(attrs).reduce((arr, key) => {
   const value = attrs[key];
   if (value) arr.push(`${key}="${value}"`);
@@ -10,23 +12,50 @@ module.exports = (tag, { config } = {}, { lazyloadImages } = {}) => {
   const alt = tag.get('alt');
   const caption = tag.get('caption');
   const credit = tag.get('credit');
+  const align = tag.get('align');
+
+  const width = tag.get('width');
+  const height = tag.get('height');
 
   const attrs = {
     'data-embed-type': tag.type,
     'data-embed-id': tag.id,
-    'data-embed-align': tag.get('align'),
+    'data-embed-align': align,
   };
 
+  const minWidth = 400;
+  const maxWidth = (align) ? minWidth : 700;
+
+  const maxSrcset = `${buildImgixUrl(src, { w: maxWidth })}, ${buildImgixUrl(src, { w: maxWidth, dpr: 2 })} 2x`;
+
+  const sources = [
+    {
+      srcset: lazyload ? null : maxSrcset,
+      'data-srcset': lazyload ? maxSrcset : null,
+      media: '(min-width: 576px)',
+    },
+  ].map(source => `<source ${stringifyAttrs(source)}>`).join('');
+
+  const minSrc = buildImgixUrl(src, { w: minWidth });
+  const minSrcset = `${buildImgixUrl(src, { w: minWidth, dpr: 2 })} 2x`;
+
+  const transparentImg = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
   const imgAttrs = {
     class: lazyload ? 'lazyload' : null,
-    src: lazyload ? 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' : src,
-    'data-src': lazyload ? src : null,
+    src: lazyload ? transparentImg : minSrc,
+    srcset: lazyload ? null : minSrcset,
+    'data-src': lazyload ? minSrc : null,
+    'data-srcset': lazyload ? minSrcset : null,
     'data-image-id': tag.id,
     alt,
+    width: (width && height) ? minWidth : null,
+    height: (height && height) ? Math.round(height / width * minWidth) : null,
   };
+
   const captionElement = caption ? `<span class="caption">${caption}</span>` : '';
   const creditElement = credit ? `<span class="credit">${credit}</span>` : '';
 
-  const img = `<img ${stringifyAttrs(imgAttrs)}>${captionElement}${creditElement}`;
-  return `<span ${stringifyAttrs(attrs)}>${img}</span>`;
+  const img = `<img ${stringifyAttrs(imgAttrs)}>`;
+  const picture = `<picture>${sources}${img}${captionElement}${creditElement}</picture>`;
+  return `<span ${stringifyAttrs(attrs)}>${picture}</span>`;
 };