337 lines
12 KiB
JavaScript
Executable File
337 lines
12 KiB
JavaScript
Executable File
document.addEventListener('DOMContentLoaded', () => {
|
|
if (typeof window.BiggerPicture !== 'function') {
|
|
console.error('[gallery-init] BiggerPicture not found. Check script path.');
|
|
return;
|
|
}
|
|
|
|
// --- Shared helpers for video detection + mime typing ---
|
|
const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'm4v', 'ogv'];
|
|
|
|
function isVideo(href) {
|
|
if (!href) return false;
|
|
const clean = String(href).toLowerCase().split('#')[0].split('?')[0];
|
|
return VIDEO_EXTENSIONS.some(ext => clean.endsWith('.' + ext));
|
|
}
|
|
|
|
function mimeFromExt(href) {
|
|
const ext = String(href).toLowerCase().split('#')[0].split('?')[0].split('.').pop();
|
|
switch (ext) {
|
|
case 'mp4': case 'm4v': return 'video/mp4';
|
|
case 'webm': return 'video/webm';
|
|
case 'ogv': return 'video/ogg';
|
|
case 'mov': return 'video/quicktime';
|
|
default: return 'video/*';
|
|
}
|
|
}
|
|
|
|
// -------------------------------------------------------
|
|
|
|
function setupGalleries(root = document) {
|
|
const imgs = root.querySelectorAll('.figure img, img.org-svg');
|
|
|
|
imgs.forEach((img) => {
|
|
if (img.closest('a')) return;
|
|
const a = document.createElement('a');
|
|
const href = img.currentSrc || img.src;
|
|
a.href = href;
|
|
a.dataset.img = href;
|
|
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);
|
|
});
|
|
|
|
const containers = root.querySelectorAll('main, article, .content, body');
|
|
containers.forEach((container) => {
|
|
const links = Array.from(container.querySelectorAll(
|
|
'.figure a, a:has(img.org-svg), a[href$=".mp4"], a[href$=".webm"], a[href$=".mov"], a[href$=".m4v"], a[href$=".ogv"]'
|
|
));
|
|
if (!links.length) return;
|
|
|
|
links.forEach((link) => {
|
|
if (link.dataset.bpBound) return;
|
|
link.dataset.bpBound = 'true';
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
bp.open({
|
|
items: links,
|
|
el: link,
|
|
caption: (el) => el.querySelector('img')?.alt || el.title || '',
|
|
maxZoom: 40,
|
|
onOpen(containerEl) {
|
|
const linkEl = bp.currItem;
|
|
const href = linkEl?.href || '';
|
|
if (isVideo(href)) {
|
|
teardownRotation();
|
|
const htmlLayer = containerEl.querySelector('.bp-html');
|
|
const imgLayer = containerEl.querySelector('.bp-img');
|
|
if (imgLayer) imgLayer.style.display = 'none';
|
|
htmlLayer.innerHTML = `
|
|
<video controls autoplay style="max-width:95vw; max-height:95vh">
|
|
<source src="${href}" type="${mimeFromExt(href)}">
|
|
</video>`;
|
|
return;
|
|
}
|
|
setupRotation(containerEl);
|
|
enhanceSVG(containerEl);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Replaces plain video links with inline <video> players
|
|
function setupVideo(root = document) {
|
|
// Links that point directly to video files
|
|
root.querySelectorAll('a[href]').forEach(link => {
|
|
if (link.dataset.videoProcessed) return;
|
|
const href = link.getAttribute('href');
|
|
if (!isVideo(href)) return;
|
|
link.dataset.videoProcessed = 'true';
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'video-container';
|
|
|
|
const video = document.createElement('video');
|
|
video.controls = true;
|
|
video.preload = 'metadata';
|
|
video.style.cssText = 'max-width:100%;width:100%;height:auto;display:block;border-radius:6px;';
|
|
|
|
// For .mov files: browsers (Chrome/Firefox) don't support QuickTime.
|
|
// Emit an MP4 source first (the converted sibling), then the original
|
|
// MOV as a last-resort fallback (Safari can play it).
|
|
const isMov = href.toLowerCase().split('?')[0].endsWith('.mov');
|
|
if (isMov) {
|
|
const mp4Href = href.replace(/\.mov$/i, '.mp4');
|
|
const mp4Source = document.createElement('source');
|
|
mp4Source.src = mp4Href;
|
|
mp4Source.type = 'video/mp4';
|
|
video.appendChild(mp4Source);
|
|
}
|
|
|
|
const source = document.createElement('source');
|
|
source.src = href;
|
|
source.type = mimeFromExt(href);
|
|
video.appendChild(source);
|
|
wrapper.appendChild(video);
|
|
|
|
link.parentNode.replaceChild(wrapper, link);
|
|
});
|
|
|
|
// Raw <video> elements not yet wrapped
|
|
root.querySelectorAll('video').forEach(video => {
|
|
video.controls = true;
|
|
video.style.cssText = 'max-width:100%;width:100%;height:auto;display:block;border-radius:6px;';
|
|
if (!video.closest('.video-container')) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'video-container';
|
|
video.parentNode.insertBefore(wrapper, video);
|
|
wrapper.appendChild(video);
|
|
}
|
|
if (!video.currentSrc) video.load();
|
|
});
|
|
}
|
|
|
|
// Replaces plain mp3 links with inline <audio> players
|
|
function setupAudio(root = document) {
|
|
root.querySelectorAll('a[href$=".mp3"], a[href$=".ogg"], a[href$=".flac"], a[href$=".wav"]').forEach(link => {
|
|
if (link.dataset.audioProcessed) return;
|
|
link.dataset.audioProcessed = 'true';
|
|
const src = link.href;
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'audio-player';
|
|
|
|
const audio = document.createElement('audio');
|
|
audio.controls = true;
|
|
audio.preload = 'metadata';
|
|
audio.src = src;
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'audio-label';
|
|
label.textContent = link.textContent || src.split('/').pop();
|
|
|
|
wrapper.appendChild(label);
|
|
wrapper.appendChild(audio);
|
|
link.replaceWith(wrapper);
|
|
});
|
|
}
|
|
|
|
// ----- BiggerPicture instance -----
|
|
const bp = BiggerPicture({ target: document.body });
|
|
|
|
// ----- Rotation helpers -----
|
|
let activeContainer = null;
|
|
let currentRotation = 0;
|
|
let rotateControls = null;
|
|
|
|
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(); if (activeContainer) { currentRotation = (currentRotation - 90 + 360) % 360; applyRotation(); } });
|
|
right.addEventListener('click', e => { e.stopPropagation(); if (activeContainer) { 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;
|
|
const imgEl = imgRoot.querySelector('img');
|
|
if (!imgEl) return null;
|
|
const src = (imgEl.currentSrc || imgEl.src || '').toLowerCase();
|
|
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)) {
|
|
wrapper.innerHTML = '';
|
|
wrapper.appendChild(imgEl);
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
function applyRotation() {
|
|
const wrapper = ensureRotateWrapper();
|
|
if (wrapper) wrapper.style.transform = `rotate(${currentRotation}deg)`;
|
|
}
|
|
|
|
function setupRotation(containerEl) {
|
|
activeContainer = containerEl;
|
|
currentRotation = 0;
|
|
ensureRotateControls().style.display = 'flex';
|
|
applyRotation();
|
|
}
|
|
|
|
function teardownRotation() {
|
|
activeContainer = null;
|
|
currentRotation = 0;
|
|
if (rotateControls) rotateControls.style.display = 'none';
|
|
}
|
|
|
|
// ----- SVG pan/zoom -----
|
|
let activePanZoom = null;
|
|
const destroyPanZoom = () => { try { activePanZoom?.destroy(); } catch(_){} activePanZoom = null; };
|
|
|
|
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) {
|
|
const old = htmlLayer?.querySelector('.bp-svg-holder');
|
|
if (old) old.remove();
|
|
imgEl.style.visibility = '';
|
|
return;
|
|
}
|
|
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 = '';
|
|
imgEl.style.visibility = 'hidden';
|
|
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, zoomScaleSensitivity: 0.25,
|
|
dblClickZoomEnabled: true
|
|
});
|
|
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);
|
|
}
|
|
}
|
|
|
|
// ----- Initial setup -----
|
|
setupGalleries(document);
|
|
setupAudio(document);
|
|
setupVideo(document);
|
|
|
|
// Observe dynamically added nodes
|
|
const dynamicObserver = new MutationObserver((mutations) => {
|
|
for (const m of mutations) {
|
|
for (const node of m.addedNodes) {
|
|
if (!(node instanceof HTMLElement)) continue;
|
|
if (node.querySelectorAll) {
|
|
setupGalleries(node);
|
|
setupAudio(node);
|
|
setupVideo(node);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
dynamicObserver.observe(document.body, { childList: true, subtree: true });
|
|
|
|
// Watch URL changes and re-init
|
|
let lastUrl = location.href;
|
|
const urlObserver = new MutationObserver(() => {
|
|
const currentUrl = location.href;
|
|
if (currentUrl !== lastUrl) {
|
|
lastUrl = currentUrl;
|
|
console.log('[gallery-init] URL changed → reinitializing');
|
|
setupGalleries(document);
|
|
setupAudio(document);
|
|
setupVideo(document);
|
|
}
|
|
});
|
|
urlObserver.observe(document, { subtree: true, childList: true });
|
|
|
|
// Expose helpers for tab-system.js
|
|
window._gallerySetupVideo = setupVideo;
|
|
window._gallerySetupAudio = setupAudio;
|
|
});
|