homegrade_blocks_production/build/tooltipFront.js

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!***************************************************!*\
  !*** ./src/format-types/tooltip/tooltip-front.js ***!
  \***************************************************/
async function tooltipsInit() {
  await buildTooltips();
  await observeTooltips();
  // const tooltipWordsContainer = document.querySelectorAll(".tooltip-container");
  // await observeTooltip(tooltipWordsContainer);
}

async function getTooltipsDatas(vocabulairesPostsIds) {
  try {
    const response = await fetch(`/wp-json/wp/v2/vocabulaire?include=${vocabulairesPostsIds.toString()}`);
    if (!response.ok) {
      throw new Error(`Request failed with status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (err) {
    throw err;
  }
}
function createTooltip(tooltipWord) {
  const tooltipContainer = document.createElement("div");
  tooltipContainer.className = "tooltip-container";
  const tooltipPopup = document.createElement("span");
  tooltipPopup.className = "tooltip-popup";
  tooltipPopup.setAttribute("aria-hidden", "true");
  const tooltipDefinition = document.createElement("p");
  tooltipDefinition.textContent = tooltipWord.getAttribute("data-tooltip-definition");
  tooltipDefinition.className = "tooltip-popup__definition";
  const tooltipTitle = document.createElement("h5");
  tooltipTitle.textContent = tooltipWord.getAttribute("data-tooltip-word");
  tooltipTitle.className = "tooltip-popup__title";
  tooltipPopup.appendChild(tooltipTitle);
  tooltipPopup.appendChild(tooltipDefinition);
  tooltipContainer.appendChild(tooltipPopup);
  tooltipWord.insertAdjacentElement("afterend", tooltipContainer);
  tooltipContainer.insertBefore(tooltipWord, tooltipPopup);
  // tooltipContainer.appendChild(tooltipWord);
  // tooltipWord.appendChild(tooltipContainer);
}

async function buildTooltips() {
  let tooltipWords = document.querySelectorAll(".tooltip-word");
  if (!tooltipWords) return;
  const vocabulairesPostsIds = Array.from(tooltipWords).map(element => element.getAttribute("data-definition-id"));
  try {
    const tooltipData = await getTooltipsDatas(vocabulairesPostsIds);
    tooltipWords.forEach((word, index) => {
      const foundTooltipDatas = tooltipData.find(tooltip => tooltip.id === parseInt(word.getAttribute("data-definition-id")));
      if (foundTooltipDatas) {
        word.setAttribute("data-tooltip-word", foundTooltipDatas.title.rendered);
        word.setAttribute("data-tooltip-definition", foundTooltipDatas.acf.definition);
      }
      word.setAttribute("aria-expanded", "false");
      createTooltip(word, tooltipData[index]);
    });
  } catch (error) {
    console.log("Something went wrong!", error);
  }
}
async function observeTooltips() {
  let tooltipWords = document.querySelectorAll(".tooltip-word");
  if (!tooltipWords) return;
  // CHAPTER IntersectionObserver
  const tooltipsObserver = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      const margin = 10;

      // DEPASSE À GAUCHE
      if (entry.boundingClientRect.x < 0) {
        const currentPos = getCurrentPos(entry);
        const missingSpace = Math.abs(entry.boundingClientRect.x);
        entry.target.style.left = `${currentPos + missingSpace + margin}px`;
        entry.target.style.setProperty("--tooltip-x-position", "12%");
      }
      // DEPASSE À DROITE
      if (entry.boundingClientRect.x + entry.boundingClientRect.width > window.innerWidth) {
        const currentPos = getCurrentPos(entry);
        const difference = entry.boundingClientRect.width - entry.intersectionRect.width;
        entry.target.style.left = `${currentPos - difference - margin}px`;
        entry.target.style.setProperty("--tooltip-x-position", `calc(60% + ${difference}px)`);
      }

      // Check aspect ratio to be sure the element is visible
      // const aspect = entry.intersectionRatio;
      // if (entry.isIntersecting) {
      // }
    });
  });

  tooltipWords.forEach(tooltipWord => {
    const tooltipPopup = tooltipWord.parentElement.querySelector(".tooltip-popup");
    tooltipsObserver.observe(tooltipPopup);
    tooltipWord.addEventListener("click", event => {
      toggleTooltip(tooltipWord);
    });
    tooltipWord.addEventListener("keydown", event => {
      switch (event.key) {
        case "Escape":
          hideTooltip(tooltipWord);
          break;
      }
    });
    tooltipWord.addEventListener("mouseover", event => {
      showTooltip(tooltipWord);
    });
    tooltipWord.addEventListener("focus", event => {
      showTooltip(tooltipWord);
    });
    tooltipWord.addEventListener("mouseout", event => {
      var isFocused = document.activeElement === tooltipWord;
      if (!isFocused) {
        hideTooltip(tooltipWord);
      }
    });
    tooltipWord.addEventListener("focusout", event => {
      hideTooltip(tooltipWord);
    });
  });
}
function showTooltip(tooltipWord) {
  tooltipWord.setAttribute("aria-expanded", "true");
  // const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
  const tooltipPopup = tooltipWord.parentElement.querySelector(".tooltip-popup");
  if (!tooltipPopup) return;
  tooltipPopup.setAttribute("aria-hidden", "false");
  // positionTooltip(tooltipWord, tooltipPopup);
}

function hideTooltip(tooltipWord) {
  tooltipWord.setAttribute("aria-expanded", "false");
  // const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
  const tooltipPopup = tooltipWord.nextElementSibling;
  if (!tooltipPopup || !tooltipPopup.classList.contains("tooltip-popup")) return;
  tooltipPopup.setAttribute("aria-hidden", "true");
}
function toggleTooltip(tooltipWord) {
  const isExpanded = tooltipWord.getAttribute("aria-expanded") === "true";
  if (isExpanded) {
    hideTooltip(tooltipWord);
  } else {
    showTooltip(tooltipWord);
  }
}
function getCurrentPos(entry) {
  return parseInt(getComputedStyle(entry.target, null).getPropertyValue("left"));
}
window.addEventListener("DOMContentLoaded", event => {
  tooltipsInit();
});
/******/ })()
;
//# sourceMappingURL=tooltipFront.js.map