-
-
Save stevedrobinson/1d82def6d2dc38477a4b30351e77b321 to your computer and use it in GitHub Desktop.
| /* enableTidyDWC is a function to enable | |
| a series of scripts that tidy up Mautic dynamic | |
| web content when a mutation is detected. | |
| It performs three main functions: | |
| * strips all inline css if it finds the attribute | |
| data-param-slot-strip-inline="yes". Otherwise, it | |
| restores the inline css stripped by the buggy | |
| froala editor | |
| * It restores classnames stripped by the buggy | |
| froala editor in Mautic | |
| * It allows for inline script elements by using | |
| [script] bracket notation instead of <script> | |
| tags which are stripped from the forala editor | |
| */ | |
| function stripInline(dwcElement) { | |
| const restore = !(dwcElement.dataset.paramSlotStripInline && dwcElement.dataset.paramSlotStripInline == 'yes'); | |
| const list = dwcElement.getElementsByTagName('*'); | |
| for (let i = 0; i < list.length; i++) { | |
| const oldStyle = list[i].getAttribute('fr-original-style'); | |
| // don't strip inline styles inside forms | |
| if (!list[i].closest('.mauticform_wrapper')) { | |
| list[i].removeAttribute('style'); | |
| if (restore && oldStyle) { | |
| list[i].setAttribute('style', oldStyle); | |
| } | |
| list[i].removeAttribute('fr-original-style'); | |
| } | |
| } | |
| } | |
| function restoreClassNames(dwcElement) { | |
| const list = dwcElement.getElementsByTagName('*'); | |
| for (let i = 0; i < list.length; i++) { | |
| const oldClass = list[i].getAttribute('fr-original-class'); | |
| if (oldClass) { | |
| oldClass.split(/\s+/).forEach(function (className) { | |
| className && list[i].classList.add(className); | |
| }) | |
| list[i].removeAttribute('fr-original-class'); | |
| } | |
| } | |
| } | |
| function unbracketScript(dwcElement) { | |
| const content = dwcElement.innerHTML; | |
| const matches = content.match(/\[script\]([^\[]+)\[\/script\]/); | |
| if (matches && matches[1]) { | |
| const scr = document.createElement("script"); | |
| scr.innerText = matches[1]; | |
| dwcElement.innerHTML = content.replace( | |
| /\[script\][^\[]+\[\/script\]/, | |
| "" | |
| ); | |
| dwcElement.appendChild(scr); | |
| } | |
| } | |
| function tidyDWC(mutationList, observer) { | |
| for (let mutation of mutationList) { | |
| stripInline(mutation.target); | |
| restoreClassNames(mutation.target); | |
| unbracketScript(mutation.target); | |
| } | |
| } | |
| function enableTidyDWC() { | |
| var slotCol = document.querySelectorAll('[data-slot="dwc"]'), | |
| config = { | |
| attributes: false, | |
| childList: true, | |
| subtree: true | |
| }; | |
| for (let slot of slotCol) { | |
| const obs = new MutationObserver(tidyDWC); | |
| obs.observe(slot, config); | |
| } | |
| return true; | |
| }; |
Oké after some hours .... I found the solution or found out what i did "wrong".
- I worked my template and created a landing pages within mautic.
(I think if you work with third party site the script it works more intuitive)
2 - WRONG: I started working in data-slote="text" (is template element) and there I planned to include the {dwc=....}. This is working for DWC, but as we know the html attributes are replace by the forala) so the layout is not what it shout be.
The the javascript: it start first searching for div's with data-slote="dwc".... and I think it need to be list the data-slot=dwc blocks before the dwc itselfs is loaded and then afterwards when the content is loading the script will changes it and bring back the original markup. so this was not working. The forala editor didn't accept "
2 - THIS WORKS/ add a HTML slot in the builder, (i think you can also add those in the template instead of data-slot="text"). Put this code inside a html slot:
Hopefully this helps someone facing the same problem... good luck
Thank you to addressed this issue! Could you provide some more instructions to implement it in a template and landing page...
I'm not a specialist in coding... a know some basic things but the code is not running in my case:)
template base.html.twig:
<script type="text/javascript" src="{{ getAssetUrl('themes/'~template~'/js/debugforala.js')}}"></script>I included the script in the '< h ea d >' section:
at the body element I call the function enableTidyDWC(): but that looks to be not working....
result:
no chance, the Forala is still messing up my classes etc...
the page is body section is: (without the onload="... stuf)