Código modal photoswipe

modal-codigo-antigo.js

// Select image from thumbnail
    $(".product-detail-thumblist").on("click", "a", function (evt) {
        const elmId = $(this).attr("href");

        evt.preventDefault();

        if (!elmId || $(this).hasClass("control")) {
            return;
        }

        $(".product-feature-image").addClass("hidden");
        $(`#${elmId}`).removeClass("hidden");
    });

    const initPhotoSwipeFromDOM = () => {
      const pswpElement = document.querySelectorAll('.pswp')[0];
      // define options (if needed)
      const options = {
        index: 0,
        shareEl: false
      };

      /**
      * Parse picture index and gallery index from URL (#&pid=1&gid=2)
      * @returns {Object} - Properties from URL
      */
      const photoswipeParseHash = () => {
          const hash = window.location.hash.substring(1);
          let params = {};

          const vars = hash.split('&');
          for (let i = 0; i < vars.length; i++) {
              if (!vars[i]) {
                  continue;
              }
              let pair = vars[i].split('=');
              if (pair.length < 2) {
                  continue;
              }
              params[pair[0]] = pair[1];
          }

          if (params.gid) {
              params.gid = parseInt(params.gid, 10);
          }

          return params;
      };

      const openPhotoSwipe = (figure, galleryPswp, fromUrl) => {
        let itens = [];

        //- fromUrl: {url: true, gid: 1, pid: "1"}

        if(fromUrl) {
          if(!fromUrl.url) {
            return
          }

          if(fromUrl.gid) {
            let figures = document.querySelectorAll('.product-feature-image')

            figures.forEach((target) => {
              let targetPid = target.getAttribute('data-pswp-pid')
              if(fromUrl.pid === targetPid) {
                const src = target.querySelector('picture').getAttribute('data-pswp');
                const title = target.querySelector('figcaption').textContent;

                itens.push({
                  src,
                  title,
                  pid: fromUrl.pid,
                  w: 0,
                  h: 0,
                });
                return;
              }
            })

          }


        } else {

          const imageSrc = figure.querySelector('picture').getAttribute('data-pswp');
          const title = figure.querySelector('figcaption').textContent;
          const galleryUID = galleryPswp.getAttribute('data-pswp-galleryid');
          const pid = figure.getAttribute('data-pswp-pid');
          const options = { galleryUID }
          itens = [{
            src: imageSrc,
            w: 0,
            h: 0,
            title,
            pid
          }];

        }


        // Initializes and opens PhotoSwipe
        const gallery = new PhotoSwipe(
          pswpElement,
          PhotoSwipeUI_Default,
          itens,
          options
        );

        gallery.listen('imageLoadComplete', function (index, item) {
          if (item.h < 1 || item.w < 1) {
            let img = new Image()

            img.onload = () => {
              item.w = img.width
              item.h = img.height
              gallery.invalidateCurrItems()
              gallery.updateSize(true)
            }

            img.src = item.src
          }
        })

        gallery.init();
        photoswipeParseHash()
      }


      //- if (hashData.pid && hashData.gid) {
      //-     openPhotoSwipe(elFigure, hashData.pid);
      //- }

      //- $(".product-feature-image").each((i, elFigure) => {
      //-   const pid = i + 1;

      //-   $(elFigure).on('click', function () {
      //-     //- // Parse URL and open gallery if it contains #&pid=3&gid=1
      //-     openPhotoSwipe(this, pid);
      //-   });

      //- });

      let galleryPswp = document.querySelector('.product-boxview');
      const hashData = photoswipeParseHash();

      if (hashData.pid && hashData.gid) {
        openPhotoSwipe(null, hashData, {url: true, ...hashData});
      }

      $(".product-feature-image").on('click', function () {
          //- // Parse URL and open gallery if it contains #&pid=3&gid=1
          openPhotoSwipe(this, galleryPswp);
      });
    }

    initPhotoSwipeFromDOM();

modal-codigo-refatorado.js

const initPhotoSwipeFromDOM = (galleryPswp) => {
      const pswpElement = document.querySelectorAll('.pswp')[0];
      const options = {
        galleryPIDs: galleryPswp.getAttribute('data-pswp-galleryId'),
        index: 0,
        loadingIndicatorDelay: 500,
        bgOpacity: 1,
        shareEl: false
      };

      /**
      * Parse picture index and gallery index from URL (#&pid=1&gid=2)
      * @returns {Object} - Properties from URL
      */
      const photoswipeParseHash = () => {
          const hash = window.location.hash.substring(1);
          let params = {};

          const vars = hash.split('&');
          for (let i = 0; i < vars.length; i++) {
              if (!vars[i]) {
                  continue;
              }
              let pair = vars[i].split('=');
              if (pair.length < 2) {
                  continue;
              }
              params[pair[0]] = pair[1];
          }

          if (params.gid) {
              params.gid = parseInt(params.gid, 10);
          }

          return params;
      };

      const parseElements = (getAll, el) => {
        let src = '';
        let title = '';
        let pid = '';

        if(getAll) {
          let figures = Array.from(document.querySelectorAll(el));

          if(figures.length) {
            return figures.map((figure) => {
              src = figure.querySelector('picture').getAttribute('data-pswp');
              title = figure.querySelector('figcaption').textContent;
              pid = figure.getAttribute('data-pswp-pid');

              return {
                src,
                title,
                pid,
                w: 0,
                h: 0
              };
            });
          }

          return []
        }

        src = el.querySelector('picture').getAttribute('data-pswp');
        title = el.querySelector('figcaption').textContent;
        pid = el.getAttribute('data-pswp-pid');

        return {
          src,
          title,
          pid,
          w: 0,
          h: 0
        };
      }

      const openPhotoSwipe = (figure, fromUrl) => {
        let itens = [];

        //- fromUrl: {url: true, gid: 1, pid: "1"}
        if((fromUrl && fromUrl.url) && fromUrl.gid) {
          let targetFigure = parseElements(true, '.product-feature-image')
            .filter((i) => fromUrl.pid === i.pid);
          itens.push(...targetFigure);

        } else {
          itens.push(parseElements(false, figure));
        }

        // Initializes and opens PhotoSwipe
        const gallery = new PhotoSwipe(
          pswpElement,
          PhotoSwipeUI_Default,
          itens,
          options
        );

        gallery.listen('imageLoadComplete', function (index, item) {
          if (item.h < 1 || item.w < 1) {
            let img = new Image()

            img.onload = () => {
              item.w = img.width
              item.h = img.height
              gallery.invalidateCurrItems()
              gallery.updateSize(true)
            }

            img.src = item.src
          }
        });

        gallery.init();

      }

      // Parse URL and open gallery if it contains #&pid=3&gid=1
      const hashDataPswp = photoswipeParseHash();

      if (hashDataPswp.pid && hashDataPswp.gid) {
        openPhotoSwipe(null, {url: true, ...hashDataPswp});
      }

      $(".product-feature-image").on('click', function () {
          openPhotoSwipe(this);
      });
    }

    const galleryPswp = document.querySelector('#productImageBox');
    initPhotoSwipeFromDOM(galleryPswp);