diff --git a/src/format-types/brochure/brochure-front.js b/src/format-types/brochure/brochure-front.js index 6924082..4ed173e 100644 --- a/src/format-types/brochure/brochure-front.js +++ b/src/format-types/brochure/brochure-front.js @@ -1,6 +1,4 @@ -// import downloadBrochureIcon from "../img/icon_brochure_download.svg"; - -window.addEventListener("DOMContentLoaded", (event) => { +function buildDownloadIcons() { let brochureLinks = document.querySelectorAll(".brochure-link-format"); const iconSrc = img_path_datas.downloadIconPath; @@ -12,4 +10,38 @@ window.addEventListener("DOMContentLoaded", (event) => { brochureLink.appendChild(brochureLinkIcon); }); +} + +async function fetchBrochureSourcePost(brochurePostId) { + const response = await fetch(`/wp-json/wp/v2/brochures/${brochurePostId.toString()}`); + return await response.json(); +} + +async function fetchRelatedPdfUrl(brochureId) { + const response = await fetch(`/wp-json/wp/v2/media/${brochureId.toString()}`); + return await response.json(); +} + +async function hydrateBrochuresLinks() { + const brochureLinks = Array.from(document.querySelectorAll(".brochure-link-format")); + if (!brochureLinks.length) return; + + for (const brochureLink of brochureLinks) { + const brochurePostId = brochureLink.getAttribute("brochure-post-id"); + const brochureOrigHref = brochureLink.getAttribute("href"); + console.log(brochureOrigHref); + + brochurePostSource = await fetchBrochureSourcePost(brochurePostId); + if (!brochurePostSource.acf || !brochurePostSource.acf.brochure_pdf) continue; + + brochureAttachedMedia = await fetchRelatedPdfUrl(brochurePostSource.acf.brochure_pdf); + if (brochureAttachedMedia.source_url) { + brochureLink.setAttribute("href", brochureAttachedMedia.source_url); + } + } +} + +window.addEventListener("DOMContentLoaded", (event) => { + buildDownloadIcons(); + hydrateBrochuresLinks(); }); diff --git a/src/format-types/brochure/brochure.js b/src/format-types/brochure/brochure.js index 1a3775b..4df6934 100644 --- a/src/format-types/brochure/brochure.js +++ b/src/format-types/brochure/brochure.js @@ -7,39 +7,75 @@ import { ToolbarGroup, ToolbarButton, TextareaControl } from "@wordpress/compone import { check, trash } from "@wordpress/icons"; import { useState } from "@wordpress/element"; +import { useSelect } from "@wordpress/data"; // pour les querry const formatName = "homegrade-format/brochure-format"; const BrochureLinkFormatButton = (props) => { const { isActive, value, onChange } = props; const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const [linkValue, setLinkValue] = useState(""); + const [relatedPost, setRelatedPost] = useState(""); + const [pendingBrochure, setPendingBrochure] = useState(false); const activeFormat = getActiveFormats(value).filter((format) => format.type === formatName)[0]; - function setFormat() { + const brochurePost = useSelect((select) => { + if (activeFormat && activeFormat.attributes.brochurePostID) { + return select("core").getEntityRecord( + "postType", + "brochures", + activeFormat.attributes.brochurePostID + ); + } + }); + + const brochureAttachedMedia = useSelect((select) => { + if (brochurePost && brochurePost.acf && brochurePost.acf.brochure_pdf) { + return select("core").getEntityRecord("postType", "attachment", brochurePost.acf.brochure_pdf); + } + }); + + function setFormat(postDatas) { setIsPopoverOpen(!isPopoverOpen); + setPendingBrochure(true); onChange( applyFormat(value, { type: formatName, attributes: { - href: linkValue.url, + href: "", + brochurePostID: postDatas.id.toString(), target: "_blank", - dataId: linkValue.id.toString(), style: "text-decoration: underline;", }, }) ); } + function removeFormat() { setIsPopoverOpen(false); - setLinkValue(""); onChange( toggleFormat(value, { type: formatName, }) ); } + console.log(brochurePost); + console.log(brochureAttachedMedia); + if (brochurePost && brochureAttachedMedia && pendingBrochure) { + onChange( + applyFormat(value, { + type: formatName, + attributes: { + target: "_blank", + brochurePostID: brochurePost.id.toString(), + brochureID: brochureAttachedMedia.id.toString(), + href: brochureAttachedMedia.source_url, + style: "text-decoration: underline;", + }, + }) + ); + setPendingBrochure(false); + } return ( <> @@ -50,24 +86,14 @@ const BrochureLinkFormatButton = (props) => { className='popover_tooltip_field'> { - setLinkValue(value); - }} + value={relatedPost} + onChange={setFormat} /> - )} @@ -93,6 +119,10 @@ const BrochureLinkFormatButton = (props) => { registerFormatType("homegrade-format/brochure-format", { title: "Lien Brochure", tagName: "a", + attributes: { + brochureID: "brochure-id", + brochurePostID: "brochure-post-id", + }, className: "brochure-link-format", edit: BrochureLinkFormatButton, });