35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
// Click-to-zoom for .diagram img elements
|
|
// Creates a fullscreen overlay with the diagram, click or Escape to close
|
|
(function () {
|
|
var overlay = document.createElement('div');
|
|
overlay.id = 'diagram-overlay';
|
|
overlay.style.cssText =
|
|
'display:none;position:fixed;top:0;left:0;width:100%;height:100%;' +
|
|
'background:rgba(0,0,0,0.9);z-index:9999;cursor:zoom-out;' +
|
|
'justify-content:center;align-items:center;padding:2em;';
|
|
|
|
var img = document.createElement('img');
|
|
img.style.cssText = 'max-width:95%;max-height:95%;object-fit:contain;';
|
|
overlay.appendChild(img);
|
|
|
|
document.body.appendChild(overlay);
|
|
|
|
overlay.addEventListener('click', function () {
|
|
overlay.style.display = 'none';
|
|
});
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape' && overlay.style.display === 'flex') {
|
|
overlay.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.diagram img').forEach(function (el) {
|
|
el.style.cursor = 'zoom-in';
|
|
el.addEventListener('click', function () {
|
|
img.src = el.src;
|
|
img.alt = el.alt;
|
|
overlay.style.display = 'flex';
|
|
});
|
|
});
|
|
})();
|