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

updating tooltips dynamically when page load to ensure an up to date version of tooltips datas

Browse Source
This commit is contained in:
Antoine M 2023-10-16 14:09:27 +02:00
parent 1fd37d8323
commit a8bfe1e550
9 changed files with 331 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/tooltipFront.asset.php Normal file
View File

@ -0,0 +1 @@
<?php return array('dependencies' => array(), 'version' => 'b6bb3ed64d8d863ca5b9');

135
build/tooltipFront.js Normal file
View File

@ -0,0 +1,135 @@
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!***************************************************!*\
!*** ./src/format-types/tooltip/tooltip-front.js ***!
\***************************************************/
async function initTooltips() {
let tooltipWords = document.querySelectorAll(".tooltip-word");
const vocabulairesPostsIds = Array.from(tooltipWords).map(element => element.getAttribute("data-definition-id"));
console.log(vocabulairesPostsIds);
try {
const tooltipData = await getTooltipsDatas(vocabulairesPostsIds);
console.log("lol", tooltipData);
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);
}
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();
});
/******/ })()
;
//# sourceMappingURL=tooltipFront.js.map

1
build/tooltipFront.js.map Normal file
View File

File diff suppressed because one or more lines are too long

14
index.php
View File

@ -82,7 +82,7 @@ add_action('enqueue_block_editor_assets', 'homegrade_blocks_enqueue_editor_asset
function blocks_course_plugin_enqueue_assets()
{
$asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');
wp_enqueue_script('homegrade-blocks-tooltipjs', plugin_dir_url(__FILE__) . 'src/format-types/tooltip/tooltip-front.js');
wp_enqueue_script('homegrade-blocks-tooltipjs', plugin_dir_url(__FILE__) . 'build/tooltipFront.js');
wp_enqueue_style('homegrade-blocks-tooltipcss', plugin_dir_url(__FILE__) . 'src/format-types/tooltip/tooltip.css');
wp_enqueue_script('homegrade-blocks-brochurejs', plugin_dir_url(__FILE__) . 'src/format-types/brochure/brochure-front.js');
@ -108,7 +108,17 @@ function blocks_course_plugin_enqueue_assets()
add_action('wp_enqueue_scripts', 'blocks_course_plugin_enqueue_assets');
function add_type_attribute($tag, $handle, $src)
{
// if not your script, do nothing and return original $tag
if ('homegrade-blocks-tooltipjs' !== $handle) {
return $tag;
}
// change the script tag by adding type="module" and return it.
$tag = '<script type="module" src="' . esc_url($src) . '"></script>';
return $tag;
}
add_filter('script_loader_tag', 'add_type_attribute', 10, 3);
/* ---------------------------
ALLOWED BLOCKS
---------------------------*/

83
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@wordpress/api-fetch": "^6.40.0",
"@wordpress/icons": "^9.30.0",
"@wordpress/rich-text": "^6.16.0"
},
@ -4022,6 +4023,19 @@
"node": ">=12"
}
},
"node_modules/@wordpress/api-fetch": {
"version": "6.40.0",
"resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.40.0.tgz",
"integrity": "sha512-sNk6vZW02ldci1EpNIjmm61323x/0n2Ra/cDHuehZf8avOH/OV0zF0dXxttT8M9Fncz+XZDSIHopm76dU3Phug==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/i18n": "^4.43.0",
"@wordpress/url": "^3.44.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@wordpress/babel-plugin-import-jsx-pragma": {
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-4.21.0.tgz",
@ -4275,9 +4289,9 @@
}
},
"node_modules/@wordpress/hooks": {
"version": "3.39.0",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.39.0.tgz",
"integrity": "sha512-/qdS87k61YAbab8O2gVRqaaX5vjWfCkcbiEK/qwVIJMMI3MjOni/8con5x0NaCAsRQzow9bCi5HMXmUj624w4g==",
"version": "3.43.0",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.43.0.tgz",
"integrity": "sha512-SHSiyFUEsggihl0pDvY1l72q+fHMDyFHtIR3GCt0uV2ifctvoa/PIYdVwrxpGQaGdNEV25XCZ4kNldqJmfTddw==",
"dependencies": {
"@babel/runtime": "^7.16.0"
},
@ -4286,12 +4300,12 @@
}
},
"node_modules/@wordpress/i18n": {
"version": "4.39.0",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.39.0.tgz",
"integrity": "sha512-JbberLX7et//6l6OWMhtpVpiNvbLXJcYhqENbRpWTQ06aAQvsSrxQoDQ2UfFip9cpEBrDNoVxGNVN8oCdK3Jug==",
"version": "4.43.0",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.43.0.tgz",
"integrity": "sha512-XHU/vGgI+pgjJU9WzWDHke1u948z8i3OPpKUNdxc/gMcTkKaKM4D8DW1+VMSQHyU6pneP8+ph7EF+1RIehP3lQ==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/hooks": "^3.39.0",
"@wordpress/hooks": "^3.43.0",
"gettext-parser": "^1.3.1",
"memize": "^2.1.0",
"sprintf-js": "^1.1.1",
@ -4587,6 +4601,18 @@
"stylelint": "^14.2"
}
},
"node_modules/@wordpress/url": {
"version": "3.44.0",
"resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.44.0.tgz",
"integrity": "sha512-QNtTPFg/cGHTJLOvOtQCvCgn5quFQgJml8A88I05o4dyUH/tc92rb8LNXi0qcVz/z4JPrx2g3+Ki8heYellP4A==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"remove-accents": "^0.5.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@wordpress/warning": {
"version": "2.38.0",
"resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-2.38.0.tgz",
@ -13559,6 +13585,11 @@
"resolved": "https://registry.npmjs.org/rememo/-/rememo-4.0.2.tgz",
"integrity": "sha512-NVfSP9NstE3QPNs/TnegQY0vnJnstKQSpcrsI2kBTB3dB2PkdfKdTa+abbjMIDqpc63fE5LfjLgfMst0ULMFxQ=="
},
"node_modules/remove-accents": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
"integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
},
"node_modules/requestidlecallback": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz",
@ -19515,6 +19546,16 @@
"@wordpress/i18n": "^4.39.0"
}
},
"@wordpress/api-fetch": {
"version": "6.40.0",
"resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.40.0.tgz",
"integrity": "sha512-sNk6vZW02ldci1EpNIjmm61323x/0n2Ra/cDHuehZf8avOH/OV0zF0dXxttT8M9Fncz+XZDSIHopm76dU3Phug==",
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/i18n": "^4.43.0",
"@wordpress/url": "^3.44.0"
}
},
"@wordpress/babel-plugin-import-jsx-pragma": {
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-4.21.0.tgz",
@ -19696,20 +19737,20 @@
}
},
"@wordpress/hooks": {
"version": "3.39.0",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.39.0.tgz",
"integrity": "sha512-/qdS87k61YAbab8O2gVRqaaX5vjWfCkcbiEK/qwVIJMMI3MjOni/8con5x0NaCAsRQzow9bCi5HMXmUj624w4g==",
"version": "3.43.0",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.43.0.tgz",
"integrity": "sha512-SHSiyFUEsggihl0pDvY1l72q+fHMDyFHtIR3GCt0uV2ifctvoa/PIYdVwrxpGQaGdNEV25XCZ4kNldqJmfTddw==",
"requires": {
"@babel/runtime": "^7.16.0"
}
},
"@wordpress/i18n": {
"version": "4.39.0",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.39.0.tgz",
"integrity": "sha512-JbberLX7et//6l6OWMhtpVpiNvbLXJcYhqENbRpWTQ06aAQvsSrxQoDQ2UfFip9cpEBrDNoVxGNVN8oCdK3Jug==",
"version": "4.43.0",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.43.0.tgz",
"integrity": "sha512-XHU/vGgI+pgjJU9WzWDHke1u948z8i3OPpKUNdxc/gMcTkKaKM4D8DW1+VMSQHyU6pneP8+ph7EF+1RIehP3lQ==",
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/hooks": "^3.39.0",
"@wordpress/hooks": "^3.43.0",
"gettext-parser": "^1.3.1",
"memize": "^2.1.0",
"sprintf-js": "^1.1.1",
@ -19925,6 +19966,15 @@
"stylelint-config-recommended-scss": "^5.0.2"
}
},
"@wordpress/url": {
"version": "3.44.0",
"resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.44.0.tgz",
"integrity": "sha512-QNtTPFg/cGHTJLOvOtQCvCgn5quFQgJml8A88I05o4dyUH/tc92rb8LNXi0qcVz/z4JPrx2g3+Ki8heYellP4A==",
"requires": {
"@babel/runtime": "^7.16.0",
"remove-accents": "^0.5.0"
}
},
"@wordpress/warning": {
"version": "2.38.0",
"resolved": "https://registry.npmjs.org/@wordpress/warning/-/warning-2.38.0.tgz",
@ -26561,6 +26611,11 @@
"resolved": "https://registry.npmjs.org/rememo/-/rememo-4.0.2.tgz",
"integrity": "sha512-NVfSP9NstE3QPNs/TnegQY0vnJnstKQSpcrsI2kBTB3dB2PkdfKdTa+abbjMIDqpc63fE5LfjLgfMst0ULMFxQ=="
},
"remove-accents": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
"integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
},
"requestidlecallback": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"@wordpress/scripts": "^26.9.0"
},
"dependencies": {
"@wordpress/api-fetch": "^6.40.0",
"@wordpress/icons": "^9.30.0",
"@wordpress/rich-text": "^6.16.0"
}

