ESL Footnotes Beta
ESLFootnotes is a custom element that is used to collect all
ESLNote elements in bounds of the scope and output sorted and grouped list of collected notes.
ESLNote is a custom element that is used to show notification by the tooltip GUI element.
The elements are interrelated and don't make sense on their own. This is because once the elements are added to the DOM, they establish the link between ESLFootnotes and each ESLNote.
ESLNote is a badge with a number or symbol. When it's hovered or clicked (user-defined behavior), it shows a tooltip with text information. Depending on the state of the ESLNote, it may display:
0- if the note is not associated with the footnotes
*- if the note is linked to the footnotes but in a standalone mode
1...(positive number) - ordinal index from the associated footnotes, if linked in a normal (default) mode
ESLFootnotes Attributes | Properties:
scope-target(string) - target element (ESLTraversingQuery selector) to define scope of footnotes (
grouping(string) - grouping note instances with identical content. Available options:
enable- default, notes with identical content will be grouped
disable- without grouping
back-to-note-label(string) - a text label to show in the title on the return-to-note button (
Back to noteby default)
ESLNote Attributes | Properties:
linked- read-only marker that appears on the note linked with the footnotes
standalone- read-only marker which indicates that the note remains independent of the notes even if it is linked with them (ignore mode, for example) and doesn't receive its ordinal index from the footnotes (the default * or a user-defined value is displayed)
tooltip-shown- read-only marker which appears when note's tooltip is shown
container- defines container element (ESLTraversingQuery selector) to determinate bounds of tooltip visibility (window by default)
ignore- MediaQuery to specify device media conditions when footnotes must ignore current note (
not allby default)
html- content of note tooltip. If not present, it fills with innerHTML of ESLNote
standalone-label- note's label in the standalone mode (detached from footnotes), in the connected mode it is a numeric index that is calculated automatically. (
track-click- MediaQuery to define allowed to track click event media. (
track-hover- MediaQuery to define allowed to track hover event media. (
Ignoring the group of notes
If you want the current note to be ignored by the footnote component using the
ignore attribute, there is no need to write this attribute on each note. You can write the
esl-note-ignore attribute once on the root element of the part for which these values are valid.
It should be noted that for the
esl-note-ignore attribute, the principle of cascading applies. The principle of cascading is similar to CSS variables. The value is searched from the element and up the tree to the document body itself. If the attribute is not found in parent elements, the value of the
ignore attribute from the note is used.
In other words, if it turns out that both the
ignore attribute is set on the note and group ignore is present on the parent elements, then
esl-note-ignore wins. And if there are several parent elements with group ignore, the one closest to the note will win.