eric/bridget
1
0
Fork 0
mirror of https://github.com/Sped0n/bridget.git synced 2026-04-21 05:29:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

refactor(customCursor.ts): rename addActiveCallback to active.addWatcher for better readability and consistency

Browse Source 
refactor(stageNav.ts): rename getIsAnimating to isAnimating.get for better readability and consistency
refactor(stageNav.ts): rename addActiveCallback to active.addWatcher for better readability and consistency
feat(stageNav.ts): add check for isOpen.get() and isAnimating.get() before handling key events to prevent unwanted actions
This commit is contained in:
Sped0n
2023-10-29 02:42:04 +08:00
parent 817b543ee0
commit e93bca55d5
2 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/ts/customCursor.ts
View File

@@ -1,4 +1,4 @@
import { addActiveCallback } from './stage' import { active } from './stage'
let cursor: HTMLDivElement let cursor: HTMLDivElement
@@ -24,8 +24,8 @@ export function initCustomCursor(): void {
// bind mousemove event to window // bind mousemove event to window
window.addEventListener('mousemove', onMouse) window.addEventListener('mousemove', onMouse)
// add active callback // add active callback
addActiveCallback((active) => { active.addWatcher(() => {
if (active) { if (active.get()) {
cursor.classList.add('active') cursor.classList.add('active')
} else { } else {
cursor.classList.remove('active') cursor.classList.remove('active')

18
assets/ts/stageNav.ts
View File

@@ -1,13 +1,7 @@
import { setCustomCursor } from './customCursor' import { setCustomCursor } from './customCursor'
import { decIndex, incIndex, getState } from './state' import { decIndex, incIndex, getState } from './state'
import { increment, decrement } from './utils' import { increment, decrement } from './utils'
import { import { cordHist, isOpen, isAnimating, active, minimizeImage } from './stage'
cordHist,
isOpen,
getIsAnimating,
minimizeImage,
addActiveCallback
} from './stage'
type NavItem = (typeof navItems)[number] type NavItem = (typeof navItems)[number]
const navItems = ['prev', 'close', 'next'] as const const navItems = ['prev', 'close', 'next'] as const
@@ -29,7 +23,7 @@ function handleClick(type: NavItem) {
} }
function handleKey(e: KeyboardEvent) { function handleKey(e: KeyboardEvent) {
if (isOpen.get() || getIsAnimating()) return if (isOpen.get() || isAnimating.get()) return
switch (e.key) { switch (e.key) {
case 'ArrowLeft': case 'ArrowLeft':
prevImage() prevImage()
@@ -57,8 +51,8 @@ export function initStageNav() {
overlay.addEventListener('focus', () => setCustomCursor(navItem)) overlay.addEventListener('focus', () => setCustomCursor(navItem))
navOverlay.append(overlay) navOverlay.append(overlay)
} }
addActiveCallback((active) => { active.addWatcher(() => {
if (active) { if (active.get()) {
navOverlay.classList.add('active') navOverlay.classList.add('active')
} else { } else {
navOverlay.classList.remove('active') navOverlay.classList.remove('active')
@@ -71,7 +65,7 @@ export function initStageNav() {
// hepler // hepler
function nextImage() { function nextImage() {
if (getIsAnimating()) return if (isAnimating.get()) return
cordHist.set( cordHist.set(
cordHist.get().map((item) => { cordHist.get().map((item) => {
return { ...item, i: increment(item.i, getState().length) } return { ...item, i: increment(item.i, getState().length) }
@@ -82,7 +76,7 @@ function nextImage() {
} }
function prevImage() { function prevImage() {
if (getIsAnimating()) return if (isAnimating.get()) return
cordHist.set( cordHist.set(
cordHist.get().map((item) => { cordHist.get().map((item) => {
return { ...item, i: decrement(item.i, getState().length) } return { ...item, i: decrement(item.i, getState().length) }