olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
fix dropdown zoom position
handle.invalid
+13
-2
+13
-2
src/components/dropdown.tsx
+13
-2
src/components/dropdown.tsx
···
104
104
const ctx = useContext(MenuContext);
105
105
const [menu, setMenu] = createSignal<HTMLDivElement>();
106
106
const [menuButton, setMenuButton] = createSignal<HTMLButtonElement>();
107
-
const [buttonRect, setButtonRect] = createSignal<DOMRect>();
107
+
const [buttonRect, setButtonRect] = createSignal<{ bottom: number; right: number }>();
108
108
109
109
const clickEvent = (event: MouseEvent) => {
110
110
const target = event.target as Node;
···
113
113
114
114
const updatePosition = () => {
115
115
const rect = menuButton()?.getBoundingClientRect();
116
-
if (rect) setButtonRect(rect);
116
+
if (rect) {
117
+
const isTouchDevice = window.matchMedia("(hover: none)").matches;
118
+
const vv = isTouchDevice ? window.visualViewport : null;
119
+
setButtonRect({
120
+
bottom: rect.bottom + (vv?.offsetTop ?? 0),
121
+
right: rect.right + (vv?.offsetLeft ?? 0),
122
+
});
123
+
}
117
124
};
118
125
119
126
onMount(() => {
120
127
window.addEventListener("click", clickEvent);
121
128
window.addEventListener("scroll", updatePosition, true);
122
129
window.addEventListener("resize", updatePosition);
130
+
window.visualViewport?.addEventListener("resize", updatePosition);
131
+
window.visualViewport?.addEventListener("scroll", updatePosition);
123
132
});
124
133
125
134
onCleanup(() => {
126
135
window.removeEventListener("click", clickEvent);
127
136
window.removeEventListener("scroll", updatePosition, true);
128
137
window.removeEventListener("resize", updatePosition);
138
+
window.visualViewport?.removeEventListener("resize", updatePosition);
139
+
window.visualViewport?.removeEventListener("scroll", updatePosition);
129
140
});
130
141
131
142
return (