Skip to content

Commit

Permalink
feat(esl-footnotes): add ignore-footnotes attribute to disallow footn…
Browse files Browse the repository at this point in the history 
…otes to pick up a note
  • Loading branch information
@dshovchko
dshovchko committed Jan 14, 2022
1 parent 343963d commit 9b8db3e
Show file tree
Hide file tree
Showing 4 changed files with 238 additions and 18 deletions.
162 changes: 161 additions & 1 deletion pages/views/examples/footnotes.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ aside:

<section class="row">
<div class="col-12">
<h2>Text with notes</h2>
<h2>Text with notes (disabled grouping and used custom back to note label)</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note>et dolore magna</esl-note> aliqua. Donec massa sapien faucibus et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet <esl-note>massa vitae tortor</esl-note>. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
<p>Dolor magna eget est lorem ipsum dolor sit amet. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. In vitae turpis massa sed elementum tempus egestas sed. Dui accumsan sit amet nulla facilisi morbi tempus. Diam quam nulla porttitor massa. Aliquet enim tortor at auctor urna nunc id cursus metus. Volutpat maecenas volutpat blandit aliquam etiam erat. Est pellentesque elit <esl-note>ullamcorper dignissim cras</esl-note> tincidunt lobortis feugiat. Sagittis purus sit amet volutpat consequat. Sit amet porttitor eget dolor morbi. Et netus et malesuada fames ac turpis. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Sit amet cursus sit amet dictum. Potenti nullam ac tortor vitae purus faucibus ornare. In nulla posuere sollicitudin aliquam ultrices sagittis orci. Blandit volutpat maecenas volutpat blandit aliquam etiam erat. Aliquam ultrices sagittis orci a. Sit amet consectetur adipiscing elit pellentesque habitant.</p>
Expand Down Expand Up @@ -56,5 +56,165 @@ aside:
</div>
</div>
</div>

<h2>Components with footnotes inside</h2>

<section>
<div class="mb-4">
<h3>Simple Menu:</h3>
<ul class="esl-example-menu">
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow">Menu 1</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on-esc close-on-outside-action>
<ul class="esl-example-sub-menu">
<li>1 <esl-note>I am note 1 from menu</esl-note></li>
<li>2</li>
<li>3</li>
</ul>
</esl-panel>
</li>
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow">Menu 2</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on-esc close-on-outside-action>
<div class="esl-example-menu-400">Feugiat vivamus at augue eget arcu dictum varius duis at. Ullamcorper sit amet <esl-note>I am note 2 from menu</esl-note> risus nullam eget felis eget nunc lobortis. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa.</div>
</esl-panel>
</li>
<li class="menu-item">
<esl-trigger class="menu-item-btn menu-item-arrow">Menu 3</esl-trigger>
<esl-panel class="menu-container"
group="test-nav-group"
fallback-duration="400"
close-on-esc close-on-outside-action>
<ul class="esl-example-sub-menu">
<li>1</li>
<li>2</li>
<li>3 <esl-note>I am note 3 from menu</esl-note></li>
</ul>
</esl-panel>
</li>
</ul>
</div>

<esl-panel-group class="accordion-group mb-4">
<h3>Accordion with notes</h3>
<div class="esl-d-accordion">
<esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
Toggle Accordion #1
</esl-trigger>
<esl-panel open class="esl-d-accordion-panel">
<div class="esl-d-accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note>I am note 1 from accordion</esl-note> aliqua. Donec massa sapien faucibus <esl-note>I am note 2 from accordion</esl-note> et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
</div>
</esl-panel>
</div>
<div class="esl-d-accordion">
<esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
Toggle Accordion #2
</esl-trigger>
<esl-panel class="esl-d-accordion-panel">
<div class="esl-d-accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note>I am note 3 from accordion</esl-note> aliqua. Donec massa sapien faucibus et molestie ac. Mi sit amet mauris commodo <esl-note>I am note 4 from accordion</esl-note> quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
</div>
</esl-panel>
</div>
<div class="esl-d-accordion">
<esl-trigger class="esl-d-accordion-header h4 esl-d-accordion-header-arrow" target="::next">
Toggle Accordion #3
</esl-trigger>
<esl-panel class="esl-d-accordion-panel">
<div class="esl-d-accordion-body">
<p>Nam libero justo laoreet sit amet cursus. Nibh ipsum consequat nisl vel pretium. Elit sed vulputate mi sit amet. Urna condimentum mattis pellentesque id. Non nisi est sit amet facilisis magna etiam tempor. Arcu risus quis varius quam quisque. At auctor urna nunc id cursus metus aliquam eleifend. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Ultrices dui sapien eget mi proin sed libero. Quis risus sed vulputate odio ut enim. Morbi tristique senectus et netus. Tellus mauris a diam maecenas sed enim ut. Id leo in vitae turpis massa sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note>I am note 5 from accordion</esl-note> aliqua. Donec massa sapien faucibus et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh <esl-note>I am note 6 from accordion</esl-note> cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
</div>
</esl-panel>
</div>
</esl-panel-group>

