NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[IMP] odoo_theme: open images in a modal

Browse Source 
task-2358082

closes odoo/documentation#1687

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
Co-authored-by: Elisabeth Dickinson (edi) <edi@odoo.com>
This commit is contained in:
Antoine Vandevenne (anv)
2022-03-10 17:00:49 +00:00
parent 9e84b6f681
commit 2a867b4f60
4 changed files with 51 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extensions/odoo_theme/static/js/layout.js
+21 -1
View File
@@ -3,9 +3,29 @@
document.addEventListener('DOMContentLoaded', function () {
const content = document.getElementById('o_content');
// Enforce the presence of the `img-fluid` class on all images in the body.
let imageModalId = 0;
content.querySelectorAll('img').forEach(image => {
// Enforce the presence of the `img-fluid` class on all images.
image.classList.add('img-fluid');
// Add a modal to each image.
const modalContainer = document.createElement('div');
modalContainer.classList.add('o_image_modal');
modalContainer.innerHTML = `<div class="modal fade" id="modal-${imageModalId}">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<img src="${image.src}" alt="${image.alt}"/>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</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.