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

Added new files regarding airflow and fixed the png's not zooming in nested panes

Browse Source
This commit is contained in:
Zaine Arch
2025-12-29 18:47:48 +00:00
parent f217e8828f
commit 80101cd34b
16 changed files with 259 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
assets/scripts/gallery-init.js
View File

@@ -4,79 +4,66 @@ document.addEventListener('DOMContentLoaded', () => {
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);
});
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)'));
if (!links.length) return;
links.forEach((link) => {
if (link.dataset.bpBound) return;
link.dataset.bpBound = 'true';
link.addEventListener('click', (e) => {
e.preventDefault();
document.querySelectorAll(".theme-toggle").forEach(el => el.classList.add("hidden"));
bp.open({
items: links,
el: link,
caption: (el) => el.querySelector('img')?.alt || el.title || '',
maxZoom: 40,
onClose(containerEl) {
destroyPanZoom();
teardownRotation();
if (containerEl) containerEl.classList.add('bp-fadeout');
document.querySelectorAll(".theme-toggle").forEach(el => el.classList.remove("hidden"));
},
onOpen(containerEl) { setupRotation(containerEl); enhanceSVG(containerEl); },
onUpdate(containerEl){ setupRotation(containerEl); enhanceSVG(containerEl); }
});
});
});
});
}
// 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;
@@ -110,11 +97,11 @@ document.addEventListener('DOMContentLoaded', () => {
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(); // don’t close the lightbox
e.stopPropagation();
if (!activeContainer) return;
currentRotation = (currentRotation - 90 + 360) % 360;
applyRotation();
@@ -139,11 +126,10 @@ document.addEventListener('DOMContentLoaded', () => {
const imgRoot = activeContainer.querySelector('.bp-img');
if (!imgRoot) return null;
let imgEl = imgRoot.querySelector('img');
const 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');
@@ -156,7 +142,6 @@ document.addEventListener('DOMContentLoaded', () => {
imgRoot.appendChild(wrapper);
wrapper.appendChild(imgEl);
} else if (!wrapper.contains(imgEl)) {
// Slide changed and BiggerPicture replaced the <img>
wrapper.innerHTML = '';
wrapper.appendChild(imgEl);
}
@@ -181,13 +166,12 @@ document.addEventListener('DOMContentLoaded', () => {
function teardownRotation() {
activeContainer = null;
currentRotation = 0;
if (rotateControls) {
rotateControls.style.display = 'none';
}
if (rotateControls) rotateControls.style.display = 'none';
}
// 4) If current slide is an SVG, swap to inline + enable svg-pan-zoom
let activePanZoom = null;
const destroyPanZoom = () => { try { activePanZoom?.destroy(); } catch(_){} activePanZoom = null; };
async function enhanceSVG(containerEl) {
try {
destroyPanZoom();
@@ -199,14 +183,12 @@ document.addEventListener('DOMContentLoaded', () => {
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');
@@ -217,10 +199,8 @@ document.addEventListener('DOMContentLoaded', () => {
}
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;
@@ -228,9 +208,9 @@ document.addEventListener('DOMContentLoaded', () => {
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, {
@@ -239,11 +219,10 @@ document.addEventListener('DOMContentLoaded', () => {
fit: true,
center: true,
minZoom: 0.05,
maxZoom: 400, // effectively "unlimited"
maxZoom: 400,
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');
@@ -252,4 +231,27 @@ document.addEventListener('DOMContentLoaded', () => {
console.error('[gallery-init] SVG enhance failed:', err);
}
}
setupGalleries(document);
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);
}
}
});
dynamicObserver.observe(document.body, { childList: true, subtree: true });
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');
setupGalleries(document);
}
});
urlObserver.observe(document, { subtree: true, childList: true });
});