gitmedia/thats-me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

30-04-2026

Browse source
This commit is contained in:
Kevin Adametz 2026-04-30 14:54:39 +02:00
parent 761b1156c1
commit d054732bf5
35 changed files with 2796 additions and 505 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/composables/usePanelDrag.js
View file

@ -3,15 +3,19 @@ import { ref, onBeforeUnmount } from 'vue'
/**
* Composable for draggable bottom-sheet panels with snap points.
*
* Snap stops (in dvh): 100, 75, 50
* Default snap stops (in dvh): 100, 75, 50
* Close threshold: below 25dvh
*
* @param {Function} onClose - called when panel is dragged below threshold
* @param {Object} options - drag/snap behavior overrides
* @returns {{ panelHeight, handleListeners, resetHeight }}
*/
export function usePanelDrag(onClose) {
const SNAP_POINTS = [100, 75, 50, 25] // dvh values
const CLOSE_THRESHOLD = 15 // below this → close
export function usePanelDrag(onClose, options = {}) {
const SNAP_POINTS = options.snapPoints ?? [100, 75, 50, 25] // dvh values
const CLOSE_THRESHOLD = options.closeThreshold ?? 15 // below this → close
const INITIAL_DVH = options.initialDvh ?? 75
const MIN_DVH = options.minDvh ?? 10
const MAX_DVH = options.maxDvh ?? 100
// Current panel height in dvh (null = use CSS default)
const panelHeight = ref(null)
@ -52,7 +56,7 @@ export function usePanelDrag(onClose) {
startY = clientY
// Current height: if panelHeight is set use it, else measure from CSS
const currentDvh = panelHeight.value ?? 75
const currentDvh = panelHeight.value ?? INITIAL_DVH
startHeight = currentDvh
document.addEventListener('pointermove', onPointerMove, { passive: false })
@ -80,7 +84,7 @@ export function usePanelDrag(onClose) {
function handleMove(clientY) {
const deltaY = clientY - startY
const deltaDvh = pxToDvh(deltaY)
const newHeight = Math.max(10, Math.min(100, startHeight - deltaDvh))
const newHeight = Math.max(MIN_DVH, Math.min(MAX_DVH, startHeight - deltaDvh))
panelHeight.value = newHeight
}
@ -99,7 +103,7 @@ export function usePanelDrag(onClose) {
cleanup()
const currentHeight = panelHeight.value ?? 75
const currentHeight = panelHeight.value ?? INITIAL_DVH
if (currentHeight < CLOSE_THRESHOLD) {
panelHeight.value = null
onClose()