|
11 | 11 | </div> |
12 | 12 |
|
13 | 13 | <script> |
| 14 | + |
14 | 15 | const popup = document.querySelector(".state-popup") as HTMLElement; |
15 | 16 | const popupStateName = document.querySelector(".state-popup__name") as HTMLElement; |
16 | 17 | const popupStateInfo = document.querySelector(".state-popup__info") as HTMLElement; |
|
44 | 45 | const clickX = event.pageX; |
45 | 46 | const clickY = event.pageY; |
46 | 47 |
|
47 | | - let left = clickX - popupWidth / 2; |
48 | | - let top = clickY - popupHeight / 2; |
| 48 | + let left = clickX - (popupWidth / 2); |
| 49 | + let top = clickY - (popupHeight / 2); |
49 | 50 |
|
50 | 51 | if (left + popupWidth > viewportWidth + scrollX - 20) { |
51 | | - left = viewportWidth + scrollX - popupWidth - 20; |
| 52 | + left = viewportWidth + scrollX - popupWidth - 20; |
52 | 53 | } |
53 | 54 | if (left < scrollX + 20) { |
54 | | - left = scrollX + 20; |
| 55 | + left = scrollX + 20; |
55 | 56 | } |
56 | 57 |
|
57 | 58 | if (top + popupHeight > viewportHeight + scrollY - 20) { |
58 | | - top = clickY - popupHeight - 20; |
| 59 | + top = clickY - popupHeight - 20; |
59 | 60 | } |
60 | 61 | if (top < scrollY + 20) { |
61 | | - top = scrollY + 20; |
| 62 | + top = scrollY + 20; |
62 | 63 | } |
63 | 64 |
|
64 | 65 | popup.style.left = `${left}px`; |
65 | 66 | popup.style.top = `${top}px`; |
| 67 | + |
66 | 68 |
|
67 | 69 | requestAnimationFrame(() => { |
68 | | - popup.style.opacity = "1"; |
| 70 | + popup.style.opacity = "1"; |
69 | 71 | }); |
70 | | - } |
| 72 | +} |
| 73 | + |
71 | 74 |
|
72 | | - document.addEventListener("showStatePopup", ((e: CustomEvent) => { |
| 75 | +document.addEventListener("showStatePopup", ((e: CustomEvent) => { |
73 | 76 | const { event, stateInfo } = e.detail; |
74 | 77 | showPopup(event, stateInfo); |
75 | | - }) as EventListener); |
| 78 | +}) as EventListener); |
76 | 79 |
|
77 | 80 | closePopup?.addEventListener("click", () => { |
78 | 81 | popup.style.display = "none"; |
|
99 | 102 | const stateName = popupStateName.textContent; |
100 | 103 | if (stateName) { |
101 | 104 | const stateUrl = stateName.replace(/\s+/g, "").toLowerCase(); |
102 | | - window.location.href = `/map/${stateUrl}`; |
| 105 | + window.location.href = `/mapPages/${stateUrl}`; |
103 | 106 | } |
104 | 107 | }); |
105 | 108 |
|
|
0 commit comments