491 lines
15 KiB
Plaintext
491 lines
15 KiB
Plaintext
---
|
|
import type { RawArticle } from "@/lib/data"
|
|
import Breadcrumb from "@/components/Breadcrumb.astro"
|
|
import { getI18n } from "@/i18n/utils"
|
|
import { href, ROUTES } from '@/lib/routes'
|
|
import { ssrBase } from "@/lib/api"
|
|
|
|
interface Props {
|
|
article: RawArticle | null
|
|
error?: "missing" | "failed" | null
|
|
}
|
|
|
|
const { article, error = null } = Astro.props
|
|
const { locale, t } = getI18n(Astro)
|
|
|
|
const full = (u: string): string => {
|
|
if (!u) return ""
|
|
if (/^https?:\/\//i.test(u)) return u
|
|
return ssrBase().replace(/\/$/, "") + u
|
|
}
|
|
|
|
const images = (article?.images ?? [])
|
|
.map((im) => ({
|
|
id: im.id,
|
|
url: full(im.image || ""),
|
|
name: im.name || "",
|
|
}))
|
|
.filter((im) => im.url)
|
|
|
|
const descParas = (article?.description || "")
|
|
.split(/\n\n+/)
|
|
.map((s) => s.trim())
|
|
.filter(Boolean)
|
|
|
|
const homeHref = href(locale, ROUTES.home)
|
|
const archiveHref = href(locale, ROUTES.shows)
|
|
|
|
const crumbs: { label: string; href: string }[] = [
|
|
// {
|
|
// label: t("Runway looks"),
|
|
// href: archiveHref,
|
|
// },
|
|
]
|
|
|
|
if (article?.brand_id) {
|
|
crumbs.push({
|
|
label: article.brand_name || "Brand",
|
|
href: `${archiveHref}?brand_id=${article.brand_id}`,
|
|
})
|
|
}
|
|
---
|
|
|
|
<div
|
|
id="article-view"
|
|
x-data="articleView()"
|
|
class="min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white"
|
|
>
|
|
{
|
|
article ? (
|
|
<article class="mx-auto max-w-[1600px] px-5 md:px-10 py-12 md:py-16">
|
|
{/* <Breadcrumb items={crumbs}>
|
|
<span slot="current" class="max-w-[60vw] truncate">
|
|
{article.title}
|
|
</span>
|
|
</Breadcrumb> */}
|
|
|
|
<h1 class="font-black leading-[0.95] tracking-tight text-[10vw] md:text-[4.5rem] mt-8">
|
|
{article.title}
|
|
</h1>
|
|
|
|
{images.length > 0 && (
|
|
<section class="mt-16">
|
|
<div
|
|
id="article-gallery"
|
|
class="grid grid-cols-2 md:grid-cols-3 gap-4"
|
|
>
|
|
{images.map((im, i) => (
|
|
<figure
|
|
data-image-index={i}
|
|
data-image-url={im.url}
|
|
data-image-name={im.name}
|
|
@click={`openLb(${i})`}
|
|
class="bg-[#f2f2f2] cursor-zoom-in group"
|
|
>
|
|
<img
|
|
src={im.url}
|
|
alt={im.name}
|
|
loading={i < 6 ? "eager" : "lazy"}
|
|
decoding="async"
|
|
class="w-full aspect-[3/4] object-cover group-hover:opacity-90 transition-opacity"
|
|
/>
|
|
|
|
{im.name && (
|
|
<figcaption class="text-[11px] font-mono uppercase tracking-widest text-[#999] mt-2">
|
|
{im.name}
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{descParas.length > 0 && (
|
|
<section class="mt-16 max-w-[720px] space-y-5 text-[15px] leading-[1.8] text-[#222]">
|
|
{descParas.map((p) => (
|
|
<p>{p}</p>
|
|
))}
|
|
</section>
|
|
)}
|
|
</article>
|
|
) : (
|
|
<div class="flex flex-col items-center justify-center min-h-[60vh] px-5 text-center">
|
|
<p class="font-mono text-sm text-[#888] uppercase tracking-widest mb-4">
|
|
{error === "missing" ? t('No article ID specified') : t('Failed to load article. Please refresh or try later.')}
|
|
</p>
|
|
|
|
<a
|
|
href={homeHref}
|
|
class="text-[12px] font-mono uppercase tracking-[0.2em] border border-black px-4 py-2 hover:bg-black hover:text-white transition-colors"
|
|
>
|
|
← {t('Back to Index')}
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
{article && images.length > 0 && (
|
|
<div
|
|
x-show="lbOpen"
|
|
x-cloak
|
|
@keydown.window.escape="closeLb()"
|
|
@keydown.window.arrow-right="nextLb()"
|
|
@keydown.window.arrow-left="prevLb()"
|
|
class="fixed inset-0 z-[100] bg-white flex flex-col select-none"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class="absolute top-5 left-1/2 -translate-x-1/2 z-30 font-mono text-[12px] font-semibold tracking-[0.14em] text-[#111] bg-white/75 border border-black/10 px-3 py-1.5 rounded-[6px] backdrop-blur-md"
|
|
x-text="`${lbIndex + 1} / ${imageCount}`"
|
|
></div>
|
|
|
|
<button
|
|
type="button"
|
|
@click="closeLb()"
|
|
class="absolute top-[18px] right-[18px] z-30 w-10 h-10 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black/5 hover:border-black/30 transition-all cursor-pointer"
|
|
aria-label={t('Close')}
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
<div class="flex-1 min-h-0 flex items-stretch overflow-hidden relative">
|
|
<div
|
|
id="lb-thumbs"
|
|
class="w-[76px] sm:w-[118px] flex-none overflow-y-auto overflow-x-hidden relative scroll-smooth p-[32px_8px] sm:p-[38px_18px_38px_20px] border-r border-black/10 bg-gradient-to-b from-black/5 to-transparent no-scrollbar"
|
|
>
|
|
{images.map((im, i) => (
|
|
<button
|
|
type="button"
|
|
data-lb-index={i}
|
|
data-thumb-url={im.url}
|
|
@click={`showLb(${i})`}
|
|
class="lb-thumb relative block w-full aspect-[3/4] mb-2 rounded-[2px] overflow-hidden cursor-pointer transition-all duration-200 opacity-40 hover:opacity-85 bg-[#eee] bg-cover bg-center"
|
|
x-bind:class="lbIndex === Number($el.dataset.lbIndex)
|
|
? 'opacity-100 scale-[1.03] ring-2 ring-[#111]'
|
|
: ''"
|
|
aria-label={`${i + 1}`}
|
|
>
|
|
<span class="absolute left-1 top-1 z-10 font-mono text-[8px] sm:text-[9px] font-semibold tracking-widest text-white px-1 py-0.5 rounded-[3px] bg-black/55 backdrop-blur-sm">
|
|
{String(i + 1).padStart(2, "0")}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
@click.stop="prevLb()"
|
|
class="absolute left-3 sm:left-5 top-2 z-20 w-[52px] sm:w-[72px] h-[30px] sm:h-[34px] border border-black/15 bg-white/80 rounded-[6px] backdrop-blur-md flex items-center justify-center text-[#111] hover:bg-black/5 transition-all cursor-pointer"
|
|
aria-label={t('Previous image')}
|
|
>
|
|
<svg class="w-4 h-4 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
|
<path d="M6 14l6-6 6 6" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click.stop="nextLb()"
|
|
class="absolute left-3 sm:left-5 bottom-2 z-20 w-[52px] sm:w-[72px] h-[30px] sm:h-[34px] border border-black/15 bg-white/80 rounded-[6px] backdrop-blur-md flex items-center justify-center text-[#111] hover:bg-black/5 transition-all cursor-pointer"
|
|
aria-label={t('Next image')}
|
|
>
|
|
<svg class="w-4 h-4 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
|
<path d="M6 10l6 6 6-6" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click.stop="prevLb()"
|
|
class="absolute left-[82px] sm:left-[130px] top-1/2 -translate-y-1/2 z-20 w-10 h-10 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:scale-105 hover:border-black/30 transition-all cursor-pointer"
|
|
aria-label={t('Previous image')}
|
|
>
|
|
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
|
<path d="M15 6l-6 6 6 6" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click.stop="nextLb()"
|
|
class="absolute right-2 sm:right-5 top-1/2 -translate-y-1/2 z-20 w-10 h-10 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:scale-105 hover:border-black/30 transition-all cursor-pointer"
|
|
aria-label={t('Next image')}
|
|
>
|
|
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
|
<path d="M9 6l6 6 6-6" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div
|
|
id="lb-main"
|
|
@click.self="closeLb()"
|
|
class="flex-1 min-w-0 min-h-0 relative flex justify-center px-4 sm:px-18"
|
|
x-bind:class="lbZoomed
|
|
? 'overflow-y-auto overflow-x-hidden items-start'
|
|
: 'items-center'"
|
|
>
|
|
<img
|
|
id="lb-image"
|
|
src=""
|
|
alt=""
|
|
@click="toggleZoom()"
|
|
decoding="async"
|
|
class="block select-none transition-opacity duration-200"
|
|
x-bind:class="lbZoomed
|
|
? 'w-full max-w-full h-auto max-h-none cursor-zoom-out'
|
|
: 'max-w-full max-h-full object-contain cursor-zoom-in'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute left-0 right-0 bottom-11 z-20 text-center text-black/60 font-mono text-[11px] uppercase tracking-[0.18em] pointer-events-none px-6"
|
|
x-text="currentImageName"
|
|
></div>
|
|
|
|
<div
|
|
x-show="!lbZoomed"
|
|
class="absolute left-0 right-0 bottom-4 z-20 text-center text-black/45 font-mono text-[11px] tracking-[0.14em] pointer-events-none px-6 transition-opacity duration-200"
|
|
>
|
|
{t('Click image to zoom · Scroll to view · Esc to close')}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<script>
|
|
// type ArticleView = {
|
|
// lbOpen: boolean
|
|
// lbIndex: number
|
|
// lbZoomed: boolean
|
|
// touchStartX: number
|
|
// touchStartY: number
|
|
// imageCount: number
|
|
// currentImageName: string
|
|
// init(): void
|
|
// getImageElement(index: number): HTMLElement | null
|
|
// getImageUrl(index: number): string
|
|
// getImageName(index: number): string
|
|
// openLb(index?: number): void
|
|
// closeLb(): void
|
|
// showLb(index: number): void
|
|
// nextLb(): void
|
|
// prevLb(): void
|
|
// normalizeIndex(index: number): number
|
|
// updateLightboxImage(): void
|
|
// toggleZoom(): void
|
|
// scrollThumbIntoView(): void
|
|
// preloadAround(): void
|
|
// initThumbLazyLoading(): void
|
|
// handleTouchStart(event: TouchEvent): void
|
|
// handleTouchEnd(event: TouchEvent): void
|
|
// }
|
|
|
|
document.addEventListener("alpine:init", () => {
|
|
Alpine.data("articleView", () => ({
|
|
lbOpen: false,
|
|
lbIndex: 0,
|
|
lbZoomed: false,
|
|
touchStartX: 0,
|
|
touchStartY: 0,
|
|
imageCount: 0,
|
|
currentImageName: "",
|
|
|
|
init() {
|
|
this.imageCount = document.querySelectorAll(
|
|
"#article-gallery [data-image-index]"
|
|
).length
|
|
|
|
this.initThumbLazyLoading()
|
|
},
|
|
|
|
getImageElement(index: number) {
|
|
return document.querySelector<HTMLElement>(
|
|
`#article-gallery [data-image-index="${index}"]`
|
|
)
|
|
},
|
|
|
|
getImageUrl(index: number) {
|
|
return this.getImageElement(index)?.dataset.imageUrl || ""
|
|
},
|
|
|
|
getImageName(index: number) {
|
|
return this.getImageElement(index)?.dataset.imageName || ""
|
|
},
|
|
|
|
openLb(index = 0) {
|
|
if (!this.imageCount) return
|
|
|
|
this.lbIndex = this.normalizeIndex(index)
|
|
this.lbZoomed = false
|
|
this.lbOpen = true
|
|
|
|
document.body.style.overflow = "hidden"
|
|
|
|
this.updateLightboxImage()
|
|
|
|
requestAnimationFrame(() => {
|
|
this.scrollThumbIntoView()
|
|
this.preloadAround()
|
|
})
|
|
},
|
|
|
|
closeLb() {
|
|
this.lbOpen = false
|
|
this.lbZoomed = false
|
|
document.body.style.overflow = ""
|
|
},
|
|
|
|
showLb(index: number) {
|
|
if (!this.imageCount) return
|
|
|
|
this.lbIndex = this.normalizeIndex(index)
|
|
this.lbZoomed = false
|
|
|
|
this.updateLightboxImage()
|
|
|
|
const main = document.getElementById("lb-main")
|
|
|
|
if (main) {
|
|
main.scrollTop = 0
|
|
}
|
|
|
|
requestAnimationFrame(() => {
|
|
this.scrollThumbIntoView()
|
|
this.preloadAround()
|
|
})
|
|
},
|
|
|
|
nextLb() {
|
|
this.showLb(this.lbIndex + 1)
|
|
},
|
|
|
|
prevLb() {
|
|
this.showLb(this.lbIndex - 1)
|
|
},
|
|
|
|
normalizeIndex(index: number) {
|
|
if (!this.imageCount) return 0
|
|
return ((index % this.imageCount) + this.imageCount) % this.imageCount
|
|
},
|
|
|
|
updateLightboxImage() {
|
|
const image = document.getElementById("lb-image") as HTMLImageElement | null
|
|
|
|
if (!image) return
|
|
|
|
const url = this.getImageUrl(this.lbIndex)
|
|
const name = this.getImageName(this.lbIndex)
|
|
|
|
image.src = url
|
|
image.alt = name
|
|
this.currentImageName = name
|
|
},
|
|
|
|
toggleZoom() {
|
|
this.lbZoomed = !this.lbZoomed
|
|
|
|
const main = document.getElementById("lb-main")
|
|
|
|
if (main) {
|
|
main.scrollTop = 0
|
|
}
|
|
},
|
|
|
|
scrollThumbIntoView() {
|
|
const thumbs = document.getElementById("lb-thumbs") as HTMLElement | null
|
|
|
|
if (!thumbs) return
|
|
|
|
const active = thumbs.querySelector<HTMLElement>(
|
|
`[data-lb-index="${this.lbIndex}"]`
|
|
)
|
|
|
|
if (!active) return
|
|
|
|
const target =
|
|
active.offsetTop -
|
|
(thumbs.clientHeight - active.clientHeight) / 2
|
|
|
|
thumbs.scrollTo({
|
|
top: Math.max(0, target),
|
|
behavior: "smooth",
|
|
})
|
|
},
|
|
|
|
preloadAround() {
|
|
const indexes = [
|
|
this.lbIndex,
|
|
this.normalizeIndex(this.lbIndex - 1),
|
|
this.normalizeIndex(this.lbIndex + 1),
|
|
]
|
|
|
|
indexes.forEach((index: number) => {
|
|
const url = this.getImageUrl(index)
|
|
|
|
if (!url) return
|
|
|
|
const image = new Image()
|
|
image.decoding = "async"
|
|
image.src = url
|
|
})
|
|
},
|
|
|
|
// TODO 这是干啥的
|
|
initThumbLazyLoading() {
|
|
const thumbs = document.querySelectorAll<HTMLElement>(
|
|
"#lb-thumbs [data-thumb-url]"
|
|
)
|
|
|
|
if (!thumbs.length) return
|
|
|
|
if (!("IntersectionObserver" in window)) {
|
|
thumbs.forEach((thumb) => {
|
|
thumb.style.backgroundImage =
|
|
`url("${thumb.dataset.thumbUrl}")`
|
|
})
|
|
return
|
|
}
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries, obs) => {
|
|
entries.forEach((entry) => {
|
|
if (!entry.isIntersecting) return
|
|
|
|
const element = entry.target as HTMLElement
|
|
const url = element.dataset.thumbUrl
|
|
|
|
if (url) {
|
|
element.style.backgroundImage = `url("${url}")`
|
|
}
|
|
|
|
obs.unobserve(element)
|
|
})
|
|
},
|
|
{
|
|
root: document.getElementById("lb-thumbs"),
|
|
rootMargin: "300px",
|
|
}
|
|
)
|
|
|
|
thumbs.forEach((thumb) => observer.observe(thumb))
|
|
},
|
|
}))
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style> |