<div class="esl-d-tabs mb-4">
<h3>Tabs with notes</h3>
<esl-tabs class="esl-d-tab-control">
<esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>

<ul class="esl-d-tab-list esl-tab-container" role="tablist">
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-1)">
Tab #1 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-2)">
Tab #2 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-3)">
Tab #3 Lorem ipsum
</esl-tab>
</li>
</ul>
</esl-tabs>

<esl-panel-group class="esl-d-tab-group"
mode="tabs"
mode-cls-target="::parent">
<esl-panel class="esl-d-tab-panel tab-1" tabindex="0">
<div class="esl-d-tab-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <esl-note>I am note 1 from tabs</esl-note> incididunt ut labore aliqua. Donec massa sapien faucibus <esl-note>I am note 2 from tabs</esl-note> et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
</div>
</esl-panel>
<esl-panel open class="esl-d-tab-panel tab-2" tabindex="0">
<div class="esl-d-tab-body">
<p>Auctor neque vitae tempus quam. In mollis nunc sed id semper risus in hendrerit gravida. Nulla pharetra diam sit amet. Id neque aliquam vestibulum morbi blandit cursus risus at. Amet commodo nulla facilisi nullam vehicula. Magna ac placerat vestibulum lectus. Adipiscing at in tellus integer feugiat scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note>I am note 3 from tabs</esl-note> aliqua. Donec massa sapien faucibus et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus <esl-note>I am note 4 from tabs</esl-note> sit amet luctus venenatis lectus magna.</p>
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-3" tabindex="0">
<div class="esl-d-tab-body">
<p>Nam libero justo laoreet sit amet cursus. Nibh ipsum consequat nisl vel pretium. Elit sed vulputate mi sit amet. Urna condimentum mattis pellentesque id. Non nisi est sit amet facilisis magna etiam tempor. Arcu risus quis varius quam quisque. At auctor urna nunc id cursus metus aliquam eleifend. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Ultrices dui sapien eget mi proin sed libero. Quis risus sed vulputate odio ut enim. Morbi tristique senectus et netus. Tellus mauris a diam maecenas sed enim ut. Id leo in vitae turpis massa sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note>I am note 5 from tabs</esl-note> aliqua. Donec massa sapien faucibus <esl-note>I am note 6 from tabs</esl-note> et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
</div>
</esl-panel>
</esl-panel-group>
</div>

<esl-footnotes></esl-footnotes>
</section>

