{"version":3,"file":"ArtworkPost-Chd9h-eB.js","sources":["../../src/queries/GetArtworkPost.js","../../src/components/artwork/ArtworkPost.vue"],"sourcesContent":["import { artworkNavQuery } from '@/queries/ArtworkNavQuery';\nimport gql from 'graphql-tag';\n\nexport const artworkPostQuery = gql`\n query getArtworkPost($slug: ID!) {\n    artwork(id: $slug, idType: SLUG) {\n      id\n      accession\n      alternative_title\n      artists {\n        nodes {\n          dates {\n            display\n          }\n          name\n          slug\n        }\n      }\n      artworkTypes {\n        nodes {\n          name\n          slug\n        }\n      }\n      content\n      copyright\n      credit\n      dates\n      decade\n      dimensions\n      excerpt\n      featuredImage {\n        node {\n          altText\n          description\n          mediaDetails {\n            height\n            width\n          }\n          sourceUrl\n        }\n      }\n      imageSrcset\n      medium\n      title\n    }\n    ${artworkNavQuery}\n  }\n`;\n","<template>\n  <article :class=\"[$style.artwork, 'container']\">\n    <ArtworkNavHeader :filters=\"filters\"></ArtworkNavHeader>\n    <header\n      v-if=\"results && results.artwork && Object.keys(results.artwork).length\"\n      :class=\"$style.header\"\n    >\n      <h1>\n        <span v-html=\"name\"></span>\n        <span :class=\"[$style.span, 'heading-2']\" v-html=\"title\"></span>\n      </h1>\n    </header>\n    <section v-if=\"results && results.artwork && Object.keys(results.artwork).length\">\n      <PostFeaturedImage\n        v-if=\"results.artwork.featuredImage && results.artwork.featuredImage.node.sourceUrl\"\n        :class=\"$style.picture\"\n        :is-aspect=\"true\"\n        :featured-image=\"results.artwork.featuredImage.node\"\n        :ga4-data=\"\n          JSON.stringify({\n            click_type: 'hero',\n            component: 'ArtworkPost',\n            content_group: 'artwork',\n            gtm_tag: 'image',\n            file_name: `${results.artwork.featuredImage.node.sourceUrl.split('/').pop()}`,\n          })\n        \"\n        :srcset=\"results.artwork.imageSrcset\"\n        :image-width=\"870\"\n      ></PostFeaturedImage>\n      <section :class=\"[$style.content, 'content', 'space-48-64-above']\">\n        <article\n          v-if=\"results.artwork.content\"\n          :class=\"$style.essay\"\n          v-html=\"results.artwork.content\"\n        ></article>\n        <p v-else :class=\"$style.essay\">\n          Learn more at\n          <router-link\n            :to=\"{\n              name: 'ArtworkTerm',\n              params: {\n                subtype: 'artist',\n                search: results.artwork.artists.nodes[0].slug,\n              },\n            }\"\n            :ga4-event=\"\n              JSON.stringify({\n                click_type: 'artist',\n                component: 'ArtworkPost',\n                content_group: 'artwork',\n                gtm_tag: 'link',\n                link_text: `${name} artist page`,\n                link_url: `${results.artwork.artists.nodes[0].slug}`,\n              })\n            \"\n          >\n            {{ `${name}'s artist page` }}\n          </router-link>.\n        </p>\n        <aside :class=\"$style.aside\">\n          <dl>\n            <dt v-if=\"results.artwork.artists.nodes.length\">Artist</dt>\n            <dd>\n              <router-link\n                :to=\"{\n                  name: 'ArtworkTerm',\n                  params: {\n                    subtype: 'artist',\n                    search: results.artwork.artists.nodes[0].slug,\n                  },\n                }\"\n                :ga4-event=\"\n                  JSON.stringify({\n                    click_type: 'artist',\n                    component: 'ArtworkPost',\n                    content_group: 'artwork',\n                    gtm_tag: 'link',\n                    link_text: `${name}`,\n                    link_url: `${results.artwork.artists.nodes[0].slug}`,\n                  })\n                \"\n                v-html=\"name\"\n              ></router-link>\n              <p\n                v-if=\"results.artwork.artists.nodes[0].dates &&\n                  results.artwork.artists.nodes[0].dates[0].display\"\n              >\n                {{ results.artwork.artists.nodes[0].dates[0].display }}\n              </p>\n            </dd>\n            <dt v-if=\"results.artwork.title\">Title</dt>\n            <dd v-html=\"results.artwork.title\"></dd>\n            <dt v-if=\"results.artwork.dates\">Date</dt>\n            <dd>\n              <router-link\n                v-if=\"results.artwork.decade\"\n                :to=\"{\n                  name: 'ArtworkTerm',\n                  params: {\n                    subtype: 'decade',\n                    search: results.artwork.decade[0],\n                  },\n                }\"\n                :ga4-event=\"\n                  JSON.stringify({\n                    click_type: 'decade',\n                    component: 'ArtworkPost',\n                    content_group: 'artwork',\n                    gtm_tag: 'link',\n                    link_text: `${results.artwork.dates}`,\n                    link_url: `${results.artwork.decade[0]}`,\n                  })\n                \"\n              >\n                {{ results.artwork.dates }}\n              </router-link>\n            </dd>\n            <dt v-if=\"results.artwork.medium\">Medium</dt>\n            <dd>{{ results.artwork.medium }}</dd>\n            <dt v-if=\"results.artwork.dimensions\">Dimensions</dt>\n            <dd>{{ results.artwork.dimensions }}</dd>\n            <dt v-if=\"results.artwork.credit\">Credit Line</dt>\n            <dd v-html=\"results.artwork.credit\"></dd>\n            <dt v-if=\"results.artwork.accession\">Accession</dt>\n            <dd>{{ results.artwork.accession }}</dd>\n            <dt v-if=\"results.artwork.copyright\">Copyright</dt>\n            <dd v-if=\"results.artwork.copyright\" v-html=\"results.artwork.copyright\"></dd>\n            <dt v-if=\"results.artwork.artworkTypes.nodes.length\">Artwork Type</dt>\n            <dd v-if=\"results.artwork.artworkTypes.nodes.length\">\n              <p v-for=\"(type, index) in results.artwork.artworkTypes.nodes\" :key=\"index\">\n                <router-link\n                  :to=\"{\n                    name: 'ArtworkTerm',\n                    params: {\n                      subtype: 'artwork_type',\n                      search: type.slug,\n                    },\n                  }\"\n                  :ga4-event=\"\n                    JSON.stringify({\n                      click_type: 'type',\n                      component: 'ArtworkPost',\n                      content_group: 'artwork',\n                      gtm_tag: 'link',\n                      link_text: `${type.name}`,\n                      link_url: `${type.slug}`,\n                    })\n                  \"\n                >\n                  {{ type.name }}\n                </router-link>\n              </p>\n            </dd>\n          </dl>\n        </aside>\n      </section>\n    </section>\n  </article>\n</template>\n\n<script setup lang=\"ts\">\nimport ArtworkNavHeader from '@/components/artwork/ArtworkNavHeader.vue';\nimport { artworkPostQuery } from '@/queries/GetArtworkPost';\nimport { computed, ref, watch } from 'vue';\nimport { dataLoaded, useHandleError, useMetaData } from '@/composables/Common.js';\nimport PostFeaturedImage from '@/components/common/PostFeaturedImage.vue';\nimport { useArtworkFilters } from '@/composables/ArtworkFilters.js';\nimport { useQuery } from 'villus';\n\nconst props = defineProps<{\n  slugname: string;\n}>();\n\nconst { getFilters } = useArtworkFilters();\nconst { handleError } = useHandleError();\nconst { setMetaDescription, setMetaTitle } = useMetaData();\n\nconst filters = ref({});\nconst name = computed(() => results.value.artwork.artists.nodes[0].name);\nconst title = computed(\n  () => `${results.value.artwork.title}${results.value.artwork.alternative_title\n    ? `&nbsp;(${results.value.artwork.alternative_title})`\n    : ''\n    }`\n);\n\nconst { data: results, isFetching } = useQuery({\n  onData: data => {\n    if (data) {\n      filters.value = getFilters(data);\n      setMetaTitle(`${data.artwork.artists.nodes[0].name} | ${data.artwork.title}`);\n      setMetaDescription(`Learn about this artwork by ${data.artwork.artists.nodes[0].name} in the Guggenheim's Collection Online.`);\n      dataLoaded();\n    }\n\n    if (!data) {\n      handleError('ArtworkPost', props.slugname);\n    }\n  },\n  query: artworkPostQuery,\n  variables: { slug: props.slugname },\n});\n\nwatch(isFetching, (loading) => {\n  if (loading) {\n    dataLoaded(false);\n  }\n\n  if (!loading) {\n    dataLoaded();\n  }\n});\n</script>\n\n<script lang=\"ts\">\nexport default {\n  beforeRoute(params, villusClient) {\n    return new Promise<void>((resolve, reject) => {\n      villusClient\n        .executeQuery({\n          query: artworkPostQuery,\n          variables: {\n            slug: params.slugname,\n          },\n        })\n        .then(() => resolve())\n        .catch((err) => reject(err));\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\" module>\n.aside {\n  margin-top: 4rem;\n\n  dl {\n    margin-top: 0;\n  }\n\n  dd {\n    @include body-2;\n\n    & {\n      margin: 0;\n    }\n  }\n\n  dt {\n    @include heading-4;\n\n    & {\n      margin-top: 1rem;\n    }\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  p {\n    @include body-2;\n\n    & {\n      margin: 0;\n    }\n  }\n}\n\n.essay {\n  margin-top: 0;\n\n  > p:first-of-type {\n    margin-top: 0;\n  }\n}\n\n.picture {\n  background-color: transparent;\n  cursor: pointer;\n\n  img {\n    display: block;\n  }\n\n  :global(.lightbox-container) {\n    &:global(.lightbox-active) {\n      background-color: $white;\n\n      p {\n        display: none;\n      }\n\n      path {\n        fill: $black;\n      }\n    }\n  }\n}\n\n.header {\n  :global(.heading-2) {\n    margin-top: 0;\n  }\n}\n\n.span {\n  display: block;\n}\n\n@media (min-width: $break-point) {\n  .artwork {\n    @include grid;\n\n    > div {\n      grid-column: 1 / span 8;\n    }\n\n    > section {\n      grid-column: span 12;\n    }\n\n    .back {\n      grid-column: span 12;\n    }\n  }\n\n  .aside {\n    grid-column: 10 / span 3;\n    margin-top: 0;\n  }\n\n  .content {\n    @include grid;\n  }\n\n  .essay {\n    grid-column: 1 / span 8;\n  }\n\n  .header {\n    grid-column: span 8;\n  }\n}\n</style>\n"],"names":["artworkPostQuery","gql","artworkNavQuery","__default__","params","villusClient","resolve","reject","err","props","__props","getFilters","useArtworkFilters","handleError","useHandleError","setMetaDescription","setMetaTitle","useMetaData","filters","ref","name","computed","results","title","isFetching","useQuery","data","dataLoaded","watch","loading"],"mappings":"mcAGO,MAAMA,EAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MA2C1BC,CAAe;AAAA;AAAA,oOC0KNC,GAAA,CACb,YAAYC,EAAQC,EAAc,CAChC,OAAO,IAAI,QAAc,CAACC,EAASC,IAAW,CAC5CF,EACG,aAAa,CACZ,MAAOL,EACP,UAAW,CACT,KAAMI,EAAO,QAAA,CACf,CACD,EACA,KAAK,IAAME,GAAS,EACpB,MAAOE,GAAQD,EAAOC,CAAG,CAAC,CAAA,CAC9B,CAAA,CAEL,gEA5DA,MAAMC,EAAQC,EAIR,CAAE,WAAAC,CAAW,EAAIC,EAAkB,EACnC,CAAE,YAAAC,CAAY,EAAIC,EAAe,EACjC,CAAE,mBAAAC,EAAoB,aAAAC,CAAa,EAAIC,EAAY,EAEnDC,EAAUC,EAAI,EAAE,EAChBC,EAAOC,EAAS,IAAMC,EAAQ,MAAM,QAAQ,QAAQ,MAAM,CAAC,EAAE,IAAI,EACjEC,EAAQF,EACZ,IAAM,GAAGC,EAAQ,MAAM,QAAQ,KAAK,GAAGA,EAAQ,MAAM,QAAQ,kBACzD,UAAUA,EAAQ,MAAM,QAAQ,iBAAiB,IACjD,EACF,EACJ,EAEM,CAAE,KAAMA,EAAS,WAAAE,CAAA,EAAeC,EAAS,CAC7C,OAAgBC,GAAA,CACVA,IACMR,EAAA,MAAQP,EAAWe,CAAI,EAC/BV,EAAa,GAAGU,EAAK,QAAQ,QAAQ,MAAM,CAAC,EAAE,IAAI,MAAMA,EAAK,QAAQ,KAAK,EAAE,EACzDX,EAAA,+BAA+BW,EAAK,QAAQ,QAAQ,MAAM,CAAC,EAAE,IAAI,yCAAyC,EAClHC,EAAA,GAGRD,GACSb,EAAA,cAAeJ,EAAM,QAAQ,CAE7C,EACA,MAAOT,EACP,UAAW,CAAE,KAAMS,EAAM,QAAS,CAAA,CACnC,EAEK,OAAAmB,EAAAJ,EAAaK,GAAY,CACzBA,GACFF,EAAW,EAAK,EAGbE,GACQF,EAAA,CACb,CACD"}