mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-16 15:31:21 +08:00
Refactor Calendar component
This commit is contained in:
KazooTTT
@ -72,183 +72,195 @@ const weekDays = ['一', '二', '三', '四', '五', '六', '日']
|
||||
day?: 'numeric' | '2-digit'
|
||||
}
|
||||
|
||||
const allPosts = JSON.parse(document.getElementById('posts-data')?.textContent || '[]') as Post[]
|
||||
const currentMonthDisplay = document.getElementById('currentMonthDisplay')
|
||||
const prevMonthBtn = document.getElementById('prevMonth')
|
||||
const nextMonthBtn = document.getElementById('nextMonth')
|
||||
const calendarGrid = document.getElementById('calendarGrid')
|
||||
function initCalendar() {
|
||||
const allPosts = JSON.parse(
|
||||
document.getElementById('posts-data')?.textContent || '[]'
|
||||
) as Post[]
|
||||
const currentMonthDisplay = document.getElementById('currentMonthDisplay')
|
||||
const prevMonthBtn = document.getElementById('prevMonth')
|
||||
const nextMonthBtn = document.getElementById('nextMonth')
|
||||
const calendarGrid = document.getElementById('calendarGrid')
|
||||
|
||||
// 使用传入的 currentDate 作为初始日期
|
||||
let currentDate = new Date(
|
||||
document.querySelector('[data-current-date]')?.getAttribute('data-current-date') || new Date()
|
||||
)
|
||||
// 使用传入的 currentDate 作为初始日期
|
||||
let currentDate = new Date(
|
||||
document.querySelector('[data-current-date]')?.getAttribute('data-current-date') || new Date()
|
||||
)
|
||||
|
||||
// 获取所有有日记的月份
|
||||
const months = allPosts.map((post) => {
|
||||
const date = new Date(post.data.date)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
|
||||
})
|
||||
const uniqueMonths = Array.from(new Set(months)).sort()
|
||||
// 获取所有有日记的月份
|
||||
const months = allPosts.map((post) => {
|
||||
const date = new Date(post.data.date)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
|
||||
})
|
||||
const uniqueMonths = Array.from(new Set(months)).sort()
|
||||
|
||||
function getFormattedDate(date: Date, options: DateTimeFormatOptions): string {
|
||||
return new Intl.DateTimeFormat('zh-CN', options).format(date)
|
||||
}
|
||||
|
||||
function getCurrentMonthStr(): string {
|
||||
return `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function canNavigateToMonth(direction: 'prev' | 'next'): boolean {
|
||||
const currentMonthStr = getCurrentMonthStr()
|
||||
if (direction === 'prev') {
|
||||
return uniqueMonths.some((m) => m < currentMonthStr)
|
||||
} else {
|
||||
const now = new Date()
|
||||
const currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth())
|
||||
const thisMonth = new Date(now.getFullYear(), now.getMonth())
|
||||
return currentMonth < thisMonth
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavigationButtons() {
|
||||
if (prevMonthBtn && nextMonthBtn) {
|
||||
const canGoPrev = canNavigateToMonth('prev')
|
||||
const canGoNext = canNavigateToMonth('next')
|
||||
|
||||
prevMonthBtn.classList.toggle('cursor-not-allowed', !canGoPrev)
|
||||
prevMonthBtn.classList.toggle('opacity-50', !canGoPrev)
|
||||
;(prevMonthBtn as HTMLButtonElement).disabled = !canGoPrev
|
||||
|
||||
nextMonthBtn.classList.toggle('cursor-not-allowed', !canGoNext)
|
||||
nextMonthBtn.classList.toggle('opacity-50', !canGoNext)
|
||||
;(nextMonthBtn as HTMLButtonElement).disabled = !canGoNext
|
||||
}
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
// 获取当月的第一天和最后一天
|
||||
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
|
||||
const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
|
||||
|
||||
// 获取当月第一天是星期几（0是周日，1是周一，以此类推）
|
||||
const firstDayWeekday = firstDayOfMonth.getDay()
|
||||
const adjustedFirstDayWeekday = firstDayWeekday === 0 ? 7 : firstDayWeekday
|
||||
|
||||
// 计算日历表格需要显示的天数
|
||||
const daysInPrevMonth = adjustedFirstDayWeekday - 1
|
||||
const daysInCurrentMonth = lastDayOfMonth.getDate()
|
||||
const totalDays = Math.ceil((daysInPrevMonth + daysInCurrentMonth) / 7) * 7
|
||||
|
||||
// 获取上个月的最后几天
|
||||
const lastDayOfPrevMonth = new Date(
|
||||
currentDate.getFullYear(),
|
||||
currentDate.getMonth(),
|
||||
0
|
||||
).getDate()
|
||||
|
||||
// 更新月份显示
|
||||
if (currentMonthDisplay) {
|
||||
currentMonthDisplay.textContent = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`
|
||||
function getFormattedDate(date: Date, options: DateTimeFormatOptions): string {
|
||||
return new Intl.DateTimeFormat('zh-CN', options).format(date)
|
||||
}
|
||||
|
||||
// 更新导航按钮状态
|
||||
updateNavigationButtons()
|
||||
function getCurrentMonthStr(): string {
|
||||
return `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// 清除现有的日历内容（保留星期标题）
|
||||
const existingDays = calendarGrid?.querySelectorAll('.calendar-day')
|
||||
existingDays?.forEach((day) => day.remove())
|
||||
function canNavigateToMonth(direction: 'prev' | 'next'): boolean {
|
||||
const currentMonthStr = getCurrentMonthStr()
|
||||
if (direction === 'prev') {
|
||||
return uniqueMonths.some((m) => m < currentMonthStr)
|
||||
} else {
|
||||
const now = new Date()
|
||||
const currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth())
|
||||
const thisMonth = new Date(now.getFullYear(), now.getMonth())
|
||||
return currentMonth < thisMonth
|
||||
}
|
||||
}
|
||||
|
||||
// 生成日历内容
|
||||
for (let i = 0; i < totalDays; i++) {
|
||||
const dayNumber = i - daysInPrevMonth + 1
|
||||
const isCurrentMonth = dayNumber > 0 && dayNumber <= daysInCurrentMonth
|
||||
const displayDay = isCurrentMonth
|
||||
? dayNumber
|
||||
: dayNumber <= 0
|
||||
? lastDayOfPrevMonth + dayNumber
|
||||
: dayNumber - daysInCurrentMonth
|
||||
function updateNavigationButtons() {
|
||||
if (prevMonthBtn && nextMonthBtn) {
|
||||
const canGoPrev = canNavigateToMonth('prev')
|
||||
const canGoNext = canNavigateToMonth('next')
|
||||
|
||||
const date = new Date(
|
||||
prevMonthBtn.classList.toggle('cursor-not-allowed', !canGoPrev)
|
||||
prevMonthBtn.classList.toggle('opacity-50', !canGoPrev)
|
||||
;(prevMonthBtn as HTMLButtonElement).disabled = !canGoPrev
|
||||
|
||||
nextMonthBtn.classList.toggle('cursor-not-allowed', !canGoNext)
|
||||
nextMonthBtn.classList.toggle('opacity-50', !canGoNext)
|
||||
;(nextMonthBtn as HTMLButtonElement).disabled = !canGoNext
|
||||
}
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
// 获取当月的第一天和最后一天
|
||||
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
|
||||
const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
|
||||
|
||||
// 获取当月第一天是星期几（0是周日，1是周一，以此类推）
|
||||
const firstDayWeekday = firstDayOfMonth.getDay()
|
||||
const adjustedFirstDayWeekday = firstDayWeekday === 0 ? 7 : firstDayWeekday
|
||||
|
||||
// 计算日历表格需要显示的天数
|
||||
const daysInPrevMonth = adjustedFirstDayWeekday - 1
|
||||
const daysInCurrentMonth = lastDayOfMonth.getDate()
|
||||
const totalDays = Math.ceil((daysInPrevMonth + daysInCurrentMonth) / 7) * 7
|
||||
|
||||
// 获取上个月的最后几天
|
||||
const lastDayOfPrevMonth = new Date(
|
||||
currentDate.getFullYear(),
|
||||
isCurrentMonth
|
||||
? currentDate.getMonth()
|
||||
: dayNumber <= 0
|
||||
? currentDate.getMonth() - 1
|
||||
: currentDate.getMonth() + 1,
|
||||
displayDay
|
||||
)
|
||||
currentDate.getMonth(),
|
||||
0
|
||||
).getDate()
|
||||
|
||||
const formattedDate = getFormattedDate(date, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})
|
||||
|
||||
// 查找当天的文章
|
||||
const postsForDay = allPosts.filter((post) => {
|
||||
const postDate = new Date(post.data.date)
|
||||
return (
|
||||
getFormattedDate(postDate, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}) === formattedDate
|
||||
)
|
||||
})
|
||||
|
||||
const hasPost = postsForDay.length > 0
|
||||
|
||||
// 创建日历单元格
|
||||
const dayElement = document.createElement('div')
|
||||
dayElement.className = `calendar-day min-h-[100px] rounded-lg border p-2 ${
|
||||
isCurrentMonth ? 'bg-primary-foreground' : 'bg-muted/50'
|
||||
} ${hasPost ? 'border-green-400/50' : 'border-border'}`
|
||||
|
||||
// 添加日期显示
|
||||
const dateDisplay = document.createElement('div')
|
||||
dateDisplay.className = 'mb-1 text-right'
|
||||
const dateSpan = document.createElement('span')
|
||||
dateSpan.className = `inline-block h-7 w-7 rounded-full text-center leading-7 ${
|
||||
!isCurrentMonth ? 'text-muted-foreground' : ''
|
||||
} ${hasPost ? 'bg-green-400/20' : ''}`
|
||||
dateSpan.textContent = displayDay.toString()
|
||||
dateDisplay.appendChild(dateSpan)
|
||||
dayElement.appendChild(dateDisplay)
|
||||
|
||||
// 如果有文章，添加文章链接
|
||||
if (hasPost) {
|
||||
const postsContainer = document.createElement('div')
|
||||
postsContainer.className = 'space-y-1 text-xs'
|
||||
postsForDay.forEach((post) => {
|
||||
const link = document.createElement('a')
|
||||
link.href = `/diary/${post.slug}/`
|
||||
link.className = 'block line-clamp-2 transition-colors hover:text-green-400'
|
||||
link.title = post.data.title
|
||||
link.textContent = post.data.title
|
||||
postsContainer.appendChild(link)
|
||||
})
|
||||
dayElement.appendChild(postsContainer)
|
||||
// 更新月份显示
|
||||
if (currentMonthDisplay) {
|
||||
currentMonthDisplay.textContent = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`
|
||||
}
|
||||
|
||||
calendarGrid?.appendChild(dayElement)
|
||||
// 更新导航按钮状态
|
||||
updateNavigationButtons()
|
||||
|
||||
// 清除现有的日历内容（保留星期标题）
|
||||
const existingDays = calendarGrid?.querySelectorAll('.calendar-day')
|
||||
existingDays?.forEach((day) => day.remove())
|
||||
|
||||
// 生成日历内容
|
||||
for (let i = 0; i < totalDays; i++) {
|
||||
const dayNumber = i - daysInPrevMonth + 1
|
||||
const isCurrentMonth = dayNumber > 0 && dayNumber <= daysInCurrentMonth
|
||||
const displayDay = isCurrentMonth
|
||||
? dayNumber
|
||||
: dayNumber <= 0
|
||||
? lastDayOfPrevMonth + dayNumber
|
||||
: dayNumber - daysInCurrentMonth
|
||||
|
||||
const date = new Date(
|
||||
currentDate.getFullYear(),
|
||||
isCurrentMonth
|
||||
? currentDate.getMonth()
|
||||
: dayNumber <= 0
|
||||
? currentDate.getMonth() - 1
|
||||
: currentDate.getMonth() + 1,
|
||||
displayDay
|
||||
)
|
||||
|
||||
const formattedDate = getFormattedDate(date, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})
|
||||
|
||||
// 查找当天的文章
|
||||
const postsForDay = allPosts.filter((post) => {
|
||||
const postDate = new Date(post.data.date)
|
||||
return (
|
||||
getFormattedDate(postDate, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}) === formattedDate
|
||||
)
|
||||
})
|
||||
|
||||
const hasPost = postsForDay.length > 0
|
||||
|
||||
// 创建日历单元格
|
||||
const dayElement = document.createElement('div')
|
||||
dayElement.className = `calendar-day min-h-[100px] rounded-lg border p-2 ${
|
||||
isCurrentMonth ? 'bg-primary-foreground' : 'bg-muted/50'
|
||||
} ${hasPost ? 'border-green-400/50' : 'border-border'}`
|
||||
|
||||
// 添加日期显示
|
||||
const dateDisplay = document.createElement('div')
|
||||
dateDisplay.className = 'mb-1 text-right'
|
||||
const dateSpan = document.createElement('span')
|
||||
dateSpan.className = `inline-block h-7 w-7 rounded-full text-center leading-7 ${
|
||||
!isCurrentMonth ? 'text-muted-foreground' : ''
|
||||
} ${hasPost ? 'bg-green-400/20' : ''}`
|
||||
dateSpan.textContent = displayDay.toString()
|
||||
dateDisplay.appendChild(dateSpan)
|
||||
dayElement.appendChild(dateDisplay)
|
||||
|
||||
// 如果有文章，添加文章链接
|
||||
if (hasPost) {
|
||||
const postsContainer = document.createElement('div')
|
||||
postsContainer.className = 'space-y-1 text-xs'
|
||||
postsForDay.forEach((post) => {
|
||||
const link = document.createElement('a')
|
||||
link.href = `/diary/${post.slug}/`
|
||||
link.className = 'block line-clamp-2 transition-colors hover:text-green-400'
|
||||
link.title = post.data.title
|
||||
link.textContent = post.data.title
|
||||
postsContainer.appendChild(link)
|
||||
})
|
||||
dayElement.appendChild(postsContainer)
|
||||
}
|
||||
|
||||
calendarGrid?.appendChild(dayElement)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始渲染
|
||||
renderCalendar()
|
||||
|
||||
// 添加事件监听器
|
||||
prevMonthBtn?.addEventListener('click', () => {
|
||||
if (canNavigateToMonth('prev')) {
|
||||
currentDate.setMonth(currentDate.getMonth() - 1)
|
||||
renderCalendar()
|
||||
}
|
||||
})
|
||||
|
||||
nextMonthBtn?.addEventListener('click', () => {
|
||||
if (canNavigateToMonth('next')) {
|
||||
currentDate.setMonth(currentDate.getMonth() + 1)
|
||||
renderCalendar()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始渲染
|
||||
renderCalendar()
|
||||
// 页面加载时初始化
|
||||
initCalendar()
|
||||
|
||||
// 添加事件监听器
|
||||
prevMonthBtn?.addEventListener('click', () => {
|
||||
if (canNavigateToMonth('prev')) {
|
||||
currentDate.setMonth(currentDate.getMonth() - 1)
|
||||
renderCalendar()
|
||||
}
|
||||
})
|
||||
|
||||
nextMonthBtn?.addEventListener('click', () => {
|
||||
if (canNavigateToMonth('next')) {
|
||||
currentDate.setMonth(currentDate.getMonth() + 1)
|
||||
renderCalendar()
|
||||
}
|
||||
// 在视图转换后重新初始化
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
initCalendar()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -5,23 +5,23 @@ import { Image } from 'astro:assets'
|
||||
|
||||
<header class='fixed left-0 right-0 top-0 z-50 bg-white shadow-sm dark:bg-gray-800'>
|
||||
<nav
|
||||
class='mx-auto flex w-full items-center justify-between px-4 py-3 sm:flex sm:w-3/5 sm:items-center lg:w-4/5'
|
||||
class='mx-auto flex w-full items-center justify-between px-4 py-3 lg:flex lg:w-3/5 lg:w-4/5 lg:items-center'
|
||||
aria-label='global'
|
||||
>
|
||||
<a class='flex items-center' href='/'>
|
||||
<Image
|
||||
src={kazootttAvatar}
|
||||
alt='profile photo'
|
||||
class='mr-2 h-8 w-auto rounded-full sm:hidden'
|
||||
class='mr-2 h-8 w-auto rounded-full lg:hidden'
|
||||
loading='eager'
|
||||
/>
|
||||
<div class='hidden flex-none text-xl font-semibold sm:block' aria-label='Brand'>声控烤箱</div>
|
||||
<div class='hidden flex-none text-xl font-semibold lg:block' aria-label='Brand'>声控烤箱</div>
|
||||
</a>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
id='mobileMenuButton'
|
||||
class='rounded-md p-2 hover:bg-border sm:hidden'
|
||||
class='rounded-md p-2 hover:bg-border lg:hidden'
|
||||
aria-label='Toggle mobile menu'
|
||||
>
|
||||
<svg
|
||||
@ -36,7 +36,7 @@ import { Image } from 'astro:assets'
|
||||
</button>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class='hidden flex-row items-center justify-center gap-x-7 sm:flex'>
|
||||
<div class='hidden flex-row items-center justify-center gap-x-7 lg:flex'>
|
||||
<div class='relative'>
|
||||
<a
|
||||
href='/blog'
|
||||
@ -145,7 +145,7 @@ import { Image } from 'astro:assets'
|
||||
<!-- Mobile Navigation -->
|
||||
<div
|
||||
id='mobileMenu'
|
||||
class='fixed inset-x-0 top-[72px] z-50 hidden max-h-[calc(100vh-72px)] overflow-y-auto rounded-b-lg bg-white shadow-lg dark:bg-gray-800 sm:hidden'
|
||||
class='fixed inset-x-0 top-[72px] z-50 hidden max-h-[calc(100vh-72px)] overflow-y-auto rounded-b-lg bg-white shadow-lg dark:bg-gray-800 lg:hidden'
|
||||
>
|
||||
<div class='space-y-2 px-4 py-2'>
|
||||
<a
|
||||
|
||||
@ -25,7 +25,7 @@ const {
|
||||
<body class='flex justify-center bg-background'>
|
||||
<ThemeProvider />
|
||||
<main
|
||||
class='flex min-h-screen w-screen max-w-[60rem] flex-col items-center px-6 pb-10 pt-24 font-satoshi text-[0.92rem] leading-relaxed sm:px-10 lg:px-10'
|
||||
class='flex min-h-screen w-screen max-w-[64rem] flex-col items-center px-6 pb-10 pt-24 font-satoshi text-[0.92rem] leading-relaxed sm:px-10 lg:px-10'
|
||||
>
|
||||
<Header />
|
||||
<slot />
|
||||
|
||||
@ -5,6 +5,7 @@ import BlogHero from '@/components/blog/Hero.astro'
|
||||
import TOC from '@/components/blog/TOC.astro'
|
||||
import Button from '@/components/Button.astro'
|
||||
import PageLayout from './BaseLayout.astro'
|
||||
import GiscusComment from '@/components/GiscusComment'
|
||||
|
||||
interface Props {
|
||||
post: CollectionEntry<'post'>
|
||||
@ -55,10 +56,11 @@ const { headings } = await post.render()
|
||||
</div>
|
||||
<div
|
||||
id='blog-gallery'
|
||||
class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none prose-img:shadow'
|
||||
class='prose-base prose-zinc mt-12 w-full text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none prose-img:shadow'
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<GiscusComment client:load />
|
||||
</article>
|
||||
</div>
|
||||
<button
|
||||
@ -80,38 +82,6 @@ const { headings } = await post.render()
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Image Preview Modal -->
|
||||
<div
|
||||
id='image-modal'
|
||||
class='pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 opacity-0 backdrop-blur-md transition-opacity duration-300 ease-in-out'
|
||||
>
|
||||
<div class='relative flex h-full w-full items-center justify-center p-4' id='modal-container'>
|
||||
<img
|
||||
id='modal-image'
|
||||
alt='modal-image'
|
||||
class='h-auto max-h-full w-auto max-w-full object-contain transition-transform duration-300 ease-in-out'
|
||||
/>
|
||||
<button
|
||||
id='close-modal'
|
||||
class='absolute right-4 top-4 text-white transition-colors duration-300 hover:text-gray-300'
|
||||
>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
class='h-6 w-6'
|
||||
fill='none'
|
||||
viewBox='0 0 24 24'
|
||||
stroke='currentColor'
|
||||
>
|
||||
<path
|
||||
stroke-linecap='round'
|
||||
stroke-linejoin='round'
|
||||
stroke-width='2'
|
||||
d='M6 18L18 6M6 6l12 12'></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
<script>
|
||||
@ -131,79 +101,6 @@ const { headings } = await post.render()
|
||||
|
||||
const observer = new IntersectionObserver(callback)
|
||||
observer.observe(targetHeader)
|
||||
|
||||
// Image preview functionality
|
||||
const imageModal = document.getElementById('image-modal')
|
||||
const modalImage = document.getElementById('modal-image') as HTMLImageElement
|
||||
const modalContainer = document.getElementById('modal-container')
|
||||
|
||||
function openModal() {
|
||||
if (imageModal) {
|
||||
imageModal.classList.remove('opacity-0', 'pointer-events-none')
|
||||
modalImage.style.transform = 'scale(1)'
|
||||
isZoomed = false
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
if (imageModal) {
|
||||
imageModal.classList.add('opacity-0', 'pointer-events-none')
|
||||
modalImage.src = ''
|
||||
modalImage.alt = ''
|
||||
modalImage.style.transform = 'scale(1)'
|
||||
isZoomed = false
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement
|
||||
if (target.tagName === 'IMG' && target.closest('.prose')) {
|
||||
const img = target as HTMLImageElement
|
||||
modalImage.src = img.src
|
||||
modalImage.alt = img.alt
|
||||
openModal()
|
||||
}
|
||||
})
|
||||
|
||||
// 处理点击事件
|
||||
if (imageModal) {
|
||||
imageModal.addEventListener('click', (e) => {
|
||||
const clickedElement = e.target as HTMLElement
|
||||
// 如果点击的是 modal 背景或 modal-container（不是图片和关闭按钮）
|
||||
if (clickedElement === imageModal || clickedElement === modalContainer) {
|
||||
closeModal()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭按钮事件
|
||||
const closeButton = document.getElementById('close-modal')
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener('click', closeModal)
|
||||
}
|
||||
|
||||
// ESC 键关闭
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && imageModal && !imageModal.classList.contains('opacity-0')) {
|
||||
closeModal()
|
||||
}
|
||||
})
|
||||
|
||||
// 图片缩放功能
|
||||
let isZoomed = false
|
||||
modalImage.addEventListener('click', (e) => {
|
||||
e.stopPropagation() // 阻止事件冒泡到 modal
|
||||
if (isZoomed) {
|
||||
modalImage.style.transform = 'scale(1)'
|
||||
modalImage.classList.remove('zoomed')
|
||||
} else {
|
||||
modalImage.style.transform = 'scale(1.5)'
|
||||
modalImage.classList.add('zoomed')
|
||||
}
|
||||
isZoomed = !isZoomed
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -81,7 +81,7 @@ const serializedPosts = allPosts.map((post) => ({
|
||||
type='application/json'
|
||||
set:html={JSON.stringify(serializedPosts)}
|
||||
/>
|
||||
<div data-current-date={currentDate.toISOString()}>
|
||||
<div id='calendar-container' data-current-date={currentDate.toISOString()}>
|
||||
<Calendar posts={allPosts} currentDate={currentDate} />
|
||||
</div>
|
||||
|
||||
@ -98,3 +98,28 @@ const serializedPosts = allPosts.map((post) => ({
|
||||
}
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
<script>
|
||||
function initializeCalendar() {
|
||||
const postsDataScript = document.getElementById('posts-data')
|
||||
if (!postsDataScript) return
|
||||
|
||||
// 触发一个自定义事件，通知日历组件重新初始化
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('calendar-init', {
|
||||
detail: {
|
||||
posts: JSON.parse(postsDataScript.textContent || '[]'),
|
||||
currentDate: document.getElementById('calendar-container')?.dataset.currentDate
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
// 页面首次加载时初始化
|
||||
initializeCalendar()
|
||||
|
||||
// 在视图转换后重新初始化
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
initializeCalendar()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user