start to work on a new tooltip

src/format-types/tooltip/tooltip-front_new.js

@@ -0,0 +1,141 @@
+async function initTooltips() {
+	let tooltipWords = document.querySelectorAll(".tooltip-word");
+	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);
+	}
+
+	await observeTooltip(tooltipWords);
+}
+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;
+	}
+}
+async function observeTooltip(tooltipWords) {
+	// 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) => {
+		tooltipsObserver.observe(tooltipWord.querySelector(".tooltip-popup"));
+
+		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("mouseout", (event) => {
+			var isFocused = document.activeElement === tooltipWord;
+			if (!isFocused) {
+				hideTooltip(tooltipWord);
+			}
+		});
+
+		tooltipWord.addEventListener("focusout", (event) => {
+			hideTooltip(tooltipWord);
+		});
+	});
+}
+function createTooltip(tooltipWord) {
+	const tooltipPopup = document.createElement("div");
+	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);
+	tooltipWord.appendChild(tooltipPopup);
+
+	// tooltipWord.insertAdjacentElement("afterend", tooltipPopup);
+}
+function showTooltip(tooltipWord) {
+	tooltipWord.setAttribute("aria-expanded", "true");
+	const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
+	tooltipPopup.setAttribute("aria-hidden", "false");
+}
+function hideTooltip(tooltipWord) {
+	tooltipWord.setAttribute("aria-expanded", "false");
+	const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
+	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) => {
+	initTooltips();
+});