AJAX navigation in Plone sites

Plone Support Customizing Plone
1

I have a few Plone sites which contain "structured documents" (built from folders and documents), in which you can step forwards and backwards, and skip to a certain numbered page, exchanging only the content, and leaving the menu etc. in place, while the page URL is updated. Nothing very unusual, I'd say.
However, the existing homebrew solution is somewhat suboptimal; I have at least three different Javascript files which contain similar functionality (with subtle differences) and use several global variables; not very state-of-the-art, not very stable, and faulty, I'm afraid.
So, is there a standard functionality or package I could use?
What I have in mind:

  • A Javascript API function which would be initialized with a JSON tree of lists of UIDs, created in the root of a structure (which could be the site as well); it would be able to easily get the position (and number) of the current page, the previous, next and possibly parent page from this information.
  • More needed information:
    ** id of the DOM element to be filled
    ** perhaps another element contains the breadcrumbs?
    ** name of the view template to use
    ** perhaps more

Is there such a standard way I could use?

2

Slightly off topic, but maybe you could just make a view with pat-inject or pat-contentload.

3

Let's see, I try to sort this out.
OK, I found pat-inject. The Javascript project is on Github, but I couldn't find a Plone integration yet. This could be desirable, e.g. because of jQuery version issues; Plone 4.3.15 still uses jQuery 1.7 (I have 1.8.3 which is very slightly less ancient), but they intend to update to jQuery 3 which is (sadly) incompatible with some of my Javascript code. Thus, is might be a way to go in the long run, but it is no drop-in-solution.
Right, you didn't say it would be.

As for using this as the technical base, it looks to me like there I'd need to add data- attributes in server-side code to have Patternslib do its magic.

In https://github.com/collective, I found Solgema.NavigationPortlet which (from a quick look at it) creates a tree navigation viewlet, but there is no hint about AJAX navigation or previous/next page links.

4

there is a plone integration for pat-inject, plone.patternslib

pat-contentload is quite similar (you just need to add a click), and does this:

http://xweb14d.plana.dk:8081/Plone/fragments/contentload-fragment

with this code:

… or this:
http://xweb14d.plana.dk:8081/Plone/fragments

with this code:

While for pat-inject, with this code:

you get
http://xweb14d.plana.dk:8081/Plone/fragments/pat-inject-fragment

(for the last one, you need to add plone.patternslib)

For example: a complete full folder view could be made with something like:

 <tal:repeat tal:repeat="item context/@@contentlisting|None">
    <a tal:define="item_url item/getURL|item/absolute_url; 
      itemclass="pat-inject" href="${item_url}" 
      data-pat-inject="target: self; trigger: autoload; source: #content-core">Replace me</a>

PS: This will not work with 'pat-auctotoc' so you will have to construct the menu yourself (with item/Title, maybe)

5

Thank you for the very verbose answer!
Unfortunately, plone.patternslib is for Plone 5, and I have 4.3.15; I'm not ready to switch (yet).
The same seems to be true for collective.multitheme (cutting-edge, not yet no PyPI).