Building a collapsible AutoTOC: Patternslib? Mockup??

In Plone 5.2.1, I'd like to have the AutoTOC for our site generate a collapsible list with interactive open/close buttons. In searching add-ons at PyPl, I didn't find anything.

However, it seems like this should be possible, but there are numerous sources turned up by web searches that broadly conflict as to how to do this and what the "way going forward" is. The first thing I found, now out of date, was here:

Which talks about patterns in Plone. Some searching led to this Patternslib resource:

...which conveniently tells you which patterns you DON'T get by including it in your build, but not which patterns you DO get (seemingly assuming you know this already?). I found an index of Patternslib patterns, which included this promising entry:

https://patternslib.com/expandable-tree

...which is very confidence-boosting in that the "demo" doesn't function at all. But still, I guess it's good to know that it exists?

However, various comments on the GitHub page above, references to the post at the top of this, and community forum posts led me to believe that Patternslib was the "old" way of doing things and that I should be looking at Mockup instead. That led me to this site:

http://plone.github.io/mockup/dev/#pattern/tree

The documentation for which has a nice "node1" and "node2" example that you can click to expose and retract sub-elements. However, pasting the supplied code for that example:

   <div class="pat-tree"
        data-pat-tree='data:[
         { "label": "node1",
           "children": [
             { "label": "child1" },
             { "label": "child2" }
           ]
         },
         { "label": "node2",
           "children": [
             { "label": "child3" }
           ]
         }
       ];'> </div>

...into a Page in the Plone 5.2.1 site in question does not do anything at all. (The page remains completely blank.)

My questions are:

  1. Is there something pre-existing that can do this which I utterly failed to find?
  2. If I have to roll my own, is it right that Mockup is the way to go now?
  3. Do I have to do something to enable using Mockup patterns first?
  4. Can I test Mockup patterns by just sticking them into the "View Code" panel on a page in TinyMCE (with filtering completely disabled), or is this only accessible through coding add-ons, etc.?
  5. If I can make a test that works, would it be possible to modify the AutoTOC behaviour to leverage this Mockup pattern simply by editing the CSS for it, or is that a dead end (because it's not flexible enough, or... etc.)?

Worth noting is that one of the reasons that the code above may not have worked is because TinyMCE mangles the quotes. By moving it all onto one line, so that TinyMCE sees the quotes as between the angle brackets, I was able to preserve most of them, but it still changes the single quotes to double quotes no matter what I do. However, I attempted setting my WYSIWYG editor to none and then pasting the code in, and it was retained fine but still didn't work.

In the meantime, I've installed plone.patternslib by adding it to my eggs and re-running the buildout, then installing the Add-On in Site Setup. The test patterns work -- @@pat-depends, @@pat-inject, @@pat-masonry, and @@pat-switch all bring up their demonstration pages, which function as expected.

Using the pat-bumper class as a test also works, inserting the following into a page using TinyMCE's View Source tool:

<div class="pat-bumper">This should be a bumper.</a>

...followed by piles of dummy text to allow scrolling. The indicated text does indeed stay in place when the page is scrolled. Great start!

However, although the documentation about plone.patternslib here:

Doesn't indicate that it's an excluded pattern, the pat-expandable sample code:

		<ul class="pat-expandable">
			<li class="folder">Folder name</li>
			<li class="folder open">Folder name
				<ul>
					<li class="document"><a href="#">Document name</a></li>
					<li class="folder closed">Folder name
						<ul>
							<li class="document"><a href="#">Document name</a></li>
						</ul>
					</li>
					<li class="document"><a href="#">Document name</a> </li>
					<li class="document"><a href="#">Document name</a> </li>
					<li class="document"><a href="#">Document name</a> </li>
					<li class="document"><a href="#">Document name</a> </li>
					<li class="document"><a href="#">Document name</a> </li>
				</ul>
			</li>
			<li class="folder">Folder name</li>
			<li class="folder">Folder name</li>
			<li class="folder">Folder name</li>
		</ul>

Does nothing special (it displays a normal nested list as if there were no special classes used). :confused: