@explorer-1/vue 0.0.0

package/src/components/BlockImageCarousel/BlockImageCarousel.vue

@@ -0,0 +1,201 @@
+<template>
+  <div
+    v-if="items"
+    class="BlockImageCarousel w-full overflow-hidden"
+  >
+    <div
+      ref="BlockImageCarousel"
+      class="swiper"
+    >
+      <div class="swiper-wrapper">
+        <slot name="firstSlide"></slot>
+        <BlockImageCarouselItem
+          v-for="(item, index) in items"
+          :key="index"
+          :image="item.image"
+          :caption="item.caption"
+          :display-caption="item.displayCaption"
+          :block-id="blockId"
+          :show-title="showTitle"
+          class="swiper-slide"
+        />
+      </div>
+      <div class="swiper-nav lg:block absolute inset-x-0 top-0 hidden h-0 overflow-hidden z-70">
+        <div class="absolute inset-0">
+          <div class="absolute bottom-0 right-0 z-10 flex">
+            <BaseButton
+              class="swiper-prev xl:text-xl border-collapse"
+              aria-label="Previous slide"
+            >
+              <template #icon>
+                <IconPrev />
+              </template>
+            </BaseButton>
+            <BaseButton
+              class="swiper-next xl:text-xl border-collapse"
+              aria-label="Next slide"
+            >
+              <template #icon>
+                <IconNext />
+              </template>
+            </BaseButton>
+          </div>
+        </div>
+      </div>
+      <div class="swiper-dots lg:hidden absolute top-0 z-50 w-full text-center">
+        <button
+          v-for="(_item, index) in itemsMobileNav"
+          :key="index"
+          class="pointer-events-auto inline-block px-1 py-3 cursor-pointer"
+          :aria-label="'Go to slide ' + (hasCover ? index : index + 1)"
+          @click="slideTo(hasCover ? index : index + 1)"
+        >
+          <span
+            class="inline-block w-3 h-3 rounded-full"
+            :class="currentIndex === index ? 'bg-jpl-red' : 'bg-gray-light-mid'"
+          ></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import Swiper from 'swiper'
+import { A11y, Navigation } from 'swiper/modules'
+import type { SwiperOptions } from 'swiper/types'
+import swiperOptions from '@explorer-1/common/src/js/_swiperOptions'
+import BlockImageCarouselItem from './../BlockImageCarouselItem/BlockImageCarouselItem.vue'
+import IconPrev from './../Icons/IconPrev.vue'
+import IconNext from './../Icons/IconNext.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import type { ImageObject } from '../../interfaces'
+const BlockImageCarouselOptions = swiperOptions.BlockImageCarousel
+
+Swiper.use([Navigation, A11y])
+
+export default defineComponent({
+  name: 'BlockImageCarousel',
+  components: {
+    BaseButton,
+    IconPrev,
+    IconNext,
+    BlockImageCarouselItem
+  },
+  props: {
+    items: {
+      type: Array as PropType<Partial<ImageObject>[]>,
+      required: false
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    // watches this prop if parent component needs to control current slide
+    slide: {
+      type: Number,
+      required: false
+    },
+    blockId: {
+      type: String,
+      required: false
+    },
+    showTitle: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data(): {
+    currentIndex: number
+    slider: Swiper | null
+    currentCaption: string
+    sliderOptions: SwiperOptions
+  } {
+    return {
+      currentIndex: 0,
+      currentCaption: '',
+      slider: null,
+      sliderOptions: {
+        ...BlockImageCarouselOptions,
+        loop: this.loop,
+        // this component has custom pagination
+        pagination: false,
+        on: {
+          slideChange: (swiper: Swiper) => {
+            // See https://github.com/vuejs/vue/issues/8721.
+            ;(this as any).updateIndex(swiper.realIndex)
+            if (this.loop) {
+              // Swap fancybox data attributes in duplicate slides to avoid duplicate thumbnails in fancybox
+              // TODO: switch to fancyapp carousel for cleaner integration
+              Array.prototype.forEach.call(swiper.slides, function (slide) {
+                const fancyboxEl = slide.querySelector('.MixinFancybox')
+                if (fancyboxEl) {
+                  const fancyboxId =
+                    fancyboxEl.dataset.fancybox || fancyboxEl.dataset.triggerFancybox
+                  if (slide.classList.contains('swiper-slide-visible')) {
+                    fancyboxEl.dataset.fancybox = fancyboxId
+                    fancyboxEl.removeAttribute('data-trigger-fancybox')
+                  } else if (
+                    slide.classList.contains('swiper-slide-duplicate') ||
+                    slide.classList.contains('swiper-slide-duplicate-next')
+                  ) {
+                    fancyboxEl.dataset.triggerFancybox = fancyboxId
+                    fancyboxEl.removeAttribute('data-fancybox')
+                  } else {
+                    fancyboxEl.dataset.fancybox = fancyboxId
+                    fancyboxEl.removeAttribute('data-trigger-fancybox')
+                  }
+                }
+              })
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    hasCover(): boolean {
+      if (this.$slots.firstSlide) {
+        return true
+      }
+      return false
+    },
+    itemsMobileNav(): Partial<ImageObject>[] | undefined {
+      const navArray = this.items
+      if (navArray && this.hasCover) {
+        navArray.push({ cover: 'hasCover' })
+        return navArray
+      }
+      return navArray
+    }
+  },
+  watch: {
+    slide(value) {
+      this.slideTo(value)
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.slider = new Swiper(this.$refs.BlockImageCarousel as HTMLElement, this.sliderOptions)
+      this.currentIndex = this.slider.realIndex
+    },
+    updateIndex(val: number) {
+      this.currentIndex = val
+    },
+    slideTo(val: number) {
+      if (this.slider) {
+        this.slider.slideTo(val)
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import 'swiper/swiper-bundle.css';
+@import '@explorer-1/common/src/scss/components/BlockImageCarousel';
+</style>

package/src/components/BlockImageCarouselItem/BlockImageCarouselItem.stories.js

@@ -0,0 +1,63 @@
+import BlockImageCarouselItem from './BlockImageCarouselItem.vue'
+
+export default {
+  title: 'Components/Blocks/BlockImageCarousel/BlockImageCarouselItem',
+  component: BlockImageCarouselItem,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="container mx-auto"><story/></div>`
+    })
+  ],
+  argTypes: {
+    blockId: {
+      text: { type: 'string' },
+      required: false,
+      description:
+        'Fancybox: the block id is used to differentiate the fancybox of the items in a carousel from other carousels on the page. Generated by Wagtail. Usually provided by parent component `BlockImageCarousel`.'
+    },
+    showTitle: {
+      text: { type: 'string' },
+      required: false,
+      description:
+        "Fancybox: if the image title should be displayed in the item's fancybox. Usually provided by parent component `BlockImageCarousel`."
+    }
+  },
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+// shared data
+export const BlockImageCarouselItemData = {
+  item: {
+    image: {
+      alt: 'Fourth image',
+      title: 'Image Title',
+      caption:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel porttitor urna. Maecenas at est laoreet, sagittis risus a, rutrum ipsum. Quisque tincidunt lacus nunc, dapibus facilisis felis scelerisque sit amet. </p>',
+      credit: 'NASA/JPL',
+      detailUrl: '/image/placeholder/',
+      original: 'https://picsum.photos/869/700',
+      src: {
+        height: 700,
+        url: 'https://picsum.photos/869/700',
+        width: 869
+      },
+      srcSet: 'https://picsum.photos/320/258 320w, https://picsum.photos/869/700 1024w'
+    }
+  }
+}
+
+export const SingleItem = {
+  name: 'BlockImageCarouselItem',
+  args: {
+    image: BlockImageCarouselItemData.item.image,
+    caption: '<p>Custom caption.</p>',
+    displayCaption: true,
+    blockId: 'p9fipftka4',
+    showTitle: true
+  }
+}

package/src/components/BlockImageCarouselItem/BlockImageCarouselItem.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="theImageData">
+    <MixinFancybox
+      :src="theImageData.original"
+      :caption="theImageData.caption"
+      :credit="theImageData.credit"
+      :detail-url="theImageData.detailUrl"
+      :gallery-name="`carousel-${blockId}`"
+      :title="showTitle ? theImageData.title : undefined"
+      show-thumbnails
+    >
+      <BaseImagePlaceholder
+        v-if="theImageData"
+        aspect-ratio="16:9"
+        dark-mode
+      >
+        <BaseImage
+          v-if="theImageData.src"
+          :src="theImageData.src.url"
+          :srcset="theImageData.srcSet"
+          :width="theImageData.src.width"
+          :height="theImageData.src.height"
+          :alt="theImageData.alt"
+          object-fit-class="contain"
+          image-class="swiper-lazy"
+          loading="lazy"
+        />
+      </BaseImagePlaceholder>
+    </MixinFancybox>
+    <div
+      v-if="theImageData && hasCaptionArea"
+      class="lg:px-0 lg:pt-3 px-4 pt-10"
+    >
+      <BaseImageCaption
+        class="slide-caption"
+        :data="theImageData"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+
+export default defineComponent({
+  name: 'BlockImageCarouselItem',
+  components: {
+    MixinFancybox,
+    BaseImage,
+    BaseImagePlaceholder,
+    BaseImageCaption
+  },
+  props: {
+    image: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    // if a caption should even be visible
+    displayCaption: {
+      type: Boolean,
+      default: true
+    },
+    // overrides caption provided with image model
+    caption: {
+      type: String,
+      required: false
+    },
+    // used to differentiate the fancybox of this carousel from others on the page; generated by Wagtail
+    blockId: {
+      type: String,
+      required: false
+    },
+    // if image titles should be displayed in the carousel's fancybox
+    showTitle: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    theCaption(): string | undefined {
+      if (this.caption && this.caption.length > 2 && this.displayCaption) {
+        return this.caption
+      } else if (
+        this.displayCaption &&
+        this.image &&
+        this.image.caption &&
+        this.image.caption.length > 2
+      ) {
+        return this.image.caption
+      }
+      return undefined
+    },
+    // reform the data object with the computed caption
+    theImageData(): Partial<ImageObject> | null {
+      if (this.image) {
+        return {
+          ...this.image,
+          caption: this.theCaption
+        }
+      }
+      return null
+    },
+    hasCaptionArea(): string | boolean {
+      if (this.image) {
+        return this.theCaption || this.image.credit || this.image.detailUrl
+      }
+      return false
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockImageCarouselItem';
+</style>

package/src/components/BlockImageComparison/BlockImageComparison.stories.js

@@ -0,0 +1,46 @@
+import BlockImageComparison from './BlockImageComparison.vue'
+
+export default {
+  title: 'Components/Blocks/BlockImageComparison',
+  component: BlockImageComparison,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="container mx-auto"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BlockImageComparisonData = {
+  blockType: 'ImageComparisonBlock',
+  beforeImage: {
+    src: {
+      url: 'https://picsum.photos/800/450?image=1'
+    },
+    srcCropped: {
+      url: 'https://picsum.photos/1320/1320?image=1'
+    }
+  },
+  afterImage: {
+    src: {
+      url: 'https://picsum.photos/800/450?image=4'
+    },
+    srcCropped: {
+      url: 'https://picsum.photos/1320/1320?image=4'
+    }
+  },
+  caption: '<p>Catnip test subjects from the JPL Mars Cultivation Lab</p>'
+}
+
+// stories
+export const Comparison = {
+  name: 'BlockImageComparison',
+  args: {
+    data: BlockImageComparisonData
+  }
+}

package/src/components/BlockImageComparison/BlockImageComparison.vue

@@ -0,0 +1,59 @@
+<template>
+  <div v-if="data">
+    <client-only placeholder="Loading Image Comparison...">
+      <VueCompareImage
+        v-if="theBeforeImageSrc && theAfterImageSrc"
+        class="h-full animate-fadeIn"
+        :left-image="theBeforeImageSrc.url"
+        left-image-alt="Left image"
+        :right-image="theAfterImageSrc.url"
+        right-image-alt="Right image"
+      />
+    </client-only>
+    <div
+      v-if="data.caption && data.caption.length > 2"
+      class="text-gray-mid-dark mt-3"
+      v-html="data.caption"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+// import VueCompareImage from 'vue3-compare-image'
+
+// const VueCompareImage = process.browser ? require('vue3-compare-image') : null
+
+export default defineComponent({
+  name: 'BlockImageComparison',
+  // components: {
+  //   VueCompareImage,
+  // },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    theBeforeImageSrc() {
+      if (this.data && this.data.beforeImage) {
+        if (this.data.constrain && this.data.beforeImage.srcCropped) {
+          return this.data.beforeImage.srcCropped
+        }
+        return this.data.beforeImage.src
+      }
+      return null
+    },
+    theAfterImageSrc() {
+      if (this.data && this.data.afterImage) {
+        if (this.data.constrain && this.data.afterImage.srcCropped) {
+          return this.data.afterImage.srcCropped
+        }
+        return this.data.afterImage.src
+      }
+      return null
+    }
+  }
+})
+</script>

package/src/components/BlockImageGallery/BlockImageGallery.stories.js

@@ -0,0 +1,55 @@
+import { BlockImageCarouselData } from './../BlockImageCarousel/BlockImageCarousel.stories'
+import BlockImageGallery from './BlockImageGallery.vue'
+
+export default {
+  title: 'Components/Blocks/BlockImageGallery',
+  component: BlockImageGallery,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+    })
+  ],
+  argTypes: {
+    blockId: {
+      text: { type: 'string' },
+      required: false,
+      description:
+        'Fancybox: the block id is used to differentiate the fancybox of this gallery from others on the page. Generated by Wagtail.'
+    }
+  },
+
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BlockImageGalleryData = {
+  label: 'Mars',
+  block: {
+    id: 'x121p1yuly',
+    blockType: 'ImageGalleryBlock',
+    galleryTitle: 'Image Gallery',
+    galleryDescription:
+      'Gallery description, maximus quis nibh eu, luctus ultrices nulla. Curabitur tempus, massa vitae porttitor porttitor, tortor erat tincidunt magna, vulputate varius nulla leo et mauris.',
+    coverImage: BlockImageCarouselData[0].image,
+    gallerySlides: BlockImageCarouselData.slice(1)
+  }
+}
+
+export const ImageGalleryData = {
+  label: 'Mars',
+  'block-id': 'x121p1yuly',
+  title: 'Image Gallery',
+  description:
+    'Gallery description, maximus quis nibh eu, luctus ultrices nulla. Curabitur tempus, massa vitae porttitor porttitor, tortor erat tincidunt magna, vulputate varius nulla leo et mauris.',
+  cover: BlockImageCarouselData[0].image,
+  items: BlockImageCarouselData.slice(1)
+}
+
+export const Gallery = {
+  name: 'BlockImageGallery',
+  args: ImageGalleryData
+}

package/src/components/BlockImageGallery/BlockImageGallery.vue

@@ -0,0 +1,128 @@
+<template>
+  <BlockImageCarousel
+    v-if="items"
+    class="BlockImageGallery"
+    :items="items"
+    :loop="false"
+    :block-id="blockId"
+  >
+    <template #firstSlide>
+      <MixinFancybox
+        v-if="cover"
+        :src="cover.original"
+        :caption="description"
+        :credit="cover.credit"
+        :detail-url="cover.detailUrl"
+        :title="title"
+        :gallery-name="`carousel-${blockId}`"
+        show-thumbnails
+        class="swiper-slide h-auto"
+      >
+        <div>
+          <div class="bg-gradient-to-b from-transparent-w50 to-black absolute inset-0 z-10">
+            <div class="text-contrast lg:p-20 flex items-end w-full h-full p-10 text-white">
+              <div class="w-full">
+                <p
+                  v-if="label"
+                  class="text-subtitle mb-3"
+                >
+                  {{ label }}
+                </p>
+                <BaseHeading
+                  v-if="title"
+                  level="h2"
+                >
+                  {{ title }}
+                </BaseHeading>
+                <p
+                  v-if="description"
+                  class="sm:block text-body-lg lg:w-2/3 xl:w-1/2 hidden mt-5"
+                >
+                  {{ description }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <BaseImagePlaceholder
+            v-if="cover && cover.src"
+            aspect-ratio="16:9"
+            dark-mode
+          >
+            <BaseImage
+              v-if="cover.src"
+              :src="cover.src.url"
+              :srcset="theSrcSet"
+              :width="cover.src.width"
+              :height="cover.src.height"
+              alt=""
+              object-fit-class="cover"
+              image-class="swiper-lazy"
+              loading="lazy"
+            />
+          </BaseImagePlaceholder>
+        </div>
+      </MixinFancybox>
+    </template>
+  </BlockImageCarousel>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetSrcSet } from './../../utils/mixins'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BlockImageCarousel from './../BlockImageCarousel/BlockImageCarousel.vue'
+
+export default defineComponent({
+  name: 'BlockImageGallery',
+  components: {
+    MixinFancybox,
+    BaseImage,
+    BaseImagePlaceholder,
+    BaseHeading,
+    BlockImageCarousel
+  },
+  props: {
+    label: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    description: {
+      type: String,
+      required: false
+    },
+    cover: {
+      type: Object as PropType<ImageObject>,
+      required: false
+    },
+    items: {
+      type: Array as PropType<ImageObject[]>,
+      required: false
+    },
+    blockId: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    theSrcSet() {
+      return this.cover
+        ? mixinGetSrcSet(this.cover)
+          ? mixinGetSrcSet(this.cover)
+          : this.cover.srcSet
+        : ''
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockImageGallery';
+</style>