@explorer-1/vue 0.1.3 → 0.1.5

package/src/templates/PageAudioDetail/PageAudioDetail.vue

@@ -0,0 +1,375 @@
+<template>
+  <div
+    v-if="data"
+    class="PageAudioDetail ThemeVariantLight"
+    itemscope
+    itemtype="http://schema.org/VideoObject"
+  >
+    <!-- schema.org -->
+    <meta
+      v-if="data.uploadedMedia && data.uploadedMedia.file"
+      itemprop="contentUrl"
+      :content="data.uploadedMedia.file"
+    />
+    <meta
+      v-if="data.uploadedMedia && data.uploadedMedia.duration"
+      itemprop="duration"
+      :content="data.uploadedMedia.duration"
+    />
+    <meta
+      v-if="data.thumbnailImage && data.thumbnailImage.original"
+      itemprop="thumbnailUrl"
+      :content="data.thumbnailImage.original"
+    />
+    <meta
+      v-if="data.summary"
+      itemprop="description"
+      :content="data.summary"
+    />
+
+    <LayoutHelper
+      indent="col-1"
+      class="3xl:px-0 lg:mt-12 mx-auto lg:px-4 mt-5 mb-10 lg:mb-14"
+    >
+      <!-- TODO consolidate all media detail pages to use the same headline component -->
+      <template v-if="data.series && data.series.url">
+        <DetailHeadline
+          :title="data.title"
+          :publication-date="data.publicationDate"
+          :label="data.series.title + ' Podcast'"
+          :label-link="data.series.url"
+          schema
+        />
+      </template>
+      <template v-else>
+        <DetailHeadline
+          :title="data.title"
+          :publication-date="data.publicationDate"
+          label="Audio"
+          schema
+        />
+      </template>
+    </LayoutHelper>
+    <BlockAudio :data="data" />
+    <LayoutHelper
+      indent="col-2"
+      class="lg:pt-12 pt-4"
+    >
+      <div class="lg:grid flex flex-col grid-cols-10 mb-12">
+        <div
+          v-if="data.summary || data.transcript || (data.relatedLinks && data.relatedLinks.length)"
+          class="lg:order-1 order-2 col-span-7 mb-12"
+        >
+          <BlockText :text="data.summary" />
+          <hr
+            v-if="data.summary"
+            class="border-gray-light-mid lg:my-8 my-5"
+          />
+          <div
+            v-if="data.transcript && data.transcript.length > 2"
+            ref="audioTranscript"
+            class="relative col-span-7 my-5"
+            :class="{
+              'max-h-xl lg:max-h-3xl overflow-hidden': collapseTranscript
+            }"
+          >
+            <div
+              v-if="collapseTranscript && showTranscriptControls"
+              class="transcript-overlay"
+            ></div>
+            <BaseHeading
+              level="h2"
+              class="mb-5"
+              >Transcript</BaseHeading
+            >
+            <BlockText
+              :text="data.transcript"
+              variant="medium"
+              class="audio-transcript"
+              itemprop="transcript"
+            />
+          </div>
+          <template v-if="data.transcript && data.transcript.length > 2 && showTranscriptControls">
+            <BaseButton
+              class="my-6"
+              variant="secondary"
+              compact
+              :aria-expanded="collapseTranscript ? 'false' : 'true'"
+              @click="toggleTranscript()"
+            >
+              <template v-if="collapseTranscript">
+                <span>Read more</span>
+                <IconDropdown class="text-sm ml-2" />
+              </template>
+              <template v-else>
+                <span>Collapse</span>
+                <IconDropdown class="transform rotate-180 text-sm ml-2" />
+              </template>
+            </BaseButton>
+          </template>
+          <!-- related links -->
+          <template v-if="data.relatedLinks && data.relatedLinks.length">
+            <BlockRelatedLinks
+              class="mt-12"
+              :data="data.relatedLinks[0]"
+            />
+          </template>
+        </div>
+        <aside class="audio-aside lg:order-2 order-1 col-start-9 col-end-11 mb-12">
+          <div class="mt-5 lg:mt-0 lg:mb-12">
+            <div class="lg:w-auto w-full">
+              <BaseModal
+                v-if="data.subscribeLinks && data.subscribeLinks.length"
+                bg-close
+              >
+                <template #modalTrigger>
+                  <BaseButton
+                    class="w-full mb-5"
+                    variant="primary"
+                    compact
+                  >
+                    Subscribe
+                  </BaseButton>
+                </template>
+                <template
+                  v-if="data.subscribeLinks[0].heading"
+                  #modalHeader
+                >
+                  {{ data.subscribeLinks[0].heading }}
+                </template>
+                <div class="SubscribeModal mb-8">
+                  <p
+                    v-if="data.subscribeLinks[0].description"
+                    class="text-body-md mb-5"
+                  >
+                    {{ data.subscribeLinks[0].description }}
+                  </p>
+                  <ul
+                    v-if="data.subscribeLinks[0].links && data.subscribeLinks[0].links.length > 0"
+                    class="text-body-md mb-5"
+                  >
+                    <li
+                      v-for="(link, index) in data.subscribeLinks[0].links"
+                      :key="index"
+                    >
+                      <BaseLink
+                        variant="default"
+                        :href="link.externalLink"
+                        external-target-blank
+                      >
+                        {{ link.text }}
+                      </BaseLink>
+                    </li>
+                  </ul>
+                </div>
+              </BaseModal>
+            </div>
+            <div class="lg:w-auto w-full">
+              <BaseButton
+                v-if="data.uploadedMedia && data.uploadedMedia.file"
+                :href="data.uploadedMedia.file"
+                class="inline-block lg:block mb-5"
+                :variant="
+                  data.subscribeLinks && data.subscribeLinks.length ? 'secondary' : 'primary'
+                "
+                compact
+              >
+                <span class="pr-2">
+                  Download
+                  {{ data.uploadedMedia.fileExtension || 'Audio' }}
+                </span>
+                <slot name="icon">
+                  <IconDownload />
+                </slot>
+              </BaseButton>
+            </div>
+          </div>
+
+          <div
+            v-if="data.series && data.series.url"
+            class="lg:pt-0 lg:mb-12 pt-8"
+          >
+            <p class="text-subtitle mb-5">Podcast Series</p>
+            <BaseLink
+              variant="none"
+              :to="data.series.url"
+              class="text-jpl-red hover:text-jpl-red-dark text-lg"
+              link-class="p-3 -mt-3 -ml-3"
+            >
+              {{ data.series.title }}
+            </BaseLink>
+          </div>
+        </aside>
+      </div>
+    </LayoutHelper>
+
+    <PodcastSeriesCarousel
+      :series="data.series"
+      :initial-season-id="data.parent ? data.parent.id : null"
+      class="mb-12 lg:mb-24"
+    />
+    <div
+      v-if="data.relatedPages && data.relatedPages.length"
+      class="bg-gray-light lg:py-24 lg:mt-24 py-12 mt-12"
+    >
+      <BlockLinkCarousel
+        item-type="tiles"
+        heading="Related Pages"
+        :items="data.relatedPages"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../components/DetailHeadline/DetailHeadline.vue'
+import BaseButton from './../../components/BaseButton/BaseButton.vue'
+import BlockRelatedLinks from './../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockText from './../../components/BlockText/BlockText.vue'
+import BlockAudio from './../../components/BlockAudio/BlockAudio.vue'
+import IconDownload from './../../components/Icons/IconDownload.vue'
+import IconDropdown from './../../components/Icons/IconDropdown.vue'
+import BlockLinkCarousel from './../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
+import BaseLink from './../../components/BaseLink/BaseLink.vue'
+import BaseModal from './../../components/BaseModal/BaseModal.vue'
+import PodcastSeriesCarousel from './../../components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue'
+
+export default defineComponent({
+  name: 'PageAudioDetail',
+  components: {
+    LayoutHelper,
+    BlockRelatedLinks,
+    DetailHeadline,
+    BlockText,
+    BaseButton,
+    BlockAudio,
+    IconDownload,
+    IconDropdown,
+    BlockLinkCarousel,
+    BaseHeading,
+    BaseLink,
+    BaseModal,
+    PodcastSeriesCarousel
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      collapseTranscript: true, // must start as true to determine if there is overflow
+      showTranscriptControls: true
+    }
+  },
+  watch: {
+    'data.transcript': {
+      handler() {
+        this.$nextTick(() => {
+          this.checkTranscriptOverflow()
+        })
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.checkTranscriptOverflow()
+    })
+  },
+  methods: {
+    checkTranscriptOverflow() {
+      if (this.$refs.audioTranscript) {
+        const element = this.$refs.audioTranscript as HTMLElement
+        if (element.scrollHeight > element.clientHeight) {
+          this.showTranscriptControls = true
+        } else {
+          this.showTranscriptControls = false
+        }
+      }
+    },
+    toggleTranscript() {
+      if (!this.collapseTranscript && this.$refs.audioTranscript) {
+        // @ts-ignore
+        this.$refs.audioTranscript.scrollIntoView({ behavior: 'smooth' })
+        this.collapseTranscript = true
+      } else {
+        this.collapseTranscript = false
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.PageAudioDetail {
+  .transcript-overlay {
+    // necessary for safari to interpolate the gradient correctly
+    // see https://stackoverflow.com/a/56548711
+    background-image: linear-gradient(to top, white, rgba(255, 255, 255, 0));
+    @apply absolute bottom-0 inset-x-0 h-24 pointer-events-none;
+  }
+
+  .audio-aside {
+    // .BaseButton {
+    //   max-width: 200px;
+    //   @screen md {
+    //     max-width: none;
+    //   }
+    // }
+    .BlockText {
+      @apply text-lg;
+    }
+  }
+
+  .audio-transcript {
+    p {
+      @apply mb-4;
+    }
+  }
+
+  .SubscribeModal {
+    ul {
+      @apply mb-5;
+      @screen lg {
+        @apply mb-8;
+      }
+
+      &:last-child {
+        @apply mb-0;
+      }
+
+      li {
+        @apply mb-2 pl-8 relative;
+        @screen lg {
+          @apply pl-12;
+        }
+
+        &:last-child {
+          @apply mb-0;
+        }
+
+        &::before {
+          content: '';
+          width: 24px;
+          height: 2px;
+          @apply bg-jpl-red block absolute top-0 left-0 mt-3;
+          @screen sm {
+            @apply mt-3;
+          }
+          @screen lg {
+            width: 30px;
+          }
+
+          .ThemeVariantDark & {
+            @apply bg-jpl-red-light;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/templates/PageContent/PageContent.stories.js

@@ -12,11 +12,12 @@ import PageContent from './PageContent.vue'
 export default {
   title: 'Templates/PageContent',
   component: PageContent,
+  tags: ['!autodocs'],
   parameters: {
     html: {
       root: '#storyDecorator'
     },
-    viewMode: 'canvas'
+    layout: 'fullscreen'
   },
   excludeStories: /.*(Data)$/
 }

package/src/templates/PageEventDetail/PageEventDetail.stories.js

@@ -10,7 +10,7 @@ export default {
     html: {
       root: '#storyDecorator'
     },
-    viewMode: 'canvas'
+    layout: 'fullscreen'
   },
   excludeStories: /.*Data$/
 }

package/src/templates/PageImageDetail/PageImageDetail.stories.js

@@ -0,0 +1,116 @@
+import { BlockLinkTileCarouselData } from './../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import { BlockStreamfieldTruncatedData } from './../../components/BlockStreamfield/BlockStreamfield.stories'
+import PageImageDetail from './PageImageDetail.vue'
+
+export default {
+  title: 'Templates/PageImageDetail',
+  component: PageImageDetail,
+  excludeStories: /.*Data$/,
+  tags: ['!autodocs'],
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+// data
+export const ImageDetailPageData = {
+  data: {
+    body: [
+      {
+        blockType: 'RichTextBlock',
+        value:
+          '<p><a href="https://photojournal.jpl.nasa.gov/archive/PIA23356.mov" target="new"><b>Click here for animation</b></a></p><p>This time series shows carbon monoxide associated with fires from the Amazon region in Brazil from Aug. 8-22, 2019. The images show carbon monoxide at an hPA — a common unit of measurement for atmospheric pressure — of 500, or approximately 18,000 feet (5,500 meters) altitude, made with data collected from the Atmospheric Infrared Sounder (AIRS) on NASA\'s Aqua satellite. Each "day" in the series is made by averaging three day\'s-worth of measurements, a technique used to eliminate data gaps.</p><p>As the series progresses, the carbon monoxide plume blooms in the northwest Amazon region then drifts south and east in a more concentrated plume toward Sao Paulo. Green indicates concentrations of carbon monoxide at approximately 100 parts per billion by volume (ppbv), yellow at approximately 120 ppbv, and dark red at approximately 160 ppbv. It must be noted that local values can be significantly higher.</p><p>Carbon monoxide is a pollutant that can be transported large distances and persist in the atmosphere for about one month. It plays a role in both air pollution and climate change.</p><p>AIRS, in conjunction with the Advanced Microwave Sounding Unit (AMSU), senses emitted infrared and microwave radiation from Earth to provide a three-dimensional look at Earth\'s weather and climate. Working in tandem, the two instruments make simultaneous observations all the way down to Earth\'s surface. With more than 2,000 channels sensing different regions of the atmosphere, the system creates a global, three-dimensional map of atmospheric temperature and humidity, cloud amounts and heights, greenhouse gas concentrations and many other atmospheric phenomena.</p><p>The AIRS and AMSU instruments are managed by NASA\'s Jet Propulsion Laboratory in Pasadena, California, under contract to NASA. JPL is a division of the Caltech.</p><p>More information about AIRS can be found at <a href="https://airs.jpl.nasa.gov" target="new">https://airs.jpl.nasa.gov</a>.</p>\n'
+      },
+      ...BlockStreamfieldTruncatedData.body
+    ],
+    contentType: 'image_detail.ImageDetailPage',
+    contextImage: {
+      original: 'https://picsum.photos/1920/1080',
+      src: {
+        height: '1400',
+        url: 'https://picsum.photos/1400/787',
+        width: '787'
+      },
+      srcSet:
+        'https://picsum.photos/1400/787 320w, https://picsum.photos/1400/787 1024w,  https://picsum.photos/1920/1080 1400w',
+      alt: 'Context image'
+    },
+    downloadUrl: 'https://photojournal.jpl.nasa.gov/tiff/PIA23356.tif',
+    image: {
+      alt: 'This time series shows carbon monoxide associated with fires from the Amazon region in Brazil from Aug. 8-22, 2019.',
+      credit: 'NASA/JPL',
+      original: 'https://picsum.photos/1920/1080',
+      src: {
+        url: 'https://picsum.photos/1400/787',
+        width: '1400',
+        height: '787'
+      },
+      srcSet:
+        'https://picsum.photos/1400/787 320w, https://picsum.photos/1400/787 1024w,  https://picsum.photos/1920/1080 1400w',
+      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>',
+      detailUrl: ''
+    },
+    instruments: [
+      {
+        id: '522',
+        instrument: 'Atmospheric Infrared Sounder (AIRS)'
+      }
+    ],
+    keepExploringInstrument: BlockLinkTileCarouselData,
+    keepExploringMission: BlockLinkTileCarouselData,
+    keepExploringTarget: BlockLinkTileCarouselData,
+    label: 'Image',
+    piaNumber: 'PIA23356',
+    publicationDate: '2019-08-23',
+    relatedMission: [
+      {
+        blockType: 'MissionLinkBlock',
+        externalLink: null,
+        page: {
+          url: '/missions/aquarius'
+        },
+        text: 'Aquarius'
+      }
+    ],
+    relatedTopics: BlockLinkTileCarouselData,
+    seoTitle: "NASA's AIRS Maps Carbon Monoxide from Brazil Fires",
+    slug: 'nasas-airs-maps-carbon-monoxide-from-brazil-fires',
+    spacecraft: [
+      {
+        id: '619',
+        spacecraft: 'Aqua'
+      }
+    ],
+    targets: [
+      {
+        id: '536',
+        target: 'Earth'
+      }
+    ],
+    title: "NASA's AIRS Maps Carbon Monoxide from Brazil Fires",
+    topicLabel: 'Earth'
+  }
+}
+// stories
+export const BaseStory = { name: 'ImageDetail', args: { ...ImageDetailPageData } }
+
+// stories
+export const NoTabbedCarousels = {
+  args: {
+    data: {
+      ...ImageDetailPageData.data,
+      keepExploringMission: null,
+      keepExploringInstrument: [],
+      keepExploringTarget: null,
+      relatedMission: [
+        {
+          blockType: 'MissionLinkBlock',
+          externalLink: 'https://nasa.gov',
+          page: null,
+          text: 'External Mission Link for Testing'
+        }
+      ]
+    }
+  }
+}