Merge pull request #3000 from mjmlio/feature/MJML-49-mj-carousel_thumbnails_functionality

fix(mjml-carousel): thumbnail functionality  #2999

Author: totocap

packages/mjml-carousel/README.md

@@ -49,7 +49,7 @@ tb-border-radius | px | border-radius of the thumbnails | none
 tb-hover-border-color | string | css border color of the hovered thumbnail | none
 tb-selected-border-color | string | css border color of the selected thumbnail | none
 tb-width | px | thumbnail width | null
-thumbnails | String | display or not the thumbnails (visible | hidden)
+thumbnails | String | visible / hidden / supported ('supported' shows only for clients that support full carousel functionality) | visible
 
 ### mj-carousel-image
 

packages/mjml-carousel/src/Carousel.js

@@ -19,7 +19,7 @@ export default class MjCarousel extends BodyComponent {
     'padding-left': 'unit(px,%)',
     'padding-right': 'unit(px,%)',
     'right-icon': 'string',
-    thumbnails: 'enum(visible,hidden)',
+    thumbnails: 'enum(visible,hidden,supported)',
     'tb-border': 'string',
     'tb-border-radius': 'unit(px,%)',
     'tb-hover-border-color': 'color',
@@ -136,6 +136,19 @@ export default class MjCarousel extends BodyComponent {
       border-color: ${this.getAttribute('tb-selected-border-color')} !important;
     }
 
+    ${range(0, length)
+      .map(
+        (i) =>
+          `.mj-carousel-${carouselId}-radio-${i + 1}:checked ${repeat(
+            '+ * ',
+            length - i - 1,
+          )}+ .mj-carousel-content .mj-carousel-${carouselId}-thumbnail
+          `,
+      )
+      .join(',')} {
+      display: inline-block !important;
+    }
+
     .mj-carousel-image img + div,
     .mj-carousel-thumbnail img + div {
       display: none !important;
@@ -261,7 +274,8 @@ export default class MjCarousel extends BodyComponent {
   }
 
   generateThumbnails() {
-    if (this.getAttribute('thumbnails') !== 'visible') return ''
+    if (!['visible', 'supported'].includes(this.getAttribute('thumbnails')))
+      return ''
 
     return this.renderChildren(this.props.children, {
       attributes: {
@@ -375,6 +389,13 @@ export default class MjCarousel extends BodyComponent {
     )
   }
 
+  getChildContext() {
+    return {
+      ...this.context,
+      thumbnails: this.getAttribute('thumbnails'),
+    }
+  }
+
   render() {
     return `
       ${msoConditionalTag(

packages/mjml-carousel/src/CarouselImage.js

@@ -24,6 +24,7 @@ export default class MjCarouselImage extends BodyComponent {
   }
 
   getStyles() {
+    const hasThumbnailsSupported = this.hasThumbnailsSupported()
     return {
       images: {
         img: {
@@ -49,7 +50,7 @@ export default class MjCarouselImage extends BodyComponent {
         a: {
           border: this.getAttribute('tb-border'),
           'border-radius': this.getAttribute('tb-border-radius'),
-          display: 'inline-block',
+          display: hasThumbnailsSupported ? 'none' : 'inline-block',
           overflow: 'hidden',
           width: this.getAttribute('tb-width'),
         },
@@ -62,6 +63,12 @@ export default class MjCarouselImage extends BodyComponent {
     }
   }
 
+  hasThumbnailsSupported() {
+    const thumbnails =
+      this.getAttribute('thumbnails') || this.context.thumbnails
+    return thumbnails === 'supported'
+  }
+
   renderThumbnail() {
     const { carouselId, src, alt, 'tb-width': width, target } = this.attributes
     const imgIndex = this.props.index + 1

packages/mjml/test/carousel-hoverSupported.test.js

@@ -0,0 +1,42 @@
+const chai = require('chai')
+const { load } = require('cheerio')
+const mjml = require('../lib')
+
+describe('mj-carousel-thumbnail thumbnails supported', function () {
+  it('should render correct display in CSS style values on mj-carousel-thumbnail', function () {
+    const input = `
+    <mjml>
+      <mj-body>
+        <mj-section>
+          <mj-column>
+            <mj-carousel thumbnails="supported">
+              <mj-carousel-image src="https://placehold.co/450x300/333/ccc/png" />
+              <mj-carousel-image src="https://placehold.co/450x300/ccc/000/png" />
+              <mj-carousel-image src="https://placehold.co/450x300/f45e43/fff/png" />
+            </mj-carousel>
+          </mj-column>
+        </mj-section>
+      </mj-body>
+    </mjml>
+    `
+
+    const { html } = mjml(input)
+
+    const $ = load(html)
+
+    // style values should be correct
+    chai
+      .expect(
+        $('.mj-carousel-thumbnail')
+          .map(function getAttr() {
+            const start = $(this).attr('style').indexOf('display:') + 8
+            const end = $(this).attr('style').indexOf(';', start)
+            const result = $(this).attr('style').substring(start, end)
+            return result
+          })
+          .get(),
+        'Display CSS style values on mj-carousel-thumbnail',
+      )
+      .to.eql(['none', 'none', 'none'])
+  })
+})