Funcionalidad JavaScript OV Dock - OV DIVI

<script src="https://cdn.jsdelivr.net/npm/scrollbooster@3.0.2/dist/scrollbooster.min.js"></script>

<script>
// Seleccionar elementos
const dockContainer = document.querySelector(".ov-dock");
const dockItems = dockContainer.querySelectorAll(".ov-dock-item");

// Constantes
const defaultItemScale = 1;
const desktopHoverItemScale = 1.8;
const desktopNeighborItemScale = 1.4;
const desktopDefaultMargin = "10px";
const desktopExpandedMargin = "24px";
const mobileHoverItemScale = 1.4;
const mobileNeighborItemScale = 1.2;
const mobileDefaultMargin = "5px";
const mobileExpandedMargin = "12px";

let hoverItemScale, neighborItemScale, defaultMargin, expandedMargin;
let scrollBooster;

const updateConstants = () => {
  const isMobile = window.innerWidth <= 768;

  if (isMobile) {
    hoverItemScale = mobileHoverItemScale;
    neighborItemScale = mobileNeighborItemScale;
    defaultMargin = mobileDefaultMargin;
    expandedMargin = mobileExpandedMargin;
  } else {
    hoverItemScale = desktopHoverItemScale;
    neighborItemScale = desktopNeighborItemScale;
    defaultMargin = desktopDefaultMargin;
    expandedMargin = desktopExpandedMargin;
  }
};

const updateDockItems = () => {
  dockItems.forEach((item, index) => {
    let scale = defaultItemScale;
    let margin = defaultMargin;

    if (item.isHovered) {
      scale = hoverItemScale;
      margin = expandedMargin;
    } else if (item.isNeighbor) {
      scale = neighborItemScale;
      margin = expandedMargin;
    }

    item.style.transform = `scale(${scale})`;
    item.style.margin = `0 ${margin}`;
  });
};

// Evento de hover/toque
dockItems.forEach((item) => {
  const handleHover = () => {
    dockItems.forEach((otherItem) => {
      otherItem.isHovered = otherItem === item;
      otherItem.isNeighbor =
        Math.abs(
          Array.from(dockItems).indexOf(otherItem) -
          Array.from(dockItems).indexOf(item)
        ) === 1;
    });

    updateDockItems();
  };

  item.addEventListener("mouseenter", handleHover);
  item.addEventListener("touchstart", handleHover, { passive: true });
});

dockContainer.addEventListener("mouseleave", () => {
  dockItems.forEach((item) => {
    item.isHovered = item.isNeighbor = false;
  });

  updateDockItems();
});

const initScrollBooster = () => {
  if (scrollBooster) {
    scrollBooster.destroy();
  }

  if (window.innerWidth <= 768) {
    scrollBooster = new ScrollBooster({
      viewport: document.querySelector(".viewport-dock"),
      content: document.querySelector(".ov-dock"),
      scrollMode: "transform",
      direction: "horizontal",
    });
  }
};

const handleResize = () => {
  updateConstants();
  initScrollBooster();
};

// Inicializar ScrollBooster y manejar redimensionamiento
if (document.readyState !== "loading") {
  handleResize();
} else {
  document.addEventListener("DOMContentLoaded", handleResize);
}

// Actualizar constantes al cambiar el tamaño de la ventana
window.addEventListener("resize", handleResize);
</script>