Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/finder/Finder.tsx
View File

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