@explorer-1/vue 0.2.39 → 0.2.41

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -31,6 +31,9 @@
           :event-type="page.eventType"
           :ongoing="page.ongoing"
           :location="page.location"
+          :primary-subject="page.primarySubject as unknown as PrimarySubjectObject"
+          :grade-levels="page.gradeLevels as unknown as GradeLevelsObject[]"
+          :time="page.time as unknown as EduResourcesTime"
           :title="page.title"
           :summary="page.summary"
           :featured="featureFirstResult ? index === 0 && currentPage === 1 : false"
@@ -53,6 +56,9 @@
           :event-type="page.eventType"
           :ongoing="page.ongoing"
           :location="page.location"
+          :primary-subject="page.primarySubject as unknown as PrimarySubjectObject"
+          :grade-levels="page.gradeLevels as unknown as GradeLevelsObject[]"
+          :time="page.time as unknown as EduResourcesTime"
           :title="page.title"
           heading-level="h2"
         />
@@ -64,7 +70,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { ElasticSearchPage } from '../../interfaces'
-
+import type { PrimarySubjectObject, GradeLevelsObject, EduResourcesTime } from './../../interfaces'
 // @ts-ignore
 import dayjs from 'dayjs'
 import SearchResultCard from './../SearchResultCard/SearchResultCard.vue'
