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

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... ✨ Photoswipe 5: provide a download link Fixed

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) {
              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.

Awesome, thank you so much! I'll give it a shot.

Automatically closed - issue fixed for 2 weeks with no activity.