Collective.geolocationbehavior and Plone 6.0

Hi!

collective.geolocationbehavior depends on plone.patternslib because it uses pat-leaflet. Reading this PR in plone.patternslib

https://github.com/plone/plone.patternslib/pull/62

It is not clear to me if collective.geolocationbehavior works in Plone 6 or it needs this PR to work or it is enough to pin a lower version of plone.formwidget.geolocation

Thanks for any info!

@petschki

I'm testing. The behaviour will install but when editing a geolocatable object, I get this error:

patterns.pat.leaflet: Failed while initializing 'leaflet' pattern. TypeError: o.parents().andSelf is not a function

parse bundle-leaflet-compiled.js:9556

init bundle-leaflet-compiled.js:14962

c plone-base-compiled.js:3698

e plone-base-compiled.js:3733

i plone-base-compiled.js:3686

initPattern plone-base-compiled.js:3525

S plone-base-compiled.js:762

u plone-base-compiled.js:793

scan plone-base-compiled.js:3564

scan plone-base-compiled.js:3563

init plone-base-compiled.js:3483

jQuery 2

[plone-base-compiled.js:1791:29](http://localhost:8080/Plone9/++plone++static/++unique++2021-11-09%2012%3A43%3A49.819867/plone-base-compiled.js)

​

I suppose the PR is needed to fix it. For testing purposes, I just cloned the master over the egg src, but I still get the same error. Any hint?

Hi, this error is due to jQuery incompatibility ... my fix right now is to include jquery-migrate with my addon package ... but these addons need to upgrade their JS to support jQuery > 3.0 ... or event better: we should refactor these addons to ES6 :wink:

NOTE: plone.patternslib uses the a patternslib version which has requirejs included ... this is not compatible with Plone 6.0/plone.staticresource (=current mockup master branch)

So the behaviour is not compatible with Plone 6? Would be possible a quick fix (and how?) or I've just to wait? I can volunteer some hours to help, just need some directions.

Including jquery-migrate lead to the infamous:

Uncaught Error: Mismatched anonymous define() module: function( jQuery ) {
			return factory( jQuery, window );
		}
https://requirejs.org/docs/errors.html#mismatch

@yurj we has the same problem, see : Traceback with `andSelf` while trying to initialize leaflet pattern (Plone 6) · Issue #57 · plone/plone.patternslib · GitHub

In our Plone 6 project, we quick-fixed it (for now) like this : Fix leaflet issue with jQuery andSelf · IMIO/plone.patternslib@54382f5 · GitHub

Hope this helps !

1 Like

Yep, it worked, once I edited static/components/patternslib/src/core/parser.js and recompile the bundle TTW. Just modifing the bundle-leaflet-compiled.js and bundle-leaflet-compiled.min.js on fs and restarting/disabling/enabling plone.patternslib didn't work (but maybe it was me doing something wrong).

Thanks a lot!

Sorry, editing works, while viewing a Page with the geolocation behaviour does not, just shows the standard page with no map and no coordinates. Or maybe to see a map in view I need something else?

View:

Edit:

This is normal, because the new field is not rendered in existing view templates.

You will have either to

  • customize the type view template
  • create your own view for the content type (you can inherit from dexterity default view to render the field easily)
  • add a viewlet to display the map
  • ...

The viewlet is IMHO the most generic way to go, and should be added to the product :wink:

To prove that it works

  1. Create a new content type TTW (@@dexterity-types)
  2. Activate Geolocatable behavior on this type
  3. Enjoy your map, because the type will use Dexterity default view (that renders all fields)
1 Like

There is no way to quickfix this in plone.patternslib, because updating patternslib only to 3.x (=the latest version which uses requirejs) would have quite up-to-date jQuery but is a deadend too ... we must update plone.patternslib to the webpack version of patternslib (=master) for Plone 6.0 ...

I got rid of the "mismatched anonymous" by

  1. using this jquery-migrate.js file jQuery Migrate with define() - Paste-bin
  2. register it as resource in plone
  <records prefix="plone.resources/jquery-migrate"
           interface='Products.CMFPlone.interfaces.IResourceRegistry'>
    <value key="js">++plone++plonetheme.myproject/jquery-migrate.js</value>
  </records>
  1. use it as dependency in our project resource bundle. ex:
require([
    'jquery',
    'pat-registry',
    'jquery-migrate',
  ], function($, registry) {
...
}
1 Like

You're right, Document does not have a generic template to show all fields. It actually works as you explained. The only glitch is the location search. It finds the place but the spinner keep running and the js is stuck, you can't save the location. Positioning directly on the map works. This is the error, maybe others jquery incompatibilities:

Uncaught TypeError: e is undefined plone-logged-in-compiled.js:64
validate_z3cform_field plone-logged-in-compiled.js:181
jQuery 6
queue plone-logged-in-compiled.js:81
validate_z3cform_field plone-logged-in-compiled.js:178
init plone-logged-in-compiled.js:220
jQuery 3
[plone-logged-in-compiled.js:64:27]

Uncaught TypeError: e.Marker is undefined
initUndefined bundle-leaflet-compiled.js:15105
fireEvent bundle-leaflet-compiled.js:461
_showLocation bundle-leaflet-compiled.js:10664
_processResults bundle-leaflet-compiled.js:10629
onreadystatechange bundle-leaflet-compiled.js:10593

Thanks!

I totally agree but until the es6 stuff is not out, we will remain in a stalled situation. I've never understood the RR stuff, for example it is not clear to me how the registry key file can be seen by require.js but maybe I miss also the require.js knowledge. Anyway, it is old stuff, nevermind. I hope the es6 stuff will be released soon.

just for completeness how the resource registry and requirejs work together because it was missing in my post:

  1. you have to recompile your bundle with bin/plone-compile-resources -b project-bundle

this generates a Gruntfile.js in your buildout with all the registered javascript files in RR, builds the compiled bundle with grunt and saves the files according to your paths in jscompilation and csscompilation keys ... sure a bit "overengineered" and nothing to worry about in Plone 6 anymore :wink:

1 Like

As a reminder, to render the geolocatable field in your custom template, just follow this thread, works:

1 use zcml to define a class for the browserview (use overrides.zcml if you want to change an existing content type), so the view will get from Dexterity DefaultView
2 add this to your template (content-core tipically)

<tal:block tal:define="
    widgets nocall:view/widgets;
    title_widget widgets/IGeolocatable.geolocation|nothing">
  
    <tal:field tal:condition="title_widget" tal:replace="structure widgets/IGeolocatable.geolocation/@@ploneform-render-widget" />  

</tal:block>