4
src/format-types/admin.js Normal file
View File

@ -0,0 +1,4 @@
import apiFetch from "@wordpress/api-fetch";
apiFetch({ path: "/wp/v2/posts" }).then((posts) => {
console.log(posts);
});

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

@ -1,12 +1,102 @@
function initTooltips(tooltipWords) {
tooltipWords.forEach((word) => {
word.setAttribute("tabindex", "0");
word.setAttribute("aria-expanded", "false");
word.setAttribute("aria-description", "voir définition");
async function initTooltips() {
let tooltipWords = document.querySelectorAll(".tooltip-word");
const vocabulairesPostsIds = Array.from(tooltipWords).map((element) =>
element.getAttribute("data-definition-id")
);
console.log(vocabulairesPostsIds);
createTooltip(word);
try {
const tooltipData = await getTooltipsDatas(vocabulairesPostsIds);
console.log("lol", tooltipData);
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);
}
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";
@ -48,63 +138,7 @@ function toggleTooltip(tooltipWord) {
function getCurrentPos(entry) {
return parseInt(getComputedStyle(entry.target, null).getPropertyValue("left"));
}
window.addEventListener("DOMContentLoaded", (event) => {
let tooltipWords = document.querySelectorAll("[data-tooltip-definition]");
// 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) {
// }
});
});
initTooltips(tooltipWords);
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);
});
});
initTooltips();
});

10
webpack.config.js Normal file
View File

@ -0,0 +1,10 @@
const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require("path");
module.exports = {
...defaultConfig,
entry: {
index: path.resolve(process.cwd(), "src/", "index.js"),
tooltipFront: path.resolve(process.cwd(), "src/format-types/tooltip", "tooltip-front.js"),
},
};