d287d0807a
Issue 1:
========
The toctrees in the documentation are visually inconsistent because of
the content. Sometimes we have titles that are also links and visually
collides with the rest of the toc making it hard to read. This applies
to toctree-l1 and toctree-l2.
Fix 1:
========
When we have a link and title toctree-l2 in a list containing other
nested toc, we apply another styling displaying it with the same color
as a title, but with an icon and hover behavior indicating that it is a
link. (This commit also changes the direction of the i-link icon to make
it standard).
Issue 2:
========
When we have only have toctree-l1 links without nested toc the toctree
is uselessly taking a lot of space.
Fix: 2
========
In these scenario we add a class to the toctree wrapper to replace the
toctree-l1 style with a toctree-l2.
task-3138525
task-3138563
part of
task-3059178
closes odoo/documentation#6502
X-original-commit: c62bf21987
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
59 lines
2.7 KiB
JavaScript
59 lines
2.7 KiB
JavaScript
(function ($) {
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const content = document.getElementById('o_content');
|
|
|
|
let imageModalId = 0;
|
|
content.querySelectorAll('img').forEach(image => {
|
|
// Enforce the presence of the `img-fluid` class on all images.
|
|
image.classList.add('img-fluid', 'img-thumbnail');
|
|
|
|
// Add a modal to each image that does not explicitly block it and has no target.
|
|
if (!image.classList.contains('o-no-modal') && image.parentElement.tagName !== 'A') {
|
|
const modalContainer = document.createElement('div');
|
|
modalContainer.innerHTML = `<div class="modal fade" id="modal-${imageModalId}">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img src="${image.src}" alt="${image.alt}" class="o-no-modal img-fluid img-thumbnail"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
image.parentNode.append(modalContainer);
|
|
image.setAttribute('data-bs-toggle', 'modal');
|
|
image.setAttribute('data-bs-target', `#modal-${imageModalId}`);
|
|
imageModalId++;
|
|
}
|
|
});
|
|
|
|
// Make all external links open in a new tab by default.
|
|
content.querySelectorAll('a.external').forEach(externalLink => {
|
|
externalLink.setAttribute('target', '_blank');
|
|
});
|
|
|
|
let canAccessAllL1Toctrees = true; // Whether all direct children have a ref.
|
|
const toctreeWrapper = document.querySelector('.toctree-wrapper');
|
|
toctreeWrapper?.querySelectorAll('.toctree-l1').forEach(l1Toctree => {
|
|
// Flag L2 toctrees that have L3 children.
|
|
if (l1Toctree.querySelector('.toctree-l3')) {
|
|
l1Toctree.querySelectorAll('.toctree-l2').forEach (l2Toctree => {
|
|
l2Toctree.classList.add('o_toc_contains_l3');
|
|
});
|
|
}
|
|
if (l1Toctree.querySelector('a').getAttribute('href') === '#') {
|
|
canAccessAllL1Toctrees = false;
|
|
}
|
|
});
|
|
if (canAccessAllL1Toctrees) {
|
|
// Use the style of L2 toctrees on L1 toctrees.
|
|
toctreeWrapper?.classList.add('o_toc_l1_to_l2');
|
|
}
|
|
});
|
|
|
|
})();
|