101 lines
2.2 KiB
JavaScript
101 lines
2.2 KiB
JavaScript
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
|
|
|
|
export function useScreenSize() {
|
|
const size = reactive({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
})
|
|
|
|
const onResize = () => {
|
|
size.width = window.innerWidth
|
|
size.height = window.innerHeight
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', onResize)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', onResize)
|
|
})
|
|
|
|
return size
|
|
}
|
|
// write a composable for detecting swipe gestures in mobile devices
|
|
export function useSwipe() {
|
|
const swipe = reactive({
|
|
initialX: null,
|
|
initialY: null,
|
|
currentX: null,
|
|
currentY: null,
|
|
diffX: null,
|
|
diffY: null,
|
|
absDiffX: null,
|
|
absDiffY: null,
|
|
direction: null,
|
|
})
|
|
|
|
const onTouchStart = (e) => {
|
|
swipe.initialX = e.touches[0].clientX
|
|
swipe.initialY = e.touches[0].clientY
|
|
swipe.direction = null
|
|
swipe.diffX = null
|
|
swipe.diffY = null
|
|
swipe.absDiffX = null
|
|
swipe.absDiffY = null
|
|
}
|
|
|
|
const onTouchMove = (e) => {
|
|
swipe.currentX = e.touches[0].clientX
|
|
swipe.currentY = e.touches[0].clientY
|
|
|
|
swipe.diffX = swipe.initialX - swipe.currentX
|
|
swipe.diffY = swipe.initialY - swipe.currentY
|
|
|
|
swipe.absDiffX = Math.abs(swipe.diffX)
|
|
swipe.absDiffY = Math.abs(swipe.diffY)
|
|
}
|
|
|
|
const onTouchEnd = (e) => {
|
|
let { diffX, diffY, absDiffX, absDiffY } = swipe
|
|
if (absDiffX > absDiffY) {
|
|
if (diffX > 0) {
|
|
swipe.direction = 'left'
|
|
} else {
|
|
swipe.direction = 'right'
|
|
}
|
|
} else {
|
|
if (diffY > 0) {
|
|
swipe.direction = 'up'
|
|
} else {
|
|
swipe.direction = 'down'
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('touchstart', onTouchStart)
|
|
window.addEventListener('touchend', onTouchEnd)
|
|
window.addEventListener('touchmove', onTouchMove)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('touchstart', onTouchStart)
|
|
window.removeEventListener('touchend', onTouchEnd)
|
|
window.removeEventListener('touchmove', onTouchMove)
|
|
})
|
|
|
|
return swipe
|
|
}
|
|
|
|
export function useLocalStorage(key, initialValue) {
|
|
let value = ref(null)
|
|
let storedValue = localStorage.getItem(key)
|
|
value.value = storedValue ? JSON.parse(storedValue) : initialValue
|
|
|
|
watch(value, (newValue) => {
|
|
localStorage.setItem(key, JSON.stringify(newValue))
|
|
})
|
|
return value
|
|
}
|