ispim-1.0.x-dev/js/ispim.preview-image.js

((document, Drupal, drupalSettings, once) => {
  Drupal.behaviors.ispimPreviewImage = {
    attach() {
      once('ispimPreviewImage', '.ispim-preview-image-selector').forEach(
        /**
         * @param {HTMLSelectElement} element
         *   Input element.
         */
        (element) => {
          element.addEventListener(
            'change',
            Drupal.ispimPreviewImage.onPreviewImageChange,
          );
        },
      );
    },
  };

  Drupal.ispimPreviewImage = Drupal.ispimPreviewImage || {};

  /**
   * @param {InputEvent} event
   *   Event details.
   */
  Drupal.ispimPreviewImage.onPreviewImageChange = (event) => {
    const htmlId = event.currentTarget.id;

    Drupal.ispimPreviewImage.changeImages(
      drupalSettings.ispim.previewImageSelectors[htmlId],
      event.currentTarget.value,
    );
  };

  /**
   * @param {Object} selectorSettings
   *   Settings.
   * @param {String} newPreviewImageUri
   *   Image URI.
   */
  Drupal.ispimPreviewImage.changeImages = (
    selectorSettings,
    newPreviewImageUri,
  ) => {
    document.querySelectorAll(selectorSettings.imageSelector).forEach((img) => {
      const currentSrc = img.src;
      const imageStyleId = Drupal.ispimPreviewImage.parseImageStyleId(currentSrc);

      img.onload = Drupal.ispimPreviewImage.onImageLoad;

      img.src = imageStyleId === null
        ? drupalSettings.ispim.previewImages[newPreviewImageUri].original
        : drupalSettings.ispim.previewImages[newPreviewImageUri].imageStyles[imageStyleId];
    });
  };

  /**
   * @param {Event} event
   *   Event details.
   */
  Drupal.ispimPreviewImage.onImageLoad = (event) => {
    const imgElement = event.currentTarget;
    imgElement.setAttribute('width', imgElement.naturalWidth);
    imgElement.setAttribute('height', imgElement.naturalHeight);

    const displayWidth = parseInt(imgElement.style.width.replace('px', ''), 10);
    const height = imgElement.naturalHeight * (displayWidth / imgElement.naturalWidth);
    imgElement.style.height = `${height}px`;

    const previewImageWrapper = imgElement.closest('.preview-image-wrapper');
    if (previewImageWrapper !== null) {
      Drupal.ispimPreviewImage.updatePreviewImageWrapper(previewImageWrapper);
    }
  };

  /**
   * @param {String} imgSrc
   *   Image URL.
   *
   * @return {null|String}
   *   Image Style machine-name.
   */
  Drupal.ispimPreviewImage.parseImageStyleId = (imgSrc) => {
    const result = imgSrc.match(
      /\/styles\/(?<imageStyleId>[^/]+)\/(public|private)\//,
    );

    return result === null ? null : result.groups.imageStyleId;
  };

  /**
   * @param {HTMLElement} wrapper
   *   Wrapper element.
   */
  Drupal.ispimPreviewImage.updatePreviewImageWrapper = (wrapper) => {
    const img = wrapper.querySelector('img');
    wrapper.querySelectorAll('a[href]').forEach(
      /**
       * @param {HTMLLinkElement} link
       *   Link element.
       */
      (link) => {
        link.setAttribute('href', img.src);
      },
    );

    const displayWidth = parseInt(img.width, 10);

    wrapper.querySelectorAll('.preview-image').forEach((element) => {
      const height = img.naturalHeight * (displayWidth / img.naturalWidth);
      element.style.height = `${height}px`;
    });

    wrapper.querySelectorAll('.width').forEach((element) => {
      const label = element.querySelector('span');
      if (label) {
        label.textContent = `${img.naturalWidth}px`;
      }
    });

    wrapper.querySelectorAll('.height').forEach((element) => {
      const height = img.naturalHeight * (displayWidth / img.naturalWidth);
      element.style.height = `${height}px`;

      const label = element.querySelector('span');
      if (label) {
        label.textContent = `${img.naturalHeight}px`;
      }
    });
  };
})(document, Drupal, drupalSettings, once);