Use Glightbox in webcomponent

[Lefthandmedia]

I'm trying to use GL in a web-component. the thing i'm looking for now is how can i add (initialize) a new element to the lightbox?
my component checks if GL has been loaded, if if it gets loaded and initialise (Glightbox({ selector: '.my-lightbox' })).
Another instance of my-lightbox wil see that Glightbox is already loaded so it wil just need to add the new element to the lightbox slides.
Now.. do i have to re-initialise Glightbox for every web component on my page (Glightbox({ selector: '.my-lightbox' })) or is there a way to just add my second component to the allready initialised Glightbox?
Tnx
RDG

[gingerchew]

Interesting idea! If you only have 1 lightbox, for example each web component acts as a trigger for opening a lightbox, then you could save the lightbox to a static property:

import GLightbox from 'path/to/glightbox.js';

window.customElements.define('my-lightbox-trigger', class extends HTMLElement {
	constructor() { super() }

	static _lightbox = new GLightbox({ selector: '.my-lightbox' });

	connectedCallback() {
		const potentialLightboxTriggers = Array.from(this.querySelectorAll('.my-lightbox'), (el) => ({
			href: el.linkToImage,
			width: Infinity,
		}));
		
		if (potentialLightboxTriggers.length) this.constructor._lightbox.setElements(potentialLightboxTriggers);
	}
});

You're right in your understanding that GLightbox collects elements on the initial run and not on each opening, but using setElements, or insertSlide for individual items, you can add items to the lightbox post-init.

[Lefthandmedia]

So if i can add a trigger with setElements do i need to define a .selector as well?
I'm looking for a way to add(process) and remove(destroy) triggers.
That means i can have one static GL in my App and can manage the triggers per state (page) . Ideally i want to run new GLightbox({ selector: '.my-lightbox' }) only once for my app.

I'm not sure if i'm doing this wrong but when a add a trigger with setElement the trigger is added to _lightbox.elements but the trigger is not properly initialised. There is no click event to open the lightbox on it

[gingerchew]

You're exactly right, the selector option is for the usual "on init, find these elements to use as slides." If you don't pass a selector, it will search for the default one (.glightbox if I remember right).

I may have accidentally misled you, setElements doesn't mark the elements pass in as triggers for the lightbox but as slides inside the lightbox. You'd need to add a little event handling:

window.customElements.define('my-lightbox', class extends HTMLElement {
	handleEvent({ type, target }) {
		if (type === 'click' && target.closest('.my-trigger')) {
			this.constructor._lightbox.open();
			// Or if you want to open at a certain index use openAt with the index of the slide
		}
    }

	connectedCallback() {
		this.addEventListener('click', this);
	}

	disconnectedCallback() {
		this.removeEventListener('click', this);
	}
})