Select Git revision
CardProgramItem.vue
CardProgramItem.vue 5.70 KiB
<script setup>
import { isLgScreenSize } from "../../utils"
import CardProgramItemPoint from "./CardProgramItemPoint"
</script>
<template>
<li
:class="this.isOpen ? 'w-full': ''"
>
<div
ref="closedVariant"
class="
bg-black flex flex-row items-center px-5 py-2 gap-5 justify-start duration-200 cursor-pointer
xl:h-[696px] xl:flex-col xl:gap-12 xl:py-8 xl:px-3 xl:justify-between
2xl:h-[646px]
hover:bg-grey-600
"
v-if="!this.isOpen"
@click="openClose"
>
<div
class="font-alt text-black text-7xl xl:text-9xl"
style="text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff"
>
{{ number }}
</div>
<div
class="
text-white leading-7 text-2xl
xl:rotate-180 xl:[writing-mode:vertical-rl]
"
>
{{ title }}
</div>
</div>
<div
ref="openVariant"
class="bg-white"
:class="
!this.defaultIsOpen ?
'w-0 [&_*]:!text-[0rem] [&_*]:!p-0 [&_*]:!gap-0 [&_*]:!leading-[0px] [&_*]:!delay-0 [&_*]:!duration-0 !h-0'
:
'p-6 xl:p-12'
"
>
<div
class="
flex flex-col gap-8
xl:flex-row xl:gap-16
"
>
<div
class="
flex gap-7 w-full justify-start flex-col
xl:[flex-flow:column_wrap]
xl:h-[600px]
2xl:h-[550px]
"
>
<h2
class="
font-alt text-[3.25rem] duration-200 delay-100 w-1/2
lg:text-[5.5rem]
2xl:text-[6.5rem]
"
>
{{ this.title }}
</h2>
<CardProgramItemPoint
v-for="(point, index) in points"
:key="point.number"
:content="point.content"
/>
</div>
</div>
</div>
</li>
</template>
<script>
export default {
name: "CardProgramItem",
props: ["slug", "title", "number", "content", "points", "defaultIsOpen"],
data () {
return {
isOpen: this.defaultIsOpen
}
},
methods: {
openClose: function () {
this.isOpen = !this.isOpen
if (this.isOpen) {
// So other items close when this one is opened
let urlParams = new URLSearchParams(window.location.search)
let url = new URL(window.location)
urlParams.set("program_view", this.slug)
url.search = urlParams
window.history.replaceState(
{},
this.slug,
url
)
}
}
},
mounted () {
this.$watch(
"isOpen",
(isNowOpen, wasOpen) => {
if (isNowOpen && !wasOpen) {
this.$refs.openVariant.classList.remove("w-0")
this.$refs.openVariant.classList.remove("[&_*]:!text-[0rem]")
this.$refs.openVariant.classList.remove("[&_*]:!p-0")
this.$refs.openVariant.classList.remove("[&_*]:!gap-0")
this.$refs.openVariant.classList.remove("[&_*]:!leading-[0px]")
this.$refs.openVariant.classList.remove("[&_*]:!duration-0")
this.$refs.openVariant.classList.remove("[&_*]:!delay-0")
this.$refs.openVariant.classList.remove("!h-0")
if (isLgScreenSize()) {
this.$refs.openVariant.classList.add("duration-300")
}
this.$refs.openVariant.classList.add("w-full")
this.$refs.openVariant.classList.add("xl:p-12")
this.$refs.openVariant.classList.add("p-6")
if (!isLgScreenSize()) {
// Do this only after 20ms, after the browser's had time to hopefully catch up.
setTimeout(
() => {
const openVariantPosition = this.$refs.openVariant.getBoundingClientRect().top
const offsetPosition = openVariantPosition + window.pageYOffset - 90
window.scrollTo({
top: offsetPosition,
behavior: "instant"
})
},
20
)
}
} else if (!isNowOpen && wasOpen) {
if (isLgScreenSize()) {
this.$refs.openVariant.classList.remove("duration-300")
}
this.$refs.openVariant.classList.remove("w-full")
this.$refs.openVariant.classList.remove("xl:p-12")
this.$refs.openVariant.classList.remove("p-6")
this.$refs.openVariant.classList.add("w-0")
this.$refs.openVariant.classList.add("[&_*]:!text-[0rem]")
this.$refs.openVariant.classList.add("[&_*]:!p-0")
this.$refs.openVariant.classList.add("[&_*]:!gap-0")
this.$refs.openVariant.classList.add("[&_*]:!leading-[0px]")
this.$refs.openVariant.classList.add("[&_*]:!duration-0")
this.$refs.openVariant.classList.add("[&_*]:!delay-0")
this.$refs.openVariant.classList.add("!h-0")
}
}
)
// --- BEGIN URL watch ---
let previousUrl = null;
setInterval(
() => {
const currentUrl = window.location.href;
if (currentUrl != previousUrl) {
// URL changed
previousUrl = currentUrl;
const params = new Proxy(
new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
}
)
if (
params.program_view !== null
&& params.program_view !== this.slug
) {
this.isOpen = false
}
if (
params.program_view !== null
&& params.program_view === this.slug
&& !this.isOpen
) {
this.isOpen = true
}
}
},
0.1
)
// --- END URL watch ---
}
}
</script>