Skip to content

Commit

Permalink
Merge branch 'ref-figure' into 'main'
Browse files Browse the repository at this point in the history 
Reference figure instead of figcaption

See merge request reportcreator/reportcreator!452
  • Loading branch information
@MWedl
MWedl committed Feb 14, 2024
2 parents b3f9f98 + 81f05db commit 1267bbf
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 27 deletions.
4 changes: 2 additions & 2 deletions api/src/reportcreator_api/tasks/rendering/global_assets/base-ref.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@ h6.numbered {


/* Increment figure counter */
figcaption {
figure:has(figcaption) {
counter-increment: figure-counter;
}

/* Increment table counter */
caption {
table:has(caption) {
counter-increment: table-counter;
}

Expand Down
24 changes: 12 additions & 12 deletions api/src/reportcreator_api/tests/test_rendering.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,13 +181,13 @@ def test_comma_and_join(self, props, items, html):
('<ref to="h1-numbered-appendix" />', '<a href="#h1-numbered-appendix" class="ref ref-heading ref-appendix ref-appendix-level1"><span class="ref-title">H1 appendix</span></a>'),
('<ref to="h1.1-numbered-appendix" />', '<a href="#h1.1-numbered-appendix" class="ref ref-heading ref-appendix ref-appendix-level2"><span class="ref-title">H1.1 appendix</span></a>'),
('<ref to="h1-numbered">title</ref>', '<a href="#h1-numbered" class="ref"><span class="ref-title">title</span></a>'),
('<ref to="fig1" />', '<a href="#fig1-caption" class="ref ref-figure"><span class="ref-title">caption1</span></a>'),
('<ref to="fig2-img" />', '<a href="#fig2-caption" class="ref ref-figure"><span class="ref-title">caption2</span></a>'),
('<ref to="fig3-caption" />', '<a href="#fig3-caption" class="ref ref-figure"><span class="ref-title">caption3</span></a>'),
('<ref to="fig1">title</ref>', '<a href="#fig1-caption" class="ref"><span class="ref-title">title</span></a>'),
('<ref to="table1" />', '<a href="#table1-caption" class="ref ref-table"><span class="ref-title">caption1</span></a>'),
('<ref to="table2-caption" />', '<a href="#table2-caption" class="ref ref-table"><span class="ref-title">caption2</span></a>'),
('<ref to="table1">title</ref>', '<a href="#table1-caption" class="ref"><span class="ref-title">title</span></a>'),
('<ref to="fig1" />', '<a href="#fig1" class="ref ref-figure"><span class="ref-title">caption1</span></a>'),
('<ref to="fig2-img" />', '<a href="#fig2" class="ref ref-figure"><span class="ref-title">caption2</span></a>'),
('<ref to="fig3-caption" />', '<a href="#fig3" class="ref ref-figure"><span class="ref-title">caption3</span></a>'),
('<ref to="fig1">title</ref>', '<a href="#fig1" class="ref"><span class="ref-title">title</span></a>'),
('<ref to="table1" />', '<a href="#table1" class="ref ref-table"><span class="ref-title">caption1</span></a>'),
('<ref to="table2-caption" />', '<a href="#table2" class="ref ref-table"><span class="ref-title">caption2</span></a>'),
('<ref to="table1">title</ref>', '<a href="#table1" class="ref"><span class="ref-title">title</span></a>'),
('<ref to="other">title</ref>', '<a href="#other" class="ref"><span class="ref-title">title</span></a>'),
])
def test_ref_rendering(self, template, expected):
Expand Down Expand Up @@ -262,9 +262,9 @@ def test_lof_rendering(self):
</ul>
</section>
</list-of-figures>
<figure><img src="/assets/name/image.png" /><figcaption id="fig1">caption1</figcaption></figure>
<figure><img src="/assets/name/image.png" /><figcaption id="fig2">caption2</figcaption></figure>
<figure><img src="/assets/name/image.png" /><figcaption id="fig3">caption3</figcaption></figure>
<figure id="fig1"><img src="/assets/name/image.png" /><figcaption>caption1</figcaption></figure>
<figure id="fig2"><img src="/assets/name/image.png" /><figcaption>caption2</figcaption></figure>
<figure id="fig3"><img src="/assets/name/image.png" /><figcaption>caption3</figcaption></figure>
""")
assertHTMLEqual(self.extract_html_part(html, '<ul>', '</ul>'), """
<ul>
Expand All @@ -286,8 +286,8 @@ def test_lot_rendering(self):
</ul>
</section>
</list-of-tables>
<table><caption id="table1">caption1</caption></table>
<table><caption id="table2">caption2</caption></table>
<table id="table1"><caption>caption1</caption></table>
<table id="table2"><caption>caption2</caption></table>
""")
assertHTMLEqual(self.extract_html_part(html, '<ul>', '</ul>'), """
<ul>
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/designer/figures.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ html {
counter-reset: figure-counter;
}

figcaption::before {
figure:has(figcaption) {
counter-increment: figure-counter;
content: "Figure " counter(figure-counter) ": ";
}
Expand Down
6 changes: 4 additions & 2 deletions docs/docs/designer/tables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,11 @@ html {
counter-reset: table-counter;
}

table caption::before {
table:has(caption) {
counter-increment: table-counter;
content: "Table " counter(table-counter) ": ";
}
caption::before {
content: "Table " counter(table-counter) " - ";
}
```

Expand Down
59 changes: 49 additions & 10 deletions rendering/src/components/Ref.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
<a :href="'#' + (refEl?.id || toId)" :class="refClasses">
<span class="ref-title">
<slot name="default">
<template v-if="refEl && !error">
{{ refEl.getAttribute('data-toc-title') || refEl.textContent }}
</template>
<template v-if="refTitle">{{ refTitle }}</template>
</slot>
</span>
</a>
Expand Down Expand Up @@ -48,14 +46,33 @@ const refClasses = computed(() => {
} else {
out.push('ref-heading');
}
} else if (refEl.value.tagName === 'FIGCAPTION') {
} else if (['FIGCAPTION', 'FIGURE'].includes(refEl.value.tagName)) {
out.push('ref-figure');
} else if (refEl.value.tagName === 'CAPTION') {
} else if (['CAPTION', 'TABLE'].includes(refEl.value.tagName)) {
out.push('ref-table');
}
}
return out;
});
const refTitle = computed(() => {
if (slots.default || !refEl.value || error.value) {
return null;
}
const titleAttr = refEl.value.getAttribute('data-toc-title');
if (titleAttr) {
return titleAttr
}
let titleEl = refEl.value;
if (titleEl.tagName === 'FIGURE') {
titleEl = titleEl.querySelector('figcaption');
} else if (titleEl.tagName === 'TABLE') {
titleEl = titleEl.querySelector('caption');
}
return titleEl.textContent;
});
function updateReference() {
Expand Down Expand Up @@ -89,8 +106,19 @@ function updateReference() {
return;
}
}
if (refEl.value.tagName === 'FIGCAPTION' && !refEl.value.id) {
refEl.value.setAttribute('id', uuidv4());
if (refEl.value.tagName === 'FIGCAPTION') {
// If possible, reference the figure instead of the caption
const figureEl = refEl.value.closest('figure');
if (figureEl) {
if (!figureEl.id) {
figureEl.setAttribute('id', uuidv4());
}
refEl.value = figureEl;
} else {
if (!refEl.value.id) {
refEl.value.setAttribute('id', uuidv4());
}
}
}
// Check table reference
Expand All @@ -104,12 +132,23 @@ function updateReference() {
return;
}
}
if (refEl.value.tagName === 'CAPTION' && !refEl.value.id) {
refEl.value.setAttribute('id', uuidv4());
if (refEl.value.tagName === 'CAPTION') {
// If possible, reference the table instead of the caption
const tableEl = refEl.value.closest('table');
if (tableEl) {
if (!tableEl.id) {
tableEl.setAttribute('id', uuidv4());
}
refEl.value = tableEl;
} else {
if (!refEl.value.id) {
refEl.value.setAttribute('id', uuidv4());
}
}
}
// Check heading reference
const tagNames = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'FIGCAPTION', 'CAPTION'];
const tagNames = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'FIGURE', 'FIGCAPTION', 'TABLE', 'CAPTION'];
if (!tagNames.map(t => t.toUpperCase()).includes(refEl.value.tagName) && !slots.default) {
error.value = {
message: 'Invalid reference',
Expand Down

0 comments on commit 1267bbf

Please sign in to comment.