45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
/* ═══════════════════════════════════════════════
|
|
Image revealer — wraps every <img> inside a
|
|
.window-content with a click-to-reveal widget.
|
|
═══════════════════════════════════════════════ */
|
|
|
|
(function () {
|
|
"use strict";
|
|
|
|
function wrapImage(img) {
|
|
var alt = (img.getAttribute('alt') || '').trim() || 'image';
|
|
|
|
// Container
|
|
var revealer = document.createElement('div');
|
|
revealer.className = 'img-revealer';
|
|
|
|
// Header row: label + button
|
|
var header = document.createElement('div');
|
|
header.className = 'img-revealer-header';
|
|
|
|
var label = document.createElement('span');
|
|
label.className = 'img-revealer-label';
|
|
label.textContent = alt;
|
|
|
|
var btn = document.createElement('button');
|
|
btn.className = 'img-reveal-btn';
|
|
btn.textContent = 'reveal';
|
|
|
|
header.appendChild(label);
|
|
header.appendChild(btn);
|
|
revealer.appendChild(header);
|
|
|
|
// Move the img into the revealer, hidden by default
|
|
img.parentNode.insertBefore(revealer, img);
|
|
revealer.appendChild(img);
|
|
|
|
btn.addEventListener('click', function () {
|
|
var revealed = revealer.classList.toggle('revealed');
|
|
btn.textContent = revealed ? 'hide' : 'reveal';
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('.window-content img').forEach(wrapImage);
|
|
});
|
|
}());
|