Idea for a next version

[bakura10]

Hi :),

First of all, thanks a lot for this extremely useful library. It is one of the only thing that I have not been able to replace with our own hand-crafted code, as this library does the work so well.

However, there are a few issues that I feel could be improved:

• Library size
• Ease of extension

For context, we are using this library for Shopify themes, and we often need rather complex design, but whenever I do a new project, for the hell of me I am never able to remember how the library works, and have to constantly look at the doc. One thing being extremely hard is doing a custom UI.

I think that this library could be, in the next major version, completely overhauled to take advantage of web components. For instance, here is how a simplified initialization could work:

<photoswipe-gallery>
  <div class="gallery" slot="gallery">
     // The images
  </div>
</photoswipe>

By using shadow DOM, PhotoSwipe could provide its own UI, but ideally I should be able to provide my own by providing a custom template:

<photoswipe-instance>
  <template>
     <slot name="gallery"></slot>

     <div class="bottom-bar">
        <button class="button" part="previous-button">Prev</button>
        <button class="button" part="close-button">Close</button>
        <button class="button" part="next-button">Next</button>
     </div>
  </template>
</photoswipe-instance>

There is no longer any PhotoSwipe specific classes, just plain Shadow DOM parts, and a custom template.

Exposing this through a custom element would allow developer with complex use case to simply extend the default custom element:

class CustomPhotoswipe extends PhotoSwipe {
}

window.customElements.define('custom-photoswipe', CustomPhotoswipe);

In the HTML:

<custom-photoswipe>

</custom-photoswipe>

Those are just rough ideas, but I think PhotoSwipe is the perfect example where Shadow DOM, CSS parts and custom templates really would shine :).

[dimsemenov]

The problem is that images are not always direct children of the gallery, and there is often secondary content in-between, so the structure like

<photoswipe>
  <div class="gallery" slot="gallery">
     // The images
  </div>
</photoswipe>

would not work well and will be messy compared to something like:

const lightbox = new PhotoSwipeLightbox({
  gallery: '.gallery',
  children: 'a',
});
lightbox.init();

Improvements to API of adding various UI elements are quite welcome though, so if you have more specific suggestions - let me know or send a PR.

[bakura10]

This is where ShadowDOM actually makes it nice. For instance, you could support easily the use case where the gallery is embedded inside:

<photoswipe-gallery>
  <div slot="gallery">
     // Your img
  </div>
</photoswipe-gallery>

But also make it configurable through an attribute:

<photoswipe-gallery item-selector=".gallery a">
  <div class="gallery" slot="gallery">
    // Populated in JS
  </div>
</photoswipe-gallery>

And then use the assign API to assign item to the gallery slot with the assign API: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assign

If you have some very complex need, this can be done as well by sub-classing and using manually the slot API.

By nature, PhotoSwipe is library that requires JS, so exploring a Shadow DOM API is most likely something that wuld simplify a lot the library from a consumption point of view :)