Rules for copying TOC items

Hi everyone,

I'm having a little bit of difficulty moving the links in the table of contents of a page into a specific location in my theme. Here is the scenario:

<replace css:theme-children="article nav #toc" css:content-children=".autotoc-nav" method="raw" />
<drop css:theme="article nav" css:if-not-content=".autotoc-nav" />

I've tried almost every combination that could select this content (with and without children) but the result is always the same: the "article nav" element in the theme is removed (or if I drop the rule, the list is empty). Is there anything I'm doing wrong here? What is the correct way do this?

I just found out that the TOC of a page is generated by a JavaScript instead of by Plone, thus I cannot copy or remove it using Diazo rules. I also found out that this script (still haven't found where it's placed) creates a TOC from every child element of an element that uses class="pat-autotoc", which means creating trying to create a TOC somewhere else produces an empty list.

Now, I see only a few possible solutions:

  1. Let the script create the TOC and use another script to move it where I want
  2. Check if this script can create a TOC from one element and place it on another
  3. Create a copy of this script and make it do so

If anyone has already been here, help is much appreciated.

while I have no experience with your problem, I can say with a great probability of success that what you are searching for is in
mockup/patterns/autotoc/pattern.js
there is a site demoing mockup at
http://plone.github.io/mockup/dev/

I have spent quite some time on this problem.
If you search community.plone you might find some of my questions (which were never property answered).

I think it goes like this:

<div  class=“pat-autotoc”>
     whole #content of page
</div>

where a javascript generates the TOC.

You can not move the 'div element' since no TOC will then be produced.

I ended up with a lot of hacking with javascript CSS.
It is not optimal but 'good enough' (scroll down the page at: http://www.marfag.no/f11/kapittel-4-simulator-ovelser-operativt-niva and look what happens with the TOC)

The template is something like this:

Thanks @gp54321! This link you pointed is a nice addition to my reference library.

It also confirmed something I suspected after browsing the JavaScript you also pointed (I found bits of it in a script included in my pages before your reply): it seems to be possible to configure the pattern used to find levels.

I'm not sure if it is possible to point levels to elements not under the element annotated with "pat-autotoc" but if it is, that's the way to go. However, I'll still need to find out how to change those configuration arguments (if not only by changing the script at its source).

Thanks, @espenmn, your solution I the first on my list of possible solutions to this problem. It can be done (no scrolling involved for me) by hiding the original TOC using CSS and copying the contents over to the desired destination as soon as they are created with a small script.

But if you've seen @gp54321's reply, it might be possible to achieve the second solution on my list. I'll try to pursue this path first before I try messing with even more JavaScript.

All right, after some tinkering, I've found a definite solution to this matter. While I was trying to change the pattern script to search for an already existing element, I've noticed it test for two unlisted options, 'prependTo' and 'appendTo' (see it here). Testing them allowed me to insert the TOC exactly where I needed it to be. If you use 'prependTo', the <nav> element will be added as the first child element of the element in this option; 'appendTo' will add it as the last child element.

In the end, the resulting HTML of my theme is now something like this:

<article class="pat-autotoc" data-pat-autotoc="levels:h2,h3;appendTo:#toc">
   <div id="edit"><a href=""><span class="far fa-edit"></span>Suggest edits</a></div>
   <h1>Page Header (not in TOC)</h1>
   <nav id="toc">
      <header>
         <span class="fas fa-align-left"></span>
         Table of Contents
      </header>
      <!-- TOC will be inserted here -->
   </nav>
   <section>
      <!-- <h2> and <h3> for the TOC are here -->
   </section>
</article>

It would be nice if someone were to include these configuration options in the mockup site pointed by @gp54321 so it would be easier for others to find.

You could create an issue.
My impression is that the web site is built from the javascript files themselves; if you look at the comments at the beginning of the pattern.js file, they look very much like the web page describing the options. So I'd think that sending an update to this file documenting the 2 mystery options - since you have actually found them useful you are very much the person who can best document them accurately - would do the trick as soon as a new release of mockup is created. That's just a guess of mine, though. It can do no harm anyway.

Please try to document it..... I wish I knew this before

Plone Foundation Code of Conduct