This plugin styles a "toolbar" container by placing a custom glyph for each of its direct children in a dedicated area at the bottom of the page.
Elements that do not possess a data-glyph attribute will not be shown, with the exception of <details> elements, for which both the data-glyph and the data-slot attributes (see below) are expected to be found in their <summary> element instead.
It is possible to see the effect generated by the <details> elements by clicking on the ⚙️ 🎬 🔆 📲 🖨 buttons in the example above.
Set the glyph generated equal to the unicode character given; for example: <details><summary data-glyph="⚙️" data-slot="bctrl-l1">Settings</summary>Something about settings goes here</details>, or <span onclick="alert('Clicked!');" data-glyph="🔕" data-slot="bctrl-l5">Turn notifications on</span>.
Set the position of the glyph generated; for example: <details><summary data-glyph="⚙️" data-slot="bctrl-l1">Settings</summary>Something about settings goes here</details>, or <span onclick="alert('Clicked!');" data-glyph="🔕" data-slot="bctrl-l5">Turn notifications on</span>. Possible values are: "bctrl-l1", "bctrl-l2", "bctrl-l3", "bctrl-l4", "bctrl-l5", "bctrl-r1", "bctrl-r2", "bctrl-r3", "bctrl-r4" and "bctrl-r5".
Notes
The "toolbar" container does not need per se to be placed in any particular point of the slide, however all direct children of the slide except the main <nav> have a z-index assigned that would be too low for the purpose of the plugin. Because of this, the only suitable places are inside the parent <article>as direct child somewhere after <leeloo> (possibly as last child), or anywhere inside the main <nav> (but in this case attention is necessary to avoid nesting links inside the toolbar, as all links of the main <nav> are heavily styled by default).
By using the "z-none" class, it is theoretically possible to nest the "toolbar" container also inside the <aside> or <footer> elements (<aside class="z-none"> or <footer class="z-none">).
Within the same slide there can be more than one container with class "toolbar". A particular data-slot however can be assigned only to one element per slide.
Toolbar
Frozen source
Settings
Something about settings goes here
Turn the volume off
Video settings
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce massa mauris, finibus id eros non, porttitor imperdiet magna. Vestibulum iaculis lectus molestie, interdum mauris ut, pretium mauris. Nulla facilisi. Pellentesque ut velit ac erat commodo elementum at nec urna. Suspendisse rhoncus suscipit risus in congue. Aenean quis ligula risus. Cras sit amet lacinia augue. Curabitur ac justo in libero tristique condimentum eu vitae dolor. Integer diam lorem, sagittis at mauris eu, vestibulum viverra mauris. Praesent aliquam libero non lorem volutpat, id porta ipsum tincidunt.
