{"version":3,"file":"FindingAidsHeader-CQwRwdTc.js","sources":["../../src/components/findingAids/FindingAidsHeader.vue"],"sourcesContent":["<template>\n <div :style=\"{ height: frameHeight + 'px' }\">\n <header ref=\"header\" :class=\"$style.header\">\n <div :class=\"[$style.grid, 'container']\">\n <div>\n <nav v-if=\"obj.back\">\n <BackLink\n :component=\"parent\"\n group=\"finding_aids\"\n label=\"Finding Aids\"\n path=\"/library-archives/archives-collections\"\n ></BackLink>\n </nav>\n <section v-if=\"cart && cart.length\">\n <router-link\n :class=\"['button-secondary', 'space-12-16-above']\"\n :to=\"{ path: '/finding-aids/requested-aids' }\"\n :ga4-event=\"\n JSON.stringify({\n click_type: 'request',\n component: `${parent}`,\n content_group: 'finding_aids',\n gtm_tag: 'link',\n link_text: 'Request selected items',\n link_url: '/finding-aids/requested-aids',\n })\n \"\n >\n Request {{ cart.length }} item(s)\n </router-link>\n </section>\n </div>\n <SearchForm\n :class=\"$style.form\"\n :pre-hint=\"'Search the Archives'\"\n :show-hint=\"false\"\n :show-label=\"false\"\n :type=\"'archives'\"\n ></SearchForm>\n </div>\n </header>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport BackLink from '@/components/common/BackLink.vue';\nimport { onMounted, ref, useCssModule, watch } from 'vue';\nimport SearchForm from '@/components/search/SearchForm.vue';\nimport { storeToRefs } from 'pinia';\nimport { useMainStore } from '@/stores/mainStore.js';\nimport { useRouteParent } from '@/composables/Common.js';\n\ndefineProps<{\n obj: {\n back: string;\n };\n}>();\n\nconst store = useMainStore();\nconst { cart, showBanner } = storeToRefs(store);\nconst { parent } = useRouteParent();\nconst style = useCssModule();\n\nconst frameHeight = ref();\nconst header = ref();\nconst heights = ref({\n 'main-nav': 0,\n});\nconst navTop = ref();\n\nonMounted(() => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n checkHeights();\n });\n });\n\n window.addEventListener('scroll', () => {\n checkPos();\n });\n});\n\nwatch(store.cart, () => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n frameHeight.value = header.value.offsetHeight;\n });\n });\n});\n\nwatch(showBanner, () => {\n checkHeights();\n});\n\nfunction checkHeights() {\n const banner = document.getElementById('guggen-banner');\n const main = document.getElementById('main-nav');\n\n if (banner) {\n heights.value['banner'] = banner.getBoundingClientRect().height;\n }\n\n frameHeight.value = header.value.offsetHeight;\n navTop.value =\n window.scrollY !== 0\n ? window.scrollY + header.value.getBoundingClientRect().top\n : header.value.getBoundingClientRect().top;\n\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const type = entry.target.id;\n\n heights.value[type] = entry.contentBoxSize[0].blockSize;\n }\n });\n\n resizeObserver.observe(main);\n}\n\nfunction checkPos() {\n const curPos = window.scrollY + heights.value['main-nav'];\n\n if (\n header.value &&\n !header.value.classList.contains(`${style.fixed}`) &&\n curPos >= navTop.value\n ) {\n header.value.classList.add(`${style.fixed}`);\n }\n\n if (header.value && header.value.classList.contains(`${style.fixed}`) && curPos <= navTop.value) {\n header.value.classList.remove(`${style.fixed}`);\n }\n}\n</script>\n\n<style lang=\"scss\">\n@use '@/styles/forms.module.scss' as *;\n</style>\n\n<style lang=\"scss\" module>\n.form {\n margin-top: 0.5rem;\n}\n\n// Unused?\n.frame {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n}\n\n.fixed {\n padding: 0 1rem 2rem;\n position: fixed;\n}\n\n.grid {\n section {\n a {\n margin-top: 1.5rem;\n }\n }\n}\n\n.header {\n background: $white;\n left: 0;\n padding-bottom: 2rem;\n right: 0;\n top: px-to-rem(57);\n z-index: get-zindex(content);\n\n &::after {\n @include line;\n\n & {\n margin-top: 2rem;\n }\n }\n}\n\n@media (min-width: $break-point) {\n .form {\n grid-column: span 4;\n justify-content: flex-end;\n margin-top: 0;\n\n input[type=search] {\n flex: 0;\n }\n }\n\n .grid {\n @include grid;\n\n > div {\n grid-column: span 8;\n }\n\n form {\n align-self: start;\n grid-column: 9 / span 4;\n grid-row: 1;\n }\n }\n\n .header {\n top: px-to-rem(170);\n\n .form {\n margin-top: 0;\n }\n }\n\n :global(.fixed) {\n .header {\n top: px-to-rem(150);\n }\n }\n}\n</style>\n"],"names":["store","useMainStore","cart","showBanner","storeToRefs","parent","useRouteParent","style","useCssModule","frameHeight","ref","header","heights","navTop","onMounted","checkHeights","checkPos","watch","banner","main","entries","entry","type","curPos"],"mappings":"yXA0DA,MAAMA,EAAQC,EAAa,EACrB,CAAE,KAAAC,EAAM,WAAAC,GAAeC,EAAYJ,CAAK,EACxC,CAAE,OAAAK,CAAO,EAAIC,EAAe,EAC5BC,EAAQC,EAAa,EAErBC,EAAcC,EAAI,EAClBC,EAASD,EAAI,EACbE,EAAUF,EAAI,CAClB,WAAY,CAAA,CACb,EACKG,EAASH,EAAI,EAEnBI,EAAU,IAAM,CACd,sBAAsB,IAAM,CAC1B,sBAAsB,IAAM,CACbC,EAAA,CAAA,CACd,CAAA,CACF,EAEM,OAAA,iBAAiB,SAAU,IAAM,CAC7BC,EAAA,CAAA,CACV,CAAA,CACF,EAEKC,EAAAjB,EAAM,KAAM,IAAM,CACtB,sBAAsB,IAAM,CAC1B,sBAAsB,IAAM,CACdS,EAAA,MAAQE,EAAO,MAAM,YAAA,CAClC,CAAA,CACF,CAAA,CACF,EAEDM,EAAMd,EAAY,IAAM,CACTY,EAAA,CAAA,CACd,EAED,SAASA,GAAe,CAChB,MAAAG,EAAS,SAAS,eAAe,eAAe,EAChDC,EAAO,SAAS,eAAe,UAAU,EAE3CD,IACFN,EAAQ,MAAM,OAAYM,EAAO,sBAAwB,EAAA,QAG/CT,EAAA,MAAQE,EAAO,MAAM,aACjCE,EAAO,MACL,OAAO,UAAY,EACf,OAAO,QAAUF,EAAO,MAAM,sBAAwB,EAAA,IACtDA,EAAO,MAAM,wBAAwB,IAEpB,IAAI,eAAgBS,GAAY,CACrD,UAAWC,KAASD,EAAS,CACrB,MAAAE,EAAOD,EAAM,OAAO,GAE1BT,EAAQ,MAAMU,CAAI,EAAID,EAAM,eAAe,CAAC,EAAE,SAAA,CAChD,CACD,EAEc,QAAQF,CAAI,CAAA,CAG7B,SAASH,GAAW,CAClB,MAAMO,EAAS,OAAO,QAAUX,EAAQ,MAAM,UAAU,EAGtDD,EAAO,OACP,CAACA,EAAO,MAAM,UAAU,SAAS,GAAGJ,EAAM,KAAK,EAAE,GACjDgB,GAAUV,EAAO,OAEjBF,EAAO,MAAM,UAAU,IAAI,GAAGJ,EAAM,KAAK,EAAE,EAGzCI,EAAO,OAASA,EAAO,MAAM,UAAU,SAAS,GAAGJ,EAAM,KAAK,EAAE,GAAKgB,GAAUV,EAAO,OACxFF,EAAO,MAAM,UAAU,OAAO,GAAGJ,EAAM,KAAK,EAAE,CAChD"}