diff options
| -rw-r--r-- | src/lib/home/components/PopupBannerPromotion.jsx | 53 |
1 files changed, 44 insertions, 9 deletions
diff --git a/src/lib/home/components/PopupBannerPromotion.jsx b/src/lib/home/components/PopupBannerPromotion.jsx index eff2ba59..1392a246 100644 --- a/src/lib/home/components/PopupBannerPromotion.jsx +++ b/src/lib/home/components/PopupBannerPromotion.jsx @@ -47,6 +47,27 @@ const PagePopupInformation = () => { } }; + useEffect(() => { + const handleResizeOrZoom = () => { + if (!popupRef.current) return; + + const popupWidth = popupRef.current.offsetWidth || 85; + const popupHeight = popupRef.current.offsetHeight || 85; + + setPosition({ + x: 20, + y: window.innerHeight - popupHeight - 20, + }); + }; + + window.addEventListener('resize', handleResizeOrZoom); + + return () => { + window.removeEventListener('resize', handleResizeOrZoom); + }; + }, []); + + const updateContainerLeft = () => { const container = document.querySelector('.container'); if (container) { @@ -85,8 +106,11 @@ const PagePopupInformation = () => { const popupWidth = popupRef.current?.offsetWidth || 85; const popupHeight = popupRef.current?.offsetHeight || 85; const maxX = window.innerWidth - popupWidth - 20; - const maxY = window.innerHeight - popupHeight - 20; - const minX = isDesktop ? containerLeft - popupWidth - 20 : 0; + + const bottomPadding = 80; // batas bawah minimal + const maxY = window.innerHeight - popupHeight - bottomPadding; + + const minX = 0; let newX = clientX - dragStartPos.current.x; let newY = clientY - dragStartPos.current.y; @@ -99,19 +123,30 @@ const PagePopupInformation = () => { const endDrag = () => { if (isDragging.current) { - const popupWidth = popupRef.current?.offsetWidth || 85; - const screenMiddle = window.innerWidth / 2; - setIsSnapping(true); - setPosition(pos => ({ - x: pos.x + popupWidth / 2 < screenMiddle ? 20 : window.innerWidth - popupWidth - 20, - y: pos.y, - })); + + if (isDesktop) { + const popupWidth = popupRef.current?.offsetWidth || 85; + setPosition({ + x: containerLeft - popupWidth - 20, + y: window.innerHeight - 130, + }); + } else { + const popupWidth = popupRef.current?.offsetWidth || 85; + const screenMiddle = window.innerWidth / 2; + + setPosition(pos => ({ + x: pos.x + popupWidth / 2 < screenMiddle ? 20 : window.innerWidth - popupWidth - 20, + y: pos.y, + })); + } } isDragging.current = false; isTouching.current = false; }; + + const handleMouseDown = e => { e.preventDefault(); startDrag(e.clientX, e.clientY); |