From 164787321a14997b782aaf9e7aa3a182ad3d7411 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Wed, 29 May 2024 10:20:17 +0200 Subject: [PATCH] working on new acessible tooltip --- build/index.asset.php | 2 +- build/index.css | 18 +++- build/index.css.map | 2 +- build/tooltipFront.asset.php | 2 +- build/tooltipFront.js | 99 ++++++++++------- build/tooltipFront.js.map | 2 +- src/format-types/tooltip/tooltip-front_new.js | 100 +++++++++++------- src/format-types/tooltip/tooltip.css | 18 +++- webpack.config.js | 3 +- 9 files changed, 159 insertions(+), 87 deletions(-) diff --git a/build/index.asset.php b/build/index.asset.php index ab746f2..5f5941a 100644 --- a/build/index.asset.php +++ b/build/index.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '251b40e555a82eb6d434'); + array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '993b2ef7b5a4436e4110'); diff --git a/build/index.css b/build/index.css index 59a4847..a15f464 100644 --- a/build/index.css +++ b/build/index.css @@ -10,12 +10,18 @@ text-decoration-color: red; } +.tooltip-container { + position: relative; + display: inline-block; +} + .tooltip-popup { position: absolute; - top: -6px; + top: 0px; left: 50%; + /* transform: translate(-50%, -98%); */ + transform: translate(-50%, -100%); text-align: left; - transform: translate(-50%, -98%); padding: 10px; max-width: 300px; width: -moz-max-content; @@ -25,6 +31,14 @@ .tooltip-popup[aria-hidden="true"] { display: none; } + +.tooltip-container:hover, +.tooltip-container:focus-visible { + .tooltip-popup { + display: block; + } +} + .tooltip-popup:after { content: ""; display: block; diff --git a/build/index.css.map b/build/index.css.map index cb6c2ef..84df0b8 100644 --- a/build/index.css.map +++ b/build/index.css.map @@ -1 +1 @@ -{"version":3,"file":"index.css","mappings":";;;AAAA;CACC,uBAAuB;CACvB,kBAAkB;CAClB,eAAe;CACf,0BAA0B;CAC1B,6BAA6B;CAC7B,0BAA0B;AAC3B;;AAEA;CACC,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,gCAAgC;CAChC,aAAa;CACb,gBAAgB;CAChB,uBAAkB;CAAlB,kBAAkB;CAClB,yBAAyB;AAC1B;AACA;CACC,aAAa;AACd;AACA;CACC,WAAW;CACX,cAAc;CACd,uBAAuB;CACvB,kBAAkB;CAClB,SAAS;CACT,eAAe;CACf,+BAA+B;CAC/B,WAAW;CACX,YAAY;CACZ,8CAA8C;CAC9C,2CAA2C;AAC5C;AACA;CACC,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;CACpB,wBAAwB;AACzB;AACA;CACC,uBAAuB;CACvB,oBAAoB;AACrB;;AAEA,mBAAmB;AACnB;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;AACD;;;;;ACrDA;CACC,mBAAmB;CACnB,qBAAqB;CACrB,2BAA2B;AAC5B","sources":["webpack://multi-blocks/./src/format-types/tooltip/tooltip.css","webpack://multi-blocks/./src/format-types/brochure/brochure.css"],"sourcesContent":[".tooltip-word {\r\n\t/* padding-top: 12px; */\r\n\tposition: relative;\r\n\tcursor: default;\r\n\ttext-underline-offset: 4px;\r\n\ttext-decoration-style: dashed;\r\n\ttext-decoration-color: red;\r\n}\r\n\r\n.tooltip-popup {\r\n\tposition: absolute;\r\n\ttop: -6px;\r\n\tleft: 50%;\r\n\ttext-align: left;\r\n\ttransform: translate(-50%, -98%);\r\n\tpadding: 10px;\r\n\tmax-width: 300px;\r\n\twidth: max-content;\r\n\t--tooltip-x-position: 50%;\r\n}\r\n.tooltip-popup[aria-hidden=\"true\"] {\r\n\tdisplay: none;\r\n}\r\n.tooltip-popup:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tbackground-color: white;\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\t/* left: 50%; */\r\n\tleft: var(--tooltip-x-position);\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\ttransform: translate(-50%, -50%) rotate(45deg);\r\n\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);\r\n}\r\n.tooltip-popup__title {\r\n\tfont-weight: bold;\r\n\tcolor: black !important;\r\n\tpadding-bottom: 10px;\r\n\tmargin-top: 0 !important;\r\n}\r\n.tooltip-popup__definition {\r\n\tcolor: black !important;\r\n\tmargin: 0 !important;\r\n}\r\n\r\n/* FOR THE EDITOR */\r\n.popover_tooltip_field {\r\n\t.components-popover__content {\r\n\t\tpadding: 10px !important;\r\n\t\tmin-width: 200px;\r\n\t}\r\n}\r\n",".brochure-download-icon {\r\n\tmargin: 0 0px 0 6px;\r\n\tdisplay: inline-block;\r\n\ttransform: translateY(-1px);\r\n}\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"index.css","mappings":";;;AAAA;CACC,uBAAuB;CACvB,kBAAkB;CAClB,eAAe;CACf,0BAA0B;CAC1B,6BAA6B;CAC7B,0BAA0B;AAC3B;;AAEA;CACC,kBAAkB;CAClB,qBAAqB;AACtB;;AAEA;CACC,kBAAkB;CAClB,QAAQ;CACR,SAAS;CACT,sCAAsC;CACtC,iCAAiC;CACjC,gBAAgB;CAChB,aAAa;CACb,gBAAgB;CAChB,uBAAkB;CAAlB,kBAAkB;CAClB,yBAAyB;AAC1B;AACA;CACC,aAAa;AACd;;AAEA;;CAEC;EACC,cAAc;CACf;AACD;;AAEA;CACC,WAAW;CACX,cAAc;CACd,uBAAuB;CACvB,kBAAkB;CAClB,SAAS;CACT,eAAe;CACf,+BAA+B;CAC/B,WAAW;CACX,YAAY;CACZ,8CAA8C;CAC9C,2CAA2C;AAC5C;AACA;CACC,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;CACpB,wBAAwB;AACzB;AACA;CACC,uBAAuB;CACvB,oBAAoB;AACrB;;AAEA,mBAAmB;AACnB;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;AACD;;;;;ACnEA;CACC,mBAAmB;CACnB,qBAAqB;CACrB,2BAA2B;AAC5B","sources":["webpack://multi-blocks/./src/format-types/tooltip/tooltip.css","webpack://multi-blocks/./src/format-types/brochure/brochure.css"],"sourcesContent":[".tooltip-word {\r\n\t/* padding-top: 12px; */\r\n\tposition: relative;\r\n\tcursor: default;\r\n\ttext-underline-offset: 4px;\r\n\ttext-decoration-style: dashed;\r\n\ttext-decoration-color: red;\r\n}\r\n\r\n.tooltip-container {\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n.tooltip-popup {\r\n\tposition: absolute;\r\n\ttop: 0px;\r\n\tleft: 50%;\r\n\t/* transform: translate(-50%, -98%); */\r\n\ttransform: translate(-50%, -100%);\r\n\ttext-align: left;\r\n\tpadding: 10px;\r\n\tmax-width: 300px;\r\n\twidth: max-content;\r\n\t--tooltip-x-position: 50%;\r\n}\r\n.tooltip-popup[aria-hidden=\"true\"] {\r\n\tdisplay: none;\r\n}\r\n\r\n.tooltip-container:hover,\r\n.tooltip-container:focus-visible {\r\n\t.tooltip-popup {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n\r\n.tooltip-popup:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tbackground-color: white;\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\t/* left: 50%; */\r\n\tleft: var(--tooltip-x-position);\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\ttransform: translate(-50%, -50%) rotate(45deg);\r\n\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);\r\n}\r\n.tooltip-popup__title {\r\n\tfont-weight: bold;\r\n\tcolor: black !important;\r\n\tpadding-bottom: 10px;\r\n\tmargin-top: 0 !important;\r\n}\r\n.tooltip-popup__definition {\r\n\tcolor: black !important;\r\n\tmargin: 0 !important;\r\n}\r\n\r\n/* FOR THE EDITOR */\r\n.popover_tooltip_field {\r\n\t.components-popover__content {\r\n\t\tpadding: 10px !important;\r\n\t\tmin-width: 200px;\r\n\t}\r\n}\r\n",".brochure-download-icon {\r\n\tmargin: 0 0px 0 6px;\r\n\tdisplay: inline-block;\r\n\ttransform: translateY(-1px);\r\n}\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/build/tooltipFront.asset.php b/build/tooltipFront.asset.php index d73999c..1f66e9c 100644 --- a/build/tooltipFront.asset.php +++ b/build/tooltipFront.asset.php @@ -1 +1 @@ - array(), 'version' => '9643594cb39c5477cd98'); + array(), 'version' => '434e8e7be8d10dd950b8'); diff --git a/build/tooltipFront.js b/build/tooltipFront.js index 6e4b548..d373482 100644 --- a/build/tooltipFront.js +++ b/build/tooltipFront.js @@ -1,9 +1,49 @@ /******/ (() => { // webpackBootstrap var __webpack_exports__ = {}; -/*!***************************************************!*\ - !*** ./src/format-types/tooltip/tooltip-front.js ***! - \***************************************************/ -async function initTooltips() { +/*!*******************************************************!*\ + !*** ./src/format-types/tooltip/tooltip-front_new.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"); const vocabulairesPostsIds = Array.from(tooltipWords).map(element => element.getAttribute("data-definition-id")); try { @@ -20,21 +60,9 @@ async function initTooltips() { } 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) { +async function observeTooltips() { + let tooltipWords = document.querySelectorAll(".tooltip-word"); // CHAPTER IntersectionObserver const tooltipsObserver = new IntersectionObserver(entries => { entries.forEach(entry => { @@ -63,7 +91,8 @@ async function observeTooltip(tooltipWords) { }); tooltipWords.forEach(tooltipWord => { - tooltipsObserver.observe(tooltipWord.querySelector(".tooltip-popup")); + const tooltipPopup = tooltipWord.parentElement.querySelector(".tooltip-popup"); + tooltipsObserver.observe(tooltipPopup); tooltipWord.addEventListener("click", event => { toggleTooltip(tooltipWord); }); @@ -77,6 +106,9 @@ async function observeTooltip(tooltipWords) { tooltipWord.addEventListener("mouseover", event => { showTooltip(tooltipWord); }); + tooltipWord.addEventListener("focus", event => { + showTooltip(tooltipWord); + }); tooltipWord.addEventListener("mouseout", event => { var isFocused = document.activeElement === tooltipWord; if (!isFocused) { @@ -88,31 +120,20 @@ 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) { 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"); + // positionTooltip(tooltipWord, tooltipPopup); } + function hideTooltip(tooltipWord) { 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"); } function toggleTooltip(tooltipWord) { @@ -127,7 +148,7 @@ function getCurrentPos(entry) { return parseInt(getComputedStyle(entry.target, null).getPropertyValue("left")); } window.addEventListener("DOMContentLoaded", event => { - initTooltips(); + tooltipsInit(); }); /******/ })() ; diff --git a/build/tooltipFront.js.map b/build/tooltipFront.js.map index 6b162cd..4efd70c 100644 --- a/build/tooltipFront.js.map +++ b/build/tooltipFront.js.map @@ -1 +1 @@ -{"version":3,"file":"tooltipFront.js","mappings":"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","sources":["webpack://multi-blocks/./src/format-types/tooltip/tooltip-front.js"],"sourcesContent":["async function initTooltips() {\r\n\tlet tooltipWords = document.querySelectorAll(\".tooltip-word\");\r\n\tconst vocabulairesPostsIds = Array.from(tooltipWords).map((element) =>\r\n\t\telement.getAttribute(\"data-definition-id\")\r\n\t);\r\n\r\n\ttry {\r\n\t\tconst tooltipData = await getTooltipsDatas(vocabulairesPostsIds);\r\n\r\n\t\ttooltipWords.forEach((word, index) => {\r\n\t\t\tconst foundTooltipDatas = tooltipData.find(\r\n\t\t\t\t(tooltip) => tooltip.id === parseInt(word.getAttribute(\"data-definition-id\"))\r\n\t\t\t);\r\n\r\n\t\t\tif (foundTooltipDatas) {\r\n\t\t\t\tword.setAttribute(\"data-tooltip-word\", foundTooltipDatas.title.rendered);\r\n\t\t\t\tword.setAttribute(\"data-tooltip-definition\", foundTooltipDatas.acf.definition);\r\n\t\t\t}\r\n\t\t\tword.setAttribute(\"aria-expanded\", \"false\");\r\n\t\t\tcreateTooltip(word, tooltipData[index]);\r\n\t\t});\r\n\t} catch (error) {\r\n\t\tconsole.log(\"Something went wrong!\", error);\r\n\t}\r\n\r\n\tawait observeTooltip(tooltipWords);\r\n}\r\nasync function getTooltipsDatas(vocabulairesPostsIds) {\r\n\ttry {\r\n\t\tconst response = await fetch(`/wp-json/wp/v2/vocabulaire?include=${vocabulairesPostsIds.toString()}`);\r\n\t\tif (!response.ok) {\r\n\t\t\tthrow new Error(`Request failed with status: ${response.status}`);\r\n\t\t}\r\n\t\tconst data = await response.json();\r\n\t\treturn data;\r\n\t} catch (err) {\r\n\t\tthrow err;\r\n\t}\r\n}\r\nasync function observeTooltip(tooltipWords) {\r\n\t// CHAPTER IntersectionObserver\r\n\tconst tooltipsObserver = new IntersectionObserver((entries) => {\r\n\t\tentries.forEach((entry) => {\r\n\t\t\tconst margin = 10;\r\n\r\n\t\t\t// DEPASSE À GAUCHE\r\n\t\t\tif (entry.boundingClientRect.x < 0) {\r\n\t\t\t\tconst currentPos = getCurrentPos(entry);\r\n\t\t\t\tconst missingSpace = Math.abs(entry.boundingClientRect.x);\r\n\t\t\t\tentry.target.style.left = `${currentPos + missingSpace + margin}px`;\r\n\t\t\t\tentry.target.style.setProperty(\"--tooltip-x-position\", \"12%\");\r\n\t\t\t}\r\n\t\t\t// DEPASSE À DROITE\r\n\t\t\tif (entry.boundingClientRect.x + entry.boundingClientRect.width > window.innerWidth) {\r\n\t\t\t\tconst currentPos = getCurrentPos(entry);\r\n\t\t\t\tconst difference = entry.boundingClientRect.width - entry.intersectionRect.width;\r\n\r\n\t\t\t\tentry.target.style.left = `${currentPos - difference - margin}px`;\r\n\t\t\t\tentry.target.style.setProperty(\"--tooltip-x-position\", `calc(60% + ${difference}px)`);\r\n\t\t\t}\r\n\r\n\t\t\t// Check aspect ratio to be sure the element is visible\r\n\t\t\t// const aspect = entry.intersectionRatio;\r\n\t\t\t// if (entry.isIntersecting) {\r\n\t\t\t// }\r\n\t\t});\r\n\t});\r\n\ttooltipWords.forEach((tooltipWord) => {\r\n\t\ttooltipsObserver.observe(tooltipWord.querySelector(\".tooltip-popup\"));\r\n\r\n\t\ttooltipWord.addEventListener(\"click\", (event) => {\r\n\t\t\ttoggleTooltip(tooltipWord);\r\n\t\t});\r\n\t\ttooltipWord.addEventListener(\"keydown\", (event) => {\r\n\t\t\tswitch (event.key) {\r\n\t\t\t\tcase \"Escape\":\r\n\t\t\t\t\thideTooltip(tooltipWord);\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t});\r\n\t\ttooltipWord.addEventListener(\"mouseover\", (event) => {\r\n\t\t\tshowTooltip(tooltipWord);\r\n\t\t});\r\n\r\n\t\ttooltipWord.addEventListener(\"mouseout\", (event) => {\r\n\t\t\tvar isFocused = document.activeElement === tooltipWord;\r\n\t\t\tif (!isFocused) {\r\n\t\t\t\thideTooltip(tooltipWord);\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\ttooltipWord.addEventListener(\"focusout\", (event) => {\r\n\t\t\thideTooltip(tooltipWord);\r\n\t\t});\r\n\t});\r\n}\r\nfunction createTooltip(tooltipWord) {\r\n\tconst tooltipPopup = document.createElement(\"div\");\r\n\ttooltipPopup.className = \"tooltip-popup\";\r\n\ttooltipPopup.setAttribute(\"aria-hidden\", \"true\");\r\n\r\n\tconst tooltipDefinition = document.createElement(\"p\");\r\n\ttooltipDefinition.textContent = tooltipWord.getAttribute(\"data-tooltip-definition\");\r\n\ttooltipDefinition.className = \"tooltip-popup__definition\";\r\n\r\n\tconst tooltipTitle = document.createElement(\"h5\");\r\n\ttooltipTitle.textContent = tooltipWord.getAttribute(\"data-tooltip-word\");\r\n\ttooltipTitle.className = \"tooltip-popup__title\";\r\n\r\n\ttooltipPopup.appendChild(tooltipTitle);\r\n\ttooltipPopup.appendChild(tooltipDefinition);\r\n\ttooltipWord.appendChild(tooltipPopup);\r\n\r\n\t// tooltipWord.insertAdjacentElement(\"afterend\", tooltipPopup);\r\n}\r\nfunction showTooltip(tooltipWord) {\r\n\ttooltipWord.setAttribute(\"aria-expanded\", \"true\");\r\n\tconst tooltipPopup = tooltipWord.querySelector(\".tooltip-popup\");\r\n\ttooltipPopup.setAttribute(\"aria-hidden\", \"false\");\r\n}\r\nfunction hideTooltip(tooltipWord) {\r\n\ttooltipWord.setAttribute(\"aria-expanded\", \"false\");\r\n\tconst tooltipPopup = tooltipWord.querySelector(\".tooltip-popup\");\r\n\ttooltipPopup.setAttribute(\"aria-hidden\", \"true\");\r\n}\r\nfunction toggleTooltip(tooltipWord) {\r\n\tconst isExpanded = tooltipWord.getAttribute(\"aria-expanded\") === \"true\";\r\n\tif (isExpanded) {\r\n\t\thideTooltip(tooltipWord);\r\n\t} else {\r\n\t\tshowTooltip(tooltipWord);\r\n\t}\r\n}\r\n\r\nfunction getCurrentPos(entry) {\r\n\treturn parseInt(getComputedStyle(entry.target, null).getPropertyValue(\"left\"));\r\n}\r\n\r\nwindow.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\tinitTooltips();\r\n});\r\n"],"names":["initTooltips","tooltipWords","document","querySelectorAll","vocabulairesPostsIds","Array","from","map","element","getAttribute","tooltipData","getTooltipsDatas","forEach","word","index","foundTooltipDatas","find","tooltip","id","parseInt","setAttribute","title","rendered","acf","definition","createTooltip","error","console","log","observeTooltip","response","fetch","toString","ok","Error","status","data","json","err","tooltipsObserver","IntersectionObserver","entries","entry","margin","boundingClientRect","x","currentPos","getCurrentPos","missingSpace","Math","abs","target","style","left","setProperty","width","window","innerWidth","difference","intersectionRect","tooltipWord","observe","querySelector","addEventListener","event","toggleTooltip","key","hideTooltip","showTooltip","isFocused","activeElement","tooltipPopup","createElement","className","tooltipDefinition","textContent","tooltipTitle","appendChild","isExpanded","getComputedStyle","getPropertyValue"],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"tooltipFront.js","mappings":"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","sources":["webpack://multi-blocks/./src/format-types/tooltip/tooltip-front_new.js"],"sourcesContent":["async function tooltipsInit() {\r\n\tawait buildTooltips();\r\n\tawait observeTooltips();\r\n\t// const tooltipWordsContainer = document.querySelectorAll(\".tooltip-container\");\r\n\t// await observeTooltip(tooltipWordsContainer);\r\n}\r\nasync function getTooltipsDatas(vocabulairesPostsIds) {\r\n\ttry {\r\n\t\tconst response = await fetch(`/wp-json/wp/v2/vocabulaire?include=${vocabulairesPostsIds.toString()}`);\r\n\t\tif (!response.ok) {\r\n\t\t\tthrow new Error(`Request failed with status: ${response.status}`);\r\n\t\t}\r\n\t\tconst data = await response.json();\r\n\t\treturn data;\r\n\t} catch (err) {\r\n\t\tthrow err;\r\n\t}\r\n}\r\nfunction createTooltip(tooltipWord) {\r\n\tconst tooltipContainer = document.createElement(\"div\");\r\n\ttooltipContainer.className = \"tooltip-container\";\r\n\r\n\tconst tooltipPopup = document.createElement(\"span\");\r\n\ttooltipPopup.className = \"tooltip-popup\";\r\n\ttooltipPopup.setAttribute(\"aria-hidden\", \"true\");\r\n\r\n\tconst tooltipDefinition = document.createElement(\"p\");\r\n\ttooltipDefinition.textContent = tooltipWord.getAttribute(\"data-tooltip-definition\");\r\n\ttooltipDefinition.className = \"tooltip-popup__definition\";\r\n\r\n\tconst tooltipTitle = document.createElement(\"h5\");\r\n\ttooltipTitle.textContent = tooltipWord.getAttribute(\"data-tooltip-word\");\r\n\ttooltipTitle.className = \"tooltip-popup__title\";\r\n\r\n\ttooltipPopup.appendChild(tooltipTitle);\r\n\ttooltipPopup.appendChild(tooltipDefinition);\r\n\r\n\ttooltipContainer.appendChild(tooltipPopup);\r\n\ttooltipWord.insertAdjacentElement(\"afterend\", tooltipContainer);\r\n\ttooltipContainer.insertBefore(tooltipWord, tooltipPopup);\r\n\t// tooltipContainer.appendChild(tooltipWord);\r\n\t// tooltipWord.appendChild(tooltipContainer);\r\n}\r\nasync function buildTooltips() {\r\n\tlet tooltipWords = document.querySelectorAll(\".tooltip-word\");\r\n\tconst vocabulairesPostsIds = Array.from(tooltipWords).map((element) =>\r\n\t\telement.getAttribute(\"data-definition-id\")\r\n\t);\r\n\r\n\ttry {\r\n\t\tconst tooltipData = await getTooltipsDatas(vocabulairesPostsIds);\r\n\r\n\t\ttooltipWords.forEach((word, index) => {\r\n\t\t\tconst foundTooltipDatas = tooltipData.find(\r\n\t\t\t\t(tooltip) => tooltip.id === parseInt(word.getAttribute(\"data-definition-id\"))\r\n\t\t\t);\r\n\r\n\t\t\tif (foundTooltipDatas) {\r\n\t\t\t\tword.setAttribute(\"data-tooltip-word\", foundTooltipDatas.title.rendered);\r\n\t\t\t\tword.setAttribute(\"data-tooltip-definition\", foundTooltipDatas.acf.definition);\r\n\t\t\t}\r\n\t\t\tword.setAttribute(\"aria-expanded\", \"false\");\r\n\t\t\tcreateTooltip(word, tooltipData[index]);\r\n\t\t});\r\n\t} catch (error) {\r\n\t\tconsole.log(\"Something went wrong!\", error);\r\n\t}\r\n}\r\n\r\nasync function observeTooltips() {\r\n\tlet tooltipWords = document.querySelectorAll(\".tooltip-word\");\r\n\t// CHAPTER IntersectionObserver\r\n\tconst tooltipsObserver = new IntersectionObserver((entries) => {\r\n\t\tentries.forEach((entry) => {\r\n\t\t\tconst margin = 10;\r\n\r\n\t\t\t// DEPASSE À GAUCHE\r\n\t\t\tif (entry.boundingClientRect.x < 0) {\r\n\t\t\t\tconst currentPos = getCurrentPos(entry);\r\n\t\t\t\tconst missingSpace = Math.abs(entry.boundingClientRect.x);\r\n\t\t\t\tentry.target.style.left = `${currentPos + missingSpace + margin}px`;\r\n\t\t\t\tentry.target.style.setProperty(\"--tooltip-x-position\", \"12%\");\r\n\t\t\t}\r\n\t\t\t// DEPASSE À DROITE\r\n\t\t\tif (entry.boundingClientRect.x + entry.boundingClientRect.width > window.innerWidth) {\r\n\t\t\t\tconst currentPos = getCurrentPos(entry);\r\n\t\t\t\tconst difference = entry.boundingClientRect.width - entry.intersectionRect.width;\r\n\r\n\t\t\t\tentry.target.style.left = `${currentPos - difference - margin}px`;\r\n\t\t\t\tentry.target.style.setProperty(\"--tooltip-x-position\", `calc(60% + ${difference}px)`);\r\n\t\t\t}\r\n\r\n\t\t\t// Check aspect ratio to be sure the element is visible\r\n\t\t\t// const aspect = entry.intersectionRatio;\r\n\t\t\t// if (entry.isIntersecting) {\r\n\t\t\t// }\r\n\t\t});\r\n\t});\r\n\ttooltipWords.forEach((tooltipWord) => {\r\n\t\tconst tooltipPopup = tooltipWord.parentElement.querySelector(\".tooltip-popup\");\r\n\r\n\t\ttooltipsObserver.observe(tooltipPopup);\r\n\r\n\t\ttooltipWord.addEventListener(\"click\", (event) => {\r\n\t\t\ttoggleTooltip(tooltipWord);\r\n\t\t});\r\n\t\ttooltipWord.addEventListener(\"keydown\", (event) => {\r\n\t\t\tswitch (event.key) {\r\n\t\t\t\tcase \"Escape\":\r\n\t\t\t\t\thideTooltip(tooltipWord);\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t});\r\n\t\ttooltipWord.addEventListener(\"mouseover\", (event) => {\r\n\t\t\tshowTooltip(tooltipWord);\r\n\t\t});\r\n\t\ttooltipWord.addEventListener(\"focus\", (event) => {\r\n\t\t\tshowTooltip(tooltipWord);\r\n\t\t});\r\n\r\n\t\ttooltipWord.addEventListener(\"mouseout\", (event) => {\r\n\t\t\tvar isFocused = document.activeElement === tooltipWord;\r\n\t\t\tif (!isFocused) {\r\n\t\t\t\thideTooltip(tooltipWord);\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\ttooltipWord.addEventListener(\"focusout\", (event) => {\r\n\t\t\thideTooltip(tooltipWord);\r\n\t\t});\r\n\t});\r\n}\r\nfunction showTooltip(tooltipWord) {\r\n\ttooltipWord.setAttribute(\"aria-expanded\", \"true\");\r\n\t// const tooltipPopup = tooltipWord.querySelector(\".tooltip-popup\");\r\n\tconst tooltipPopup = tooltipWord.parentElement.querySelector(\".tooltip-popup\");\r\n\tif (!tooltipPopup) return;\r\n\ttooltipPopup.setAttribute(\"aria-hidden\", \"false\");\r\n\t// positionTooltip(tooltipWord, tooltipPopup);\r\n}\r\nfunction hideTooltip(tooltipWord) {\r\n\ttooltipWord.setAttribute(\"aria-expanded\", \"false\");\r\n\t// const tooltipPopup = tooltipWord.querySelector(\".tooltip-popup\");\r\n\tconst tooltipPopup = tooltipWord.nextElementSibling;\r\n\tif (!tooltipPopup || !tooltipPopup.classList.contains(\"tooltip-popup\")) return;\r\n\ttooltipPopup.setAttribute(\"aria-hidden\", \"true\");\r\n}\r\nfunction toggleTooltip(tooltipWord) {\r\n\tconst isExpanded = tooltipWord.getAttribute(\"aria-expanded\") === \"true\";\r\n\tif (isExpanded) {\r\n\t\thideTooltip(tooltipWord);\r\n\t} else {\r\n\t\tshowTooltip(tooltipWord);\r\n\t}\r\n}\r\n\r\nfunction getCurrentPos(entry) {\r\n\treturn parseInt(getComputedStyle(entry.target, null).getPropertyValue(\"left\"));\r\n}\r\n\r\nwindow.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\ttooltipsInit();\r\n});\r\n"],"names":["tooltipsInit","buildTooltips","observeTooltips","getTooltipsDatas","vocabulairesPostsIds","response","fetch","toString","ok","Error","status","data","json","err","createTooltip","tooltipWord","tooltipContainer","document","createElement","className","tooltipPopup","setAttribute","tooltipDefinition","textContent","getAttribute","tooltipTitle","appendChild","insertAdjacentElement","insertBefore","tooltipWords","querySelectorAll","Array","from","map","element","tooltipData","forEach","word","index","foundTooltipDatas","find","tooltip","id","parseInt","title","rendered","acf","definition","error","console","log","tooltipsObserver","IntersectionObserver","entries","entry","margin","boundingClientRect","x","currentPos","getCurrentPos","missingSpace","Math","abs","target","style","left","setProperty","width","window","innerWidth","difference","intersectionRect","parentElement","querySelector","observe","addEventListener","event","toggleTooltip","key","hideTooltip","showTooltip","isFocused","activeElement","nextElementSibling","classList","contains","isExpanded","getComputedStyle","getPropertyValue"],"sourceRoot":""} \ No newline at end of file diff --git a/src/format-types/tooltip/tooltip-front_new.js b/src/format-types/tooltip/tooltip-front_new.js index f84b367..45fd006 100644 --- a/src/format-types/tooltip/tooltip-front_new.js +++ b/src/format-types/tooltip/tooltip-front_new.js @@ -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"); const vocabulairesPostsIds = Array.from(tooltipWords).map((element) => element.getAttribute("data-definition-id") @@ -22,22 +65,10 @@ async function initTooltips() { } 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) { +async function observeTooltips() { + let tooltipWords = document.querySelectorAll(".tooltip-word"); // CHAPTER IntersectionObserver const tooltipsObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { @@ -66,7 +97,9 @@ async function observeTooltip(tooltipWords) { }); }); tooltipWords.forEach((tooltipWord) => { - tooltipsObserver.observe(tooltipWord.querySelector(".tooltip-popup")); + const tooltipPopup = tooltipWord.parentElement.querySelector(".tooltip-popup"); + + tooltipsObserver.observe(tooltipPopup); tooltipWord.addEventListener("click", (event) => { toggleTooltip(tooltipWord); @@ -81,6 +114,9 @@ async function observeTooltip(tooltipWords) { tooltipWord.addEventListener("mouseover", (event) => { showTooltip(tooltipWord); }); + tooltipWord.addEventListener("focus", (event) => { + showTooltip(tooltipWord); + }); tooltipWord.addEventListener("mouseout", (event) => { var isFocused = document.activeElement === tooltipWord; @@ -94,33 +130,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) { 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"); + // positionTooltip(tooltipWord, tooltipPopup); } function hideTooltip(tooltipWord) { 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"); } function toggleTooltip(tooltipWord) { @@ -137,5 +159,5 @@ function getCurrentPos(entry) { } window.addEventListener("DOMContentLoaded", (event) => { - initTooltips(); + tooltipsInit(); }); diff --git a/src/format-types/tooltip/tooltip.css b/src/format-types/tooltip/tooltip.css index 0a5ee73..d97168f 100644 --- a/src/format-types/tooltip/tooltip.css +++ b/src/format-types/tooltip/tooltip.css @@ -7,12 +7,18 @@ text-decoration-color: red; } +.tooltip-container { + position: relative; + display: inline-block; +} + .tooltip-popup { position: absolute; - top: -6px; + top: 0px; left: 50%; + /* transform: translate(-50%, -98%); */ + transform: translate(-50%, -100%); text-align: left; - transform: translate(-50%, -98%); padding: 10px; max-width: 300px; width: max-content; @@ -21,6 +27,14 @@ .tooltip-popup[aria-hidden="true"] { display: none; } + +.tooltip-container:hover, +.tooltip-container:focus-visible { + .tooltip-popup { + display: block; + } +} + .tooltip-popup:after { content: ""; display: block; diff --git a/webpack.config.js b/webpack.config.js index a67ffeb..94b5354 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,6 +5,7 @@ module.exports = { ...defaultConfig, entry: { index: path.resolve(process.cwd(), "src/", "index.js"), - tooltipFront: path.resolve(process.cwd(), "src/format-types/tooltip", "tooltip-front.js"), + tooltipFront: path.resolve(process.cwd(), "src/format-types/tooltip", "tooltip-front_new.js"), + // tooltipFront: path.resolve(process.cwd(), "src/format-types/tooltip", "tooltip-front.js"), }, };