How to access a pattern programmatically?

thet commented 8 years ago

Can I access a pattern which was loaded for a specific dom element programmatically? For example, if I have a pat-leaflet, which was loaded for $("div#map1"), how can I access the patterns API?

jcbrand commented 8 years ago

Can I access a pattern which was loaded for a specific dom element programmatically?

No, the instantiated patterns aren't available globally and the code inside a pattern is in a closure. Instead, we use events to communicate between patterns.

If you want to inform another pattern of something, you trigger an event and let that pattern listen for that event and react appropriately.

This is sensible because we cannot assume that any particular pattern is loaded. The user decides which patterns are in the site.

thet commented 8 years ago

I trie to lay out implementation options for a use case which I want to support in pat-leaflet. Here we have plone.formwidget.geolocation, which defines a schema with the two fields latitude and longitude (so two input tags), but should also work with widgets, where this information is stored in one field. The tricky thing is, it should also work with multiple pat-leaflet instances / geolocation input fields on one site

Approach 1

Outside input field is changed: I can add a pat-leaflet config option to listen for a specific type of event, which holds a lat and lng attribute. I can fire this event from outside when a value in the input field is changed. pat-leaflet would update it's marker for the new location.
Leaflet marker is set: I can add a pat-leaflet config option to fire a specific type of event, which again holds a lat and lng attribute. I can listen to this specific event from outside and update the input fields accordingly.

The thing is, I have to configure the types of events in order to know for which events from which input fields / leaflet maps I should react to. Or I establish the convention to send the map id as property of the event object and compare from within pat-leaflet with the element's id.

Approach 2

Store the values in data-geopoints on the tag, where pat-leaflet is applied (which I already do). I can then change data-geopoints from outside or inside and watch/observe value changes from outside/inside the pattern.

Approach 3

Actually, the easiest approach would just be to store the pattern instance on the dom node and expose the pattern's API for access from outside - methods such like get_geopoints or set_geopoints.

I actually don't understand the reasoning, why this shouldn't be done. I'd happily prepare a pull request for storing pattern instances on dom nodes. The developer can check if a pattern is loaded or not anyways...

jcbrand commented 8 years ago

It's not clear to me what the usecase is. What exactly are you trying to solve? What do you want to do with an API if you had one?

thet commented 8 years ago

Getting/Setting values, changing options, some simple kind of data binding, etc.

E.g:

var pattern = $("#map2").pat_leaflet;
var geopoints = pattern.get_geopoints();
pattern.set_geopoints('15.0', '15.0');
pattern.options.zoom = 12;

The thing I want to solve right now is using the pat-leaflet pattern for plone.formwidget.geolocation. As I wrote above, there is a behavior with a separate latitude and longitude field. I cannot apply the pat-leaflet class to any of these input widgets. I have to create another div-element with the class pat-leaflet and then connect the latitude and longitude fields somehow to the leaflet patterns. If an address is searched in the pattern or a marker is set, then the fields should be updated and vice versa.

thet commented 8 years ago

Another idea is to create a demo page, where you can control all the pattern's options through form fields and get the corresponding data-pat-PATTERNNAME options. For that you'd need somehow to control the patterns options from outside the pattern, via an accessible API.

jcbrand commented 8 years ago

Individual patterns can double as jQuery plugins. So you can call a pattern programmatically on a DOM element, and I think you'll then get the instantiated pattern back. I've never used that functionality, so I'm not very familiar with it. Just mentioning it, perhaps it helps.

In any case... looks like the problem is that you have two inputs (lat, long) that you want the pattern to be aware of, right?

Can you not send selectors for those inputs as data-pat-* config options to the pattern? The pattern then uses those selectors to query and find the inputs.

Something like:

<div class="pat-leaflet"
        data-pat-leaflet="selector-latitude: #mylat; selector-longitude: #mylong" />

thet commented 8 years ago

I'll try it that way... Thanks for the answers!

cornae commented 8 years ago

Hi @thet, Cool you're working on this! A website was launched this week by the Dutch government for which also a Leaflet pattern was developed. Perhaps there are some ideas in there you could use.

http://overstroomik.nl

Type in a Dutch Postal code like '3039 AA' and hit enter and you'll see several pat-leaflet instances of the version they've made not he first two tabs.

thet commented 8 years ago

Thanks for the pointer! The leaflet widgets look nice there. Do they have specific layers or is the raster showing specific data?

cornae commented 8 years ago

Yes, You can switch off the specific layers with the checkbox you get out of that little context menu. The layers are defined in an XML file. The come from different data sources.

Op do 14 jan. 2016 om 01:48 schreef Johannes Raggam < notifications@github.com>:

Thanks for the pointer! The leaflet widgets look nice there. Do they have specific layers or is the raster showing specific data?

— Reply to this email directly or view it on GitHub https://github.com/Patternslib/Patterns/issues/433#issuecomment-171486305 .

Patternslib / Patterns