/*
|
SITE GALLERY MANAGER
|
Handles two main functions:
|
|
1. Responsive Images
|
- Automatically loads appropriate image sizes based on screen width
|
- Listens for resize events and updates images accordingly
|
- Uses data-small, data-medium, and data-full attributes on images
|
|
2. Gallery Management
|
- HTML Structure:
|
<a class="open-gallery" data-opens="gallery-id" data-focus="image-to-show">
|
<figure><img...></figure>
|
</a>
|
|
<dialog class="gallery" id="gallery-id">
|
- Main image display (.images with multiple <figure>s)
|
- Navigation bar on bottom (nav.thumbnails) with:
|
- Previous/Next buttons
|
- Thumbnail list (toggles with .open class)
|
- Expand button (toggles .expanded class)
|
- Visibility toggle (toggles .hide-info class)
|
- Close button
|
</dialog>
|
|
Key Features:
|
- Opens in modal dialog with keyboard navigation
|
- Manages thumbnail navigation state
|
- Handles responsive image loading
|
- Uses class-based state management (open, expanded, hide-info)
|
- All event handling through delegation
|
- Built on UIHandler base class for state management
|
|
State Management:
|
- Dialog: open/closed
|
- Thumbnails: collapsed/open/expanded
|
- Info panel: visible/hidden
|
- Active image: tracked with .focused class
|
*/
|
|
// Constants
|
const BREAKPOINTS = {
|
MOBILE: 500,
|
TABLET: 1024
|
};
|
|
const GALLERY_STATES = {
|
DIALOG: 'dialog',
|
THUMBNAILS: 'thumbnails',
|
OPTIONS: 'options'
|
};
|
|
// Utility functions
|
|
const getImageSize = (width, dataset) => {
|
if (width > BREAKPOINTS.TABLET) {
|
return (dataset.full) ? dataset.full : dataset.large;
|
}
|
if (width > BREAKPOINTS.MOBILE) return dataset.medium;
|
return dataset.small;
|
};
|
|
class MediaManager extends window.UIHandler {
|
constructor() {
|
super();
|
this.previousWidth = window.innerWidth;
|
|
// Bind methods that exist
|
this.handleResize = this.handleResize.bind(this);
|
this.debouncedResize = this.debounce(this.handleResize, 150);
|
|
// Initialize
|
this.bindElements();
|
this.initializeHandlers(this.defineHandlers());
|
this.bindComponentEvents();
|
this.bindEvents();
|
this.initialize();
|
|
// // Handle URL hash if it exists
|
// if (window.location.hash) {
|
// // Wait for DOM to be fully loaded
|
// if (document.readyState === 'loading') {
|
// document.addEventListener('DOMContentLoaded', () => this.handleUrlHash());
|
// } else {
|
// // DOM is already ready
|
// this.handleUrlHash();
|
// }
|
// }
|
}
|
|
handleUrlHash() {
|
const target = document.querySelector(window.location.hash);
|
if (target?.tagName === 'LI') {
|
const galleryTrigger = target.querySelector('.open-gallery');
|
if (galleryTrigger) {
|
this.openDialog(galleryTrigger);
|
}
|
}
|
}
|
|
handleResize() {
|
const currentWidth = window.innerWidth;
|
if (Math.abs(currentWidth - this.previousWidth) > 100) {
|
this.previousWidth = currentWidth;
|
this.handleImageResize();
|
}
|
}
|
|
async handleImageResize() {
|
const currentWidth = window.innerWidth;
|
const loadPromises = [];
|
|
// Handle all visible images
|
for (const img of this.elements.images) {
|
if (!img.closest('dialog')) {
|
const size = getImageSize(currentWidth, img.dataset);
|
if (size && img.src !== size) {
|
loadPromises.push(
|
new Promise((resolve) => {
|
const tempImg = new Image();
|
tempImg.onload = () => {
|
img.src = size;
|
resolve();
|
};
|
tempImg.onerror = () => {
|
console.error(`Failed to load image: ${size}`);
|
resolve();
|
};
|
tempImg.src = size;
|
})
|
);
|
}
|
}
|
}
|
|
// Handle current gallery image if gallery is open
|
const activeDialog = document.querySelector('dialog[open]');
|
if (activeDialog) {
|
const activeFigure = activeDialog.querySelector('.focused');
|
if (activeFigure) {
|
const img = activeFigure.querySelector('img');
|
if (img) {
|
const size = getImageSize(currentWidth, activeFigure.dataset);
|
if (size && img.src !== size) {
|
loadPromises.push(
|
new Promise((resolve) => {
|
const tempImg = new Image();
|
tempImg.onload = () => {
|
img.src = size;
|
resolve();
|
};
|
tempImg.onerror = () => {
|
console.error(`Failed to load image: ${size}`);
|
resolve();
|
};
|
tempImg.src = size;
|
})
|
);
|
}
|
}
|
}
|
}
|
|
// Wait for all images to load
|
await Promise.all(loadPromises);
|
}
|
// Initialization Methods
|
async initialize() {
|
try {
|
// Initialize image handling
|
if (this.elements.images.length > 0) {
|
this.initializeImageObserver();
|
window.addEventListener('resize', this.debouncedResize);
|
}
|
|
// Initialize gallery
|
this.initializeGalleryFromData();
|
} catch (error) {
|
console.error('Gallery initialization failed:', error);
|
this.handleInitializationError();
|
}
|
}
|
|
async initializeGalleryFromData() {
|
const galleryData = window.gallery?.images;
|
|
if (galleryData && galleryData !== 'false') {
|
try {
|
const parsedGallery = JSON.parse(galleryData);
|
if(parsedGallery && parsedGallery !== 'false'){
|
this.elements.mainContainer?.insertAdjacentHTML('beforeend', parsedGallery);
|
// Wait for DOM update
|
await new Promise(resolve => setTimeout(resolve, 0));
|
this.initializeGallery();
|
}
|
|
} catch (e) {
|
console.error('Failed to parse gallery data:', e);
|
throw e; // Propagate error to main initialize catch block
|
}
|
}
|
}
|
initializeGallery() {
|
// Bind gallery-specific elements and handlers after gallery is added to DOM
|
this.bindGalleryElements();
|
this.initializeHandlers(this.defineGalleryHandlers());
|
this.bindComponentEvents();
|
|
// Bind keyboard navigation to each dialog
|
this.elements.dialogs?.forEach(dialog => {
|
dialog.addEventListener('keydown', (e) => {
|
if (e.key === 'ArrowLeft') this.navigateImages(e, 'previous');
|
if (e.key === 'ArrowRight') this.navigateImages(e, 'next');
|
if (e.key === 'Escape') this.closeDialog(dialog);
|
});
|
});
|
}
|
bindElements() {
|
this.elements = {
|
images: document.querySelectorAll('img:not(.avatar)'),
|
mainContainer: document.querySelector('.wp-site-blocks'),
|
galleryTriggers: document.querySelectorAll('.open-gallery')
|
};
|
}
|
|
bindGalleryElements() {
|
// Clean up any existing handlers first
|
this.elements.dialogs?.forEach(dialog => {
|
dialog._removeKeydownListener?.();
|
dialog._removeTouchListeners?.();
|
});
|
|
// Update elements
|
Object.assign(this.elements, {
|
dialogs: document.querySelectorAll('dialog'),
|
galleryControls: document.querySelectorAll('dialog, .open-gallery, button, .thumbnails a')
|
});
|
}
|
|
// Event Handlers
|
defineHandlers() {
|
return {
|
galleryTriggers: {
|
click: (e) => {
|
e.preventDefault();
|
e.stopPropagation();
|
|
const link = e.target.closest('.open-gallery');
|
if (link) {
|
this.openDialog(link);
|
}
|
}
|
}
|
};
|
}
|
|
defineGalleryHandlers() {
|
return {
|
galleryControls: {
|
click: (e) => {
|
|
const termLink = e.target.closest('.term-list a');
|
if (termLink) {
|
// Allow term links to work normally
|
return true;
|
}
|
|
e.preventDefault();
|
e.stopPropagation();
|
|
const target = e.target.closest('button, a');
|
if (!target) return;
|
|
if (target.classList.contains('open-gallery')) {
|
this.openDialog(target);
|
} else if (target.classList.contains('close')) {
|
this.closeDialog(target.closest('dialog'));
|
} else if (target.classList.contains('visible')) {
|
this.handleVisibilityToggle(e);
|
} else if (target.classList.contains('open-thumbnails')) {
|
this.handleThumbnailControl(e, 'open');
|
} else if (target.classList.contains('expand')) {
|
this.handleThumbnailControl(e, 'expand');
|
} else if (target.classList.contains('previous')) {
|
this.navigateImages(e, 'previous');
|
} else if (target.classList.contains('next')) {
|
this.navigateImages(e, 'next');
|
} else if (target.closest('.thumbnails a')) {
|
this.handleThumbnailSelection(e);
|
}
|
}
|
}
|
};
|
}
|
|
handleVisibilityToggle(event) {
|
const button = event.target.closest('button');
|
const dialog = button.closest('dialog');
|
if (!dialog) return;
|
|
dialog.classList.toggle('hide-info');
|
const isVisible = !dialog.classList.contains('hide-info');
|
|
button.setAttribute('aria-expanded', isVisible.toString());
|
button.setAttribute('title', isVisible ? 'Hide Options' : 'Show Options');
|
button.setAttribute('aria-label', isVisible ? 'Hide Options' : 'Show Options');
|
}
|
|
// Image Handling
|
initializeImageObserver() {
|
const options = {
|
root: null,
|
rootMargin: '50px',
|
threshold: 0.1
|
};
|
|
const observer = new IntersectionObserver((entries) => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting) {
|
const img = entry.target;
|
if (!img.closest('dialog')) {
|
this.loadAppropriateImage(img);
|
observer.unobserve(img);
|
}
|
}
|
});
|
}, options);
|
|
this.elements.images.forEach(img => {
|
if (!img.closest('dialog')) {
|
observer.observe(img);
|
}
|
});
|
|
return observer;
|
}
|
|
loadAppropriateImage(img) {
|
const size = getImageSize(window.innerWidth, img.dataset);
|
|
if (!size) return;
|
|
img.classList.add('loading');
|
|
const tempImg = new Image();
|
|
tempImg.onload = () => {
|
img.src = size;
|
img.classList.remove('loading');
|
img.classList.add('loaded');
|
};
|
|
tempImg.onerror = () => {
|
console.error(`Failed to load image: ${size}`);
|
img.classList.remove('loading');
|
img.classList.add('error');
|
|
if (img.dataset.small && size !== img.dataset.small) {
|
this.loadAppropriateImage(img.dataset.small);
|
}
|
};
|
|
tempImg.src = size;
|
}
|
|
// Dialog Management
|
openDialog(trigger) {
|
const dialogId = trigger.dataset.opens;
|
const dialog = document.getElementById(dialogId);
|
if (!dialog) return;
|
|
// Save last focused element and show modal
|
this.lastFocusedElement = document.activeElement;
|
dialog.showModal();
|
|
// Set up focus trap and accessibility
|
this.setupFocusTrap(dialog);
|
dialog.setAttribute('role', 'dialog');
|
dialog.setAttribute('aria-modal', 'true');
|
dialog.setAttribute('aria-labelledby', 'gallery-title');
|
|
// Setup touch handling
|
this.setupTouchHandling(dialog);
|
|
// Update component state
|
this.setComponentState(GALLERY_STATES.DIALOG, true, {
|
element: dialog,
|
toggle: trigger,
|
focusElement: dialog.querySelector('button.close'),
|
ariaHidden: false,
|
cleanup: () => this.closeDialog(dialog)
|
});
|
|
// Focus initial image if specified
|
const focusId = trigger.dataset.focus || dialog.querySelector('.images figure')?.id;
|
if (focusId) {
|
this.updateImage(dialog.querySelector(`#${focusId}`));
|
}
|
}
|
|
setupFocusTrap(dialog) {
|
const focusableElements = dialog.querySelectorAll(
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
);
|
const firstFocusable = focusableElements[0];
|
const lastFocusable = focusableElements[focusableElements.length - 1];
|
|
const handleKeydown = (e) => {
|
if (e.key === 'Tab') {
|
if (e.shiftKey && document.activeElement === firstFocusable) {
|
lastFocusable.focus();
|
e.preventDefault();
|
} else if (!e.shiftKey && document.activeElement === lastFocusable) {
|
firstFocusable.focus();
|
e.preventDefault();
|
}
|
}
|
};
|
|
dialog.addEventListener('keydown', handleKeydown);
|
dialog._removeKeydownListener = () => {
|
dialog.removeEventListener('keydown', handleKeydown);
|
};
|
}
|
setupTouchHandling(dialog) {
|
let touchStartX = 0;
|
let touchStartY = 0;
|
|
const handleTouchStart = (e) => {
|
touchStartX = e.touches[0].clientX;
|
touchStartY = e.touches[0].clientY;
|
};
|
|
const handleTouchEnd = (e) => {
|
const diffX = e.changedTouches[0].clientX - touchStartX;
|
const diffY = e.changedTouches[0].clientY - touchStartY;
|
|
if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
|
this.navigateImages({target: dialog}, diffX < 0 ? 'next' : 'previous');
|
}
|
};
|
|
dialog.addEventListener('touchstart', handleTouchStart);
|
dialog.addEventListener('touchend', handleTouchEnd);
|
|
// Store cleanup function
|
dialog._removeTouchListeners = () => {
|
dialog.removeEventListener('touchstart', handleTouchStart);
|
dialog.removeEventListener('touchend', handleTouchEnd);
|
};
|
}
|
|
closeDialog(dialog) {
|
if (!dialog) return;
|
|
// Clean up event listeners
|
dialog._removeKeydownListener?.();
|
dialog._removeTouchListeners?.();
|
|
dialog.close();
|
|
// Restore focus
|
if (this.lastFocusedElement) {
|
this.lastFocusedElement.focus();
|
}
|
|
// Reset gallery states
|
const thumbnailsNav = dialog.querySelector('nav.thumbnails');
|
if (thumbnailsNav) {
|
thumbnailsNav.classList.remove('open', 'expanded');
|
this.setComponentState(GALLERY_STATES.THUMBNAILS, false, {
|
element: thumbnailsNav,
|
activeClass: 'open'
|
});
|
this.setComponentState(GALLERY_STATES.THUMBNAILS + '-expand', false, {
|
element: thumbnailsNav,
|
activeClass: 'expanded'
|
});
|
}
|
}
|
|
// Focus Management
|
trapFocus(dialog) {
|
const focusableElements = dialog.querySelectorAll(
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
);
|
this.dialogFocusableElements = {
|
first: focusableElements[0],
|
last: focusableElements[focusableElements.length - 1]
|
};
|
|
dialog.addEventListener('keydown', this.handleDialogKeydown);
|
}
|
|
handleDialogKeydown(e) {
|
if (e.key === 'Tab') {
|
const { first, last } = this.dialogFocusableElements;
|
if (e.shiftKey && document.activeElement === first) {
|
last.focus();
|
e.preventDefault();
|
} else if (!e.shiftKey && document.activeElement === last) {
|
first.focus();
|
e.preventDefault();
|
}
|
}
|
}
|
|
// Touch Handlers
|
handleTouchStart(e) {
|
this.touchStartX = e.touches[0].clientX;
|
this.touchStartY = e.touches[0].clientY;
|
}
|
|
handleTouchEnd(e) {
|
const diffX = e.changedTouches[0].clientX - this.touchStartX;
|
const diffY = e.changedTouches[0].clientY - this.touchStartY;
|
|
if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
|
this.navigateImages(e, diffX < 0 ? 'next' : 'previous');
|
}
|
}
|
|
// Image Navigation and Updates
|
updateImage(figure) {
|
if (!figure) return;
|
|
const dialog = figure.closest('dialog');
|
dialog.querySelector('.focused')?.classList.remove('focused');
|
figure.classList.add('focused');
|
|
const img = figure.querySelector('img');
|
|
if (img) {
|
const size = getImageSize(window.innerWidth, img.dataset);
|
if (size) {
|
this.loadAppropriateImage(img);
|
}
|
}
|
|
this.updateThumbnails(figure);
|
this.preloadAdjacentImages(figure);
|
}
|
|
preloadAdjacentImages(figure) {
|
const dialog = figure.closest('dialog');
|
if (!dialog) return;
|
|
const next = figure.nextElementSibling || dialog.querySelector('.images figure:first-child');
|
const prev = figure.previousElementSibling || dialog.querySelector('.images figure:last-child');
|
|
[next, prev].forEach(adjacentFigure => {
|
if (adjacentFigure) {
|
const img = adjacentFigure.querySelector('img');
|
if (img && !img.src) {
|
this.loadAppropriateImage(img);
|
}
|
}
|
});
|
}
|
|
navigateImages(event, direction) {
|
const dialog = event.target.closest('dialog');
|
if (!dialog) return;
|
|
const current = dialog.querySelector('.images .focused');
|
if (!current) return;
|
|
const next = direction === 'next'
|
? (current.nextElementSibling || dialog.querySelector('.images figure:first-child'))
|
: (current.previousElementSibling || dialog.querySelector('.images figure:last-child'));
|
|
if (next) {
|
this.updateImage(next);
|
}
|
}
|
|
// Thumbnail Management
|
updateThumbnails(figure) {
|
const thumbnailsNav = figure.closest('dialog')?.querySelector('nav.thumbnails .thumbnails');
|
if (!thumbnailsNav) return;
|
|
thumbnailsNav.querySelector('.focused')?.classList.remove('focused');
|
|
const thumbnail = thumbnailsNav.querySelector(`#for-${figure.id}`);
|
if (thumbnail) {
|
thumbnail.classList.add('focused');
|
thumbnail.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
|
}
|
}
|
|
handleThumbnailSelection(event) {
|
event.preventDefault();
|
const link = event.target.closest('a');
|
if (!link) return;
|
|
const figure = link.querySelector('figure');
|
if (!figure) return;
|
|
const targetId = figure.id.replace('for-', '');
|
const dialog = link.closest('dialog');
|
const targetFigure = dialog.querySelector(`#${targetId}`);
|
|
if (targetFigure) {
|
this.updateImage(targetFigure);
|
}
|
}
|
handleThumbnailControl(event, type) {
|
const button = event.target.closest('button');
|
const nav = button.closest('nav.thumbnails');
|
if (!nav) return;
|
|
if (type === 'open') {
|
nav.classList.toggle('open');
|
if (!nav.classList.contains('open')) {
|
nav.classList.remove('expanded');
|
const expandButton = nav.querySelector('button.expand');
|
if (expandButton) {
|
expandButton.setAttribute('aria-expanded', 'false');
|
expandButton.setAttribute('title', 'Expand Thumbnails');
|
expandButton.setAttribute('aria-label', 'Expand Thumbnails');
|
}
|
}
|
button.setAttribute('aria-expanded', nav.classList.contains('open'));
|
button.setAttribute('title', nav.classList.contains('open') ? 'Hide Thumbnails' : 'Show Thumbnails');
|
button.setAttribute('aria-label', nav.classList.contains('open') ? 'Hide Thumbnails' : 'Show Thumbnails');
|
} else if (type === 'expand') {
|
nav.classList.toggle('expanded');
|
button.setAttribute('aria-expanded', nav.classList.contains('expanded'));
|
button.setAttribute('title', nav.classList.contains('expanded') ? 'Condense Thumbnails' : 'Expand Thumbnails');
|
button.setAttribute('aria-label', nav.classList.contains('expanded') ? 'Condense Thumbnails' : 'Expand Thumbnails');
|
}
|
}
|
|
// Utility Methods
|
debounce(func, wait) {
|
let timeout;
|
return function executedFunction(...args) {
|
const later = () => {
|
clearTimeout(timeout);
|
func(...args);
|
};
|
clearTimeout(timeout);
|
timeout = setTimeout(later, wait);
|
};
|
}
|
|
handleInitializationError() {
|
const galleries = document.querySelectorAll('.open-gallery');
|
galleries.forEach(gallery => {
|
const img = gallery.querySelector('img');
|
if (img && img.dataset.full) {
|
gallery.href = img.dataset.full;
|
}
|
});
|
}
|
|
handleOutsideClick(event) {
|
if (this.isComponentActive(GALLERY_STATES.DIALOG)) {
|
const dialog = document.querySelector('dialog[open]');
|
if (dialog && !dialog.contains(event.target)) {
|
this.closeDialog(dialog);
|
}
|
}
|
}
|
|
handleEscapeKey(event) {
|
if (event.key === 'Escape' && this.isComponentActive(GALLERY_STATES.DIALOG)) {
|
const dialog = document.querySelector('dialog[open]');
|
if (dialog) {
|
this.closeDialog(dialog);
|
}
|
}
|
}
|
|
// Cleanup
|
cleanup() {
|
super.cleanup();
|
window.removeEventListener('resize', this.debouncedResize);
|
this.cleanupAllObservers();
|
|
// Dialog cleanup handled by individual dialog close
|
this.elements.dialogs?.forEach(dialog => {
|
dialog._removeKeydownListener?.();
|
dialog._removeTouchListeners?.();
|
});
|
}
|
}
|
|
|
// Initialize on DOM load
|
document.addEventListener('DOMContentLoaded', () => {
|
window.media = new MediaManager();
|
});
|
