(function (){
"use strict";
class PFGGallery {
constructor(container){
this.container=container;
this.galleryId=container.dataset.galleryId;
this.grid=container.querySelector(".pfg-grid");
this.filtersContainer=container.querySelector(".pfg-filters");
this.filters=container.querySelectorAll(".pfg-filter");
this.items=container.querySelectorAll(".pfg-item");
this.searchInput=container.querySelector(".pfg-search-input");
this.logicToggle=container.querySelector(".pfg-logic-toggle");
this.multiSelect=container.dataset.multiSelect==="true";
this.filterLogic=container.dataset.filterLogic||"or"; // 'and' or 'or'
this.activeFilters=new Set();
this.searchTerm="";
this.deepLinking=container.dataset.deepLinking==="true";
this.urlParam=container.dataset.urlParam||"filter";
this.defaultFilter=container.dataset.defaultFilter||"";
this.filterHierarchy={};
try {
this.filterHierarchy=JSON.parse(container.dataset.filterHierarchy||"{}"
);
} catch (e){
}
this.init();
}
init(){
this.bindFilters();
this.bindSearch();
this.bindLogicToggle();
this.bindCascadingDropdowns();
this.initLazyLoading();
this.assignStaggerDelays();
this.initDeepLinking();
this.initMasonryLayout();
this.initPreloader();
}
initPreloader(){
const images=Array.from(this.container.querySelectorAll('.pfg-grid img'));
const allLoaded=images.every(img=> img.complete&&img.naturalHeight!==0);
if(allLoaded){
this.removePreloader();
return;
}
this.waitForImagesMain().then(()=> {
this.removePreloader();
});
setTimeout(()=> {
this.removePreloader();
}, 3000);
}
waitForImagesMain(){
const images=Array.from(this.container.querySelectorAll('.pfg-grid img'));
const promises=images.map((img)=> {
if(img.complete){
return Promise.resolve();
}
return new Promise((resolve)=> {
img.addEventListener('load', resolve, { once: true });
img.addEventListener('error', resolve, { once: true });
setTimeout(resolve, 5000);
});
});
return Promise.all(promises);
}
removePreloader(){
this.container.classList.remove('pfg-loading');
this.container.classList.add('pfg-loaded');
}
initDeepLinking(){
const urlParams=new URLSearchParams(window.location.search);
const urlFilter=urlParams.get(this.urlParam);
if(urlFilter){
this.activateFilterBySlug(urlFilter);
return;
}
if(this.defaultFilter){
this.activateFilterBySlug(this.defaultFilter);
}else{
const allBtn=this.container.querySelector('[data-filter="*"]');
if(allBtn){
allBtn.classList.add("pfg-filter--active");
}}
}
activateFilterBySlug(slug){
const filterBtn=this.container.querySelector(`.pfg-filter[data-filter="${slug}"]`
);
if(filterBtn){
this.setSingleFilter(slug, filterBtn);
this.filterItems();
}}
updateUrl(filter){
if(!this.deepLinking) return;
const url=new URL(window.location.href);
if(filter==="*"||!filter){
url.searchParams.delete(this.urlParam);
}else{
url.searchParams.set(this.urlParam, filter);
}
window.history.replaceState({}, "", url.toString());
}
assignStaggerDelays(){
this.items.forEach((item, index)=> {
item.dataset.delay=(index % 6) + 1;
});
}
bindFilters(){
this.filters.forEach((filter)=> {
filter.addEventListener("click", (e)=> {
e.preventDefault();
const filterValue=filter.dataset.filter;
if(this.multiSelect&&filterValue!=="*"){
this.toggleFilter(filterValue, filter);
}else{
this.setSingleFilter(filterValue, filter);
}
this.filterItems();
});
});
}
toggleFilter(filter, button){
if(this.activeFilters.has(filter)){
this.activeFilters.delete(filter);
button.classList.remove("pfg-filter--selected", "pfg-filter--active");
}else{
this.activeFilters.add(filter);
button.classList.add("pfg-filter--selected", "pfg-filter--active");
}
const allBtn=this.container.querySelector('[data-filter="*"]');
if(allBtn){
if(this.activeFilters.size===0){
allBtn.classList.add("pfg-filter--active");
}else{
allBtn.classList.remove("pfg-filter--active");
}}
}
setSingleFilter(filter, button){
this.activeFilters.clear();
if(filter!=="*"){
this.activeFilters.add(filter);
}
this.filters.forEach((btn)=> {
btn.classList.remove("pfg-filter--active", "pfg-filter--selected");
});
button.classList.add("pfg-filter--active");
this.updateUrl(filter);
}
bindSearch(){
if(!this.searchInput) return;
let debounceTimer;
this.searchInput.addEventListener("input", (e)=> {
clearTimeout(debounceTimer);
debounceTimer=setTimeout(()=> {
this.searchTerm=e.target.value.toLowerCase().trim();
this.filterItems();
}, 300);
});
}
bindLogicToggle(){
if(!this.logicToggle) return;
const buttons=this.logicToggle.querySelectorAll(".pfg-logic-btn");
buttons.forEach((btn)=> {
btn.addEventListener("click", ()=> {
this.filterLogic=btn.dataset.logic;
this.container.dataset.filterLogic=this.filterLogic;
buttons.forEach((b)=> b.classList.remove("pfg-logic-btn--active"));
btn.classList.add("pfg-logic-btn--active");
this.filterItems();
});
});
}
bindCascadingDropdowns(){
const dropdownContainer=this.container.querySelector('.pfg-cascading-dropdowns');
if(!dropdownContainer) return;
const level1Select=dropdownContainer.querySelector('.pfg-level1-select');
if(!level1Select) return;
level1Select.addEventListener('change', ()=> {
const level1Value=level1Select.value;
this.activeFilters.clear();
if(level1Value!=='*'){
this.activeFilters.add(level1Value);
}
if(this.deepLinking&&level1Value!=='*'){
this.updateUrl(level1Value);
}else if(this.deepLinking){
this.updateUrl('*');
}
this.filterItems();
});
}
filterItems(){
this.items=this.container.querySelectorAll(".pfg-item");
const isMasonry=this.grid&&this.grid.classList.contains("pfg-grid--masonry");
if(isMasonry){
this._filterItemsMasonry();
}else{
this._filterItemsFLIP();
}
let visibleCount=0;
this.items.forEach((item)=> {
if(!item.classList.contains("pfg-item--hidden")&&!item.classList.contains("pfg-item--hiding")){
visibleCount++;
}});
this.container.dispatchEvent(new CustomEvent("pfg:filtered", {
bubbles: true,
detail: {
filters: Array.from(this.activeFilters),
logic: this.filterLogic,
search: this.searchTerm,
visibleCount: visibleCount,
},
})
);
}
_filterItemsMasonry(){
const itemsToShow=[];
const itemsToHide=[];
this.items.forEach((item)=> {
const matchesFilter=this.itemMatchesFilter(item);
const matchesSearch=this.itemMatchesSearch(item);
const wasHidden=item.classList.contains("pfg-item--hidden");
if(matchesFilter&&matchesSearch){
if(wasHidden){
itemsToShow.push(item);
}}else if(!wasHidden){
itemsToHide.push(item);
}});
itemsToHide.forEach((item)=> {
item.classList.remove("pfg-item--visible", "pfg-item--hidden");
item.classList.add("pfg-item--hiding");
});
setTimeout(()=> {
itemsToHide.forEach((item)=> {
item.classList.remove("pfg-item--hiding");
item.classList.add("pfg-item--hidden");
item.classList.remove("pfg-item--positioned");
});
itemsToShow.forEach((item)=> {
item.classList.remove("pfg-item--hidden", "pfg-item--hiding");
item.classList.add("pfg-item--visible");
item.classList.remove("pfg-item--positioned");
});
this.initMasonryLayout();
}, 250);
}
_filterItemsFLIP(){
const firstPositions=new Map();
this.items.forEach((item)=> {
if(!item.classList.contains("pfg-item--hidden")){
const rect=item.getBoundingClientRect();
firstPositions.set(item, { x: rect.left, y: rect.top });
}});
let visibleIndex=0;
const itemsToShow=[];
const itemsToHide=[];
const itemsToAnimate=[];
this.items.forEach((item)=> {
const matchesFilter=this.itemMatchesFilter(item);
const matchesSearch=this.itemMatchesSearch(item);
const wasVisible = !item.classList.contains("pfg-item--hidden");
if(matchesFilter&&matchesSearch){
if(wasVisible){
itemsToAnimate.push(item);
}else{
itemsToShow.push({ item, index: visibleIndex });
}
visibleIndex++;
}else if(wasVisible){
itemsToHide.push(item);
}});
itemsToHide.forEach((item)=> {
item.classList.remove("pfg-item--visible", "pfg-item--hidden");
item.classList.add("pfg-item--hiding");
});
setTimeout(()=> {
itemsToHide.forEach((item)=> {
item.classList.remove("pfg-item--hiding");
item.classList.add("pfg-item--hidden");
});
itemsToShow.forEach(({ item })=> {
item.classList.remove("pfg-item--hidden", "pfg-item--hiding");
item.style.opacity="0";
item.style.transform="scale(0.9)";
item.style.transition="none";
});
void this.container.offsetHeight;
const lastPositions=new Map();
[...itemsToAnimate, ...itemsToShow.map(i=> i.item)].forEach((item)=> {
const rect=item.getBoundingClientRect();
lastPositions.set(item, { x: rect.left, y: rect.top });
});
itemsToAnimate.forEach((item)=> {
const first=firstPositions.get(item);
const last=lastPositions.get(item);
item.style.opacity="1";
if(first&&last){
const deltaX=first.x - last.x;
const deltaY=first.y - last.y;
const didMove=Math.abs(deltaX) > 1||Math.abs(deltaY) > 1;
item.style.transition="none";
if(didMove){
item.style.transform=`translate(${deltaX}px, ${deltaY}px) scale(0.97)`;
}else{
item.style.transform="scale(0.97)";
}
void item.offsetHeight;
item.style.transition="transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)";
item.style.transform="translate(0, 0) scale(1)";
}else{
item.style.transition="none";
item.style.transform="scale(0.97)";
void item.offsetHeight;
item.style.transition="transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)";
item.style.transform="scale(1)";
}});
itemsToShow.forEach(({ item, index })=> {
const delay=index * 50;
setTimeout(()=> {
item.style.transition="opacity 0.3s ease-out, transform 0.3s ease-out";
item.style.opacity="1";
item.style.transform="scale(1)";
}, delay);
});
setTimeout(()=> {
itemsToAnimate.forEach((item)=> {
item.style.transition="";
item.style.transform="";
item.style.opacity="";
});
itemsToShow.forEach(({ item })=> {
item.style.transition="";
item.style.transform="";
item.style.opacity="";
item.classList.add("pfg-item--visible");
});
}, 500);
}, 280);
}
applyMosaicLayoutWithFLIP(firstPositions){
this.initMasonryLayout();
}
itemMatchesFilter(item){
if(this.activeFilters.size===0) return true;
const itemFilters=this.getItemFilters(item);
const expandedFilters=this.expandFiltersWithChildren([
...this.activeFilters,
]);
if(this.filterLogic==="and"){
const result=[...this.activeFilters].every((filter)=> {
const filterAndChildren=[
filter,
...(this.filterHierarchy[filter]||[]),
];
const matches=filterAndChildren.some((f)=> itemFilters.includes(f));
return matches;
});
return result;
}else{
return expandedFilters.some((filter)=> itemFilters.includes(filter));
}}
expandFiltersWithChildren(filters){
const expanded=new Set(filters);
filters.forEach((filter)=> {
if(this.filterHierarchy[filter]){
this.filterHierarchy[filter].forEach((child)=> expanded.add(child));
}});
return [...expanded];
}
getItemFilters(item){
const classes=Array.from(item.classList);
return classes
.filter((c)=> c.startsWith("pfg-filter-"))
.map((c)=> c.replace("pfg-filter-", ""));
}
itemMatchesSearch(item){
if(!this.searchTerm) return true;
const title=item.querySelector(".pfg-item-title");
const alt=item.querySelector(".pfg-item-image")?.alt||"";
const searchableText=(title?.textContent||"") + " " + alt;
return searchableText.toLowerCase().includes(this.searchTerm);
}
showItem(item, index){
item.classList.remove("pfg-item--hidden");
item.classList.remove("pfg-item--visible");
void item.offsetWidth;
const delay=(index % 8) * 50;
setTimeout(()=> {
item.classList.add("pfg-item--visible");
}, delay);
item.style.maxHeight="";
item.style.margin="";
item.style.padding="";
}
hideItem(item){
item.classList.add("pfg-item--hidden");
}
initLazyLoading(){
if("loading" in HTMLImageElement.prototype){
return;
}
if("IntersectionObserver" in window){
const imageObserver=new IntersectionObserver(
(entries, observer)=> {
entries.forEach((entry)=> {
if(entry.isIntersecting){
const img=entry.target;
if(img.dataset.src){
img.src=img.dataset.src;
img.removeAttribute("data-src");
}
observer.unobserve(img);
}});
},
{
rootMargin: "50px 0px",
}
);
this.items.forEach((item)=> {
const img=item.querySelector("img[data-src]");
if(img){
imageObserver.observe(img);
}});
}}
initMasonryLayout(){
const masonryGrid=this.grid?.classList.contains("pfg-grid--masonry");
if(!masonryGrid){
return;
}
this.usesMosaicLayout=true;
this.waitForImages().then(()=> {
this.applyMasonryLayout();
});
let resizeTimeout;
window.addEventListener("resize", ()=> {
clearTimeout(resizeTimeout);
resizeTimeout=setTimeout(()=> {
if(this.usesMosaicLayout){
this.applyMasonryLayout();
}}, 200);
});
}
waitForImages(){
const images=Array.from(this.grid.querySelectorAll("img"));
const promises=images.map((img)=> {
if(img.complete){
return Promise.resolve();
}
return new Promise((resolve)=> {
img.addEventListener("load", resolve, { once: true });
img.addEventListener("error", resolve, { once: true });
});
});
return Promise.all(promises);
}
applyMasonryLayout(){
if(!this.grid) return;
const items=Array.from(this.grid.querySelectorAll(".pfg-item:not(.pfg-item--hidden)")
);
if(items.length===0){
this.grid.style.height="0px";
return;
}
const containerWidth=this.grid.offsetWidth;
const gap =
parseInt(getComputedStyle(this.grid).getPropertyValue("--pfg-gap")) ||
10;
const w=window.innerWidth;
const styles=getComputedStyle(this.grid);
let cols;
if(w >=1200){
cols=parseInt(styles.getPropertyValue("--pfg-cols-xl"))||4;
}else if(w >=992){
cols=parseInt(styles.getPropertyValue("--pfg-cols-lg"))||3;
}else if(w >=768){
cols=parseInt(styles.getPropertyValue("--pfg-cols-md"))||2;
}else{
cols=parseInt(styles.getPropertyValue("--pfg-cols-sm"))||1;
}
const colWidth=(containerWidth - gap * (cols - 1)) / cols;
const newItems=[];
const itemData=[];
items.forEach((item)=> {
const img=item.querySelector("img");
const imgLink=item.querySelector(".pfg-item-link");
const isNewItem = !item.classList.contains("pfg-item--positioned");
if(isNewItem){
item.style.transition="none";
item.style.opacity="0";
item.style.transform="scale(0.92)";
}
item.style.position="absolute";
item.style.width=colWidth + "px";
if(imgLink){
imgLink.style.display="block";
imgLink.style.width="100%";
imgLink.style.height="auto";
imgLink.style.overflow="hidden";
}
if(img){
img.style.width="100%";
img.style.height="auto";
img.style.objectFit="";
}
if(isNewItem){
newItems.push(item);
}
itemData.push({
item,
colWidth,
});
});
setTimeout(()=> {
const colHeights=new Array(cols).fill(0);
itemData.forEach((data)=> {
const { item, colWidth: itemWidth }=data;
if(item.classList.contains("pfg-item--hidden")){
return;
}
let itemHeight=Math.ceil(item.offsetHeight);
if(itemHeight <=0){
const img=item.querySelector("img");
if(img&&img.naturalWidth&&img.naturalHeight){
itemHeight=Math.ceil(itemWidth / (img.naturalWidth / img.naturalHeight));
}else{
itemHeight=Math.ceil(itemWidth);
}}
let bestCol=0;
for (let c=1; c < cols; c++){
if(colHeights[c] < colHeights[bestCol]){
bestCol=c;
}}
const x=Math.round(bestCol * (colWidth + gap));
const y=Math.round(colHeights[bestCol]);
item.style.left=x + "px";
item.style.top=y + "px";
if(!item.classList.contains("pfg-item--positioned")){
void item.offsetHeight;
item.classList.add("pfg-item--positioned");
}
colHeights[bestCol]=y + itemHeight + gap;
});
const maxHeight=Math.max(...colHeights, 0);
this.grid.style.position="relative";
this.grid.style.height=Math.ceil(maxHeight) + "px";
if(newItems.length > 0){
void this.grid.offsetHeight;
newItems.forEach((item, i)=> {
const delay=i * 40;
setTimeout(()=> {
item.style.transition="opacity 0.35s ease-out, transform 0.35s ease-out";
item.style.opacity="1";
item.style.transform="scale(1)";
setTimeout(()=> {
item.style.transition="";
item.style.opacity="";
item.style.transform="";
}, 400);
}, delay);
});
}}, 50);
}
refreshMosaicLayout(){
if(this.usesMosaicLayout){
this.items=this.container.querySelectorAll(".pfg-item");
this.waitForImages().then(()=> {
this.initMasonryLayout();
});
}}
setLogic(logic){
if(logic==="and"||logic==="or"){
this.filterLogic=logic;
this.filterItems();
}}
addFilter(filter){
this.activeFilters.add(filter);
this.filterItems();
}
clearFilters(){
this.activeFilters.clear();
this.filters.forEach((btn)=> {
btn.classList.remove("pfg-filter--active", "pfg-filter--selected");
});
const allBtn=this.container.querySelector('[data-filter="*"]');
if(allBtn) allBtn.classList.add("pfg-filter--active");
this.filterItems();
}}
function initGalleries(){
const galleries=document.querySelectorAll(".pfg-gallery-wrapper");
galleries.forEach((container)=> {
if(container.dataset.pfgInitialized) return;
container.pfgGallery=new PFGGallery(container);
container.dataset.pfgInitialized="true";
});
}
if(document.readyState==="loading"){
document.addEventListener("DOMContentLoaded", initGalleries);
}else{
initGalleries();
}
if(typeof MutationObserver!=="undefined"){
const observer=new MutationObserver((mutations)=> {
mutations.forEach((mutation)=> {
mutation.addedNodes.forEach((node)=> {
if(node.nodeType===1){
if(node.classList?.contains("pfg-gallery-wrapper")){
node.pfgGallery=new PFGGallery(node);
}else{
const galleries=node.querySelectorAll?.(
".pfg-gallery-wrapper:not([data-pfg-initialized])"
);
galleries?.forEach((g)=> {
g.pfgGallery=new PFGGallery(g);
});
}}
});
});
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
}
window.PFGGallery=PFGGallery;
window.pfgInitGalleries=initGalleries;
})();
(function(){
'use strict';
class PFGLightbox {
constructor(){
this.isOpen=false;
this.currentIndex=0;
this.items=[];
this.galleryGroup=null;
this.touchStartX=0;
this.touchEndX=0;
this.createLightbox();
this.bindEvents();
}
createLightbox(){
const i18n=(typeof pfgData!=='undefined'&&pfgData.i18n) ? pfgData.i18n:{};
const closeText=i18n.close||'Close';
const prevText=i18n.prev||'Previous';
const nextText=i18n.next||'Next';
const html=`
<div class="pfg-lightbox" role="dialog" aria-modal="true" aria-label="Image lightbox">
<button class="pfg-lightbox-close" aria-label="${closeText}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
<span class="pfg-lightbox-counter"></span>
<button class="pfg-lightbox-nav pfg-lightbox-nav--prev" aria-label="${prevText}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 18l-6-6 6-6"/>
</svg>
</button>
<button class="pfg-lightbox-nav pfg-lightbox-nav--next" aria-label="${nextText}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 18l6-6-6-6"/>
</svg>
</button>
<div class="pfg-lightbox-content">
<img class="pfg-lightbox-image" src="" alt="">
<div class="pfg-lightbox-video" style="display: none;"></div>
</div>
<div class="pfg-lightbox-caption">
<h3 class="pfg-lightbox-title"></h3>
<p class="pfg-lightbox-description"></p>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', html);
this.lightbox=document.querySelector('.pfg-lightbox');
this.closeBtn=this.lightbox.querySelector('.pfg-lightbox-close');
this.prevBtn=this.lightbox.querySelector('.pfg-lightbox-nav--prev');
this.nextBtn=this.lightbox.querySelector('.pfg-lightbox-nav--next');
this.counter=this.lightbox.querySelector('.pfg-lightbox-counter');
this.content=this.lightbox.querySelector('.pfg-lightbox-content');
this.image=this.lightbox.querySelector('.pfg-lightbox-image');
this.video=this.lightbox.querySelector('.pfg-lightbox-video');
this.title=this.lightbox.querySelector('.pfg-lightbox-title');
this.description=this.lightbox.querySelector('.pfg-lightbox-description');
}
bindEvents(){
document.addEventListener('click', (e)=> {
const link=e.target.closest('[data-lightbox]');
if(link){
e.preventDefault();
this.open(link);
}});
this.closeBtn.addEventListener('click', ()=> this.close());
this.prevBtn.addEventListener('click', ()=> this.prev());
this.nextBtn.addEventListener('click', ()=> this.next());
this.lightbox.addEventListener('click', (e)=> {
if(e.target===this.lightbox){
this.close();
}});
document.addEventListener('keydown', (e)=> {
if(!this.isOpen) return;
switch (e.key){
case 'Escape':
this.close();
break;
case 'ArrowLeft':
this.prev();
break;
case 'ArrowRight':
this.next();
break;
}});
this.lightbox.addEventListener('touchstart', (e)=> {
this.touchStartX=e.changedTouches[0].screenX;
});
this.lightbox.addEventListener('touchend', (e)=> {
this.touchEndX=e.changedTouches[0].screenX;
this.handleSwipe();
});
}
handleSwipe(){
const threshold=50;
const diff=this.touchStartX - this.touchEndX;
if(Math.abs(diff) < threshold) return;
if(diff > 0){
this.next();
}else{
this.prev();
}}
open(trigger){
this.galleryGroup=trigger.dataset.lightbox;
const allItems=Array.from(document.querySelectorAll(`[data-lightbox="${this.galleryGroup}"]`));
this.items=allItems.filter(item=> {
const pfgItem=item.closest('.pfg-item');
if(!pfgItem) return true;
return !pfgItem.classList.contains('pfg-item--hidden') &&
!pfgItem.classList.contains('pfg-item--hiding') &&
!pfgItem.classList.contains('pfg-item--paginated-hidden');
});
this.currentIndex=this.items.indexOf(trigger);
if(this.currentIndex===-1){
this.currentIndex=0;
}
this.lightbox.classList.add('pfg-lightbox--open');
this.isOpen=true;
const scrollbarWidth=window.innerWidth - document.documentElement.clientWidth;
document.documentElement.style.setProperty('--pfg-scrollbar-width', scrollbarWidth + 'px');
document.body.classList.add('pfg-lightbox-open');
this.loadItem(this.currentIndex);
this.updateNavigation();
this.closeBtn.focus();
}
close(){
this.lightbox.classList.remove('pfg-lightbox--open', 'pfg-lightbox--loaded');
this.isOpen=false;
document.body.classList.remove('pfg-lightbox-open');
document.documentElement.style.removeProperty('--pfg-scrollbar-width');
this.video.innerHTML='';
this.video.style.display='none';
this.image.style.display='';
}
prev(){
if(this.currentIndex > 0){
this.currentIndex--;
this.loadItem(this.currentIndex);
this.updateNavigation();
}}
next(){
if(this.currentIndex < this.items.length - 1){
this.currentIndex++;
this.loadItem(this.currentIndex);
this.updateNavigation();
}}
loadItem(index){
const item=this.items[index];
if(!item) return;
const isVideo=item.dataset.type==='video';
const src=item.href;
const titleText=item.dataset.title||'';
const descText=item.dataset.description||'';
const wrapper=item.closest('.pfg-gallery-wrapper');
const showTitle=wrapper ? wrapper.dataset.lightboxTitle!=='false':true;
const showDesc=wrapper ? wrapper.dataset.lightboxDescription==='true':false;
this.lightbox.classList.remove('pfg-lightbox--loaded');
this.lightbox.classList.add('pfg-lightbox--loading');
if(isVideo){
this.loadVideo(src);
}else{
this.loadImage(src);
}
this.title.innerHTML=showTitle ? titleText:'';
this.description.innerHTML=showDesc ? descText:'';
const captionEl=this.lightbox.querySelector('.pfg-lightbox-caption');
if(captionEl){
const hasContent=(showTitle&&titleText)||(showDesc&&descText);
captionEl.style.display=hasContent ? '':'none';
}
this.counter.textContent=`${index + 1} / ${this.items.length}`;
}
loadImage(src){
this.video.innerHTML='';
this.video.style.display='none';
this.image.style.display='';
const img=new Image();
img.onload=()=> {
this.image.src=src;
this.image.alt=this.title.textContent;
this.lightbox.classList.remove('pfg-lightbox--loading');
this.lightbox.classList.add('pfg-lightbox--loaded');
};
img.onerror=()=> {
this.lightbox.classList.remove('pfg-lightbox--loading');
};
img.src=src;
}
loadVideo(url){
this.image.style.display='none';
this.image.src='';
this.video.innerHTML='';
this.video.style.display='';
const embedUrl=this.getVideoEmbedUrl(url);
if(embedUrl){
this.video.innerHTML=`<iframe src="${embedUrl}" allowfullscreen allow="autoplay"></iframe>`;
}
this.lightbox.classList.remove('pfg-lightbox--loading');
this.lightbox.classList.add('pfg-lightbox--loaded');
}
getVideoEmbedUrl(url){
const youtubeMatch=url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
if(youtubeMatch){
return `https://www.youtube.com/embed/${youtubeMatch[1]}?autoplay=1`;
}
const vimeoMatch=url.match(/vimeo\.com\/(?:.*\/)?(\d+)/);
if(vimeoMatch){
return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
}
return null;
}
updateNavigation(){
this.prevBtn.style.display=this.currentIndex > 0 ? '':'none';
this.nextBtn.style.display=this.currentIndex < this.items.length - 1 ? '':'none';
this.counter.style.display=this.items.length > 1 ? '':'none';
}}
function initLightbox(){
if(document.querySelector('[data-lightbox]')){
new PFGLightbox();
}}
if(document.readyState==='loading'){
document.addEventListener('DOMContentLoaded', initLightbox);
}else{
initLightbox();
}
window.PFGLightbox=PFGLightbox;
})();