Files
bridget/assets/ts/desktop/customCursor.ts
Sped0n 047ec5c630 feat(container.scss): add container styles for fixed position and scrolling behavior
feat(container.ts): create container module to handle scrollable behavior and add/remove disableScroll class

fix(customCursor.ts): update append target for cursor element to use container instead of main

fix(stage.ts): update append target for stage element to use container instead of main

fix(stageNav.ts): update append target for navOverlay element to use container instead of main

feat(main.ts): initialize container module and conditionally initialize stage and stageNav modules based on device type

fix(nav.ts): update references to state module functions to use state.get() instead of getState()
2023-10-29 22:12:06 +08:00

48 lines
1012 B
TypeScript

import { active } from './stage'
import { container } from '../container'
/**
* variables
*/
const cursor = document.createElement('div')
const cursorInner = document.createElement('div')
/**
* main functions
*/
function onMouse(e: MouseEvent) {
const x = e.clientX
const y = e.clientY
cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`
}
export function setCustomCursor(text: string): void {
cursorInner.innerText = text
}
/**
* init
*/
export function initCustomCursor(): void {
// cursor class name
cursor.className = 'cursor'
// cursor inner class name
cursorInner.className = 'cursorInner'
// append cursor inner to cursor
cursor.append(cursorInner)
// append cursor to main
container.append(cursor)
// bind mousemove event to window
window.addEventListener('mousemove', onMouse)
// add active callback
active.addWatcher(() => {
if (active.get()) {
cursor.classList.add('active')
} else {
cursor.classList.remove('active')
}
})
}