Merge pull request #13 from BKWLD/improve-cloak-resonsive-visual-supp…

…ort-for-single-asset Render a CloakVisual when responsive props not present for responsive-craft-visual
BKWLD · Sep 19, 2022 · e6ea8d2 · e6ea8d2
2 parents eb245a4 + 486123e
commit e6ea8d2
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 5 deletions.
diff --git a/adapters/globals/responsive-craft-visual.coffee b/adapters/globals/responsive-craft-visual.coffee
@@ -2,6 +2,7 @@
 Render Responsive Visual where the responsive fields come from Craft
 ###
 import CloakResponsiveVisual from '../../components/responsive'
+import CloakVisual from '../../components/visual'
 import { aspectRatioFromImage } from './craft-visual'
 export default
 	functional: true
@@ -15,22 +16,50 @@ export default
 		video: Object | Array
 	}
 
-	# Make the responsive component
+	# Make the visual component
 	render: (create, { props, data }) ->
-		create CloakResponsiveVisual, {
+
+		# Get props that responsive visual expects
+		props =	{
+			...props
+			...expandSuperTableAssets props
+		}
+
+		# Render a responsive visual if at least one of the responsive props has
+		# values for both landscape and portarit
+		if (props.landscapeImage and props.portraitImage) ||
+			(props.landscapeVideo and props.portraitVideo) ||
+			(props.landscapeAspect and props.portraitAspect)
+		then create CloakResponsiveVisual, {
 			...data
 			props: {
 				...props
 
-				# Consume Super Table props
-				...expandSuperTableAssets props
-
 				# Remove Super Table field values now that they've been mapped
 				image: undefined
 				video: undefined
 			}
 		}
 
+		# Otherwsie, render a standard cloak-visual
+		else create CloakVisual, {
+			...data
+			props: {
+				...props
+				image: props.landscapeImage || props.portraitImage || props.image
+				video: props.landscapeVideo || props.portraitVideo || props.video
+				aspect: props.landscapeAspect || props.portraitAspect || props.aspect
+
+				# Remove responsive field values
+				landscapeImage: undefined
+				portraitImage: undefined
+				landscapeVideo: undefined
+				portraitVideo: undefined
+				landscapeAspect: undefined
+				portraitAspect: undefined
+			}
+		}
+
 # Take an object with image and video fields from our Super Table pattern and
 # expand it into the more generic props that the responsive component expects
 export expandSuperTableAssets = ({

diff --git a/demo/content/demo.md b/demo/content/demo.md
@@ -96,3 +96,94 @@ The block component simply renders a 100% width Visual within the max-width gutt
   alt='Cyberpunk vibes demo image'>
 </cloak-visual-block>
 ```
+
+## Craft Visuals
+
+Use the Craft adapter components to render Visual instances from Craft objects.  This example shows using `<responsive-craft-visual>` using a SuperTable image and video fields, where only one landscape image was provided. As a result, a non-responsive `<cloak-visual>` component is rendered.
+
+<responsive-craft-visual
+  :image='[{
+      "id":"7884",
+      "landscape":[{
+        "id":"1193",
+        "width":1324,
+        "height":745,
+        "title":"Retreat",
+        "mimeType":"image/jpeg",
+        "focalPoint":[0.5,0.5],
+        "path":"retreat.jpg",
+        "url":"/assets/landscape.jpg"
+      }],
+      "portrait":[]
+    }]'>
+</responsive-craft-visual>
+
+```vue
+<responsive-craft-visual
+  :image='[{
+      "id":"7884",
+      "landscape":[{
+        "id":"1193",
+        "width":3840,
+        "height":2160,
+        "title":"Retreat",
+        "mimeType":"image/jpeg",
+        "focalPoint":[0.5,0.5],
+        "url":"/assets/landscape.jpg"
+      }],
+      "portrait":[]
+    }]'>
+</responsive-craft-visual>
+```
+
+However, if multiple asssets are provided, a `<cloak-responsive>` instance is rendered:
+
+<responsive-craft-visual
+  :image='[{
+      "id":"7884",
+      "landscape":[{
+        "id":"1193",
+        "width":3840,
+        "height":2160,
+        "title":"Retreat",
+        "mimeType":"image/jpeg",
+        "focalPoint":[0.5,0.5],
+        "url":"/assets/landscape.jpg"
+      }],
+      "portrait":[{
+        "id":"1193",
+        "width":2160,
+        "height":2160,
+        "title":"Retreat",
+        "mimeType":"image/jpeg",
+        "focalPoint":[0.5,0.5],
+        "url":"/assets/portrait.png"
+      }]
+    }]'>
+</responsive-craft-visual>
+
+```vue
+<responsive-craft-visual
+  :image='[{
+      "id":"7884",
+      "landscape":[{
+        "id":"1193",
+        "width":3840,
+        "height":2160,
+        "title":"Retreat",
+        "mimeType":"image/jpeg",
+        "focalPoint":[0.5,0.5],
+        "url":"/assets/landscape.jpg"
+      }],
+      "portrait":[{
+        "id":"1193",
+        "width":2160,
+        "height":2160,
+        "title":"Retreat",
+        "mimeType":"image/jpeg",
+        "focalPoint":[0.5,0.5],
+        "url":"/assets/portrait.png"
+      }]
+    }]'>
+</responsive-craft-visual>
+```