@explorer-1/vue 0.0.0

package/src/components/ParallaxContainer/ParallaxContainer.stories.js

@@ -0,0 +1,47 @@
+import ParallaxElement from './../ParallaxElement/ParallaxElement.vue'
+import ParallaxContainer from './ParallaxContainer.vue'
+
+export default {
+  title: 'Components/ParallaxContainer',
+  component: ParallaxContainer,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" style="height:3000px"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    docs: {
+      description: {
+        component:
+          'Use `ParallaxContainer` with a nested `ParallaxElement` to create a parallax scrolling effect.'
+      }
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+const ParallaxContainerTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { ParallaxContainer, ParallaxElement },
+  template: `<ParallaxContainer :invert="invert" :overflow="overflow">
+    <div class="border-black border p-16"><div class="text-h2">Static Content</div><p>Lorem ipsum</p></div>
+    <ParallaxElement class="bg-gray-light border-black border py-56 px-24 w-1/2 mx-auto">
+      <div class="text-h3">Parallax Content</div><p><code>ParallaxElement</code></p>
+    </ParallaxElement>
+    <div class="border-black border p-16"><div class="text-h2">Static Content</div><p>Lorem ipsum</p></div>
+    <ParallaxElement class="bg-gray-light border-black border py-24 px-24 w-1/4 ml-auto">
+      <div class="text-h5">Parallax Content</div><p><code>ParallaxElement</code></p>
+    </ParallaxElement>
+    <div class="border-black border p-16"><div class="text-h2">Static Content</div><p>Lorem ipsum</p></div>
+  </ParallaxContainer>`
+})
+
+export const Default = ParallaxContainerTemplate.bind({})
+Default.storyName = 'ParallaxContainer'
+Default.args = {
+  invert: true,
+  overflow: true
+}

package/src/components/ParallaxContainer/ParallaxContainer.vue

