116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { useWindowSize, useWindowScroll } from '@vueuse/core'
|
|
|
|
interface DeviceMode {
|
|
mode: 'desktop' | 'mobile'
|
|
browser: 'chrome' | 'crawler' | 'edge' | 'firefox' | 'safari' | null
|
|
isDesktop: boolean
|
|
isMobile: boolean
|
|
isTablet: boolean
|
|
isIos: boolean
|
|
isAndroid: boolean
|
|
isDeviceReady: boolean
|
|
}
|
|
|
|
export const useCommonStore = defineStore('commonStore', () => {
|
|
const stoveGnbHeight = 48
|
|
|
|
const useDeviceData = useDevice()
|
|
const { width: windowWidth, height: windowHeight } = useWindowSize()
|
|
const { x: windowX, y: windowY } = useWindowScroll({ behavior: 'smooth' })
|
|
|
|
const device = ref<DeviceMode>({
|
|
mode: useDeviceData.isMobile || useDeviceData.isTablet ? 'mobile' : 'desktop',
|
|
browser: useDeviceData.isChrome
|
|
? 'chrome'
|
|
: useDeviceData.isCrawler
|
|
? 'crawler'
|
|
: useDeviceData.isEdge
|
|
? 'edge'
|
|
: useDeviceData.isFirefox
|
|
? 'firefox'
|
|
: useDeviceData.isSafari
|
|
? 'safari'
|
|
: null,
|
|
isDesktop: useDeviceData.isDesktop,
|
|
isMobile: useDeviceData.isMobile,
|
|
isTablet: useDeviceData.isTablet,
|
|
isIos: useDeviceData.isIos,
|
|
isAndroid: useDeviceData.isAndroid,
|
|
isDeviceReady: false
|
|
})
|
|
|
|
const isPassedStoveGnb = ref(false)
|
|
const scrollFixedXValue = ref('0px')
|
|
const footerRef = ref<HTMLElement | null>(null)
|
|
const isLoading = ref<boolean>(true)
|
|
const isScrollLock = ref<boolean>(false)
|
|
|
|
const updateDeviceMode = () => {
|
|
device.value.mode = useDeviceData.isMobile || useDeviceData.isTablet ? 'mobile' : 'desktop'
|
|
device.value.browser = useDeviceData.isChrome
|
|
? 'chrome'
|
|
: useDeviceData.isCrawler
|
|
? 'crawler'
|
|
: useDeviceData.isEdge
|
|
? 'edge'
|
|
: useDeviceData.isFirefox
|
|
? 'firefox'
|
|
: useDeviceData.isSafari
|
|
? 'safari'
|
|
: null
|
|
device.value.isDesktop = useDeviceData.isDesktop
|
|
device.value.isMobile = useDeviceData.isMobile
|
|
device.value.isTablet = useDeviceData.isTablet
|
|
device.value.isIos = useDeviceData.isIos
|
|
device.value.isAndroid = useDeviceData.isAndroid
|
|
device.value.isDeviceReady = true
|
|
}
|
|
|
|
const updateIsPassedStoveGnb = () => {
|
|
isPassedStoveGnb.value = windowY.value >= stoveGnbHeight
|
|
|
|
if (isPassedStoveGnb.value) {
|
|
scrollFixedXValue.value = `-${windowX.value}px`
|
|
} else {
|
|
scrollFixedXValue.value = '0px'
|
|
}
|
|
}
|
|
|
|
const isLoadingComplete = () => {
|
|
isLoading.value = false
|
|
}
|
|
|
|
const scrollLock = () => {
|
|
isScrollLock.value = !isScrollLock.value
|
|
}
|
|
|
|
const addScrollLock = () => {
|
|
isScrollLock.value = true
|
|
}
|
|
|
|
const removeScrollLock = () => {
|
|
isScrollLock.value = false
|
|
}
|
|
|
|
return {
|
|
device,
|
|
windowWidth,
|
|
windowHeight,
|
|
windowX,
|
|
windowY,
|
|
isPassedStoveGnb,
|
|
scrollFixedXValue,
|
|
footerRef,
|
|
isLoading,
|
|
isScrollLock,
|
|
|
|
updateDeviceMode,
|
|
updateIsPassedStoveGnb,
|
|
isLoadingComplete,
|
|
scrollLock,
|
|
addScrollLock,
|
|
removeScrollLock
|
|
}
|
|
})
|