Extending/adding lightbox listeners?

Thank you.

Registering UI appears to work, however the current implementation is not really working well to accommodate events due to empty pswp.pswp object as per this writing.

     var bps = Drupal.blazyPhotoSwipe || false;

      // DOM ready fix.
      setTimeout(function () {
        if (bps && bps.init) {
          // Merge other UI providers, if any.
          Drupal.blazyPhotoSwipe.ui = bps.ui || {};

          bps.init.finally(function () {
            // @todo this object has empty pswp object.
            var pswp = bps.beforeInit;
            console.log('pswp', pswp);

            if (pswp) {
              Drupal.blazyPhotoSwipe.ui.test = {
                name: 'test-button',
                ariaLabel: 'Toggle zoom',
                order: 9,
                isButton: true,
                html: 'Test',
                onClick: (event, el) => {
                  if (confirm('Do you want to toggle zoom?')) {
                    // @todo pswp.pswp.toggleZoom();
                  }
                }
              };
            }
          });
        }
      });

Be sure to add CSS accordingly to avoid confusion:

button.pswp__button--test-button {
  background: #136912 !important;
  font-size: 20px;
  color: #fff;
}

Conclusion, we need to inject pswp object manually, or refactor to use gallery element to support multiple instances rather than relying on global Drupal.blazyPhotoSwipe.beforeInit.

This is another sample for download link:
https://www.drupal.org/project/blazy_photoswipe/issues/3389181#comment-1...

The patch will make immutable pswp object available globally, while make it possible to work with individual elements.
The last was taken from Slick convention which stores JS instance in the individual gallery element.

This sample will go to Drupal.behaviors.attach block:

var bps = Drupal.blazyPhotoSwipe || false;

      // DOM ready fix.
      setTimeout(function () {
        var items = context.querySelectorAll('[data-photoswipe-gallery]');
        if (items.length) {
          items.forEach(function (el) {
            var pswp = el.pswp;
            console.log('pswp', pswp);

            if (bps && bps.init) {
              // Merge other UI providers, if any.
              Drupal.blazyPhotoSwipe.ui = bps.ui || {};
              var lightbox = bps.lightbox;

              console.log('lightbox', lightbox);

              if (lightbox) {
                Drupal.blazyPhotoSwipe.ui.test = {
                  name: 'test-button',
                  ariaLabel: 'Toggle zoom',
                  order: 9,
                  isButton: true,
                  html: 'Test',
                  onClick: (event, el) => {
                    if (confirm('Do you want to toggle zoom?')) {
                      console.log('event', event);
                      lightbox.pswp.toggleZoom();
                    }
                  }
                };

                pswp.on('beforeOpen', function (item) {
                  console.log('beforeOpen', item);
                });

                pswp.on('initialLayout', function (item) {
                  console.log('initialLayout', item);
                });
              }
            }
          });
        }
      });

Adjust ES6 mix above accordingly, but fine though.
Also works fine with sample from #3.

Let me know if any betterment for this?

IIRC, previously using non-indices keys for UI objects appeared to fail, but now works.

But then indices caused duplicated elements on subsequent launches, so I changed:
Drupal.blazyPhotoSwipe.ui[0] = {}, etc.

to non-indices keys:
Drupal.blazyPhotoSwipe.ui.customCaption = {}, etc.

This would do for now.

Improvements are welcome.

Thank you.