Using mockup-patterns in faceted-views in Plone 5

Question

When I use any mockup-pattern like <span class="pat-moment">2016-07-30T15:10:00</span> in a faceted:view (a custom view for eea.facetednavigation) the pattern is not working at all since the content is injected with javascript.

In https://stackoverflow.com/a/35699974/637399 @ebrehault wrote that Patterns are initialized at load time and if the DOM changes and contains new elements, you need to call Registry.scan($('#content-core')) where Registry is pat-registry and #content-core the injected part of the page.

How do I do that in the context of eea.facetednavigation (https://github.com/eea/eea.facetednavigation)? It uses a event-system (see https://github.com/eea/eea.facetednavigation/blob/master/eea/facetednavigation/browser/javascript/view.js). How do I listen to one of these events, which one do I need and how do I then call the scan?

I suspect you want to use MutationObserver to watch the changes made by eea.facetednavigation (sorry, not MSIE < 11 support). https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver For older MSIE, you may need use a polyfill that uses setInterval polling. — sdupton, Jul 22 '16 at 16:59

score 4 · Accepted Answer · answered Jul 22 '16 at 21:58

You need to bind to the eea's AJAX_QUERY_SUCCESS event:

$(Faceted.Events).bind(Faceted.Events.AJAX_QUERY_SUCCESS, function() {
        Registry.scan($('#content-core'));
});

Note: when you said:

and #content-core the injected part of the page.

that's not accurate, it is not specifically the injection target (by the way there is not always injection when you use patterns, in your very case the injection is managed by eea.faceted, which is not a pattern). You can re-scan any part of the DOM, you just need to make sure the part you re-scan contains the patterns you want to activate (body would be just fine for instance).

Thanks, that works great! I'm so used to python that I constantly wonder how ``$(Faceted.Events)`` works without imports :-) — pbauer, Jul 23 '16 at 11:18

score 1 · Answer 2 · answered Mar 19 '18 at 12:59

For Plone 5: I registered the code snippet below as a resource in the registry.xml in my addon, included it in the bundles addon in my registry.xml and rebuild my addons bundle using the ./bin/plone-compile-resources script.

define([
    'pat-registry'
], function(Registry) {
  'use strict';
    $(Faceted.Events).bind(Faceted.Events.AJAX_QUERY_SUCCESS, function() {
      Registry.scan($('#content-core'));
    });
});

Using mockup-patterns in faceted-views in Plone 5

2 Answers2