@@ -131,6 +137,9 @@ export default defineComponent({
               // date field is different for mission and event detail pages
               let date
               let location
+              let primarySubject
+              let gradeLevels
+              let time
               let topic =
                 handle === 'missions_mission'
                   ? page._source[handle + '__status_filter']
@@ -152,6 +161,17 @@ export default defineComponent({
               } else if (handle === 'profiles_profilepage') {
                 topic = page._source[handle + '__go_site_name']
                 date = null
+              } else if (handle.startsWith('edu_resources')) {
+                date = null
+                primarySubject = page._source[handle + '__primary_subject'] as PrimarySubjectObject
+                if (page._source[handle + '__grade_levels']) {
+                  gradeLevels = [] as GradeLevelsObject[]
+                  // @ts-expect-error
+                  page._source[handle + '__grade_levels'].forEach((level) => {
+                    gradeLevels.push({ gradeLevel: level.grade_level })
+                  })
+                }
+                time = { time: page._source.activity_time_label_filter } as EduResourcesTime
               } else {
                 date =
                   typeof page._source.publication_date_filter !== 'undefined'
@@ -196,6 +216,10 @@ export default defineComponent({
                 handle === 'edu_events_edueventpage'
                   ? page._source.edu_events_edueventpage__ongoing
                   : undefined
+              // edu resources
+              page.gradeLevels = gradeLevels
+              page.time = time
+              page.primarySubject = primarySubject
               // properties that are different for profiles page
               page.summary =
                 handle === 'profiles_profilepage'

package/src/interfaces.ts

@@ -92,6 +92,9 @@ export interface ElasticSearchPage {
   summary?: string
   eventType?: string
   ongoing?: boolean
+  primarySubject?: string
+  gradeLevels: string
+  time: string
 }
 
 export interface FormOption {
@@ -129,6 +132,7 @@ export interface EventCardObject extends Card {
   eventType?: string
   ongoing?: boolean
   isVirtualEvent?: boolean
+  isInPersonEvent?: boolean
   locationName?: string
   location?: string
   locationLink?: string

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js

@@ -1,4 +1,3 @@
-import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
 import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
 import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
@@ -33,6 +32,12 @@ const PageEduGalleryDetailData = {
   authors: AboutTheAuthorData,
 
   body: [
+    {
+      blockType: 'HeadingBlock',
+      heading: 'Gallery Body',
+      level: 'h2',
+      size: 'h2'
+    },
     {
       blockType: 'RichTextBlock',
       value:
@@ -75,6 +80,7 @@ export const BaseStory = {
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
             '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
           media: [{ ...BlockImageData, blockType: 'ImageBlock' }]
@@ -82,22 +88,25 @@ export const BaseStory = {
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with richtext images.</p><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" class="richtext-image full-width" height="600" src="https://picsum.photos/800/600" width="800"><p data-block-key="89jcq">More text and an image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" class="richtext-image right" height="263" src="https://picsum.photos/500/263" width="500"><p data-block-key="4409g">More text and an image that&#x27;s right-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus.</p><p data-block-key="bid36"></p><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" class="richtext-image left" height="273" src="https://picsum.photos/500/273" width="500"><p data-block-key="1f4rd">More text and an image that&#x27;s left-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus. Duis id risus sit amet est maximus placerat a quis sem. Donec lacus sem, cursus at quam sit amet, consequat vestibulum nulla. </p>',
           media: [BlockImageComparisonData]
         },
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with a richtext embedded video below it.</p><div>\n    <iframe width="200" height="113" src="https://www.youtube.com/embed/C5aC-U9jHDE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="How Do We Know Where Faraway Spacecraft Are?"></iframe>\n</div>\n<p data-block-key="4t2tv">More text below the embedded video.</p>',
           media: [BlockVideoData.block]
         },
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with richtext images.</p><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" class="richtext-image full-width" height="600" src="https://picsum.photos/800/600" width="800"><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" class="richtext-image right" height="263" src="https://picsum.photos/500/263" width="500"><p data-block-key="4409g">Short text in-between two floating images.</p><p data-block-key="bid36"></p><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" class="richtext-image left" height="273" src="https://picsum.photos/500/273" width="500"><p data-block-key="1f4rd">More text and something that&#x27;s left-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus.</p>',
           media: [BlockVideoEmbedData.data]
         }
       ]

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -16,6 +16,7 @@ import BlockVideoEmbed from './../../../components/BlockVideoEmbed/BlockVideoEmb
 import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
 import { getHeadingId } from '../../../utils/getHeadingId'
@@ -25,6 +26,7 @@ interface PageEduGalleryObject extends PageEduResourcesObject {
     blockId: string
     heading?: string
     description?: string
+    externalLink?: string
     media: StreamfieldBlockData[]
   }[]
 }
@@ -57,6 +59,7 @@ const jumpMenuHeadings = computed((): BreadcrumbPathObject[] => {
   }
   return itemHeadings
 })
+
 const { data } = reactive(props)
 </script>
 <template>
@@ -77,6 +80,7 @@ const { data } = reactive(props)
         :publication-date="data.publicationDate"
         schema
         pill
+        hide-date
       />
       <ShareButtonsEdu
         v-if="data?.url"
@@ -104,7 +108,10 @@ const { data } = reactive(props)
       :key="index"
       class="PageEduGalleryDetailItem"
     >
-      <template v-if="item.media?.length">
+      <div
+        v-if="item.media?.length"
+        class="PageEduGalleryDetailItem__media mb-5 lg:mb-12"
+      >
         <template
           v-for="(block, _media_index) in item.media"
           :key="_media_index"
@@ -113,41 +120,41 @@ const { data } = reactive(props)
             <LayoutHelper
               v-if="block.image"
               indent="col-2"
-              class="mb-5 lg:mb-10"
             >
               <BlockImageStandard
                 :data="block.image"
                 :caption="block.caption"
                 :display-caption="block.displayCaption"
+                :custom-detail-url="item.externalLink"
               />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'ImageComparisonBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockImageComparison :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockImageComparison
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'VideoBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockVideo :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockVideo
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'VideoEmbedBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockVideoEmbed :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockVideoEmbed
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
         </template>
-      </template>
+      </div>
       <LayoutHelper
         v-if="item.heading || item.description"
         indent="col-3"
@@ -164,6 +171,7 @@ const { data } = reactive(props)
         />
       </LayoutHelper>
       <LayoutHelper
+        v-if="index + 1 !== data.galleryItems?.length"
         indent="col-2"
         class="pt-10 lg:pt-18 mb-10 lg:mb-18"
       >
@@ -171,6 +179,16 @@ const { data } = reactive(props)
       </LayoutHelper>
     </div>
 
+    <div
+      v-if="data.body?.length"
+      class="my-10 lg:my-18"
+    >
+      <BlockStreamfield
+        v-if="data.body?.length"
+        :data="data.body"
+      />
+    </div>
+
     <!-- related links -->
     <LayoutHelper
       v-if="data.relatedLinks && data.relatedLinks.length"

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

@@ -180,6 +180,7 @@ const { data } = reactive(props)
         :publication-date="data.publicationDate"
         schema
         pill
+        hide-date
       />
       <ShareButtonsEdu
         v-if="data?.url"

package/src/templates/www/PageTimeline/PageTimeline.vue

@@ -209,7 +209,11 @@ export default defineComponent({
   },
   created() {
     const sortByParam = this.$route?.query.sortBy
-    if (sortByParam && sortByOptions.some((option) => option.value === sortByParam)) {
+    if (
+      sortByParam &&
+      sortByOptions &&
+      sortByOptions.some((option) => option.value === sortByParam)
+    ) {
       this.sortBy = sortByParam as SortBy
     }
 

package/src/utils/mixins.ts

@@ -194,12 +194,14 @@ export const mixinIsActivePath = (itemPath: string): Boolean => {
     */
 export const mixinGetSrcSet = (srcSetObject: Partial<ImageObject>): string => {
   let srcSet = ''
-  const valid = Object.keys(srcSetObject).some(function (key) {
-    if (key.startsWith('screen')) {
-      return true
-    }
-    return false
-  })
+  const valid = Object.keys(srcSetObject)?.length
+    ? Object.keys(srcSetObject).some(function (key) {
+        if (key.startsWith('screen')) {
+          return true
+        }
+        return false
+      })
+    : false
   if (valid) {
     const srcSetArray: string[] = []
     for (const [key, value] of Object.entries(srcSetObject)) {