[pmwiki-users] RFC: ToggleNext or Details+Summary

[Dominique Faure]

Hi,

Before all, I want to thank Petko sparing no effort to provide us with
an ever more efficient wiki including interesting features with each
release.

The last release (v2.2.125) was embedding the ToggleNext[1] recipe and
I wanted to share some thoughts on this particular feature:

The ToggleNext recipe is mostly a upgraded rewrite of what was offered
by the previously released as beta Untoggle[2] recipe, ie. a clever
use of css and javascript to offer visual toggling of sibling document
divs.

For several years, the W3C was defining the <details>...</details>
html block element[3] which should enable the same features in recent
browsers natively[4], and it has already been handled (at least
partially) in our favorite wiki engine[5].

My concern here is two-fold:

In order to keep being future-proof as usual with PmWiki, the
ToggleNext recipe should be relying on the <details> and <summary>
elements for the html rendering, even if this implies providing some
kind of element+behavior simulation for older browser (aka a
polyfill), such as those easily available on github[6][7].

For now we are in lack of a proper wiki markup definition to handle
the <details> and <summary> elements as a sole structural block
possibly nestable (btw, there're similar potential issues with the
<fieldset> and <legend> couple and one of the <label> + <input> form).

Perhaps, we need a slightly more elaborate (:div:) handling which
would allow to specify if a (:summaryNN:) block markup could render as
the summary element of the following first encountered (:detailsNN:)
block such as:

(:summary:)
Nested content
(:details:)
The de-facto container
(:detailsend:)

giving:

<details>
  <summary>
  Nested content
  </summary>
The de-facto container
</details>

Regards,
Dominique

References:
[1] https://www.pmwiki.org/wiki/Cookbook/ToggleNext
[2] https://www.pmwiki.org/wiki/Cookbook/UnToggle
[3] https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element
[4] https://caniuse.com/#feat=details
[5] https://www.pmwiki.org/wiki/PmWiki/BlockMarkup#semantic
[6] https://gist.github.com/remy/370590
[7] https://github.com/javan/details-element-polyfill/blob/master/dist/details-element-polyfill.js