{"version":3,"file":"8vs1CpoS.js","sources":["../../../../pages/impact/[year]/index.vue"],"sourcesContent":["<script setup>\n// COMPONENTS\nimport { SectionWrapper, DividerWayFinder, RichText, GridGallery, ResponsiveImage, BannerFeatured, FlexibleBlocks } from 'ucla-library-website-components'\n\n// HELPERS\nimport _get from 'lodash/get'\nimport _ from 'lodash'\nimport removeTags from '../utils/removeTags'\n\n// GQL\nimport IMPACT_REPORT from '../gql/queries/ImpactReport.gql'\n\n// UTILITIES\nimport flattenTimeLineStructure from '../utils/flattenTimeLineStructure'\n\nconst { $graphql } = useNuxtApp()\n\nconst route = useRoute()\n// console.log(\"Check route in impact report year index page: \", route.path, route.params)\nconst path = route.params && route.params.year ? `impact/${route.params.year}` : '*'\n\nconst variables = { path }\n// console.log(\"route path in impact report year index page: \", path, variables)\nconst { data, error } = await useAsyncData(`impact-report-index-${path}`, async () => {\n  const data = await $graphql.default.request(IMPACT_REPORT, variables)\n  return data\n})\nif (error.value) {\n  throw createError({\n    statusCode: 404, statusMessage: 'Page not found.', fatal: true\n  })\n}\nif (!data.value.entry) {\n  throw createError({\n    statusCode: 404,\n    statusMessage: 'Page Not Found'\n  })\n}\n// console.log(\"impact report yesr inde page: data value: \", data.value.entry)\nif (data.value.entry.slug && import.meta.server) {\n  const { $elasticsearchplugin } = useNuxtApp()\n  await $elasticsearchplugin.index(data.value.entry, path.replaceAll('/', '--'))\n}\n\nconst page = ref(_get(data.value, 'entry', {}))\nwatch(data, (newVal, oldVal) => {\n  // console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)\n  page.value = _get(newVal, 'entry', {})\n})\n\nuseHead({\n  title: page.value?.title || '... loading',\n  titleTemplate: title => title + ' | UCLA Library',\n  meta: [\n    {\n      hid: 'description',\n      name: 'description',\n      content: removeTags(page.value?.text),\n    },\n  ],\n})\n\nconst timelineSortedBySubtitle = computed(() => {\n  const timelineData = flattenTimeLineStructure(page.value.timelineGallery)\n\n  const groupBySubtitle = _.groupBy(timelineData, 'subtitle')\n\n  // console.log(\"parsed timeline by subtitle: \" + JSON.stringify(groupBySubtitle))\n\n  for (const key in groupBySubtitle)\n    groupBySubtitle[key] = _.groupBy(groupBySubtitle[key], 'sectionSummary')\n\n  // console.log(\"parsed timeline by summary: \" + JSON.stringify(groupBySubtitle[key]))\n\n  return groupBySubtitle\n})\n\n</script>\n\n<template lang=\"html\">\n  <main\n    id=\"main\"\n    class=\"page page-impact-report\"\n  >\n    <!-- This is template for impact reports -->\n    <div class=\"meta\">\n      <h1\n        class=\"intro\"\n        v-html=\"page.title\"\n      />\n\n      <ResponsiveImage\n        v-if=\"page.portrait && page.portrait.length > 0\"\n        :media=\"page.portrait[0]\"\n        :aspect-ratio=\"60\"\n        class=\"portrait-Ginny\"\n        alt=\"Sketch of Ginny Steel wearing glasses and a grey blazer, with a yellow background\"\n      />\n\n      <RichText\n        class=\"text\"\n        :rich-text-content=\"page.text\"\n      />\n    </div>\n    <SectionWrapper theme=\"divider\">\n      <DividerWayFinder\n        class=\"divider\"\n        color=\"about\"\n      />\n    </SectionWrapper>\n    <h2 class=\"visually-hidden\">\n      Main Story\n    </h2>\n    <BannerFeatured\n      v-if=\"page.keyArt && page.keyArt.length !== 0\"\n      class=\"section-banner\"\n      :media=\"page.keyArt[0].heroImage[0]\"\n      :ratio=\"40\"\n      :title=\"page.keyArt[0].titleGeneral\"\n      :description=\"page.keyArt[0].summary\"\n      :prompt=\"page.keyArt[0].buttonText\"\n      :to=\"page.keyArt[0].buttonUrl\"\n      :align-right=\"false\"\n    />\n    <div v-if=\"page.blocks\">\n      <FlexibleBlocks\n        v-if=\"page.blocks\"\n        class=\"flexible-content\"\n        :blocks=\"page.blocks\"\n      />\n    </div>\n\n    <SectionWrapper theme=\"divider\">\n      <DividerWayFinder\n        class=\"divider\"\n        color=\"about\"\n      />\n    </SectionWrapper>\n\n    <SectionWrapper :section-title=\"page.timelineTitle\">\n      <div\n        v-for=\"(value, propertyName) in timelineSortedBySubtitle\"\n        :key=\"propertyName\"\n        class=\"sub-section-grid\"\n      >\n        <h3\n          class=\"grid-gallery-subtitle\"\n          v-html=\"propertyName\"\n        />\n\n        <GridGallery\n          v-for=\"(subValue, propertySubName) in value\"\n          :key=\"propertySubName\"\n          :section-summary=\"propertySubName\"\n          :items=\"subValue\"\n        />\n      </div>\n    </SectionWrapper>\n    <SectionWrapper theme=\"divider\">\n      <DividerWayFinder\n        class=\"divider\"\n        color=\"about\"\n      />\n    </SectionWrapper>\n    <SectionWrapper v-if=\"page.acknowledgements && page.acknowledgements.length === 1\">\n      <h2\n        :class=\"page.acknowledgements[0].displaySectionTitle === 'true'\n          ? ''\n          : 'visually-hidden'\n        \"\n      >\n        {{ page.acknowledgements[0].titleGeneral }}\n      </h2>\n      <RichText\n        class=\"credits\"\n        :rich-text-content=\"page.acknowledgements[0].acknowledgements\"\n      />\n    </SectionWrapper>\n  </main>\n</template>\n\n<style lang=\"scss\" scoped>\n.page-impact-report {\n  .meta {\n    padding: 0 var(--unit-gutter);\n    margin: var(--space-xl) auto 0 auto;\n    max-width: $container-xl-banner + px;\n\n    .intro {\n      @include step-5;\n      margin-bottom: var(--space-xl);\n      color: var(--color-primary-blue-03);\n    }\n\n    .rich-text {\n      margin: 0;\n      padding-right: 0;\n      margin-right: 0;\n      max-width: $container-xl-banner + px;\n    }\n\n    .text {\n      @include step-3;\n      line-height: 120%;\n\n      :deep(p) {\n        @include step-3;\n      }\n    }\n  }\n\n  .portrait-Ginny {\n    width: 100%;\n    max-width: 50%;\n    margin-left: 24px;\n    float: right;\n\n    :deep(.media) {\n      object-fit: cover;\n    }\n  }\n\n  .section-banner {\n    margin: 0 auto;\n    max-width: $container-xl-banner + px;\n\n    :deep() {\n      --banner-color-theme: var(--color-help-green-03);\n\n      // refactor when option to turn off overlays is available in craft\n      .gradient,\n      .molecule,\n      &.hatch-left .hatch {\n        display: none;\n      }\n    }\n  }\n\n  :deep(.block-highlight .text) {\n    display: initial;\n  }\n\n  h2 {\n    @include step-3;\n    color: var(--color-primary-blue-03);\n    margin-bottom: var(--space-xl);\n  }\n\n  :deep(.grid-gallery) {\n    padding: 0;\n  }\n\n  .sub-section-grid {\n    margin: 12px auto;\n    position: relative;\n  }\n\n  .grid-gallery-subtitle {\n    color: var(--color-primary-blue-03);\n    font-size: 35.538px;\n    line-height: 43px;\n    @include step-2;\n    position: sticky;\n    top: 0;\n    background-color: var(--color-white);\n    padding-top: 8px;\n    z-index: 30;\n    min-height: 46px;\n  }\n\n  .teaser-card {\n    margin: 0 auto;\n  }\n\n  .credits {\n    max-width: $container-l-main + px;\n    font-style: italic;\n    line-height: 26px;\n\n    :deep(p),\n    :deep(a) {\n      font-family: var(--font-secondary);\n      font-size: var(--step--1);\n      color: var(--color-secondary-grey-04);\n\n      strong {\n        font-weight: 600;\n      }\n    }\n  }\n\n  .divider {\n    max-width: $container-l-main + px;\n    margin: var(--space-3xl) auto;\n  }\n\n  .divider-general {\n    margin-top: var(--space-3xl);\n    margin-bottom: var(--space-3xl);\n    max-width: $container-l-main + px;\n  }\n\n  // Hover states\n  @media #{$has-hover} {}\n\n  @media #{$medium} {\n    .meta {\n      padding: 0 $whitespace-m-sides + px;\n      margin-top: 24px;\n\n      .portrait-Ginny {\n        float: none;\n        max-width: 100%;\n        margin: 32px auto;\n      }\n    }\n\n    .divider-general {\n      width: calc(100% - (var(--unit-gutter) * 2));\n    }\n\n    :deep(.grid-gallery) {\n      padding: unset;\n\n      .section-summary {\n        top: 36px;\n      }\n    }\n  }\n\n  @media #{$small} {\n    .meta {\n      padding: 0 $whitespace-s-sides + px;\n\n      .portrait-Ginny {\n        width: 100%;\n      }\n    }\n\n    :deep(.banner-featured.hatch-left) {\n      .meta {\n        padding-left: var(--unit-gutter);\n        padding-right: var(--unit-gutter);\n      }\n    }\n\n    .grid-gallery-subtitle {\n      height: 80px;\n    }\n  }\n\n  @media (min-width: 400px) {\n    .grid-gallery-subtitle {\n      height: 60px;\n    }\n  }\n\n  @media (min-width: 860px) {\n    .grid-gallery-subtitle {\n      height: 40px;\n    }\n  }\n}\n</style>\n"],"names":["_withAsyncContext","data","IMPACT_REPORT"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,UAAM,EAAE,SAAU,IAAG,WAAY;AAEjC,UAAM,QAAQ,SAAU;AAExB,UAAM,OAAO,MAAM,UAAU,MAAM,OAAO,OAAO,UAAU,MAAM,OAAO,IAAI,KAAK;AAEjF,UAAM,YAAY,EAAE,KAAM;AAE1B,UAAM,EAAE,MAAM,MAAO,KAAS,CAAA,QAAA,SAAA,IAAAA,iBAAA,YAAA,aAAa,uBAAuB,IAAI,IAAI,YAAY;AACpF,YAAMC,QAAO,MAAM,SAAS,QAAQ,QAAQC,KAAe,SAAS;AACpE,aAAOD;AAAA,IACT,CAAC,CAAA;AACD,QAAI,MAAM,OAAO;AACf,YAAM,YAAY;AAAA,QAChB,YAAY;AAAA,QAAK,eAAe;AAAA,QAAmB,OAAO;AAAA,MAC9D,CAAG;AAAA,IACH;AACA,QAAI,CAAC,KAAK,MAAM,OAAO;AACrB,YAAM,YAAY;AAAA,QAChB,YAAY;AAAA,QACZ,eAAe;AAAA,MACnB,CAAG;AAAA,IACH;AAEA,QAAI,KAAK,MAAM,MAAM,QAAQ,OAAoB;AAC/C,YAAM,EAAE,qBAAsB,IAAG,WAAY;AAC7C,MAAA,CAAA,QAAA,SAAA,IAAAD,iBAAA,MAAM,qBAAqB,MAAM,KAAK,MAAM,OAAO,KAAK,WAAW,KAAK,IAAI,CAAC,CAAA;IAC/E;AAEA,UAAM,OAAO,IAAI,KAAK,KAAK,OAAO,SAAS,CAAA,CAAE,CAAC;AAC9C,UAAM,MAAM,CAAC,QAAQ,WAAW;AAE9B,WAAK,QAAQ,KAAK,QAAQ,SAAS,CAAA,CAAE;AAAA,IACvC,CAAC;AAED,YAAQ;AAAA,MACN,SAAO,UAAK,UAAL,mBAAY,UAAS;AAAA,MAC5B,eAAe,WAAS,QAAQ;AAAA,MAChC,MAAM;AAAA,QACJ;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,UACN,SAAS,YAAW,UAAK,UAAL,mBAAY,IAAI;AAAA,QACrC;AAAA,MACF;AAAA,IACH,CAAC;AAED,UAAM,2BAA2B,SAAS,MAAM;AAC9C,YAAM,eAAe,yBAAyB,KAAK,MAAM,eAAe;AAExE,YAAM,kBAAkB,EAAE,QAAQ,cAAc,UAAU;AAI1D,iBAAW,OAAO;AAChB,wBAAgB,GAAG,IAAI,EAAE,QAAQ,gBAAgB,GAAG,GAAG,gBAAgB;AAIzE,aAAO;AAAA,IACT,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}