| 1 |
// Gestion des styles dynamiques pour le Fixed Background Group dans l'éditeur |
| 2 |
|
| 3 |
const applyFixedBgStyles = (blockElement, attributes) => { |
| 4 |
if (!blockElement || !attributes.fixedBg) return; |
| 5 |
|
| 6 |
const { fixedBgImage, fixedBgOverlay } = attributes; |
| 7 |
|
| 8 |
// Appliquer l'image de fond |
| 9 |
if (fixedBgImage && fixedBgImage.url) { |
| 10 |
blockElement.style.backgroundImage = `url(${fixedBgImage.url})`; |
| 11 |
} else { |
| 12 |
// Image par défaut si aucune image n'est sélectionnée |
| 13 |
blockElement.style.backgroundImage = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%236366f1;stop-opacity:1" /><stop offset="100%" style="stop-color:%239f7aea;stop-opacity:1" /></linearGradient></defs><rect width="100%" height="100%" fill="url(%23grad)"/></svg>')`; |
| 14 |
} |
| 15 |
|
| 16 |
// Appliquer la couleur d'overlay |
| 17 |
if (fixedBgOverlay) { |
| 18 |
// Créer ou mettre à jour l'overlay |
| 19 |
let overlay = blockElement.querySelector(".fixed-bg-overlay"); |
| 20 |
if (!overlay) { |
| 21 |
overlay = document.createElement("div"); |
| 22 |
overlay.className = "fixed-bg-overlay"; |
| 23 |
overlay.style.cssText = ` |
| 24 |
position: absolute; |
| 25 |
top: 0; |
| 26 |
left: 0; |
| 27 |
width: 100%; |
| 28 |
height: 100%; |
| 29 |
z-index: 0; |
| 30 |
pointer-events: none; |
| 31 |
`; |
| 32 |
blockElement.insertBefore(overlay, blockElement.firstChild); |
| 33 |
} |
| 34 |
overlay.style.backgroundColor = fixedBgOverlay; |
| 35 |
} |
| 36 |
|
| 37 |
// Ajouter la classe fixed-bg-section |
| 38 |
blockElement.classList.add("fixed-bg-section"); |
| 39 |
}; |
| 40 |
|
| 41 |
// Observer pour détecter les changements dans l'éditeur |
| 42 |
const observeEditorChanges = () => { |
| 43 |
if (!window.wp || !window.wp.data) return; |
| 44 |
|
| 45 |
const { select, subscribe } = window.wp.data; |
| 46 |
|
| 47 |
subscribe(() => { |
| 48 |
const blocks = select("core/block-editor").getBlocks(); |
| 49 |
|
| 50 |
blocks.forEach((block) => { |
| 51 |
if ( |
| 52 |
block.name === "core/group" && |
| 53 |
block.attributes.className && |
| 54 |
block.attributes.className.includes("aibui-group-block") && |
| 55 |
block.attributes.fixedBg |
| 56 |
) { |
| 57 |
// Trouver l'élément DOM du bloc |
| 58 |
const blockElement = document.querySelector( |
| 59 |
`[data-block="${block.clientId}"]` |
| 60 |
); |
| 61 |
if (blockElement) { |
| 62 |
applyFixedBgStyles(blockElement, block.attributes); |
| 63 |
} |
| 64 |
} |
| 65 |
}); |
| 66 |
}); |
| 67 |
}; |
| 68 |
|
| 69 |
// Initialiser l'observateur quand l'éditeur est prêt |
| 70 |
if (document.readyState === "loading") { |
| 71 |
document.addEventListener("DOMContentLoaded", observeEditorChanges); |
| 72 |
} else { |
| 73 |
observeEditorChanges(); |
| 74 |
} |
| 75 |
|
| 76 |
// Fonction pour appliquer les styles aux blocs existants |
| 77 |
const applyStylesToExistingBlocks = () => { |
| 78 |
const fixedBgGroups = document.querySelectorAll( |
| 79 |
".aibui-group-block[data-block]" |
| 80 |
); |
| 81 |
|
| 82 |
fixedBgGroups.forEach((group) => { |
| 83 |
const blockId = group.getAttribute("data-block"); |
| 84 |
if (blockId && window.wp && window.wp.data) { |
| 85 |
const block = window.wp.data |
| 86 |
.select("core/block-editor") |
| 87 |
.getBlock(blockId); |
| 88 |
if (block && block.attributes.fixedBg) { |
| 89 |
applyFixedBgStyles(group, block.attributes); |
| 90 |
} |
| 91 |
} |
| 92 |
}); |
| 93 |
}; |
| 94 |
|
| 95 |
// Appliquer les styles aux blocs existants |
| 96 |
setTimeout(applyStylesToExistingBlocks, 1000); |
| 97 |
|
| 98 |
export { applyFixedBgStyles, applyStylesToExistingBlocks }; |
| 99 |
|
