@explorer-1/vue 0.1.3 → 0.1.5

package/src/templates/PageImageDetail/PageImageDetail.vue

@@ -0,0 +1,444 @@
+<template>
+  <div
+    v-if="data"
+    class="PageImageDetail ThemeVariantLight"
+    itemscope
+    itemtype="http://schema.org/ImageObject"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.image && data.image.original"
+      itemprop="contentUrl"
+      :content="data.image.original"
+    />
+    <meta
+      v-if="data.image && data.image.src"
+      itemprop="thumbnailUrl"
+      :content="data.image.src"
+    />
+
+    <div class="lg:container 3xl:px-0 lg:mt-12 px-5 mx-auto mt-5">
+      <BaseLink
+        variant="secondary"
+        to="/images"
+        class="py-3"
+        >Image</BaseLink
+      >
+      <DetailHeadline
+        :title="data.title"
+        :publication-date="data.publicationDate"
+        schema
+      />
+    </div>
+    <div
+      class="PageImageDetail-image-container max-w-screen-3xl relative lg:mb-20 mx-auto mt-10 mb-8"
+    >
+      <ImageDetailContextImage
+        v-if="data.contextImage"
+        class="sm:block hidden"
+        :data="data"
+      />
+      <MixinFancybox
+        v-if="data.image"
+        :src="data.image.original"
+        :caption="data.image.caption"
+        :credit="data.image.credit"
+        :title="data.title"
+      >
+        <BaseImagePlaceholder
+          class="relative bg-black border border-black"
+          aspect-ratio="21:9"
+        >
+          <BaseImage
+            v-if="data.image.src"
+            :id="data.image.id"
+            :src="data.image.src.url"
+            :srcset="data.image.srcSet"
+            :alt="data.image.alt"
+            object-fit-class="scaleDown"
+            loading="eager"
+          />
+        </BaseImagePlaceholder>
+      </MixinFancybox>
+      <ImageDetailContextImage
+        v-if="data.contextImage"
+        class="sm:hidden block"
+        :data="data"
+      />
+    </div>
+    <LayoutHelper
+      indent="col-2"
+      class="lg:mb-24 mb-10"
+    >
+      <div class="lg:grid grid-cols-10">
+        <div
+          v-if="data.body"
+          class="col-span-7"
+          itemprop="description"
+        >
+          <BlockStreamfield
+            variant="fluid"
+            :data="data.body"
+          />
+        </div>
+        <aside class="col-start-9 col-end-11">
+          <div class="lg:pt-0 pt-8 mb-12">
+            <div class="lg:w-auto w-full">
+              <BaseButton
+                v-if="data.image && data.image.original"
+                :href="data.image.original"
+                class="w-full mb-5"
+                variant="primary"
+                compact
+                >Download JPG</BaseButton
+              >
+            </div>
+            <div class="lg:w-auto w-full">
+              <BaseButton
+                v-if="data.downloadUrl"
+                :href="data.downloadUrl"
+                class="w-full"
+                variant="secondary"
+                compact
+                >Download TIFF</BaseButton
+              >
+            </div>
+          </div>
+          <div
+            v-if="data.relatedMission && data.relatedMission.length"
+            class="lg:mb-16 mb-8"
+          >
+            <span class="font-secondary w-full text-base tracking-wider uppercase"> Mission </span>
+            <ul>
+              <li
+                v-for="(block, index) in data.relatedMission"
+                :key="index"
+              >
+                <div v-if="block.blockType == 'MissionLinkBlock'">
+                  <template v-if="block.page || block.externalLink">
+                    <BaseLink
+                      v-if="block.externalLink === null"
+                      variant="none"
+                      link-class="font-primary text-jpl-red hover:text-jpl-red-light text-lg"
+                      :to="block.page.url"
+                      >{{ block.text }}
+                    </BaseLink>
+                    <BaseLink
+                      v-else
+                      variant="none"
+                      link-class="font-primary text-jpl-red hover:text-jpl-red-light text-lg"
+                      :href="block.externalLink"
+                      external-target-blank
+                    >
+                      <span class="flex items-center">
+                        <span class="mr-2">{{ block.text }}</span>
+                        <IconExternal class="flex-shrink-0 text-sm" />
+                      </span>
+                    </BaseLink>
+                  </template>
+                  <span
+                    v-else
+                    class="text-lg"
+                  >
+                    {{ block.text }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div
+            v-if="data.targets && data.targets.length"
+            class="lg:mb-16 mb-8"
+          >
+            <span class="font-secondary w-full text-base tracking-wider uppercase"> Target </span>
+            <ul>
+              <li
+                v-for="(item, index) in data.targets"
+                :key="index"
+              >
+                <BaseLink
+                  variant="none"
+                  link-class="font-primary text-jpl-red hover:text-jpl-red-light w-full py-3 text-lg"
+                  :to="{
+                    name: 'missions',
+                    query: { mission_target: item.target }
+                  }"
+                >
+                  {{ item.target }}
+                </BaseLink>
+              </li>
+            </ul>
+          </div>
+          <div
+            v-if="data.spacecraft && data.spacecraft.length"
+            class="lg:mb-16 mb-8"
+          >
+            <span class="font-secondary w-full text-base tracking-wider uppercase">
+              Spacecraft
+            </span>
+            <ul>
+              <li
+                v-for="(item, index) in data.spacecraft"
+                :key="index"
+              >
+                <span class="w-full text-lg">
+                  {{ item.spacecraft }}
+                </span>
+              </li>
+            </ul>
+          </div>
+          <div
+            v-if="data.instruments && data.instruments.length"
+            class="lg:mb-16 mb-8"
+          >
+            <span class="font-secondary w-full text-base tracking-wider uppercase">
+              Instrument
+            </span>
+            <ul>
+              <li
+                v-for="(item, index) in data.instruments"
+                :key="index"
+                class="instrument justify-content-center flex-column flex items-start w-full align-middle"
+              >
+                <span class="w-full text-lg">
+                  {{ item.instrument }}
+                </span>
+              </li>
+            </ul>
+          </div>
+          <div
+            v-if="data.image.credit"
+            class="lg:mb-16 mb-8"
+          >
+            <span class="font-secondary w-full text-base tracking-wider uppercase"> Credit </span>
+            <BlockText :text="data.image.credit" />
+          </div>
+        </aside>
+      </div>
+    </LayoutHelper>
+    <LayoutHelper
+      v-if="
+        (data.keepExploringMission && data.keepExploringMission.length) ||
+        (data.keepExploringTarget && data.keepExploringTarget.length) ||
+        (data.keepExploringInstrument && data.keepExploringInstrument.length)
+      "
+      indent="col-2"
+    >
+      <h2
+        class="font-primary text-gray-dark lg:mb-5 lg:text-6xl mb-6 text-3xl font-semibold leading-normal tracking-normal uppercase"
+      >
+        Keep Exploring
+      </h2>
+      <ul class="TopicTabs flex flex-row flex-wrap justify-start pb-4 mb-5 list-none">
+        <li
+          v-if="
+            data.relatedMission &&
+            data.relatedMission.length &&
+            data.keepExploringMission &&
+            data.keepExploringMission.length
+          "
+          class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
+        >
+          <button
+            class="text-subtitle block py-2 border-b-2 text-gray-mid-dark can-hover:hover:text-gray-dark"
+            :class="openTab === 1 ? 'border-jpl-red text-gray-dark' : 'border-white'"
+            :aria-expanded="openTab === 1 ? 'true' : 'false'"
+            active
+            @click="toggleTabs(1)"
+          >
+            {{ data.relatedMission[0].text }}
+          </button>
+        </li>
+        <li
+          v-if="
+            data.targets &&
+            data.targets.length &&
+            data.keepExploringTarget &&
+            data.keepExploringTarget.length
+          "
+          class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
+        >
+          <button
+            class="text-subtitle block py-2 border-b-2 text-gray-mid-dark can-hover:hover:text-gray-dark"
+            :class="openTab === 2 ? 'border-jpl-red text-gray-dark' : 'border-white'"
+            :aria-expanded="openTab === 2 ? 'true' : 'false'"
+            @click="toggleTabs(2)"
+          >
+            {{ data.targets[0].target }}
+          </button>
+        </li>
+        <li
+          v-if="
+            data.instruments &&
+            data.instruments.length &&
+            data.keepExploringInstrument &&
+            data.keepExploringInstrument.length
+          "
+          class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
+        >
+          <button
+            class="text-subtitle block py-2 border-b-2 text-gray-mid-dark can-hover:hover:text-gray-dark"
+            :class="openTab === 3 ? 'border-jpl-red text-gray-dark' : 'border-white'"
+            :aria-expanded="openTab === 3 ? 'true' : 'false'"
+            @click="toggleTabs(3)"
+          >
+            {{ data.instruments[0].instrument }}
+          </button>
+        </li>
+      </ul>
+    </LayoutHelper>
+    <keep-alive>
+      <template
+        v-if="openTab === 1 && data.keepExploringMission && data.keepExploringMission.length"
+      >
+        <ThumbnailCarousel
+          :key="openTab"
+          class="lg:mb-24 mb-12"
+          :aria-hidden="openTab === 1 ? 'false' : 'true'"
+          :slides="data.keepExploringMission"
+        />
+      </template>
+      <template
+        v-else-if="openTab === 2 && data.keepExploringTarget && data.keepExploringTarget.length"
+      >
+        <ThumbnailCarousel
+          :key="openTab"
+          class="lg:mb-24 mb-12"
+          :aria-hidden="openTab === 2 ? 'false' : 'true'"
+          :slides="data.keepExploringTarget"
+        />
+      </template>
+      <template
+        v-else-if="
+          openTab === 3 && data.keepExploringInstrument && data.keepExploringInstrument.length
+        "
+      >
+        <ThumbnailCarousel
+          :key="openTab"
+          class="lg:mb-24 mb-12"
+          :aria-hidden="openTab === 3 ? 'false' : 'true'"
+          :slides="data.keepExploringInstrument"
+        />
+      </template>
+    </keep-alive>
+    <div
+      v-if="data.relatedTopics && data.relatedTopics.length"
+      class="bg-gray-light lg:py-24 py-12"
+    >
+      <BlockLinkCarousel
+        item-type="tiles"
+        heading="Related Topics"
+        :items="data.relatedTopics"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseButton from './../../components/BaseButton/BaseButton.vue'
+import MixinFancybox from './../../components/MixinFancybox/MixinFancybox.vue'
+import BaseImage from './../../components/BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseLink from './../../components/BaseLink/BaseLink.vue'
+import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockStreamfield from './../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockText from './../../components/BlockText/BlockText.vue'
+import DetailHeadline from './../../components/DetailHeadline/DetailHeadline.vue'
+import IconExternal from './../../components/Icons/IconExternal.vue'
+import ImageDetailContextImage from './../../components/ImageDetailContextImage/ImageDetailContextImage.vue'
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+import ThumbnailCarousel from './../../components/ThumbnailCarousel/ThumbnailCarousel.vue'
+
+export default defineComponent({
+  name: 'PageImageDetail',
+  components: {
+    BaseButton,
+    MixinFancybox,
+    BaseImage,
+    BaseImagePlaceholder,
+    BaseLink,
+    BlockLinkCarousel,
+    BlockStreamfield,
+    BlockText,
+    DetailHeadline,
+    IconExternal,
+    ImageDetailContextImage,
+    LayoutHelper,
+    ThumbnailCarousel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      openTab: 1 // for tabbed carousels
+    }
+  },
+  watch: {
+    // to make sure carousel init on headless preview
+    data() {
+      this.initExploreCarousels()
+    }
+  },
+  mounted() {
+    this.initExploreCarousels()
+  },
+  methods: {
+    initExploreCarousels() {
+      if (this.data) {
+        if (this.data.keepExploringMission && this.data.keepExploringMission.length) {
+          this.openTab = 1
+        } else if (this.data.keepExploringTarget && this.data.keepExploringTarget.length) {
+          this.openTab = 2
+        } else if (this.data.keepExploringInstrument && this.data.keepExploringInstrument.length) {
+          this.openTab = 3
+        }
+      }
+    },
+    toggleTabs(tabNumber: number) {
+      this.openTab = tabNumber
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.PageImageDetail {
+  .PageImageDetail-image-container {
+    .BaseImagePlaceholder {
+      @apply select-none;
+
+      min-height: 400px;
+
+      img {
+        -webkit-user-drag: none;
+      }
+    }
+    @screen sm {
+      &::before {
+        content: '';
+        @apply absolute inset-0;
+      }
+    }
+  }
+
+  .TopicTabs {
+    button {
+      @apply select-none;
+    }
+  }
+
+  aside {
+    .BaseButton {
+      max-width: 200px;
+    }
+
+    .BlockText {
+      @apply text-lg;
+    }
+  }
+}
+</style>

package/src/templates/PageNewsDetail/PageNewsDetail.stories.js

@@ -1,6 +1,6 @@
 import { HeroMediaData } from './../../components/HeroMedia/HeroMedia.stories'
 import { DetailHeadlineData } from './../../components/DetailHeadline/DetailHeadline.stories'
-import { BlockStreamfieldData } from './../../components/BlockStreamfield/BlockStreamfield.stories'
+import { BlockStreamfieldTruncatedData } from './../../components/BlockStreamfield/BlockStreamfield.stories'
 import {
   BlockLinkCardCarouselData,
   BlockLinkTileCarouselData
@@ -21,6 +21,7 @@ export default {
     })
   ],
   parameters: {
+    layout: 'fullscreen',
     html: {
       root: '#storyDecorator'
     }
@@ -53,7 +54,7 @@ export const BaseStory = {
           blockType: 'HeroImageBlock'
         }
       ],
-      ...BlockStreamfieldData,
+      ...BlockStreamfieldTruncatedData,
       releaseNumber: '2020-157',
       relatedLinks: [BlockRelatedLinksData.data],
       mediaContacts: [

package/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="ThemeLight"
+    class="ThemeVariantLight"
     :class="computedClass"
     itemscope
     itemtype="http://schema.org/Article"

package/src/templates/PageVideoDetail/PageVideoDetail.stories.js

@@ -0,0 +1,84 @@
+import { BlockLinkTileCarouselData } from './../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import PageVideoDetail from './PageVideoDetail.vue'
+
+export default {
+  title: 'Templates/PageVideoDetail',
+  component: PageVideoDetail,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+// stories
+export const BaseStory = {
+  name: 'PageVideoDetail',
+  args: {
+    data: {
+      block: [],
+      body: 'How Earth satellites including the JPL-managed Topex/Poseidon are helping researchers track the movements and behaviors of sea lions and seals to keep them from extinction.',
+      firstPublishedAt: '2001-12-03T08:00:00+00:00',
+      id: '6723',
+      label: 'Video',
+      publicationDate: '2001-12-03',
+      seoDescription: null,
+      seoTitle: 'Seals, Sea Lions, and Satellites',
+      slug: 'seals-sea-lions-and-satellites',
+      summary:
+        'How Earth satellites including the JPL-managed Topex/Poseidon are helping researchers track the movements and behaviors of sea lions and seals to keep them from extinction.',
+      thumbnailImage: {
+        alt: 'Seals, Sea Lions, and Satellites',
+        id: '7844',
+        original: '/public/images/bg-earth-1440x810.jpg'
+      },
+      title: 'Seals, Sea Lions, and Satellites',
+      topicLabel: 'Earth',
+      transcript: `<p>Preparing to Land Perseverance</p>
+    <p>The following tests, conducted from 2017-2020, helped prepare NASA's Perseverance rover for its landing on Mars.</p>
+    <p>[music]</p>
+    <p>Centrifuge Spin Test</p>
+    <p>Santa Clarita, CA June 2019</p>
+    <p>[music]</p>
+    <p>Parachute Firing Test</p>
+    <p>Moses Lake, WA May 2019</p>
+    <p>[music]</p>
+    <p>[mortar firing]</p>
+    <p>[mortar firing]</p>
+    <p>[clapping]</p>
+    <p>Parachute Wind Tunnel Test</p>
+    <p>NASA's Ames Research Center </p>
+    <p>Moffett Field, CA June 2017</p>
+    <p>[music]</p>
+    <p>[mortar firing]</p>
+    <p>[wind]</p>
+    <p>[clapping]</p>
+    <p>Lander Vision System Test</p>
+    <p>For Avoiding Landing Hazards</p>
+    <p>Death Valley, CA May 2019</p>
+    <p>[helicopter taking off]</p>
+    <p>[music]</p>
+    <p>Rover Wheel Drop Test</p>
+    <p>NASA's Jet Propulsion Laboratory</p>
+    <p>Southern CA August 2019</p>
+    <p>[wheel dropping]</p>
+    <p>[hitting rock]</p>`,
+      uploadedMedia: {
+        duration: '122',
+        file: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4',
+        fileExtension: 'm4v',
+        fileWebm: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm',
+        height: null,
+        id: '1',
+        sources:
+          "[{'src': '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4', 'type': 'application/octet-stream'}, {'src': '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm', 'type': 'video/webm'}]",
+        title: 'Seals, Sea Lions, and Satellites',
+        type: '',
+        width: null
+      },
+      url: '/videos/seals-sea-lions-and-satellites/',
+      urlPath: '/home/videos/seals-sea-lions-and-satellites/',
+      relatedPages: BlockLinkTileCarouselData
+    }
+  }
+}