<h2>Text with notes which ignores on different breakpoints</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note ignore-footnotes="all">I am always ignored</esl-note> aliqua. Donec massa sapien faucibus <esl-note ignore-footnotes="not all">I am never ignored</esl-note> et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
<p>Arcu cursus vitae congue mauris. Orci a scelerisque purus semper eget duis at tellus at. Metus aliquam eleifend mi in. Vitae justo eget magna fermentum iaculis eu non. Iaculis nunc sed augue lacus viverra. Et netus et malesuada fames ac turpis. Sed vulputate mi sit amet mauris. Varius morbi enim nunc faucibus. At erat pellentesque adipiscing commodo elit at imperdiet. Feugiat pretium nibh ipsum consequat. Ipsum dolor sit amet consectetur. Id porta nibh venenatis cras sed felis. Nam aliquam sem et tortor consequat. Vestibulum sed arcu non odio euismod lacinia at quis risus. Augue ut lectus arcu bibendum at varius <esl-note ignore-footnotes="@-SM">I am ignored at a XS, SM breakpoint</esl-note> vel pharetra. Felis eget velit aliquet <esl-note ignore-footnotes="@+MD">I am ignored at a MD, LG, XL breakpoints</esl-note> sagittis id consectetur purus. At <esl-note ignore-footnotes="@XL">I am ignored at a XL breakpoint</esl-note> lectus urna duis <esl-note ignore-footnotes="@LG">I am ignored at a LG breakpoint</esl-note> convallis. Tempus quam pellentesque <esl-note ignore-footnotes="@MD">I am ignored at a MD breakpoint</esl-note> nec nam aliquam.</p>
<p>Bibendum <esl-note ignore-footnotes="@SM">I am ignored at a SM breakpoint</esl-note> neque egestas congue <esl-note ignore-footnotes="@XS">I am ignored at a XS breakpoint</esl-note> quisque egestas diam in arcu cursus. Enim tortor at auctor urna nunc id cursus metus. Et malesuada fames ac turpis. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Massa id neque aliquam vestibulum morbi. In mollis nunc sed id semper. Massa tincidunt dui ut ornare lectus sit amet est placerat. Nunc congue nisi vitae suscipit tellus mauris a. Lobortis scelerisque fermentum dui faucibus in ornare. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. A iaculis at erat pellentesque adipiscing commodo. Lacus laoreet non curabitur gravida arcu. Diam vel quam elementum pulvinar. Sed viverra tellus in hac habitasse. Id porta nibh venenatis cras sed felis. Enim blandit volutpat maecenas volutpat.</p>
<esl-footnotes></esl-footnotes>
</div>

<h2>Text with notes which ignores by group element at XS, SM breakpoint</h2>
<div>
<esl-note-group ignore-footnotes="@-SM">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note>I am note 1</esl-note> aliqua. Donec massa sapien faucibus <esl-note ignore-footnotes="not all">I am never ignored, but the group element changes behavior</esl-note> et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
</esl-note-group>
<esl-footnotes></esl-footnotes>
</div>

<h2>Text with stand-alone notes and ordinary notes</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note ignore-footnotes="all" html="I am stand-alone note" standalone-label="~">@</esl-note> aliqua. Donec massa sapien faucibus <esl-note>I am ordinary note</esl-note> et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
<esl-footnotes></esl-footnotes>
</div>

<h2>Text with stand-alone notes only (without footnotes)</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <esl-note ignore-footnotes="all" html="I am stand-alone note">@</esl-note> aliqua. Donec massa sapien faucibus <esl-note html="I am another stand-alone note">#</esl-note> et molestie ac. Mi sit amet mauris commodo quis imperdiet massa. Viverra nibh cras pulvinar mattis nunc sed blandit. In nisl nisi scelerisque eu. Vel turpis nunc eget lorem dolor sed. Nisl pretium fusce id velit. Quam id leo in vitae turpis massa sed. Mauris sit amet. Ut aliquam purus sit amet luctus venenatis lectus magna.</p>
</div>

</div>
</section>
4 changes: 2 additions & 2 deletions src/modules/esl-footnotes/core/esl-footnotes-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ function convertNotesToFootnotesList(notes: ESLNote[]): FootnotesItem[] {

/** Compile footnotes non-grouped list */
export function compileFootnotesNongroupedList(notes: ESLNote[]): FootnotesItem[] {
return convertNotesToFootnotesList(notes);
return convertNotesToFootnotesList(notes.filter((note) => note.allowFootnotes));
}

/** Compile footnotes grouped list */
export function compileFootnotesGroupedList(notes: ESLNote[]): FootnotesItem[] {
const map = new Map() ;
convertNotesToFootnotesList(notes).forEach((note) => {
convertNotesToFootnotesList(notes.filter((note) => note.allowFootnotes)).forEach((note) => {
const {index, renderedIndex, text} = note;
map.has(text) ? map.set(text, {
index: [...map.get(text).index, ...index],
Expand Down
Loading

0 comments on commit 9b8db3e

Please sign in to comment.