Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

renaming cleaning tooltip

Browse Source
This commit is contained in:
Antoine M 2024-07-03 15:27:04 +02:00
parent 61b81de2e4
commit 886d2b19b1
2 changed files with 101 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/format-types/tooltip/tooltip-front.js
View File

@ -1,4 +1,47 @@
async function initTooltips() { 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"); let tooltipWords = document.querySelectorAll(".tooltip-word");
const vocabulairesPostsIds = Array.from(tooltipWords).map((element) => const vocabulairesPostsIds = Array.from(tooltipWords).map((element) =>
element.getAttribute("data-definition-id") element.getAttribute("data-definition-id")
@ -17,27 +60,16 @@ async function initTooltips() {
word.setAttribute("data-tooltip-definition", foundTooltipDatas.acf.definition); word.setAttribute("data-tooltip-definition", foundTooltipDatas.acf.definition);
} }
word.setAttribute("aria-expanded", "false"); word.setAttribute("aria-expanded", "false");
createTooltip(word, tooltipData[index]); createTooltip(word, tooltipData[index]);
}); });
} catch (error) { } catch (error) {
console.log("Something went wrong!", error); console.log("Something went wrong!", error);
} }
}
await observeTooltip(tooltipWords); async function observeTooltips() {
} let tooltipWords = document.querySelectorAll(".tooltip-word");
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 // CHAPTER IntersectionObserver
const tooltipsObserver = new IntersectionObserver((entries) => { const tooltipsObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
@ -66,7 +98,9 @@ async function observeTooltip(tooltipWords) {
}); });
}); });
tooltipWords.forEach((tooltipWord) => { tooltipWords.forEach((tooltipWord) => {
tooltipsObserver.observe(tooltipWord.querySelector(".tooltip-popup")); const tooltipPopup = tooltipWord.parentElement.querySelector(".tooltip-popup");
tooltipsObserver.observe(tooltipPopup);
tooltipWord.addEventListener("click", (event) => { tooltipWord.addEventListener("click", (event) => {
toggleTooltip(tooltipWord); toggleTooltip(tooltipWord);
@ -81,6 +115,9 @@ async function observeTooltip(tooltipWords) {
tooltipWord.addEventListener("mouseover", (event) => { tooltipWord.addEventListener("mouseover", (event) => {
showTooltip(tooltipWord); showTooltip(tooltipWord);
}); });
tooltipWord.addEventListener("focus", (event) => {
showTooltip(tooltipWord);
});
tooltipWord.addEventListener("mouseout", (event) => { tooltipWord.addEventListener("mouseout", (event) => {
var isFocused = document.activeElement === tooltipWord; var isFocused = document.activeElement === tooltipWord;
@ -94,33 +131,19 @@ async function observeTooltip(tooltipWords) {
}); });
}); });
} }
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) { function showTooltip(tooltipWord) {
tooltipWord.setAttribute("aria-expanded", "true"); tooltipWord.setAttribute("aria-expanded", "true");
const tooltipPopup = tooltipWord.querySelector(".tooltip-popup"); // const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
const tooltipPopup = tooltipWord.parentElement.querySelector(".tooltip-popup");
if (!tooltipPopup) return;
tooltipPopup.setAttribute("aria-hidden", "false"); tooltipPopup.setAttribute("aria-hidden", "false");
// positionTooltip(tooltipWord, tooltipPopup);
} }
function hideTooltip(tooltipWord) { function hideTooltip(tooltipWord) {
tooltipWord.setAttribute("aria-expanded", "false"); tooltipWord.setAttribute("aria-expanded", "false");
const tooltipPopup = tooltipWord.querySelector(".tooltip-popup"); // const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
const tooltipPopup = tooltipWord.nextElementSibling;
if (!tooltipPopup || !tooltipPopup.classList.contains("tooltip-popup")) return;
tooltipPopup.setAttribute("aria-hidden", "true"); tooltipPopup.setAttribute("aria-hidden", "true");
} }
function toggleTooltip(tooltipWord) { function toggleTooltip(tooltipWord) {
@ -137,5 +160,5 @@ function getCurrentPos(entry) {
} }
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {
initTooltips(); tooltipsInit();
}); });

100
src/format-types/tooltip/tooltip-front_new.js → src/format-types/tooltip/tooltip-front_old.js
View File

@ -1,47 +1,4 @@
async function tooltipsInit() { async function initTooltips() {
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"); let tooltipWords = document.querySelectorAll(".tooltip-word");
const vocabulairesPostsIds = Array.from(tooltipWords).map((element) => const vocabulairesPostsIds = Array.from(tooltipWords).map((element) =>
element.getAttribute("data-definition-id") element.getAttribute("data-definition-id")
@ -65,10 +22,22 @@ async function buildTooltips() {
} catch (error) { } catch (error) {
console.log("Something went wrong!", error); console.log("Something went wrong!", error);
} }
}
async function observeTooltips() { await observeTooltip(tooltipWords);
let tooltipWords = document.querySelectorAll(".tooltip-word"); }
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 // CHAPTER IntersectionObserver
const tooltipsObserver = new IntersectionObserver((entries) => { const tooltipsObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
@ -97,9 +66,7 @@ async function observeTooltips() {
}); });
}); });
tooltipWords.forEach((tooltipWord) => { tooltipWords.forEach((tooltipWord) => {
const tooltipPopup = tooltipWord.parentElement.querySelector(".tooltip-popup"); tooltipsObserver.observe(tooltipWord.querySelector(".tooltip-popup"));
tooltipsObserver.observe(tooltipPopup);
tooltipWord.addEventListener("click", (event) => { tooltipWord.addEventListener("click", (event) => {
toggleTooltip(tooltipWord); toggleTooltip(tooltipWord);
@ -114,9 +81,6 @@ async function observeTooltips() {
tooltipWord.addEventListener("mouseover", (event) => { tooltipWord.addEventListener("mouseover", (event) => {
showTooltip(tooltipWord); showTooltip(tooltipWord);
}); });
tooltipWord.addEventListener("focus", (event) => {
showTooltip(tooltipWord);
});
tooltipWord.addEventListener("mouseout", (event) => { tooltipWord.addEventListener("mouseout", (event) => {
var isFocused = document.activeElement === tooltipWord; var isFocused = document.activeElement === tooltipWord;
@ -130,19 +94,33 @@ async function observeTooltips() {
}); });
}); });
} }
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) { function showTooltip(tooltipWord) {
tooltipWord.setAttribute("aria-expanded", "true"); tooltipWord.setAttribute("aria-expanded", "true");
// const tooltipPopup = tooltipWord.querySelector(".tooltip-popup"); const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
const tooltipPopup = tooltipWord.parentElement.querySelector(".tooltip-popup");
if (!tooltipPopup) return;
tooltipPopup.setAttribute("aria-hidden", "false"); tooltipPopup.setAttribute("aria-hidden", "false");
// positionTooltip(tooltipWord, tooltipPopup);
} }
function hideTooltip(tooltipWord) { function hideTooltip(tooltipWord) {
tooltipWord.setAttribute("aria-expanded", "false"); tooltipWord.setAttribute("aria-expanded", "false");
// const tooltipPopup = tooltipWord.querySelector(".tooltip-popup"); const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
const tooltipPopup = tooltipWord.nextElementSibling;
if (!tooltipPopup || !tooltipPopup.classList.contains("tooltip-popup")) return;
tooltipPopup.setAttribute("aria-hidden", "true"); tooltipPopup.setAttribute("aria-hidden", "true");
} }
function toggleTooltip(tooltipWord) { function toggleTooltip(tooltipWord) {
@ -159,5 +137,5 @@ function getCurrentPos(entry) {
} }
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {
tooltipsInit(); initTooltips();
}); });