Skip to content

Instantly share code, notes, and snippets.

@niklasp
Created October 4, 2021 10:02
Show Gist options
  • Save niklasp/9a6d26a0b1c9050e8600015eec64e9ed to your computer and use it in GitHub Desktop.
Save niklasp/9a6d26a0b1c9050e8600015eec64e9ed to your computer and use it in GitHub Desktop.
initLg() {
if ( ! this.swiperSettings.hasLg ) {
return;
}
const dynamicEl = [ ...this.domSlides ].reduce( ( result, domSlide ) => {
let lgElement;
if ( domSlide.classList.contains( 'ed-bg-image' ) ) {
const bgImg = domSlide.querySelector( '.eedee-background-div img' );
lgElement = {
src: bgImg.src,
thumb: bgImg.src,
alt: bgImg.alt,
srcset: bgImg.srcset,
};
} else if ( domSlide.classList.contains( 'ed-bg-video' ) ) {
const bgVideo = domSlide.querySelector( '.eedee-background-div video' );
const poster = bgVideo.hasAttribute('poster') && bgVideo.getAttribute('poster') !== '' ? bgVideo.poster : eedeeGutenslider.pluginsUrl + '/build/images/video_poster_placeholder.jpg';
lgElement = {
size: `${ bgVideo.dataset.width }-${ bgVideo.dataset.height }`,
video: {
'source': [
{
src: bgVideo.src,
type: bgVideo.getAttribute('type'),
alt: bgVideo.alt,
}
],
attributes: {
controls: true,
}
},
poster: poster,
thumb: poster,
};
if ( bgVideo.hasAttribute('loop') ) {
lgElement.video.attributes.loop = "";
}
} else {
return result;
}
const slideMedium = domSlide.querySelector('img, video');
let slideTitle = '';
if ( this.swiperSettings.lgTitle ) {
if ( this.swiperSettings.lgTitle === 'title' ) {
slideTitle = typeof slideMedium.dataset.title === "undefined" ? '' : slideMedium.dataset.title;
}
if ( this.swiperSettings.lgTitle === 'alt' ) {
slideTitle = typeof slideMedium.dataset.alt === "undefined" ? '' : slideMedium.alt;
}
}
let slideCaption = '';
if ( this.swiperSettings.lgCaption ) {
if ( this.swiperSettings.lgCaption === 'caption' ) {
slideCaption = typeof slideMedium.dataset.caption === "undefined" ? '' : slideMedium.dataset.caption;
}
if ( this.swiperSettings.lgCaption === 'description' ) {
slideCaption = typeof slideMedium.dataset.description === "undefined" ? '' : slideMedium.dataset.description;
}
if ( this.swiperSettings.lgCaption === 'alt' ) {
slideCaption = typeof slideMedium.dataset.alt === "undefined" ? '' : slideMedium.alt;
}
}
lgElement = {
...lgElement,
subHtml: `<h4>${ slideTitle }</h4><p>${ slideCaption }</p>`,
}
result.push( lgElement );
return result;
}, []);
this.lightGallery = lightGallery( this.el, {
licenseKey: '1234-4232-1231-3111',
plugins: this.swiperSettings.lgThumbnails ? [ lgZoom, lgThumbnail, lgVideo ] : [ lgZoom, lgVideo ],
dynamic: true,
dynamicEl,
mode: this.lgTransition,
container: document.body,
addClass: 'gs-lightgallery',
download: false,
hideBarsDelay: 2000,
loop: Boolean( this.swiperSettings.loop ),
counter: Boolean( this.swiperSettings.hasLgCounter ),
autoplayFirstVideo: false,
});
this.el.addEventListener( 'lgAfterSlide', this.onLgAfterSlide );
this.el.addEventListener( 'lgBeforeOpen', this.onLgBeforeOpen );
this.el.addEventListener( 'lgBeforeClose', this.onLgBeforeClose );
// add event listeners
[ ...this.el.querySelectorAll( '.wp-block-eedee-block-gutenslide' ) ].map( ( slide, idx ) => {
//do not add lightgallery if we have no bg media
if ( ! slide.classList.contains( 'ed-bg-image' ) && ! slide.classList.contains( 'ed-bg-video' ) ){
return;
}
//do not add lightgallery if we have a link
if( slide.querySelector( '.slide-link' ) !== null ) {
return;
}
slide.addEventListener('click', () => {
const indexToOpen = parseInt( slide.dataset.lgImageIdx );
this.lightGallery.openGallery( indexToOpen ? indexToOpen : 0 );
this.lightGallery.$backdrop.firstElement.style.backgroundColor = this.overlayBgColor ? this.overlayBgColor : '#fff';
this.lightGallery.$container.firstElement.style.setProperty('--gutenslider-lightgallery-font', this.fontColor);
});
});
}
onLgBeforeOpen( e ) {
if ( this.swiperSettings.autoplay ) {
this.swiperInstance.autoplay.stop();
}
}
onLgBeforeClose( e ) {
if ( this.swiperSettings.autoplay ) {
setTimeout(() => {
this.swiperInstance?.autoplay.start();
}, 1000);
}
}
onLgAfterSlide( e ) {
const { index } = e.detail;
if ( typeof index !== 'undefined' ) {
const activeSlide = this.el.querySelector( `[data-lg-image-idx="${ index }"]` );
const imageIndex = activeSlide?.dataset.swiperSlideIndex;
if ( this.swiperSettings.loop ) {
this.swiperInstance?.slideToLoop( parseInt( imageIndex ) );
} else {
this.swiperInstance?.slideTo( parseInt( imageIndex ) );
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment