class Gallery {
|
constructor(modal, config) {
|
this.imageWrapper = config.imageWrapper??null;
|
this.container = config.container ? document.querySelector(config.container) : document.querySelector('main');
|
this.modal = new window.jvbModal(
|
modal,
|
{
|
onOpen: false,
|
onSave: false,
|
onClose: () => this.closeGallery(false)
|
}
|
);
|
this.items = this.getGalleryItems() || [];
|
this.loadMore = config.loadMore??false;
|
|
this.modalElement = (typeof modal === 'string') ? document.querySelector(modal)??false : modal;
|
if (!this.modal) {
|
return;
|
}
|
|
this.a11y = window.jvbA11y;
|
this.openWhenReady = false;
|
|
|
this.initElements();
|
this.imageWrapper = (typeof this.imageWrapper === 'string') ? this.imageWrapper : '.'+this.imageWrapper.classList.join('.');
|
|
this.index = 0;
|
this.swipe = {
|
touchStart: null,
|
touchEnd: null,
|
minSwipe: 50,
|
};
|
this.isLoading = false;
|
|
}
|
|
initElements() {
|
this.prevBtn = this.modalElement.querySelector('.prev');
|
this.nextBtn = this.modalElement.querySelector('.next');
|
this.favourite = this.modalElement.querySelector('.favourite');
|
this.image = this.modalElement.querySelector('.image');
|
this.counter = this.modalElement.querySelector('.counter');
|
this.extra = this.modalElement.querySelector('.item-info');
|
|
//If we don't have the wrapper set up, we can remove these elements
|
if (!this.imageWrapper) {
|
this.favourite.remove();
|
this.extra.remove();
|
}
|
}
|
|
getGalleryItems() {
|
let search = (this.imageWrapper) ? this.imageWrapper : 'img';
|
|
return Array.from(this.container.querySelectorAll(search))
|
.map(item => {
|
const img = (this.imageWrapper) ? item.querySelector('img') : item;
|
if (!img) return null;
|
|
return {
|
id: (this.imageWrapper) ? item.querySelector('button.favourite').dataset.id : '',
|
small: img.dataset.small || img.src,
|
large: img.dataset.large || img.src,
|
full: img.dataset.full || img.src,
|
alt: img.alt || '',
|
fav: (this.imageWrapper) ? item.querySelector('button.favourite')?.cloneNode(true) : '',
|
info: (this.imageWrapper) ? item.querySelector('.item-info')?.cloneNode(true) : ''
|
};
|
}).filter(Boolean);
|
}
|
|
initListeners() {
|
this.container.addEventListener('click', this.handleClick.bind(this));
|
document.addEventListener('keydown', this.handleKeys.bind(this));
|
document.addEventListener('touchstart', this.handleTouchStart.bind(this));
|
document.addEventListener('touchend', this.handleTouchEnd.bind(this));
|
document.addEventListener('touchmove', this.handleTouchMove.bind(this));
|
}
|
destroyListeners() {
|
this.container.removeEventListener('click', this.handleClick.bind(this));
|
document.removeEventListener('keydown', this.handleKeys.bind(this));
|
document.removeEventListener('touchstart', this.handleTouchStart.bind(this));
|
document.removeEventListener('touchend', this.handleTouchEnd.bind(this));
|
document.removeEventListener('touchmove', this.handleTouchMove.bind(this));
|
}
|
|
handleKeys(e) {
|
switch (e.key) {
|
case 'ArrowLeft':
|
this.navigate(-1);
|
break;
|
case 'ArrowRight':
|
this.navigate(1);
|
break;
|
}
|
}
|
|
handleTouchStart(e) {
|
this.swipe.touchStart = e.touches[0].clientX;
|
}
|
|
handleTouchMove(e) {
|
this.swipe.touchEnd = e.touches[0].clientX;
|
}
|
|
handleTouchEnd(e) {
|
if (!this.swipe.touchStart || !this.swipe.touchEnd) return;
|
const distance = this.swipe.touchStart - this.swipe.touchEnd;
|
const isLeftSwipe = distance > this.swipe.minSwipe;
|
const isRightSwipe = distance < -this.swipe.minSwipe;
|
|
if (isLeftSwipe) {
|
this.navigate(1);
|
} else if (isRightSwipe) {
|
this.navigate(-1);
|
}
|
this.swipe.touchStart = null;
|
this.swipe.touchEnd = null;
|
}
|
|
handleClick(e) {
|
//test if it's a link click, and the click has an image
|
if(window.targetCheck(e, '.feed-images')){
|
this.handleGalleryOpen(e);
|
}
|
|
if(window.targetCheck(e, '.nav')) {
|
if (window.targetCheck(e, '.next')) {
|
this.navigate(1);
|
} else {
|
this.navigate(-1);
|
}
|
}
|
if (window.targetCheck(e, 'button.cancel')) {
|
this.closeGallery();
|
}
|
}
|
|
async navigate(direction) {
|
let newIndex = this.index + direction;
|
|
//Check if out of bounds
|
if (newIndex <0 || newIndex >= this.items.length) {
|
this.a11y.announceNavigation(newIndex, this.items.length, direction < 0, direction > 0);
|
if (newIndex <0) {
|
newIndex = this.items.length - 1;
|
} else {
|
newIndex = 0;
|
}
|
}
|
|
//update index
|
this.index = newIndex;
|
|
this.updateDisplay();
|
this.preloadImages();
|
|
this.a11y.announceNavigation(this.index, this.items.length);
|
|
if (typeof this.loadMore === 'function' &&
|
direction > 0 &&
|
newIndex >= (this.items.length - 3)) {
|
if (window.feedBlock.hasMore) {
|
await this.loadMore();
|
this.updateGalleryItems(this.getGalleryItems());
|
}
|
}
|
}
|
|
updateGalleryItems(newItems) {
|
const currentItem = this.items[this.index];
|
|
this.items = newItems;
|
if (currentItem) {
|
const newIndex = this.items.findIndex(item =>
|
item.full === currentItem.full ||
|
item.large === currentItem.large
|
);
|
|
if (newIndex !== -1) {
|
this.index = newIndex;
|
}
|
}
|
|
this.updateNavigationButtons();
|
if(this.items.length > 0 && this.openWhenReady) {
|
let index = this.findIndex('id', this.openWhenReady);
|
this.openGallery(index);
|
}
|
}
|
preloadImages() {
|
[-1,0,1].forEach(offset => {
|
const index = this.index + offset;
|
if (index >=0 && index < this.items.length) {
|
const img = new Image();
|
const item = this.items[index];
|
if (window.innerWidth < 1000) {
|
img.src = item.large || item.src;
|
} else {
|
img.src = item.full || item.src;
|
}
|
}
|
});
|
}
|
|
updateDisplay() {
|
const item = this.items[this.index];
|
if (!item) return;
|
|
[
|
this.image.src,
|
this.image.alt,
|
this.counter.textContent
|
] = [
|
(window.innerWidth < 1000) ?
|
(item.large || item.src) :
|
(item.full || item.src),
|
item.alt || '',
|
`${this.index + 1} / ${this.items.length}`
|
];
|
if (this.imageWrapper) {
|
if (item.fav) {
|
window.removeChildren(this.favourite);
|
this.favourite.appendChild(item.fav.cloneNode(true));
|
}
|
if (item.info) {
|
window.removeChildren(this.extra);
|
this.extra.appendChild(item.info.cloneNode(true));
|
}
|
}
|
|
this.updateNavigationButtons();
|
}
|
|
updateNavigationButtons() {
|
this.prevBtn.classList.toggle('end', this.index > 0 ? '' : 'none');
|
this.nextBtn.classList.toggle('end', this.index < this.items.length -1 ? '' : 'none');
|
}
|
|
handleGalleryOpen(e) {
|
let item = (this.imageWrapper) ? e.target.closest(this.imageWrapper) : e.target.closest('img');
|
let key = (this.imageWrapper) ? 'id' : 'small';
|
let value = item.dataset[key];
|
|
let index = this.findIndex(key, value);
|
this.openGallery(index);
|
}
|
|
findIndex(property, value) {
|
return this.items.findIndex(obj => obj[property] === value);
|
}
|
|
openGallery(index) {
|
this.initListeners();
|
this.index = index;
|
this.modal.handleOpen();
|
this.updateDisplay();
|
this.preloadImages();
|
|
this.a11y.announce(`Image ${this.index + 1} of ${this.items.length}. Use arrow keys to navigate.`);
|
}
|
|
closeGallery(useModal = true) {
|
this.destroyListeners();
|
if (useModal) {
|
this.modal.handleClose();
|
}
|
}
|
}
|
|
window.jvbGallery = Gallery;
|
