Initiate mockup patterns on AJAX loaded content

Plone Support Add-on Development
1

I have some AJAX loaded content that intends to use some plone mockup patterns (5.0.5), but they are not firing after doing a jQuery replaceWith on the html segement. In the past I have been able to fix this specifically for modals by running $('.pat-plone-modal').patPloneModal() but I don't seem to be able to generalize that for other patterns. For example, I want to reapply pat-markspeciallinks for all of the content I just injected in the DOM. What's the best way to do this? Ideally I could give a command to check for all mockup patterns on the html I just injected.

1 Like
2

The mockup pattern registry has good support for this. Just require the registry and call registry.scan() after replacing the segment:

require(['pat-registry'], function (registry) {
    registry.scan($(rootElement));
});

where rootElement is the root of the section of the DOM that you are replacing.

2 Likes
3

Same problem with Plone 6 Classic (require is removed) and HTMX. What code should I use to scan the new content ?

4

@sverbois could you elaborate in detail what you're trying to do with HTMX?

in a custom pattern you would do something like

import registry from "@patternslib/patternslib/src/core/registry";

registry.scan(document.getElementById("mynode"));
5

Hi @petschki. Thank you for your answer. Here is my context.

I have a fragment browser view "@@fragment" with this template:

<div id="fragment" >
    <time class="pat-display-time" datetime="1971-06-27T08:30Z" data-pat-display-time="output-format: MMMM YYYY">1971-06-27T08:30Z</time>
</div>

This fragment browser view is called by a htmx browser view with this template:

<html metal:use-macro="here/main_template/macros/master">
    <metal:javascriptslot fill-slot="javascript_head_slot">
        <script src="https://unpkg.com/htmx.org@2.0.2"></script>
    </metal:javascriptslot>
    <metal:main fill-slot="content-core">
        <div id="fragment" hx-get="@@fragment" hx-trigger="load" hx-swap="outerHTML" />
        <script>
            document.addEventListener('htmx:afterRequest', function(evt) {
                    /* ??? What code do I need to put here to run the pattern ??? 
                       registry.scan(document.getElementById("fragment"));*/
            });
        </script>
    </metal:main>
</html>

I want to run the "pat-display-time" on the htmx:afterRequest event.
Is it possible to access the scan method of the patternslib registry in the htmx browser view ?

6

OK. I know there's a HTMX community out there but let me first say: the simplest solution for this example would be when call your @@fragment browserview with pat-inject:

<a id="fragment" href="@@fragment" class="pat-inject" data-pat-inject="target: self; trigger: autoload">
    this gets replaced
</a>

Since pat-inject automatically rescans all injected data with the patternslib registry, you get this right out of the box. There are also other parameters for pat-inject, for example trigger loading when visible while scrolling etc. check out the docs here Inject — Patterns ...

AFAIK the registry from patternslib cannot be called from an inline script (@thet might have more insights on this). If you need this, you have to create a custom script within the module federation setup of mockup. We usually create a "UI pattern" for a customer project with plonecli and assign it to the body via the IBodyClassAdapter

EDIT: Fixed pat-inject example above with target option.

7

Thank you for your quick reply. I'll have a look at pat-inject.