diff --git a/build/tooltipFront.asset.php b/build/tooltipFront.asset.php new file mode 100644 index 0000000..96551d6 --- /dev/null +++ b/build/tooltipFront.asset.php @@ -0,0 +1 @@ + array(), 'version' => 'b6bb3ed64d8d863ca5b9'); diff --git a/build/tooltipFront.js b/build/tooltipFront.js new file mode 100644 index 0000000..0dc9c55 --- /dev/null +++ b/build/tooltipFront.js @@ -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 \ No newline at end of file diff --git a/build/tooltipFront.js.map b/build/tooltipFront.js.map new file mode 100644 index 0000000..ab80204 --- /dev/null +++ b/build/tooltipFront.js.map @@ -0,0 +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\tconsole.log(vocabulairesPostsIds);\r\n\r\n\ttry {\r\n\t\tconst tooltipData = await getTooltipsDatas(vocabulairesPostsIds);\r\n\t\tconsole.log(\"lol\", tooltipData);\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\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\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","console","log","tooltipData","getTooltipsDatas","forEach","word","index","foundTooltipDatas","find","tooltip","id","parseInt","setAttribute","title","rendered","acf","definition","createTooltip","error","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 diff --git a/index.php b/index.php index 03cb4de..c8a01fb 100644 --- a/index.php +++ b/index.php @@ -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 = ''; + return $tag; +} +add_filter('script_loader_tag', 'add_type_attribute', 10, 3); /* --------------------------- ALLOWED BLOCKS ---------------------------*/ diff --git a/package-lock.json b/package-lock.json index 43056ad..f3bcc33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 5ebe894..1f4e010 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/src/format-types/admin.js b/src/format-types/admin.js new file mode 100644 index 0000000..2049579 --- /dev/null +++ b/src/format-types/admin.js @@ -0,0 +1,4 @@ +import apiFetch from "@wordpress/api-fetch"; +apiFetch({ path: "/wp/v2/posts" }).then((posts) => { + console.log(posts); +}); diff --git a/src/format-types/tooltip/tooltip-front.js b/src/format-types/tooltip/tooltip-front.js index 5b1e2b6..00ffbf3 100644 --- a/src/format-types/tooltip/tooltip-front.js +++ b/src/format-types/tooltip/tooltip-front.js @@ -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(); }); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..a67ffeb --- /dev/null +++ b/webpack.config.js @@ -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"), + }, +};