Ben Reed
cdc5ea85f4
Add massive collection of CSS, JavaScript and theme assets that were previously excluded: **CSS Files (681 total):** - HVAC plugin-specific styles (hvac-*.css): 34 files including dashboard, certificates, registration, mobile nav, accessibility fixes, animations, and welcome popup - Theme framework files (Astra, builder systems, layouts): 200+ files - Plugin compatibility styles (WooCommerce, WPForms, Elementor, Contact Form 7): 150+ files - WordPress core and editor styles: 50+ files - Responsive and RTL language support: 200+ files **JavaScript Files (400+ total):** - HVAC plugin functionality (hvac-*.js): 27 files including menu systems, dashboard enhancements, profile sharing, mobile responsive features, accessibility, and animations - Framework and library files: jQuery plugins, GSAP, AOS, Swiper, Chart.js, Lottie, Isotope - Plugin compatibility scripts: WPForms, WooCommerce, Elementor, Contact Form 7, LifterLMS - WordPress core functionality: customizer, admin, block editor compatibility - Third-party integrations: Stripe, SMTP, analytics, search functionality **Assets:** - Certificate background images and logos - Comprehensive theme styling infrastructure - Mobile-responsive design systems - Cross-browser compatibility assets - Performance-optimized minified versions **Updated .gitignore:** - Fixed asset directory whitelisting patterns to properly include CSS/JS/images - Added proper directory structure recognition (!/assets/css/, !/assets/js/, etc.) - Maintains security by excluding sensitive files while including essential assets This commit provides the complete frontend infrastructure needed for: - Full theme functionality and styling - Plugin feature implementations - Mobile responsiveness and accessibility - Cross-browser compatibility - Performance optimization - Developer workflow support
589 lines
No EOL
20 KiB
JavaScript
589 lines
No EOL
20 KiB
JavaScript
let spectraImageGalleryLoadStatus = true;
|
|
let clickedImageId = null;
|
|
|
|
const UAGBImageGalleryMasonry = {
|
|
initByOffset( $selector, instance ){
|
|
// Verify $selector and instance.
|
|
if ( ! $selector || ! instance ) {
|
|
return;
|
|
}
|
|
|
|
// Add class for scroll not init.
|
|
$selector.classList.add( 'scroll-not-init' );
|
|
|
|
// Add class for last image not loaded.
|
|
$selector.classList.add( 'last-image-not-loaded' );
|
|
|
|
const getAllImages = $selector.querySelectorAll( 'img' );
|
|
if( getAllImages.length ){
|
|
// Get last image.
|
|
const getLastImage = getAllImages[ getAllImages.length - 1 ];
|
|
// Add event listener for last image.
|
|
getLastImage.addEventListener( 'load', () => {
|
|
// You can perform additional actions here once the image has loaded.
|
|
// Remove class for last image not loaded.
|
|
$selector.classList.remove( 'last-image-not-loaded' );
|
|
setTimeout( function() {
|
|
instance.layout();
|
|
}, 100 );
|
|
}
|
|
);
|
|
}
|
|
|
|
let timeOutInstance = null;
|
|
// Get scroll position dynamically.
|
|
window.addEventListener( 'scroll', function() {
|
|
if ( ! $selector.classList.contains( 'scroll-not-init' ) ) {
|
|
return;
|
|
}
|
|
// Clear timeout instance.
|
|
clearTimeout( timeOutInstance );
|
|
|
|
if ( UAGBImageGalleryMasonry.presentInViewport( $selector ) ) {
|
|
// If $selector comes in view port then init masonry.
|
|
$selector.classList.remove( 'scroll-not-init' );
|
|
// Init masonry.
|
|
timeOutInstance = setTimeout( function() {
|
|
instance.layout();
|
|
}, 100 );
|
|
}
|
|
} );
|
|
},
|
|
init( $attr, $selector, lightboxSettings, thumbnailSettings ) {
|
|
let count = 2;
|
|
const windowHeight50 = window.innerHeight / 1.25;
|
|
const $scope = document.querySelector( $selector );
|
|
let thumbnailSwiper = null;
|
|
if ( $attr.lightboxThumbnails ) {
|
|
thumbnailSwiper = new Swiper( `${$selector}+.spectra-image-gallery__control-lightbox .spectra-image-gallery__control-lightbox--thumbnails`,
|
|
thumbnailSettings
|
|
);
|
|
lightboxSettings = {
|
|
...lightboxSettings,
|
|
thumbs: {
|
|
swiper: thumbnailSwiper,
|
|
},
|
|
}
|
|
}
|
|
const lightboxSwiper = new Swiper( `${$selector}+.spectra-image-gallery__control-lightbox .spectra-image-gallery__control-lightbox--main`,
|
|
lightboxSettings
|
|
)
|
|
lightboxSwiper.lazy.load();
|
|
loadLightBoxImages( $scope, lightboxSwiper, null, $attr, thumbnailSwiper );
|
|
const loader = $scope?.querySelector( '.spectra-image-gallery__control-loader' );
|
|
const loadButton = $scope?.querySelector( '.spectra-image-gallery__control-button' );
|
|
if ( $attr.feedPagination && $attr.paginateUseLoader ) {
|
|
window.addEventListener( 'scroll', function () {
|
|
let mediaItem = $scope?.querySelector( '.spectra-image-gallery__media-wrapper' );
|
|
if ( ! mediaItem ) {
|
|
mediaItem = $scope;
|
|
}
|
|
const boundingClientRect = mediaItem.lastElementChild.getBoundingClientRect();
|
|
const offsetTop = boundingClientRect.top + window.scrollY;
|
|
if ( window.pageYOffset + windowHeight50 >= offsetTop ) {
|
|
const $args = {
|
|
page_number: count,
|
|
};
|
|
const total = $attr.gridPages;
|
|
if ( spectraImageGalleryLoadStatus ) {
|
|
if ( count > total ) {
|
|
loader.style.display = 'none';
|
|
}
|
|
if ( count <= total ) {
|
|
UAGBImageGalleryMasonry.callAjax( $scope, $args, $attr, false, count, $selector, lightboxSwiper, thumbnailSwiper );
|
|
count++;
|
|
spectraImageGalleryLoadStatus = false;
|
|
}
|
|
}
|
|
}
|
|
} );
|
|
} else if ( $attr.feedPagination && ! $attr.paginateUseLoader ) {
|
|
loadButton.onclick = function () {
|
|
const total = $attr.gridPages;
|
|
const $args = {
|
|
total,
|
|
page_number: count,
|
|
};
|
|
loadButton.classList.add( 'disabled' );
|
|
if ( spectraImageGalleryLoadStatus ) {
|
|
if ( count <= total ) {
|
|
UAGBImageGalleryMasonry.callAjax( $scope, $args, $attr, false, count, $selector, lightboxSwiper, thumbnailSwiper );
|
|
count++;
|
|
spectraImageGalleryLoadStatus = false;
|
|
}
|
|
}
|
|
};
|
|
}
|
|
},
|
|
|
|
createElementFromHTML( htmlString ) {
|
|
const htmlElement = document.createElement( 'div' );
|
|
const htmlCleanString = htmlString.replace( /\s+/gm, ' ' ).replace( /( )+/gm, ' ' ).trim();
|
|
htmlElement.innerHTML = htmlCleanString;
|
|
return htmlElement;
|
|
},
|
|
|
|
getCustomURL( image, $attr ) {
|
|
const urlValidRegex = new RegExp(
|
|
'^((http|https)://)(www.)?[a-zA-Z0-9@:%._\\+~#?&//=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%._\\+~#?&//=]*)$'
|
|
);
|
|
const imageID = parseInt( image.getAttribute( 'data-spectra-gallery-image-id' ) );
|
|
return urlValidRegex.test( $attr?.customLinks[ imageID ] ) ? $attr.customLinks[ imageID ] : undefined;
|
|
},
|
|
|
|
openCustomURL( customURL ) {
|
|
window.open( customURL, '_blank' );
|
|
},
|
|
|
|
addClickEvents( element, $attr ) {
|
|
const imageElements = element?.querySelectorAll( '.spectra-image-gallery__media-wrapper' );
|
|
imageElements.forEach( ( image ) => {
|
|
const imageURL = UAGBImageGalleryMasonry.getCustomURL( image, $attr );
|
|
if ( imageURL ) {
|
|
image.style.cursor = 'pointer';
|
|
image.addEventListener( 'click', () => UAGBImageGalleryMasonry.openCustomURL( imageURL ) );
|
|
image.addEventListener( 'keydown', ( event ) => {
|
|
if ( 13 === event.keyCode || 32 === event.keyCode ) {
|
|
event.preventDefault();
|
|
UAGBImageGalleryMasonry.openCustomURL( imageURL );
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
},
|
|
|
|
callAjax( $scope, $obj, $attr, append = false, count, $selector, lightboxSwiper, thumbnailSwiper ) {
|
|
const mediaData = new FormData();
|
|
mediaData.append( 'action', 'uag_load_image_gallery_masonry' );
|
|
mediaData.append( 'nonce', uagb_image_gallery.uagb_image_gallery_masonry_ajax_nonce );
|
|
mediaData.append( 'page_number', $obj.page_number );
|
|
mediaData.append( 'attr', JSON.stringify( $attr ) );
|
|
fetch( uagb_image_gallery.ajax_url, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
body: mediaData,
|
|
} )
|
|
.then( ( resp ) => resp.json() )
|
|
.then( function ( data ) {
|
|
let element = $scope?.querySelector( '.spectra-image-gallery__layout--masonry' );
|
|
if ( ! element ) {
|
|
element = $scope;
|
|
}
|
|
|
|
setTimeout( function () {
|
|
const isotope = new Isotope( element, {
|
|
itemSelector: '.spectra-image-gallery__media-wrapper--isotope',
|
|
stagger: 10,
|
|
} );
|
|
isotope.insert( UAGBImageGalleryMasonry.createElementFromHTML( data.data ) );
|
|
imagesLoaded( element ).on( 'progress', function () {
|
|
isotope.layout();
|
|
} );
|
|
imagesLoaded( element ).on( 'always', function () {
|
|
const currentScope = document.querySelector( $selector );
|
|
const loadButton = currentScope?.querySelector( '.spectra-image-gallery__control-button' )
|
|
loadButton?.classList?.remove( 'disabled' );
|
|
loadLightBoxImages( currentScope, lightboxSwiper, null, $attr, thumbnailSwiper );
|
|
} );
|
|
if ( 'url' === $attr.imageClickEvent && $attr.customLinks ) {
|
|
UAGBImageGalleryMasonry.addClickEvents( element, $attr );
|
|
}
|
|
spectraImageGalleryLoadStatus = true;
|
|
if ( true === append ) {
|
|
$scope?.querySelector( '.spectra-image-gallery__control-button' ).classList.toggle( 'disabled' );
|
|
}
|
|
if ( count === parseInt( $obj.total ) ) {
|
|
$scope.querySelector( '.spectra-image-gallery__control-button' ).style.opacity = 0;
|
|
setTimeout( () => {
|
|
$scope.querySelector( '.spectra-image-gallery__control-button' ).parentElement.style.display =
|
|
'none';
|
|
}, 2000 );
|
|
}
|
|
}, 500 );
|
|
} );
|
|
},
|
|
presentInViewport( element ) {
|
|
const rect = element.getBoundingClientRect();
|
|
return (
|
|
rect.top >= 0 &&
|
|
rect.left >= 0 &&
|
|
rect.bottom <= ( window.innerHeight || document.documentElement.clientHeight ) &&
|
|
rect.right <= ( window.innerWidth || document.documentElement.clientWidth )
|
|
);
|
|
},
|
|
};
|
|
|
|
const UAGBImageGalleryPagedGrid = {
|
|
init( $attr, $selector, lightboxSettings, thumbnailSettings ) {
|
|
let count = 1;
|
|
const $scope = document.querySelector( $selector );
|
|
let thumbnailSwiper = null;
|
|
if ( $attr.lightboxThumbnails ){
|
|
thumbnailSwiper = new Swiper( `${$selector}+.spectra-image-gallery__control-lightbox .spectra-image-gallery__control-lightbox--thumbnails`,
|
|
thumbnailSettings
|
|
);
|
|
lightboxSettings = {
|
|
...lightboxSettings,
|
|
thumbs: {
|
|
swiper: thumbnailSwiper,
|
|
},
|
|
}
|
|
}
|
|
const lightboxSwiper = new Swiper( `${$selector}+.spectra-image-gallery__control-lightbox .spectra-image-gallery__control-lightbox--main`,
|
|
lightboxSettings
|
|
)
|
|
lightboxSwiper.lazy.load();
|
|
loadLightBoxImages( $scope, lightboxSwiper, count, $attr, thumbnailSwiper );
|
|
const arrows = $scope?.querySelectorAll( '.spectra-image-gallery__control-arrows--grid' );
|
|
const dots = $scope?.querySelectorAll( '.spectra-image-gallery__control-dot' );
|
|
for ( let i = 0; i < arrows.length; i++ ) {
|
|
arrows[ i ].addEventListener( 'click', ( event ) => {
|
|
const thisArrow = event.currentTarget;
|
|
let page = count;
|
|
switch ( thisArrow.getAttribute( 'data-direction' ) ) {
|
|
case 'Prev':
|
|
--page;
|
|
break;
|
|
case 'Next':
|
|
++page;
|
|
break;
|
|
}
|
|
let mediaItem = $scope?.querySelector( '.spectra-image-gallery__media-wrapper' );
|
|
if ( ! mediaItem ) {
|
|
mediaItem = $scope;
|
|
}
|
|
const total = $attr.gridPages;
|
|
const $args = {
|
|
page_number: page,
|
|
total,
|
|
};
|
|
if ( page === total || page === 1 ) {
|
|
thisArrow.disabled = true;
|
|
} else {
|
|
arrows.forEach( ( ele ) => {
|
|
ele.disabled = false;
|
|
} );
|
|
}
|
|
if ( page <= total && page >= 1 ) {
|
|
UAGBImageGalleryPagedGrid.callAjax( $scope, $args, $attr, arrows, $selector, lightboxSwiper, thumbnailSwiper );
|
|
count = page;
|
|
}
|
|
} );
|
|
}
|
|
for ( let i = 0; i < dots.length; i++ ) {
|
|
dots[ i ].addEventListener( 'click', ( event ) => {
|
|
const thisDot = event.currentTarget;
|
|
const page = thisDot.getAttribute( 'data-go-to' );
|
|
let mediaItem = $scope?.querySelector( '.spectra-image-gallery__media-wrapper' );
|
|
if ( ! mediaItem ) {
|
|
mediaItem = $scope;
|
|
}
|
|
const $args = {
|
|
page_number: page,
|
|
total: $attr.gridPages,
|
|
};
|
|
UAGBImageGalleryPagedGrid.callAjax( $scope, $args, $attr, arrows, $selector, lightboxSwiper, thumbnailSwiper );
|
|
count = page;
|
|
} );
|
|
}
|
|
},
|
|
|
|
createElementFromHTML( htmlString ) {
|
|
const htmlElement = document.createElement( 'div' );
|
|
const htmlCleanString = htmlString.replace( /\s+/gm, ' ' ).replace( /( )+/gm, ' ' ).trim();
|
|
htmlElement.innerHTML = htmlCleanString;
|
|
return htmlElement;
|
|
},
|
|
|
|
getCustomURL( image, $attr ) {
|
|
const urlValidRegex = new RegExp(
|
|
'^((http|https)://)(www.)?[a-zA-Z0-9@:%._\\+~#?&//=\\-]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%._\\+~#?&//=]*)$'
|
|
);
|
|
const imageID = parseInt( image.getAttribute( 'data-spectra-gallery-image-id' ) );
|
|
return urlValidRegex.test( $attr?.customLinks[ imageID ] ) ? $attr.customLinks[ imageID ] : undefined;
|
|
},
|
|
|
|
openCustomURL( customURL ) {
|
|
window.open( customURL, '_blank' );
|
|
},
|
|
|
|
addClickEvents( element, $attr ) {
|
|
const imageElements = element?.querySelectorAll( '.spectra-image-gallery__media-wrapper' );
|
|
imageElements.forEach( ( image ) => {
|
|
const imageURL = UAGBImageGalleryPagedGrid.getCustomURL( image, $attr );
|
|
if ( imageURL ) {
|
|
image.style.cursor = 'pointer';
|
|
image.setAttribute( 'tabindex', '0' );
|
|
image.addEventListener( 'click', () => UAGBImageGalleryPagedGrid.openCustomURL( imageURL ) );
|
|
image.addEventListener( 'keydown', ( event ) => {
|
|
if ( 13 === event.keyCode || 32 === event.keyCode ) {
|
|
UAGBImageGalleryPagedGrid.openCustomURL( imageURL );
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
},
|
|
|
|
callAjax( $scope, $obj, $attr, arrows, $selector, lightboxSwiper, thumbnailSwiper ) {
|
|
const mediaData = new FormData();
|
|
mediaData.append( 'action', 'uag_load_image_gallery_grid_pagination' );
|
|
mediaData.append( 'nonce', uagb_image_gallery.uagb_image_gallery_grid_pagination_ajax_nonce );
|
|
mediaData.append( 'page_number', $obj.page_number );
|
|
mediaData.append( 'attr', JSON.stringify( $attr ) );
|
|
fetch( uagb_image_gallery.ajax_url, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
body: mediaData,
|
|
} )
|
|
.then( ( resp ) => resp.json() )
|
|
.then( function ( data ) {
|
|
if ( data.success === false ) {
|
|
return;
|
|
}
|
|
setTimeout( function () {
|
|
let element = $scope?.querySelector( '.spectra-image-gallery__layout--isogrid' );
|
|
if ( ! element ) {
|
|
element = $scope;
|
|
}
|
|
const mediaElements = element.querySelectorAll( '.spectra-image-gallery__media-wrapper--isotope' );
|
|
const isotope = new Isotope( element, {
|
|
itemSelector: '.spectra-image-gallery__media-wrapper--isotope',
|
|
layoutMode: 'fitRows',
|
|
} );
|
|
mediaElements.forEach( ( mediaEle ) => {
|
|
isotope.remove( mediaEle );
|
|
isotope.layout();
|
|
} );
|
|
isotope.insert( UAGBImageGalleryPagedGrid.createElementFromHTML( data.data ) );
|
|
imagesLoaded( element ).on( 'progress', function () {
|
|
isotope.layout();
|
|
} );
|
|
imagesLoaded( element ).on( 'always', function () {
|
|
const currentScope = document.querySelector( $selector );
|
|
loadLightBoxImages( currentScope, lightboxSwiper, parseInt( $obj.page_number ), $attr, thumbnailSwiper );
|
|
} );
|
|
if ( $attr.customLinks ) {
|
|
UAGBImageGalleryPagedGrid.addClickEvents( element, $attr );
|
|
}
|
|
if ( parseInt( $obj.page_number ) === 1 ) {
|
|
arrows.forEach( ( arrow ) => {
|
|
arrow.disabled = arrow.getAttribute( 'data-direction' ) === 'Prev';
|
|
} );
|
|
} else if ( parseInt( $obj.page_number ) === parseInt( $obj.total ) ) {
|
|
arrows.forEach( ( arrow ) => {
|
|
arrow.disabled = arrow.getAttribute( 'data-direction' ) === 'Next';
|
|
} );
|
|
} else {
|
|
arrows.forEach( ( arrow ) => {
|
|
arrow.disabled = false;
|
|
} );
|
|
}
|
|
$scope
|
|
?.querySelector( '.spectra-image-gallery__control-dot--active' )
|
|
.classList.toggle( 'spectra-image-gallery__control-dot--active' );
|
|
const $activeDot = $scope?.querySelectorAll( '.spectra-image-gallery__control-dot' );
|
|
$activeDot[ parseInt( $obj.page_number ) - 1 ].classList.toggle(
|
|
'spectra-image-gallery__control-dot--active'
|
|
);
|
|
}, 500 );
|
|
} );
|
|
},
|
|
};
|
|
|
|
const cycleInLightbox = ( selector, e ) => {
|
|
// Check if Tab key was pressed
|
|
if ( e.key === 'Tab' ) {
|
|
const focusableElements = selector.querySelectorAll( 'button, div[data-role="button"], [href], [tabindex]:not([tabindex="-1"])' );
|
|
const firstFocusableElement = focusableElements[0];
|
|
const lastFocusableElement = focusableElements[focusableElements.length - 1];
|
|
|
|
// Get the active element using ownerDocument
|
|
const activeElement = e.target.ownerDocument.activeElement;
|
|
|
|
// Check if Shift + Tab was pressed and if the current active element is the first one
|
|
if ( e.shiftKey && activeElement === firstFocusableElement ) {
|
|
e.preventDefault();
|
|
lastFocusableElement.focus();
|
|
}
|
|
// Check if Tab was pressed and if the current active element is the last one
|
|
else if ( !e.shiftKey && activeElement === lastFocusableElement ) {
|
|
e.preventDefault();
|
|
firstFocusableElement.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
const loadLightBoxImages = ( blockScope, lightboxSwiper, pageNum, attr, thumbnailSwiper ) => {
|
|
if ( ! blockScope ) {
|
|
return;
|
|
}
|
|
const pageLimit = attr.paginateLimit;
|
|
|
|
const theBody = document.querySelector( 'body' );
|
|
const updateCounter = ( curPage ) => {
|
|
const lightbox = blockScope?.nextElementSibling;
|
|
const counter = lightbox.querySelector( '.spectra-image-gallery__control-lightbox--count-page' );
|
|
if ( counter ) {
|
|
counter.innerHTML = parseInt( curPage ) + 1;
|
|
}
|
|
};
|
|
lightboxSwiper.on( 'activeIndexChange', ( swiperInstance ) => {
|
|
if ( attr.lightboxThumbnails ) {
|
|
thumbnailSwiper.slideTo( swiperInstance.activeIndex );
|
|
}
|
|
if ( attr.lightboxDisplayCount ) {
|
|
updateCounter( swiperInstance.activeIndex );
|
|
}
|
|
lightboxSwiper.lazy.load();
|
|
} )
|
|
if ( attr.lightboxThumbnails ) {
|
|
thumbnailSwiper.on( 'activeIndexChange', ( swiperInstance ) => {
|
|
lightboxSwiper.slideTo( swiperInstance.activeIndex );
|
|
} );
|
|
|
|
}
|
|
const lightbox = blockScope?.nextElementSibling;
|
|
let lightboxHandlers = {};
|
|
if ( lightbox && lightbox?.classList.contains( 'spectra-image-gallery__control-lightbox' ) ) {
|
|
// create a lightbox cycle listeners.
|
|
const createListeners = () => {
|
|
const cycleInLightboxWithID = cycleInLightbox.bind( null, lightbox );
|
|
|
|
// Function to add the event listener
|
|
function addEventListener() {
|
|
lightbox.addEventListener( 'keydown', cycleInLightboxWithID );
|
|
}
|
|
|
|
// Function to remove the event listener
|
|
function removeEventListener() {
|
|
lightbox.removeEventListener( 'keydown', cycleInLightboxWithID );
|
|
}
|
|
|
|
return { addEventListener, removeEventListener };
|
|
};
|
|
|
|
lightboxHandlers = createListeners();
|
|
|
|
lightbox.addEventListener( 'keydown', ( event ) => {
|
|
if ( 27 === event.keyCode ) {
|
|
theBody.style.overflow = '';
|
|
lightbox.style.opacity = 0;
|
|
setTimeout( () => {
|
|
lightbox.style.display = 'none';
|
|
lightboxHandlers.removeEventListener();
|
|
if ( clickedImageId ) {
|
|
const clickedImage = document.querySelector( `[data-spectra-gallery-image-id="${clickedImageId}"]` );
|
|
clickedImage?.focus();
|
|
clickedImageId = null;
|
|
}
|
|
}, 250 );
|
|
}
|
|
} );
|
|
lightbox.style.display = 'none';
|
|
if ( attr.lightboxCloseIcon ) {
|
|
const closeButton = lightbox.querySelector( '.spectra-image-gallery__control-lightbox--close' );
|
|
if ( closeButton ) {
|
|
closeButton.addEventListener( 'click', () => {
|
|
theBody.style.overflow = '';
|
|
lightbox.style.opacity = 0;
|
|
setTimeout( () => {
|
|
lightbox.style.display = 'none';
|
|
if ( clickedImageId ) {
|
|
const clickedImage = document.querySelector( `[data-spectra-gallery-image-id="${clickedImageId}"]` );
|
|
clickedImage?.focus();
|
|
clickedImageId = null;
|
|
}
|
|
lightboxHandlers.removeEventListener();
|
|
}, 250 );
|
|
} );
|
|
}
|
|
}
|
|
if ( attr.lightboxDisplayCount ) {
|
|
const lightboxTotal = lightbox.querySelector( '.spectra-image-gallery__control-lightbox--count-total' );
|
|
lightboxTotal.innerHTML = attr.mediaGallery.length;
|
|
}
|
|
}
|
|
const enableLightbox = ( goTo, clickedImage ) => {
|
|
if ( ! lightboxSwiper || !lightbox ) {
|
|
return;
|
|
}
|
|
clickedImageId = clickedImage.getAttribute( 'data-spectra-gallery-image-id' );
|
|
lightbox.style.display = '';
|
|
lightbox.focus();
|
|
setTimeout( () => {
|
|
lightboxSwiper.slideTo( goTo );
|
|
}, 100 );
|
|
setTimeout( () => {
|
|
lightbox.style.opacity = 1;
|
|
if ( lightbox?.classList.contains( 'spectra-image-gallery__control-lightbox' ) ) {
|
|
theBody.style.overflow = 'hidden';
|
|
}
|
|
|
|
lightboxHandlers.addEventListener();
|
|
|
|
}, 250 );
|
|
}
|
|
|
|
if ( pageNum !== null ) {
|
|
setTimeout( () => {
|
|
addClickListeners( blockScope, pageNum, enableLightbox, pageLimit, attr );
|
|
}, 1000 );
|
|
} else {
|
|
addClickListeners( blockScope, null, enableLightbox, null, attr );
|
|
}
|
|
};
|
|
|
|
const generateUniqueId = ( index ) => `image-${index}-${Date.now()}`;
|
|
|
|
const addClickListeners = ( $scope, pageNum, enableLightbox, pageLimit, attr ) => {
|
|
const images = $scope.querySelectorAll( '.spectra-image-gallery__media-wrapper' );
|
|
const imageUrls = {};
|
|
if ( 'image' === attr.imageClickEvent ) {
|
|
const mediaGallery = attr.mediaGallery;
|
|
mediaGallery.forEach( media => {
|
|
imageUrls[ media.id ] = media.url;
|
|
} );
|
|
}
|
|
|
|
images.forEach( ( image, index ) => {
|
|
image.style.cursor = 'pointer';
|
|
const uniqueId = generateUniqueId( index );
|
|
if( 'lightbox' === attr.imageClickEvent ) {
|
|
image.setAttribute( 'data-spectra-gallery-image-id', uniqueId );
|
|
};
|
|
if ( 'image' === attr.imageClickEvent ) {
|
|
const imgId = image.getAttribute( 'data-spectra-gallery-image-id' );
|
|
const imgURL = imageUrls[ imgId ];
|
|
image.addEventListener( 'click', () => {
|
|
openImageInWindow( imgURL ); // To avoid opening multiple tab at same when Popup and redirect is enabled.
|
|
} );
|
|
image.addEventListener( 'keydown', ( event ) => {
|
|
if ( 13 === event.keyCode || 32 === event.keyCode ) {
|
|
openImageInWindow( imgURL );
|
|
}
|
|
} );
|
|
} else {
|
|
const nextImg = pageNum !== null ? index + ( pageNum - 1 ) * pageLimit : index;
|
|
image.addEventListener( 'click', () => enableLightbox( nextImg, image ) );
|
|
image.addEventListener( 'keydown', ( event ) => {
|
|
if ( 13 === event.keyCode || 32 === event.keyCode ) {
|
|
event.preventDefault();
|
|
enableLightbox( nextImg, image );
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
}
|
|
|
|
let imageWindow = null;
|
|
const openImageInWindow = ( imageUrl ) => {
|
|
// Check if the window is already open
|
|
if ( imageWindow && !imageWindow.closed ) {
|
|
// If open, focus on the existing window
|
|
imageWindow.focus();
|
|
} else {
|
|
// If not open or closed, open a new window
|
|
imageWindow = window.open( imageUrl, '_blank' );
|
|
}
|
|
} |