Refactoring to avoid using an element Id for the popup.

This commit is contained in:
Eric van der Vlist 2023-02-01 21:07:04 +01:00
parent e3dc1fc083
commit 6451b110b9
1 changed files with 25 additions and 14 deletions

View File

@ -21,11 +21,17 @@ const Finder: Component<Props> = (props) => {
const [popupContent, setPopupContent] = createSignal(<></>);
const navigate = useNavigate();
const [t, { add, locale, dict }] = useI18n();
let popup: Overlay | undefined;
const [popup, setPopup] = createSignal<Overlay>();
const searchStringChangeHandler = (event: any) => {
setSearchString(event.target.value);
};
const popupCloseHandler = () => {
popup()?.setMap(null);
};
let popupElement: HTMLElement;
const submitHandler = () => {
let coordinates: Coordinate | undefined = undefined;
const latLonRegExp = /(-?[0-9]+.[0-9]+)\s*,\s*(-?[0-9]+.[0-9]+)/;
@ -60,15 +66,24 @@ const Finder: Component<Props> = (props) => {
if (!!coordinates) {
setOpen(false);
if (popup === undefined) {
popup = new Overlay({
element: document.getElementById('popup'),
if (popup() === undefined) {
setPopup(
new Overlay({
element: popupElement,
positioning: 'center-center',
});
})
);
}
popup.setMap(getMap());
popup.setPosition(fromLonLat(coordinates));
getMap()?.addOverlay(popup);
console.log({
caller: 'Finder / submitHandler / popup',
searchString: searchString(),
coordinates,
popup: popup(),
popupElement,
});
popup().setMap(getMap());
popup().setPosition(fromLonLat(coordinates));
getMap()?.addOverlay(popup());
navigate(
`/map/${getState().provider}/${coordinates[0]}/${coordinates[1]}/16/${
@ -78,10 +93,6 @@ const Finder: Component<Props> = (props) => {
}
};
const popupCloseHandler = () => {
popup.setMap(null);
};
return (
<>
<div class={style.control}>
@ -115,7 +126,7 @@ const Finder: Component<Props> = (props) => {
<TextField onChange={searchStringChangeHandler} />
</Box>
</Dialog>
<div id='popup' class={style.ol_popup}>
<div class={style.ol_popup} ref={popupElement}>
<a
href='#'
onclick={popupCloseHandler}