256 lines
8.0 KiB
JavaScript
Executable File
256 lines
8.0 KiB
JavaScript
Executable File
document.addEventListener('DOMContentLoaded', () => {
|
||
if (typeof window.BiggerPicture !== 'function') {
|
||
console.error('[gallery-init] BiggerPicture not found. Check script path.');
|
||
return;
|
||
}
|
||
|
||
// 1) Wrap Org-exported images so they’re clickable
|
||
const imgs = document.querySelectorAll('.figure img, img.org-svg');
|
||
imgs.forEach((img) => {
|
||
if (img.closest('a')) return; // already wrapped
|
||
const a = document.createElement('a');
|
||
const href = img.currentSrc || img.src;
|
||
a.href = href;
|
||
a.dataset.img = href; // lets BP pre-size/raster slides
|
||
a.dataset.alt = img.alt || '';
|
||
const setDims = () => {
|
||
a.dataset.width = img.naturalWidth || img.width || 1920;
|
||
a.dataset.height = img.naturalHeight || img.height || 1080;
|
||
};
|
||
if (img.complete) setDims(); else img.addEventListener('load', setDims);
|
||
img.style.cursor = 'zoom-in';
|
||
img.parentElement.insertBefore(a, img);
|
||
a.appendChild(img);
|
||
});
|
||
|
||
// 2) One global BP instance
|
||
const bp = BiggerPicture({ target: document.body });
|
||
|
||
// SVG pan/zoom handle
|
||
let activePanZoom = null;
|
||
const destroyPanZoom = () => { try { activePanZoom?.destroy(); } catch(_){} activePanZoom = null; };
|
||
|
||
// Simple rotate state (for non-SVG images)
|
||
let activeContainer = null;
|
||
let currentRotation = 0;
|
||
let rotateControls = null;
|
||
|
||
|
||
// 3) Build galleries per content container
|
||
const containers = document.querySelectorAll('main, article, .content, body');
|
||
containers.forEach((container) => {
|
||
const links = Array.from(container.querySelectorAll('.figure a, a:has(img.org-svg)'));
|
||
if (!links.length) return;
|
||
|
||
// Start the lightbox on click
|
||
links.forEach((link, index) => {
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
document.querySelectorAll(".theme-toggle").forEach(el => {
|
||
el.classList.add("hidden");
|
||
});
|
||
|
||
bp.open({
|
||
// IMPORTANT: pass the anchor ELEMENTS, not custom objects
|
||
items: links,
|
||
el: link,
|
||
caption: (el) => el.querySelector('img')?.alt || el.title || '',
|
||
maxZoom: 40, // for raster images (PNG/JPG); SVG handled separately
|
||
|
||
// Fade-out polish + cleanup
|
||
onClose(containerEl) {
|
||
destroyPanZoom();
|
||
teardownRotation();
|
||
if (containerEl) containerEl.classList.add('bp-fadeout');
|
||
const themeToggle = document.querySelector(".theme-toggle");
|
||
if (themeToggle) {
|
||
themeToggle.classList.remove("hidden");
|
||
}
|
||
},
|
||
|
||
// Called once after open and on every slide change
|
||
onOpen(containerEl) { setupRotation(containerEl); enhanceSVG(containerEl); },
|
||
onUpdate(containerEl){ setupRotation(containerEl); enhanceSVG(containerEl); }
|
||
});
|
||
});
|
||
});
|
||
});
|
||
|
||
// 4) Simple rotate buttons for raster images
|
||
function ensureRotateControls() {
|
||
if (rotateControls) return rotateControls;
|
||
|
||
const wrapper = document.createElement('div');
|
||
wrapper.className = 'bp-rotate-controls';
|
||
Object.assign(wrapper.style, {
|
||
position: 'fixed',
|
||
bottom: '1.5rem',
|
||
right: '1.5rem',
|
||
display: 'flex',
|
||
gap: '0.5rem',
|
||
zIndex: '9999',
|
||
pointerEvents: 'auto'
|
||
});
|
||
|
||
const mkBtn = (label, title) => {
|
||
const btn = document.createElement('button');
|
||
btn.type = 'button';
|
||
btn.textContent = label;
|
||
btn.title = title;
|
||
btn.setAttribute('aria-label', title);
|
||
Object.assign(btn.style, {
|
||
padding: '0.4rem 0.6rem',
|
||
borderRadius: '999px',
|
||
border: 'none',
|
||
fontSize: '1.2rem',
|
||
cursor: 'pointer',
|
||
background: 'rgba(30,30,30,0.8)',
|
||
color: '#fff'
|
||
});
|
||
return btn;
|
||
};
|
||
|
||
const left = mkBtn('⟲', 'Rotate image 90° left');
|
||
const right = mkBtn('⟳', 'Rotate image 90° right');
|
||
|
||
left.addEventListener('click', (e) => {
|
||
e.stopPropagation(); // don’t close the lightbox
|
||
if (!activeContainer) return;
|
||
currentRotation = (currentRotation - 90 + 360) % 360;
|
||
applyRotation();
|
||
});
|
||
|
||
right.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
if (!activeContainer) return;
|
||
currentRotation = (currentRotation + 90) % 360;
|
||
applyRotation();
|
||
});
|
||
|
||
wrapper.append(left, right);
|
||
document.body.appendChild(wrapper);
|
||
rotateControls = wrapper;
|
||
return rotateControls;
|
||
}
|
||
|
||
function ensureRotateWrapper() {
|
||
if (!activeContainer) return null;
|
||
|
||
const imgRoot = activeContainer.querySelector('.bp-img');
|
||
if (!imgRoot) return null;
|
||
|
||
let imgEl = imgRoot.querySelector('img');
|
||
if (!imgEl) return null;
|
||
|
||
const src = (imgEl.currentSrc || imgEl.src || '').toLowerCase();
|
||
// We only rotate raster images; SVGs are handled via svg-pan-zoom
|
||
if (src.endsWith('.svg')) return null;
|
||
|
||
let wrapper = imgRoot.querySelector('.bp-rotate-wrapper');
|
||
if (!wrapper) {
|
||
wrapper = document.createElement('div');
|
||
wrapper.className = 'bp-rotate-wrapper';
|
||
wrapper.style.display = 'inline-block';
|
||
wrapper.style.transformOrigin = 'center center';
|
||
|
||
imgRoot.appendChild(wrapper);
|
||
wrapper.appendChild(imgEl);
|
||
} else if (!wrapper.contains(imgEl)) {
|
||
// Slide changed and BiggerPicture replaced the <img>
|
||
wrapper.innerHTML = '';
|
||
wrapper.appendChild(imgEl);
|
||
}
|
||
|
||
return wrapper;
|
||
}
|
||
|
||
function applyRotation() {
|
||
const wrapper = ensureRotateWrapper();
|
||
if (!wrapper) return;
|
||
wrapper.style.transform = `rotate(${currentRotation}deg)`;
|
||
}
|
||
|
||
function setupRotation(containerEl) {
|
||
activeContainer = containerEl;
|
||
currentRotation = 0;
|
||
const controls = ensureRotateControls();
|
||
controls.style.display = 'flex';
|
||
applyRotation();
|
||
}
|
||
|
||
function teardownRotation() {
|
||
activeContainer = null;
|
||
currentRotation = 0;
|
||
if (rotateControls) {
|
||
rotateControls.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
|
||
// 4) If current slide is an SVG, swap to inline + enable svg-pan-zoom
|
||
async function enhanceSVG(containerEl) {
|
||
try {
|
||
destroyPanZoom();
|
||
|
||
const imgEl = containerEl.querySelector('.bp-img img');
|
||
if (!imgEl) return;
|
||
|
||
const src = imgEl.currentSrc || imgEl.src || '';
|
||
const isSVG = src.toLowerCase().endsWith('.svg');
|
||
const htmlLayer = containerEl.querySelector('.bp-html');
|
||
if (!isSVG || !htmlLayer) {
|
||
// ensure any previous holder is removed and bitmap is visible
|
||
const old = htmlLayer?.querySelector('.bp-svg-holder');
|
||
if (old) old.remove();
|
||
imgEl.style.visibility = '';
|
||
return;
|
||
}
|
||
|
||
// Create/clear holder
|
||
let holder = htmlLayer.querySelector('.bp-svg-holder');
|
||
if (!holder) {
|
||
holder = document.createElement('div');
|
||
holder.className = 'bp-svg-holder';
|
||
holder.style.maxWidth = '95vw';
|
||
holder.style.maxHeight = '95vh';
|
||
htmlLayer.appendChild(holder);
|
||
}
|
||
holder.innerHTML = '';
|
||
|
||
// Hide the bitmap so only the inline SVG shows
|
||
imgEl.style.visibility = 'hidden';
|
||
|
||
// Inline the SVG
|
||
const res = await fetch(src, { cache: 'force-cache' });
|
||
const text = await res.text();
|
||
holder.innerHTML = text;
|
||
|
||
const svg = holder.querySelector('svg');
|
||
if (!svg) { imgEl.style.visibility = ''; return; }
|
||
|
||
svg.style.maxWidth = '95vw';
|
||
svg.style.maxHeight = '95vh';
|
||
svg.style.display = 'block';
|
||
|
||
if (typeof window.svgPanZoom === 'function') {
|
||
activePanZoom = svgPanZoom(svg, {
|
||
zoomEnabled: true,
|
||
controlIconsEnabled: true,
|
||
fit: true,
|
||
center: true,
|
||
minZoom: 0.05,
|
||
maxZoom: 400, // effectively "unlimited"
|
||
zoomScaleSensitivity: 0.25,
|
||
dblClickZoomEnabled: true
|
||
});
|
||
// Keep wheel inside lightbox
|
||
holder.addEventListener('wheel', (e) => e.stopPropagation(), { passive: true });
|
||
} else {
|
||
console.warn('[gallery-init] svg-pan-zoom not loaded');
|
||
}
|
||
} catch (err) {
|
||
console.error('[gallery-init] SVG enhance failed:', err);
|
||
}
|
||
}
|
||
});
|