HOME

class WooThumbnails {
  #elements = {
    thumbsVerticalLayout: document.querySelector(".owp-thumbs-layout-vertical"),
  };

  constructor() {
    if (!!this.#elements.thumbsVerticalLayout) {
      this.#setupEventListeners();
    }
  }

  #setupEventListeners = () => {
    window.addEventListener("load", this.#start);
    window.addEventListener("resize", this.#start);
  };

  #start = () => {
    const thumbsNav =
      this.#elements.thumbsVerticalLayout.querySelector(".flex-control-nav");

    if (!!thumbsNav) {
      if (window.innerWidth > 768) {
        const imageHeight =
          this.#elements.thumbsVerticalLayout.querySelector(
            ".flex-viewport"
          )?.offsetHeight;
        const navHeight =
          this.#elements.thumbsVerticalLayout.querySelector(
            ".flex-control-nav"
          )?.offsetHeight;

        if (navHeight > imageHeight + 50) {
          thumbsNav.style.maxHeight = `${imageHeight}px`;
        }
      } else {
        thumbsNav.style.maxHeight = "";
      }
    }
  };
}

new WooThumbnails();