125 lines
4.0 KiB
JavaScript
125 lines
4.0 KiB
JavaScript
import PhotoSwipe from "photoswipe";
|
||
import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default.js";
|
||
|
||
const thumbs = window.clientConfig.thumbnails;
|
||
|
||
class Viewer {
|
||
constructor() {
|
||
this.el = null;
|
||
this.gallery = null;
|
||
}
|
||
|
||
getEl() {
|
||
if (!this.el) {
|
||
this.el = document.getElementById("p-photo-viewer");
|
||
|
||
if (this.el === null) {
|
||
let err = "no photo viewer element found";
|
||
console.warn(err);
|
||
throw err;
|
||
}
|
||
}
|
||
|
||
return this.el;
|
||
}
|
||
|
||
show(items, index = 0) {
|
||
if (!Array.isArray(items) || items.length === 0 || index >= items.length) {
|
||
console.log("Array passed to gallery was empty:", items);
|
||
return;
|
||
}
|
||
|
||
const shareButtons = [
|
||
{id: "fit_720", template: "Tiny (size)", label: "Tiny", url: "{{raw_image_url}}", download: true},
|
||
{id: "fit_1280", template: "Small (size)", label: "Small", url: "{{raw_image_url}}", download: true},
|
||
{id: "fit_2048", template: "Medium (size)", label: "Medium", url: "{{raw_image_url}}", download: true},
|
||
{id: "fit_2560", template: "Large (size)", label: "Large", url: "{{raw_image_url}}", download: true},
|
||
{id: "original", template: "Original (size)", label: "Original", url: "{{raw_image_url}}", download: true},
|
||
];
|
||
|
||
const options = {
|
||
index: index,
|
||
history: true,
|
||
preload: [1, 1],
|
||
focus: true,
|
||
modal: true,
|
||
closeEl: true,
|
||
captionEl: true,
|
||
fullscreenEl: true,
|
||
zoomEl: true,
|
||
shareEl: true,
|
||
shareButtons: shareButtons,
|
||
counterEl: false,
|
||
arrowEl: true,
|
||
preloaderEl: true,
|
||
getImageURLForShare: function (button) {
|
||
const item = gallery.currItem;
|
||
|
||
if(button.id === "original") {
|
||
button.label = button.template.replace("size", item.original_w + " × " + item.original_h);
|
||
return item.download_url;
|
||
} else {
|
||
button.label = button.template.replace("size", item[button.id].w + " × " + item[button.id].h);
|
||
return item[button.id].src + "?download=1";
|
||
}
|
||
},
|
||
};
|
||
|
||
let gallery = new PhotoSwipe(this.getEl(), PhotoSwipeUI_Default, items, options);
|
||
let realViewportWidth;
|
||
let realViewportHeight;
|
||
let previousSize;
|
||
let nextSize;
|
||
let firstResize = true;
|
||
let photoSrcWillChange;
|
||
|
||
this.gallery = gallery;
|
||
|
||
gallery.listen("beforeResize", () => {
|
||
realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;
|
||
realViewportHeight = gallery.viewportSize.y * window.devicePixelRatio;
|
||
|
||
if (!previousSize) {
|
||
previousSize = "tile_720";
|
||
}
|
||
|
||
nextSize = this.constructor.mapViewportToImageSize(realViewportWidth, realViewportHeight);
|
||
|
||
if (nextSize !== previousSize) {
|
||
photoSrcWillChange = true;
|
||
}
|
||
|
||
if (photoSrcWillChange && !firstResize) {
|
||
gallery.invalidateCurrItems();
|
||
}
|
||
|
||
if (firstResize) {
|
||
firstResize = false;
|
||
}
|
||
|
||
photoSrcWillChange = false;
|
||
});
|
||
|
||
gallery.listen("gettingData", function (index, item) {
|
||
item.src = item[nextSize].src;
|
||
item.w = item[nextSize].w;
|
||
item.h = item[nextSize].h;
|
||
previousSize = nextSize;
|
||
});
|
||
|
||
gallery.init();
|
||
}
|
||
|
||
static mapViewportToImageSize(viewportWidth, viewportHeight) {
|
||
for (let i = 0; i < thumbs.length; i++) {
|
||
if (thumbs[i].Width >= viewportWidth || thumbs[i].Height >= viewportHeight) {
|
||
return thumbs[i].Name;
|
||
}
|
||
}
|
||
|
||
return "fit_720";
|
||
}
|
||
}
|
||
|
||
export default Viewer;
|