gslg.js

	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 ) );
			}
		};
	}