Collapsiblesections.js is gone- long live pat-collapsible?

Plone Support Add-on Development
1

I am trying to bring collective.interfaces up to date for Plone 5. The available marker interfaces listing was using collapsiblesections.js, but that's gone. So I made a lucky guess and found http://patternslib.com/collapsible/ . So given the listing template generates something like this:

<dl class="collapsible closed inline collapsedOnLoad">
   <dt class="collapsibleHeader">Title of collapsible content</dt>
   <dd class="collapsibleContent">Collapsible content text here</dd>
</dl>

.. I thought I could just replace "collapsible" with "pat-collapsible" (as per the pattern docs). But that's not working... any suggestions?

2

Hi Petri,
I think the solution is to use the toggle pattern from mockup:

Check out the example in "Build a collapsable with toggle".

1 Like
4

The solution is not to use the toggle pattern from mockup. It's name clashes with a Patternslib pattern which already exists. Additionally, we want to use core Patternslib patterns whenever possible, to reduce duplication of code and effort.

So if pat-collapsible works, then IMO that should be used.

There is a pull request being reviewed currently to expose all Patternslib patterns in Products.CMFPlone (they're not yet in the bundles or registry.xml however).
See here: https://github.com/plone/Products.CMFPlone/pull/1191 (comments on the ticket appreciated).

BTW, Maik Derstappen @MrTango is in the process of merging the Mockup toggle pattern into Patternslib.

5

Thanks @alert & @jcbrand. I saw that Plone can serve the mockup toggle pattern JS file on request, so just to get started somehow, I went and included it in the default profile's registry.xml as:

<value key="jscompilation">++resource++mockup/toggle/pattern.js</value>

After importing the profile, the file loads but I get a JS error:

Error: Mismatched anonymous define() module: ...

so apparently just including the JS is not enough or plain wrong. So what exactly is needed to use a pattern from mockup (or patternslib)? I thought using mockup patterns must be documented somewhere, but all I could find was docs on how to build a pattern...? Any pointers would be appreaciated.

6

@petri the mockup toggle pattern should already be in the registry.xml, no?

In order to use the Patternslib pattern, it would mean also adding that pattern into the registry, which is why I want to add the Patternslib patterns to Products.CMFPlone's repo in the above mentioned pull request.

7

Ah thanks of course, I was confused... so I assume all the mockup patterns are already available in Plone 5?

If that's the case, I don't understand why using using "pat-toggle" CSS class as per mockup docs does not work... for example, using the simplest example from the mockup docs:

<button type="button"
       class="btn btn-default pat-toggle"
       data-pat-toggle="value:btn-lg;">This button goes bigger/smaller!</button>

Does not change the button size when clicked. I tried some other CSS classes than "btn-large" as well (that for sure produce a visual effect) but nothing happens. It's as if the pattern (or mockup) is not installed (no javascript errors in console).