Dispatch an event when a popup is displayed

[mstenta]

I'd like to trigger a callback function to run when a popup is displayed using on('popup') (or something equivalent). Is this currently possible? Or would it be a new feature request?

Perhaps the Popup.show() function could call dispatchEvent() to trigger its own event?

https://openlayers.org/en/latest/apidoc/module-ol_Observable-Observable.html#dispatchEvent

[mstenta]

I was able to achieve what I needed with the following code:

popup.show(evt.coordinate, content);
popup.dispatchEvent('popup');

Then, elsewhere I can do:

popup.on('popup', function (event) {
    console.log('Event: popup');
});

[walkermatt]

@mstenta glad to see you've a solution, I'd be happy to add an event, maybe show and hide?

[mstenta]

Yea that could be helpful! I'll reopen this.

Is it as straightforward as adding two lines? this.dispatchEvent('show'); and this.dispatchEvent('hide'); in the corresponding methods of Geolocate class? If so I'll make a PR.

[makrolika]

Hi, i understand the code not realy. I search for a solution to fill the Popup with content from a ajax request, without JQuery. The problem is, in this moment i must send all the content for all the popups by the first call of the website. That is too much data. I will fill the Popup on the click event with data from the server. The content for the Popup come from a xhttp request. Thats not so easy, because a xhttp request dont return a value.

Where and in what place do you use this?

popup.show(evt.coordinate, content);
popup.dispatchEvent('popup');

popup.on('popup', function (event) {
    console.log('Event: popup');
// is here the right place for a xhttp request?
});

[mstenta]

@makrolika Yes, that's where I am executing the request in my case (within the popup.on() callback). I am using jQuery.getJSON(), so you will need to adapt that for your case.

This is where we are doing it in farmOS:

https://github.com/farmOS/farmOS/blob/0e6b7c125aa4af00b923febb561ad0a96714d4db/modules/farm/farm_area/js/farmOS.map.behaviors.areas.js#L28

And in farmOS-map (which is our custom OpenLayers-based map library that is used by farmOS), we create the popup and dispatch the custom farmOS-map.popup event here:

https://github.com/farmOS/farmOS-map/blob/91cc8b687e462f56988b25ed579c43981dba24f1/src/instance/methods/popup.js#L17

Hope that helps!

[makrolika]

OK, thanks, that is also a special solution for a external software named FarmOS. I will not use this software to realized my idea. Is there a default solution to realized it? I will start a new Issue for my question. https://github.com/walkermatt/ol-popup/issues/217

[mstenta]

OK, thanks, that is also a special solution for a external software named FarmOS.

The way we did it in farmOS is just an example you can refer to. You don't need farmOS to do something similar in your code.

I assume that somewhere in your code you are running popup.show(...); - you just need to add popup.dispatchEvent('popup'); right after that, so that elsewhere code can be triggered when a popup is opened. Then, you add a callback function that runs when that event is dispatched, and inside that function you execute your HTTP request and put what you want into the popup content.

Hope that makes sense. The overall approach is simple, but you will need to figure out how it fits into your current code.

[makrolika]

Please read my new Issue: https://github.com/walkermatt/ol-popup/issues/217 It works without popup.dispatchEvent(), but it is right? I don't understand why i am using popup.dispatchEvent(). It is needed, when i call the xhttp request in a outside function?

[makrolika]

Hi mstenta, have you found a solution for your question?

I have found a solution for my first question https://github.com/walkermatt/ol-popup/issues/217 and for my new second question https://github.com/walkermatt/ol-popup/issues/321. Both have to do with the popup.show function. In the second i searched for a trigger, when the popup is really displayed.

[mstenta]

@makrolika I needed popup.dispatchEvent() in farmOS because I wanted to allow other code (provided by add-on modules that I do not maintain) to be able to perform JS logic when a popup appears. So popup.dispatchEvent() is a flexible solution for that. If you do not need to support other people's code running after popup.show(...) then you wouldn't need to do that. Hope that helps!