Refresh lightbox album when getting new feed
This commit is contained in:
+98
-77
@@ -55,51 +55,51 @@ export default class Lightbox {
|
||||
}
|
||||
|
||||
onBodyClick(event) {
|
||||
const link = event.target.closest('a[rel^="lightbox"], area[rel^="lightbox"], a[data-lightbox], area[data-lightbox]');
|
||||
const link = event.target.closest('a[data-lightbox], area[data-lightbox]');
|
||||
if (!link) return;
|
||||
event.preventDefault();
|
||||
this.start(link);
|
||||
}
|
||||
|
||||
renderIcon(name) {
|
||||
return icon(getIcon(name), {classes: ['spot-icon', name]}).html;
|
||||
renderIcon(name, sClass=null) {
|
||||
return icon(getIcon(name), {classes: ['spot-icon', name, sClass]}).html;
|
||||
}
|
||||
|
||||
build() {
|
||||
if (!document.getElementById('lightbox')) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = `
|
||||
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>
|
||||
<div id="lightbox" tabindex="-1" class="lightbox">
|
||||
<div class="lb-outerContainer">
|
||||
<div class="lb-container">
|
||||
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
|
||||
<video class="lb-video" controls autoplay></video>
|
||||
<div class="lb-nav">
|
||||
<div class="lb-prev-area">
|
||||
<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
|
||||
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>
|
||||
<div id="lightbox" tabindex="-1" class="lightbox">
|
||||
<div class="lb-outerContainer">
|
||||
<div class="lb-container">
|
||||
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
|
||||
<video class="lb-video" controls autoplay></video>
|
||||
<div class="lb-nav">
|
||||
<div class="lb-prev-area">
|
||||
<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
|
||||
</div>
|
||||
<div class="lb-next-area">
|
||||
<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lb-next-area">
|
||||
<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
|
||||
<div class="lb-loader">
|
||||
<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lb-loader">
|
||||
<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
|
||||
<div class="lb-dataContainer desktop">
|
||||
<div class="lb-data">
|
||||
<div class="lb-details">
|
||||
<span class="lb-caption"></span>
|
||||
</div>
|
||||
<div class="lb-closeContainer">
|
||||
<a class="lb-close" href="#" role="button">${this.renderIcon('close', 'fa-lg')}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lb-dataContainer desktop">
|
||||
<div class="lb-data">
|
||||
<div class="lb-details">
|
||||
<span class="lb-caption"></span>
|
||||
</div>
|
||||
<div class="lb-closeContainer">
|
||||
<a class="lb-close" href="#" role="button">${this.renderIcon('close')}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
document.body.append(...wrapper.children);
|
||||
}
|
||||
|
||||
@@ -179,22 +179,11 @@ export default class Lightbox {
|
||||
let imageNumber = 0;
|
||||
const setName = link.getAttribute('data-lightbox');
|
||||
|
||||
if (setName) {
|
||||
const links = [...document.querySelectorAll(`${link.tagName}[data-lightbox="${CSS.escape(setName)}"]`)];
|
||||
links.forEach((item, index) => {
|
||||
this.addToAlbum(item);
|
||||
if (item === link) imageNumber = index;
|
||||
});
|
||||
} else if (link.getAttribute('rel') === 'lightbox') {
|
||||
this.addToAlbum(link);
|
||||
} else {
|
||||
const rel = link.getAttribute('rel');
|
||||
const links = [...document.querySelectorAll(`${link.tagName}[rel="${CSS.escape(rel)}"]`)];
|
||||
links.forEach((item, index) => {
|
||||
this.addToAlbum(item);
|
||||
if (item === link) imageNumber = index;
|
||||
});
|
||||
}
|
||||
const links = [...document.querySelectorAll(`${link.tagName}[data-lightbox="${CSS.escape(setName)}"]`)];
|
||||
links.forEach((item, index) => {
|
||||
this.addToAlbum(item);
|
||||
if (item === link) imageNumber = index;
|
||||
});
|
||||
|
||||
this.fade(this.overlay, true, this.options.fadeDuration);
|
||||
this.fade(this.lightbox, true, this.options.fadeDuration);
|
||||
@@ -216,34 +205,64 @@ export default class Lightbox {
|
||||
id: link.getAttribute('data-id'),
|
||||
width: parseInt(img?.getAttribute('width') || '0', 10),
|
||||
height: parseInt(img?.getAttribute('height') || '0', 10),
|
||||
set: link.getAttribute('data-lightbox') || link.getAttribute('rel') || ''
|
||||
set: link.getAttribute('data-lightbox') || ''
|
||||
});
|
||||
}
|
||||
|
||||
hasMediaAfterCurrent() {
|
||||
return this.currentImageIndex < this.album.length - 1;
|
||||
}
|
||||
|
||||
refreshAlbum() {
|
||||
const current = this.album[this.currentImageIndex];
|
||||
if (!current?.set) return;
|
||||
|
||||
const links = [...document.querySelectorAll(`a[data-lightbox="${CSS.escape(current.set)}"], area[data-lightbox="${CSS.escape(current.set)}"]`)];
|
||||
if (!links.length) return;
|
||||
|
||||
const existingKeys = new Set(this.album.map((media) => this.getMediaKey(media)));
|
||||
links.forEach((link) => {
|
||||
const key = this.getLinkMediaKey(link);
|
||||
if (existingKeys.has(key)) return;
|
||||
|
||||
this.addToAlbum(link);
|
||||
existingKeys.add(key);
|
||||
});
|
||||
|
||||
this.updateNav();
|
||||
}
|
||||
|
||||
getMediaKey(media) {
|
||||
return `${media.set}:${media.id}`;
|
||||
}
|
||||
|
||||
getLinkMediaKey(link) {
|
||||
return `${link.getAttribute('data-lightbox') || ''}:${link.getAttribute('data-id')}`;
|
||||
}
|
||||
|
||||
getMaxSizes(mediaWidth, mediaHeight, mediaType) {
|
||||
let maxWidth = window.innerWidth - this.containerPadding.left - this.containerPadding.right;
|
||||
let maxHeight = window.innerHeight - this.containerPadding.top - this.containerPadding.bottom - this.options.positionFromTop;
|
||||
const border = mediaType === 'image' ? this.imageBorderWidth : this.videoBorderWidth;
|
||||
maxWidth -= border.left + border.right;
|
||||
maxHeight -= border.top + border.bottom;
|
||||
maxHeight -= this.getDataContainerHeight(maxWidth + this.containerPadding.left + this.containerPadding.right + border.left + border.right);
|
||||
|
||||
const dataMaxWidth = this.dataContainer.offsetWidth || 0;
|
||||
const dataMaxHeight = this.dataContainer.offsetHeight || 0;
|
||||
const ratio = mediaWidth / mediaHeight;
|
||||
return {
|
||||
maxWidth: Math.max(maxWidth, 1),
|
||||
maxHeight: Math.max(maxHeight, 1)
|
||||
};
|
||||
}
|
||||
|
||||
const heightH = Math.min(maxHeight, mediaHeight);
|
||||
const widthH = Math.min(heightH * ratio, maxWidth - dataMaxWidth);
|
||||
const surfaceH = Math.min(heightH, widthH / ratio) * widthH;
|
||||
getDataContainerHeight(width = null) {
|
||||
if (!this.dataContainer) return 0;
|
||||
|
||||
const widthV = Math.min(maxWidth, mediaWidth);
|
||||
const heightV = Math.min(widthV / ratio, maxHeight - dataMaxHeight);
|
||||
const surfaceV = Math.min(widthV, heightV * ratio) * heightV;
|
||||
const currentWidth = this.dataContainer.style.width;
|
||||
if (width !== null) this.dataContainer.style.width = `${width}px`;
|
||||
const height = Math.ceil(this.dataContainer.getBoundingClientRect().height || this.dataContainer.offsetHeight || 0);
|
||||
this.dataContainer.style.width = currentWidth;
|
||||
|
||||
const direction = surfaceV > surfaceH ? 'vertical' : 'horizontal';
|
||||
if (direction === 'vertical') maxHeight -= dataMaxHeight;
|
||||
else maxWidth -= dataMaxWidth;
|
||||
|
||||
return { maxWidth, maxHeight, direction };
|
||||
return height;
|
||||
}
|
||||
|
||||
updateSize(index) {
|
||||
@@ -252,9 +271,6 @@ export default class Lightbox {
|
||||
let maxWidth = maxSizes.maxWidth;
|
||||
let maxHeight = maxSizes.maxHeight;
|
||||
|
||||
this.lightbox.classList.remove('vertical', 'horizontal');
|
||||
this.lightbox.classList.add(maxSizes.direction);
|
||||
|
||||
if (this.options.fitImagesInViewport) {
|
||||
if (this.options.maxWidth && this.options.maxWidth < maxWidth) maxWidth = this.options.maxWidth;
|
||||
if (this.options.maxHeight && this.options.maxHeight < maxHeight) maxHeight = this.options.maxHeight;
|
||||
@@ -288,15 +304,16 @@ export default class Lightbox {
|
||||
const media = this.album[index];
|
||||
if (!media) return;
|
||||
|
||||
this.updateDetails(media, false);
|
||||
this.hideElements([this.dataContainer]);
|
||||
this.disableKeyboardNav();
|
||||
this.fade(this.overlay, true, this.options.fadeDuration);
|
||||
this.fade(this.loader, true, 200);
|
||||
this.hideElements([this.image, this.video, this.nav, this.prev, this.next, this.caption, this.closeButton]);
|
||||
this.hideElements([this.image, this.video, this.nav, this.prev, this.next]);
|
||||
this.resetImageTransform();
|
||||
this.dataContainer.style.width = '200px';
|
||||
this.dataContainer.style.height = '35px';
|
||||
this.outerContainer.classList.add('animating');
|
||||
this.container.classList.remove('moveable', 'moving', 'lb-video-nav');
|
||||
this.currentImageIndex = index;
|
||||
|
||||
this.options.onMediaChange(media);
|
||||
|
||||
@@ -329,8 +346,6 @@ export default class Lightbox {
|
||||
};
|
||||
this.image.src = media.link;
|
||||
}
|
||||
|
||||
this.currentImageIndex = index;
|
||||
}
|
||||
|
||||
sizeOverlay() {
|
||||
@@ -349,15 +364,14 @@ export default class Lightbox {
|
||||
const border = mediaType === 'image' ? this.imageBorderWidth : this.videoBorderWidth;
|
||||
const newWidth = width + this.containerPadding.left + this.containerPadding.right + border.left + border.right;
|
||||
const newHeight = height + this.containerPadding.top + this.containerPadding.bottom + border.top + border.bottom;
|
||||
const dataHeight = this.getDataContainerHeight(newWidth);
|
||||
|
||||
this.outerContainer.style.transition = `width ${this.options.resizeDuration}ms, height ${this.options.resizeDuration}ms`;
|
||||
this.outerContainer.style.width = `${newWidth}px`;
|
||||
this.outerContainer.style.height = `${newHeight}px`;
|
||||
this.outerContainer.style.height = `${newHeight + dataHeight}px`;
|
||||
this.container.style.height = `${newHeight}px`;
|
||||
|
||||
window.setTimeout(() => {
|
||||
if (this.lightbox.classList.contains('vertical')) this.dataContainer.style.width = `${newWidth}px`;
|
||||
else this.dataContainer.style.height = `${newHeight}px`;
|
||||
|
||||
this.overlay.focus();
|
||||
this.showImage();
|
||||
this.outerContainer.style.transition = '';
|
||||
@@ -400,22 +414,29 @@ export default class Lightbox {
|
||||
}
|
||||
}
|
||||
|
||||
updateDetails() {
|
||||
const media = this.album[this.currentImageIndex];
|
||||
updateDetails(media = this.album[this.currentImageIndex], show = true) {
|
||||
if (!media) return;
|
||||
|
||||
if (media.title) {
|
||||
if (this.options.sanitizeTitle) this.caption.textContent = media.title;
|
||||
else this.caption.innerHTML = media.title;
|
||||
this.fade(this.caption, true, 200);
|
||||
if (show) this.fade(this.caption, true, 200);
|
||||
else this.setVisible(this.caption, true);
|
||||
} else {
|
||||
this.caption.textContent = '';
|
||||
this.setVisible(this.caption, false);
|
||||
}
|
||||
|
||||
this.fade(this.closeButton, true, 200);
|
||||
this.outerContainer.classList.remove('animating');
|
||||
this.fade(this.dataContainer, true, this.options.resizeDuration);
|
||||
if (show) {
|
||||
this.fade(this.closeButton, true, 200);
|
||||
this.outerContainer.classList.remove('animating');
|
||||
this.fade(this.dataContainer, true, this.options.resizeDuration);
|
||||
} else {
|
||||
this.setVisible(this.closeButton, true);
|
||||
this.setVisible(this.dataContainer, false);
|
||||
this.dataContainer.style.transition = '';
|
||||
this.dataContainer.style.opacity = '0';
|
||||
}
|
||||
}
|
||||
|
||||
preloadNeighboringImages() {
|
||||
|
||||
Reference in New Issue
Block a user