zenn
5db41e9883
- 이동 중 site-navigating 클래스로 링크·버튼 pointer-events를 끄는 클라이언트 플러그인 추가 - 게시물 재클릭 시 상단 점프 문제 해결, 안전 타임아웃으로 잠금 잔존 방지 - v1.10.34 Co-authored-by: Cursor <cursoragent@cursor.com>
41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
/**
|
|
* 페이지 이동 중 링크·버튼 클릭을 잠가 중복 클릭(연타)을 막는다.
|
|
*
|
|
* 이동 시작 시 `html.site-navigating` 클래스를 붙여 상호작용 요소의 pointer-events를 끄고,
|
|
* 이동 종료·실패 시 해제한다. 예외로 클래스가 남는 것을 막기 위해 안전 타임아웃을 둔다.
|
|
*/
|
|
const NAVIGATION_LOCK_CLASS = 'site-navigating'
|
|
const NAVIGATION_LOCK_TIMEOUT_MS = 10000
|
|
|
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
const root = document.documentElement
|
|
|
|
/** @type {ReturnType<typeof setTimeout> | null} */
|
|
let releaseTimer = null
|
|
|
|
/**
|
|
* 이동 잠금을 건다(안전 타임아웃 포함).
|
|
* @returns {void}
|
|
*/
|
|
const lockNavigation = () => {
|
|
root.classList.add(NAVIGATION_LOCK_CLASS)
|
|
clearTimeout(releaseTimer)
|
|
releaseTimer = setTimeout(() => {
|
|
root.classList.remove(NAVIGATION_LOCK_CLASS)
|
|
}, NAVIGATION_LOCK_TIMEOUT_MS)
|
|
}
|
|
|
|
/**
|
|
* 이동 잠금을 해제한다.
|
|
* @returns {void}
|
|
*/
|
|
const unlockNavigation = () => {
|
|
clearTimeout(releaseTimer)
|
|
releaseTimer = null
|
|
root.classList.remove(NAVIGATION_LOCK_CLASS)
|
|
}
|
|
|
|
nuxtApp.hook('page:loading:start', lockNavigation)
|
|
nuxtApp.hook('page:loading:end', unlockNavigation)
|
|
})
|