const showModalBtn =
document.querySelector(
".show-modal"
);
const bottomSheet =
document.querySelector(
".bottom-sheet"
);
const dragHandle =
document.querySelector(
".drag-handle"
);
const closeBtn =
document.querySelector(
".close-btn"
);
let isDragging =
false
;
let startY, startBottom;
showModalBtn.addEventListener(
"click"
, () => {
bottomSheet.style.display =
"block"
;
document.body.style.overflow =
"hidden"
;
bottomSheet.style.bottom =
"0"
;
});
dragHandle
.addEventListener(
"mousedown"
, startDragging);
closeBtn
.addEventListener(
"click"
, hideBottomSheet);
function
startDragging(e) {
e.preventDefault();
isDragging =
true
;
startY = e.clientY;
startBottom =
parseInt(getComputedStyle(bottomSheet).bottom);
document.addEventListener(
"mousemove"
, drag);
document.addEventListener(
"mouseup"
, stopDragging);
}
function
drag(e) {
if
(!isDragging)
return
;
const deltaY =
e.clientY - startY;
bottomSheet.style.bottom =
Math.max(startBottom - deltaY, 0) +
"px"
;
}
function
stopDragging() {
isDragging =
false
;
document
.removeEventListener(
"mousemove"
, drag);
document
.removeEventListener(
"mouseup"
, stopDragging);
}
function
hideBottomSheet() {
bottomSheet.style.display =
"none"
;
document.body.style.overflow =
"auto"
;
bottomSheet.style.bottom =
"-100%"
;
}