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

working on new acessible tooltip

Browse Source
This commit is contained in:
Antoine M 2024-05-29 10:20:17 +02:00
parent f060250cfe
commit 164787321a
9 changed files with 159 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '251b40e555a82eb6d434');
<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '993b2ef7b5a4436e4110');

18
build/index.css
View File

@ -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;

2
build/index.css.map
View File

@ -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":""}
{"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":""}

2
build/tooltipFront.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '9643594cb39c5477cd98');
<?php return array('dependencies' => array(), 'version' => '434e8e7be8d10dd950b8');

99
build/tooltipFront.js
View File

@ -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();
});
/******/ })()
;

2
build/tooltipFront.js.map
View File

File diff suppressed because one or more lines are too long

100
src/format-types/tooltip/tooltip-front_new.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");
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();
});

18
src/format-types/tooltip/tooltip.css
View File

@ -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;

3
webpack.config.js
View File

@ -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"),
},
};