zaine/org_roam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wave changes

Browse Source
This commit is contained in:
Zaine Arch
2026-03-27 15:39:35 +00:00
parent cb3e4c5809
commit bddb928ec2
253 changed files with 7056 additions and 1727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
assets/scripts/gallery-init.js Executable file → Normal file
View File

@@ -4,18 +4,33 @@ document.addEventListener('DOMContentLoaded', () => {
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');
const VIDEO_EXTENSIONS = ['mp4','webm','mov','m4v','ogv'];
function isVideo(href){
if(!href) return false;
href = href.toLowerCase();
return VIDEO_EXTENSIONS.some(ext => href.endsWith('.' + ext));
}
imgs.forEach((img) => {
if (img.closest('a')) return;
const a = document.createElement('a');
const href = img.currentSrc || img.src;
a.href = href;
@@ -23,10 +38,9 @@ document.addEventListener('DOMContentLoaded', () => {
a.dataset.alt = img.alt || '';
const setDims = () => {
a.dataset.width = img.naturalWidth || img.width || 1920;
a.dataset.height = img.naturalHeight || img.height || 1080;
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);
@@ -36,163 +50,153 @@ document.addEventListener('DOMContentLoaded', () => {
});
const containers = root.querySelectorAll('main, article, .content, body');
containers.forEach((container) => {
//const links = Array.from(container.querySelectorAll('.figure a, a:has(img.org-svg)'));
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"]'
'.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) => {
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="video/mp4">
</video>
`;
return;
}
setupRotation(containerEl);
enhanceSVG(containerEl);
}
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);
}
});
});
});
});
});
}
function setupVideo(root=document){
const links = root.querySelectorAll('a[href]');
links.forEach(link=>{
if(link.dataset.videoProcessed) return;
// 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 href = link.getAttribute("href");
if(!isVideo(href)) return;
const wrapper = document.createElement('div');
wrapper.className = 'video-container';
link.dataset.videoProcessed = "true";
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;';
const video = document.createElement("video");
video.controls = true;
video.preload = "metadata";
video.style.maxWidth = "100%";
video.style.borderRadius = "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 = "video/" + href.split('.').pop();
const source = document.createElement('source');
source.src = href;
source.type = mimeFromExt(href);
video.appendChild(source);
wrapper.appendChild(video);
video.appendChild(source);
link.parentNode.replaceChild(wrapper, link);
});
link.parentNode.replaceChild(video, 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) {
const audioLinks = root.querySelectorAll('a[href$=".mp3"]');
audioLinks.forEach((link) => {
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";
link.dataset.audioProcessed = 'true';
const src = link.href;
const wrapper = document.createElement("div");
wrapper.className = "audio-player";
const wrapper = document.createElement('div');
wrapper.className = 'audio-player';
const audio = document.createElement("audio");
const audio = document.createElement('audio');
audio.controls = true;
audio.preload = "metadata";
audio.src = src;
audio.preload = 'metadata';
audio.src = src;
const label = document.createElement("div");
label.className = "audio-label";
label.textContent = link.textContent || src.split("/").pop();
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;
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'
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.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'
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 left = mkBtn('⟲', 'Rotate image 90° left');
const right = mkBtn('⟳', 'Rotate image 90° right');
left.addEventListener('click', (e) => {
e.stopPropagation();
if (!activeContainer) return;
currentRotation = (currentRotation - 90 + 360) % 360;
applyRotation();
});
right.addEventListener('click', (e) => {
e.stopPropagation();
if (!activeContainer) return;
currentRotation = (currentRotation + 90) % 360;
applyRotation();
});
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;
@@ -201,44 +205,36 @@ function setupVideo(root=document){
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) return;
wrapper.style.transform = `rotate(${currentRotation}deg)`;
if (wrapper) wrapper.style.transform = `rotate(${currentRotation}deg)`;
}
function setupRotation(containerEl) {
activeContainer = containerEl;
currentRotation = 0;
const controls = ensureRotateControls();
controls.style.display = 'flex';
ensureRotateControls().style.display = 'flex';
applyRotation();
}
@@ -248,17 +244,16 @@ function setupVideo(root=document){
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 src = imgEl.currentSrc || imgEl.src || '';
const isSVG = src.toLowerCase().endsWith('.svg');
const htmlLayer = containerEl.querySelector('.bp-html');
if (!isSVG || !htmlLayer) {
@@ -267,42 +262,32 @@ function setupVideo(root=document){
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.maxWidth = '95vw';
holder.style.maxHeight = '95vh';
htmlLayer.appendChild(holder);
}
holder.innerHTML = '';
imgEl.style.visibility = 'hidden';
const res = await fetch(src, { cache: 'force-cache' });
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.maxWidth = '95vw';
svg.style.maxHeight = '95vh';
svg.style.display = 'block';
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,
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 });
holder.addEventListener('wheel', e => e.stopPropagation(), { passive: true });
} else {
console.warn('[gallery-init] svg-pan-zoom not loaded');
}
@@ -311,33 +296,41 @@ function setupVideo(root=document){
}
}
// ----- 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);
}
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 galleries');
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;
});