[Back] import $ from 'jquery';
const { VPData } = window;
const { settingsPopupGallery } = VPData;
const templatesSupport = 'content' in document.createElement('template');
/*
* Global Popup Gallery API.
*/
const VPPopupAPI = {
vendor: false,
vendors: [
{
vendor: 'youtube',
embedUrl: 'https://www.youtube.com/embed/{{video_id}}?{{params}}',
pattern:
/(https?:\/\/)?(www.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(?:embed\/|shorts\/|v\/|watch\?v=|watch\?list=(.*)&v=|watch\?(.*[^&]&)v=)?((\w|-){11})(&list=(\w+)&?)?(.*)/,
patternIndex: 6,
params: {
autoplay: 1,
autohide: 1,
fs: 1,
rel: 0,
hd: 1,
wmode: 'transparent',
enablejsapi: 1,
html5: 1,
},
paramsIndex: 10,
embedCallback(url, match) {
let result = false;
const vendorData = this;
const videoId =
match && match[vendorData.patternIndex]
? match[vendorData.patternIndex]
: false;
if (videoId) {
const isShorts = /\/shorts\//.test(url);
const width = isShorts ? 476 : 1920;
const height = isShorts ? 847 : 1080;
result = VPPopupAPI.embedCallback(
{
...vendorData,
width,
height,
},
videoId,
url,
match
);
}
return result;
},
},
{
vendor: 'vimeo',
embedUrl: 'https://player.vimeo.com/video/{{video_id}}?{{params}}',
pattern:
/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)(.*)/,
patternIndex: 3,
params: {
autoplay: 1,
hd: 1,
show_title: 1,
show_byline: 1,
show_portrait: 0,
fullscreen: 1,
},
paramsIndex: 4,
},
],
init() {},
open() {},
close() {},
/**
* Parse query parameters.
* Thanks to https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
*
* @param {string} query - query string.
*
* @return {string}
*/
getQueryStringParams(query) {
return query
? (/^[?#]/.test(query) ? query.slice(1) : query)
.split('&')
.reduce((params, param) => {
const [key, value] = param.split('=');
params[key] = value
? decodeURIComponent(value.replace(/\+/g, ' '))
: '';
return params;
}, {})
: {};
},
/**
* Prepare params from parsed URL.
*
* @param {Object} match - url match data.
* @param {Object} vendorData - vendor data.
*
* @return {string}
*/
prepareParams(match, vendorData) {
let result = '';
// Prepare default params.
const params = vendorData.params || {};
// Parse params from URL.
if (vendorData.paramsIndex && match && match[vendorData.paramsIndex]) {
const newParams = VPPopupAPI.getQueryStringParams(
match[vendorData.paramsIndex]
);
if (newParams && typeof newParams === 'object') {
Object.keys(newParams).forEach((key) => {
if (key && newParams[key]) {
params[key] = newParams[key];
}
});
}
}
if (params && Object.keys(params).length) {
Object.keys(params).forEach((key) => {
if (key && params[key]) {
if (result) {
result += '&';
}
result += `${key}=${params[key]}`;
}
});
}
return result;
},
/**
* Prepare data for embed.
*
* @param {Object} vendorData current video vendor data.
* @param {string} videoId parsed video ID.
* @param {string} url video URL provided.
* @param {Object | boolean} match URL match data.
*
* @return {Object}
*/
embedCallback(vendorData, videoId, url, match = false) {
let { embedUrl } = vendorData;
embedUrl = embedUrl.replace(/{{video_id}}/g, videoId);
embedUrl = embedUrl.replace(/{{video_url}}/g, url);
embedUrl = embedUrl.replace(
/{{video_url_encoded}}/g,
encodeURIComponent(url)
);
embedUrl = embedUrl.replace(
/{{params}}/g,
match ? VPPopupAPI.prepareParams(match, vendorData) : ''
);
const width = vendorData.width || 1920;
const height = vendorData.height || 1080;
return {
vendor: vendorData.vendor,
id: videoId,
embed: `<iframe width="${width}" height="${height}" src="${embedUrl}" scrolling="no" frameborder="0" allowTransparency="true" allow="accelerometer; autoplay; clipboard-write; fullscreen; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
embedUrl,
url,
width,
height,
};
},
/**
* Parse video URL and return object with data
*
* @param {string} url - video url.
* @param {string} url - optional poster url.
*
* @param poster
* @return {object|boolean} video data
*/
parseVideo(url, poster) {
let result = false;
VPPopupAPI.vendors.forEach((vendorData) => {
if (!result) {
const match = url.match(vendorData.pattern);
const videoId =
match && match[vendorData.patternIndex]
? match[vendorData.patternIndex]
: false;
if (videoId) {
// Custom embed callback.
if (vendorData.embedCallback) {
result = vendorData.embedCallback(url, match, poster);
// Predefined embed callback.
} else {
result = VPPopupAPI.embedCallback(
vendorData,
videoId,
url,
match
);
}
}
}
});
// Unknown vendor.
if (!result) {
result = VPPopupAPI.embedCallback(
{
vendor: 'unknown',
embedUrl: url,
},
url,
url,
false
);
}
return result;
},
/**
* Parse gallery item popup data.
*
* @param {element} itemElement - gallery item
*/
parseItem(itemElement) {
let result = false;
const $dataElement =
itemElement &&
itemElement.querySelector('.vp-portfolio__item-popup');
if ($dataElement) {
result = {
$dataElement,
$content: $dataElement,
data: $dataElement.dataset,
};
// Support for <template> tag.
if (
templatesSupport &&
$dataElement.nodeName === 'TEMPLATE' &&
$dataElement.content
) {
result.$content = $dataElement.content;
}
result.$title = result?.$content?.querySelector(
'.vp-portfolio__item-popup-title'
);
result.$description = result?.$content?.querySelector(
'.vp-portfolio__item-popup-description'
);
}
return result;
},
/**
* Parse gallery
*
* @param {jQuery} $gallery - gallery element.
*
* @return {Array} gallery data
*/
parseGallery($gallery) {
const items = [];
let size;
let item;
let video;
let videoData;
// Find all gallery items
// Skip Swiper slider duplicates.
// Previously we also used the `:not(.swiper-slide-duplicate-active)`, but it contains a valid first slide.
$gallery
.find('.vp-portfolio__item-wrap:not(.swiper-slide-duplicate)')
.each(function () {
const itemData = VPPopupAPI.parseItem(this);
if (itemData) {
size = (
itemData?.data?.vpPopupImgSize || '1920x1080'
).split('x');
video = itemData?.data?.vpPopupVideo;
videoData = false;
if (video) {
videoData = VPPopupAPI.parseVideo(
video,
itemData?.data?.vpPopupPoster
);
}
if (videoData) {
item = {
type: 'embed',
el: this,
poster: videoData.poster,
src: videoData.embedUrl,
embed: videoData.embed,
width: videoData.width || 1920,
height: videoData.height || 1080,
};
} else {
// create slide object
item = {
type: 'image',
el: this,
src: itemData?.data?.vpPopupImg,
srcset: itemData?.data?.vpPopupImgSrcset,
width: parseInt(size[0], 10),
height: parseInt(size[1], 10),
};
const srcSmall =
itemData?.data?.vpPopupSmImg || item.src;
if (srcSmall) {
const smallSize = (
itemData?.data?.vpPopupSmImgSize ||
itemData?.data?.vpPopupImgSize ||
'1920x1080'
).split('x');
item.srcSmall = srcSmall;
item.srcSmallWidth = parseInt(smallSize[0], 10);
item.srcSmallHeight = parseInt(smallSize[1], 10);
}
const srcMedium =
itemData?.data?.vpPopupMdImg || item.src;
if (srcMedium) {
const mediumSize = (
itemData?.data?.vpPopupMdImgSize ||
itemData?.data?.vpPopupImgSize ||
'1920x1080'
).split('x');
item.srcMedium = srcMedium;
item.srcMediumWidth = parseInt(mediumSize[0], 10);
item.srcMediumHeight = parseInt(mediumSize[1], 10);
}
}
if (itemData?.$title || itemData?.$description) {
item.caption =
(itemData?.$title?.outerHTML || '') +
(itemData?.$description?.outerHTML || '');
}
items.push(item);
}
});
return items;
},
/**
* Try to focus gallery item link.
* Used when popup gallery is closed.
*
* @param {Object} data - data of the current item
*/
maybeFocusGalleryItem(data) {
if (!settingsPopupGallery.restore_focus) {
return;
}
// Focus native gallery item.
if (data.linkEl) {
$(data.linkEl).focus();
// Focus Visual Portfolio gallery item.
} else if (data.el) {
$(data.el).find('.vp-portfolio__item-img > a').focus();
}
},
};
window.VPPopupAPI = VPPopupAPI;
// Extend VP class.
$(document).on('extendClass.vpf', (event, VP) => {
if (event.namespace !== 'vpf') {
return;
}
/**
* Init popup gallery
*/
VP.prototype.initPopupGallery = function () {
const self = this;
if (
!self.options.itemsClickAction ||
self.options.itemsClickAction === 'url'
) {
return;
}
// prevent on preview page
if (self.isPreview()) {
return;
}
// click action
// `a.vp-portfolio__item-overlay` added as fallback for old templates, used in themes.
self.$item.on(
`click.vpf-uid-${self.uid}`,
`
.vp-portfolio__item a.vp-portfolio__item-meta,
.vp-portfolio__item .vp-portfolio__item-img > a,
.vp-portfolio__item .vp-portfolio__item-meta-title > a,
.vp-portfolio__item a.vp-portfolio__item-overlay
`,
function (e) {
if (e.isDefaultPrevented()) {
return;
}
const $this = $(this);
let $itemWrap = $this.closest('.vp-portfolio__item-wrap');
// Use Swiper data-attribute to support slide duplicates.
if (
$itemWrap.hasClass('swiper-slide-duplicate') &&
$itemWrap.attr('data-swiper-slide-index')
) {
$itemWrap = self.$item.find(
`[data-swiper-slide-index="${$itemWrap.attr(
'data-swiper-slide-index'
)}"].swiper-slide:not(.swiper-slide-duplicate)`
);
}
if (!$itemWrap.find('.vp-portfolio__item-popup').length) {
return;
}
const items = VPPopupAPI.parseGallery(self.$item);
let index = -1;
// Get gallery item index.
// We should check all items with gallery data to prevent
// issue with items and custom URL used.
items.forEach((item, idx) => {
if (item.el === $itemWrap[0]) {
index = idx;
}
});
// Let's open popup once item index found.
if (index !== -1) {
e.preventDefault();
VPPopupAPI.open(items, index, self);
}
}
);
};
/**
* Destroy popup gallery
*/
VP.prototype.destroyPopupGallery = function () {
const self = this;
if (
!self.options.itemsClickAction ||
self.options.itemsClickAction === 'url'
) {
return;
}
self.$item.off(`click.vpf-uid-${self.uid}`);
self.emitEvent('destroyPopupGallery');
};
});
// Init.
$(document).on('init.vpf', (event, self) => {
if (event.namespace !== 'vpf') {
return;
}
self.initPopupGallery();
});
// Destroy.
$(document).on('destroy.vpf', (event, self) => {
if (event.namespace !== 'vpf') {
return;
}
self.destroyPopupGallery();
});
// Check if link is image.
function isLinkImage(link) {
return /(.png|.jpg|.jpeg|.gif|.tiff|.tif|.jfif|.jpe|.svg|.bmp|.webp)$/.test(
link.href.toLowerCase().split('?')[0].split('#')[0]
);
}
// Parse image data from link.
function parseImgData(link) {
const $link = $(link);
let img = link.childNodes[0];
let caption = $link.next('figcaption');
// <noscript> tag used in plugins, that adds lazy loading
if (img.nodeName === 'NOSCRIPT' && link.childNodes[1]) {
img = link.childNodes[1];
}
if (!caption.length && $link.parent('.gallery-icon').length) {
caption = $link.parent('.gallery-icon').next('figcaption');
}
caption = caption.html();
if (caption) {
caption = `<div class="vp-portfolio__item-popup-description">${caption}</div>`;
}
return {
type: 'image',
el: img,
linkEl: link,
src: link.href,
caption,
};
}
/* Popup for default WordPress images */
if (settingsPopupGallery.enable_on_wordpress_images) {
$(document).on(
'click',
`
.wp-block-image > a,
.wp-block-image > figure > a,
.wp-block-gallery .blocks-gallery-item > figure > a,
.wp-block-gallery .wp-block-image > a,
.wp-block-media-text > figure > a,
.gallery .gallery-icon > a,
figure.wp-caption > a,
figure.tiled-gallery__item > a,
p > a
`,
function (e) {
if (e.isDefaultPrevented()) {
return;
}
if (!this.childNodes.length) {
return;
}
let imageNode = this.childNodes[0];
// <noscript> tag used in plugins, that adds lazy loading
if (imageNode.nodeName === 'NOSCRIPT' && this.childNodes[1]) {
imageNode = this.childNodes[1];
}
// check if child node is <img> or <picture> tag.
// <picture> tag used in plugins, that adds WebP support
if (
imageNode.nodeName !== 'IMG' &&
imageNode.nodeName !== 'PICTURE'
) {
return;
}
// check if link is image.
if (!isLinkImage(this)) {
return;
}
e.preventDefault();
const $this = $(this);
const items = [];
const currentImage = parseImgData(this);
const $gallery = $this.closest(
'.wp-block-gallery, .gallery, .tiled-gallery__gallery'
);
let activeIndex = 0;
// Block gallery, WordPress default gallery, Jetpack gallery.
if ($gallery.length) {
const $galleryItems = $gallery.find(
'.blocks-gallery-item > figure > a, .wp-block-image > a, .gallery-icon > a, figure.tiled-gallery__item > a'
);
let i = 0;
$galleryItems.each(function () {
// check if link is image.
if (isLinkImage(this)) {
if (this === currentImage.linkEl) {
activeIndex = i;
}
items.push(parseImgData(this));
i += 1;
}
});
// WordPress gallery.
} else {
items.push(currentImage);
}
VPPopupAPI.open(items, activeIndex);
}
);
}