@@ -0,0 +1,76 @@
+<template>
+  <div
+    :class="{ 'overflow-hidden': !overflow }"
+    :style="{
+      '--scroll-factor': `${data.scrollFactor * data.height}px`
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+export default {
+  name: `ParallaxContainer`,
+  props: {
+    invert: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    overflow: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  data() {
+    return {
+      data: {
+        scrollFactor: 0,
+        width: 0,
+        height: 0
+      },
+      eventHandler: undefined
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeUnmount() {
+    if (this.eventHandler) {
+      window.removeEventListener(`resize`, this.eventHandler)
+      window.removeEventListener(`scroll`, this.eventHandler)
+    }
+  },
+  methods: {
+    init() {
+      this.calcParallax()
+      this.$nextTick(() => {
+        this.eventHandler = () => requestAnimationFrame(this.calcParallax)
+        window.addEventListener(`resize`, this.eventHandler, false)
+        window.addEventListener(`scroll`, this.eventHandler, {
+          capture: false,
+          passive: true
+        })
+      })
+    },
+    calcParallax() {
+      const containerRect = this.$el.getBoundingClientRect()
+
+      this.data.height = containerRect.height
+      this.data.width = containerRect.width
+
+      const viewportOffsetTop = containerRect.top
+      const viewportOffsetBottom = window.innerHeight - viewportOffsetTop
+
+      if (this.invert) {
+        this.data.scrollFactor = viewportOffsetTop / (window.innerHeight + this.data.height)
+      } else {
+        this.data.scrollFactor = viewportOffsetBottom / (window.innerHeight + this.data.height)
+      }
+    }
+  }
+}
+</script>

package/src/components/ParallaxElement/ParallaxElement.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    :style="{
+      transform: `translate3d(0, calc(var(--scroll-factor) * ${factor} - ${offset}px), 0)`
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: `ParallaxElement`,
+  props: {
+    factor: {
+      default: 0.25,
+      type: Number
+    },
+    offset: {
+      default: 0,
+      type: Number
+    }
+  }
+}
+</script>

package/src/components/PastEventsCarousel/PastEventsCarousel.vue

@@ -0,0 +1,86 @@
+<template>
+  <MixinCarousel
+    v-if="hasContent"
+    heading="Past Events"
+    variant="cards"
+    :link="{
+      path: '/events',
+      query: {
+        event_status: 'Past events',
+        sortBy: 'eventStartDateLatest',
+        page: '1'
+      }
+    }"
+    link-title="View all past events"
+    indent="col-1"
+    v-bind="$attrs"
+  >
+    <BlockLinkCard
+      v-for="(page, index) in pastEvents"
+      :key="index"
+      :url="page.url"
+      :title="page.title"
+      :thumbnail-image="page.image"
+      :start-date="page.startDate"
+      :end-date="page.endDate"
+      class="swiper-slide"
+    />
+  </MixinCarousel>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import type { ElasticSearchPage } from '../../interfaces'
+import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'
+import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
+
+export default defineComponent({
+  name: 'PastEventsCarousel',
+  components: {
+    MixinCarousel,
+    BlockLinkCard
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    hasContent() {
+      if (this.data?.length) {
+        return true
+      }
+      return false
+    },
+    pastEvents(): ElasticSearchPage[] {
+      return this.data
+        .filter((page: ElasticSearchPage) => {
+          return 'url' in page._source
+        })
+        .map((page: ElasticSearchPage) => {
+          // helpers
+          const handle = this.parseType(page._source.content_type[0])
+          const image = page._source[handle + '__thumbnail_image']
+          page.url = page._source.url
+          page.title = page._source.title
+          page.startDate = page._source[handle + '__start_datetime']
+          page.endDate = page._source[handle + '__end_datetime']
+          if (image) {
+            page.image = {
+              src: {
+                url: image.thumbnail_image
+              }
+            }
+          }
+          return page
+        })
+    }
+  },
+  methods: {
+    parseType(type: string): string {
+      return type.toLowerCase().replace('.', '_')
+    }
+  }
+})
+</script>

package/src/components/PodcastEpisodeCard/PodcastEpisodeCard.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="PodcastEpisodeCard">
+    <div class="w-full h-auto">
+      <div
+        class="border-gray-light-mid lg:pb-10 lg:mb-10 relative grid grid-cols-9 pb-6 mb-6 border-b"
+      >
+        <div
+          v-if="showInlinePlayer"
+          class="col-span-full animate-fadeIn transition-all"
+        >
+          <div
+            v-if="type || topic"
+            class="text-subtitle lg:block hidden mb-3"
+          >
+            <span v-if="type">
+              {{ type }}
+              <span class="sr-only">.</span>
+            </span>
+            <span
+              v-if="type && topic"
+              class="mx-1"
+              >|</span
+            >
+            <span
+              v-if="topic"
+              class="text-gray-mid-dark"
+            >
+              {{ topic }}
+              <span class="sr-only">.</span>
+            </span>
+          </div>
+          <BaseHeading
+            v-if="title"
+            size="h5"
+            :level="headingLevel"
+            class="mb-3"
+          >
+            <BaseLink
+              variant="none"
+              :to="url"
+            >
+              {{ title }}</BaseLink
+            >
+          </BaseHeading>
+        </div>
+        <div
+          v-if="showInlinePlayer"
+          class="col-span-full flex flex-row animate-fadeIn transition-all bg-gray-dark"
+        >
+          <div class="PodcastEpisodeCard-thumbnail w-1/6 lg:w-25 min-h-full relative inline-block">
+            <BaseImagePlaceholder
+              class="h-full"
+              aspect-ratio="1:1"
+            >
+              <BaseImage
+                v-if="image?.src"
+                :src="image.src.url"
+                :width="image.src.width"
+                :height="image.src.height"
+                alt=""
+                object-fit-class="cover"
+                loading="lazy"
+              />
+            </BaseImagePlaceholder>
+          </div>
+          <div
+            v-if="showInlinePlayer"
+            class="w-full pt-3 lg:pt-3.5 px-3.5 flex flex-col justify-center"
+          >
+            <div class="w-full">
+              <BaseAudio
+                :file="media"
+                auto-play
+              />
+            </div>
+          </div>
+        </div>
+        <BaseLink
+          v-if="showInlinePlayer"
+          variant="none"
+          :to="url"
+          class="col-span-12 animate-fadeIn transition-all"
+          link-class="block"
+        >
+          <p
+            v-if="summary"
+            class="hidden sm:block text-gray-mid-dark text-body-sm my-3"
+          >
+            {{ summary }}
+            <span class="sr-only">.</span>
+          </p>
+        </BaseLink>
+        <BaseLink
+          v-if="!showInlinePlayer"
+          variant="none"
+          :to="url"
+          class="PodcastEpisodeCard sm:col-span-6 md:col-span-6 lg:col-span-7 xl:col-span-7 col-span-6"
+          link-class="block"
+        >
+          <div
+            v-if="type || topic"
+            class="text-subtitle lg:block hidden mb-3"
+          >
+            <span v-if="type">
+              {{ type }}
+              <span class="sr-only">.</span>
+            </span>
+            <span
+              v-if="type && topic"
+              class="mx-1"
+              >|</span
+            >
+            <span
+              v-if="topic"
+              class="text-gray-mid-dark"
+            >
+              {{ topic }}
+              <span class="sr-only">.</span>
+            </span>
+          </div>
+
+          <BaseHeading
+            v-if="title"
+            size="h5"
+            :level="headingLevel"
+            class="mb-3"
+            >{{ title }}</BaseHeading
+          >
+          <p
+            v-if="summary"
+            class="hidden sm:block text-gray-mid-dark text-body-sm mb-3"
+          >
+            {{ summary }}
+            <span class="sr-only">.</span>
+          </p>
+        </BaseLink>
+        <button
+          v-if="image && !showInlinePlayer"
+          class="PodcastEpisodeCard-image xl:pl-14 sm:col-span-3 md:col-span-3 lg:col-span-2 xl:col-span-2 col-span-3 z-20 ml-3"
+          aria-label="Play episode"
+          @click="inlinePlayerToggle()"
+        >
+          <div class="relative h-full w-full group">
+            <div
+              class="text-white absolute text-8xl animate-fadeIn transition-opacity z-20 inset-0 flex justify-center items-center drop-shadow-lg opacity-90 group-hover:opacity-100 duration-1000"
+            >
+              <IconPlay />
+            </div>
+            <BaseImagePlaceholder
+              class="bg-opacity-0"
+              aspect-ratio="1:1"
+              no-logo
+            >
+              <BaseImage
+                v-if="image?.src"
+                :src="image.src.url"
+                :width="image.src.width"
+                :height="image.src.height"
+                alt=""
+                class="sm:object-cover object-cover"
+                image-class="group-hover:opacity-75 opacity-100 duration-500"
+                loading="lazy"
+              />
+            </BaseImagePlaceholder>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseAudio from './../BaseAudio/BaseAudio.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import IconPlay from './../Icons/IconPlay.vue'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'PodcastEpisodeCard',
+  components: {
+    BaseLink,
+    BaseHeading,
+    BaseImage,
+    BaseImagePlaceholder,
+    BaseAudio,
+    IconPlay
+  },
+  props: {
+    url: {
+      type: String,
+      required: false,
+      default: '#'
+    },
+    type: {
+      type: String,
+      required: false
+    },
+    topic: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    summary: {
+      type: String,
+      required: false
+    },
+    media: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    },
+    headingLevel: {
+      type: (String as PropType<HeadingLevel>) || null,
+      required: false,
+      default: 'h5'
+    }
+  },
+  data() {
+    return {
+      showInlinePlayer: false
+    }
+  },
+  methods: {
+    inlinePlayerToggle(): boolean {
+      this.showInlinePlayer = !this.showInlinePlayer
+      return this.showInlinePlayer
+    }
+  }
+})
+</script>
+<style lang="scss">
+.PodcastEpisodeCard {
+  .PodcastEpisodeCard-thumbnail {
+    @apply hidden;
+    @media only screen and (min-width: 325px) {
+      @apply block;
+    }
+  }
+}
+</style>