added templui htmx compat script

This commit is contained in:
Johannes Bülow 2025-07-25 12:41:52 +02:00
parent 007a9250ab
commit 3e2f93d754
Signed by: jmb
GPG key ID: B56971CF7B8F83A6
2 changed files with 29 additions and 1 deletions

View file

@ -29,6 +29,34 @@ templ Base(title string) {
</div> </div>
<script src="/assets/htmx.min.js"></script> <script src="/assets/htmx.min.js"></script>
<script src="/assets/alpine.min.js"></script> <script src="/assets/alpine.min.js"></script>
<script>
// Re-initialize templUI components after HTMX swaps
document.body.addEventListener("htmx:afterSwap", (e) => {
if (window.templUI) {
Object.values(window.templUI).forEach(comp => {
comp.init?.(e.detail.elt);
});
}
});
// Re-initialize components after out-of-band swaps
document.body.addEventListener("htmx:oobAfterSwap", (e) => {
if (window.templUI) {
Object.values(window.templUI).forEach(comp => {
comp.init?.(e.detail.target);
});
}
});
// Cleanup before swap (for components with event listeners)
document.body.addEventListener("htmx:beforeSwap", (e) => {
if (window.templUI) {
Object.values(window.templUI).forEach(comp => {
comp.cleanup?.(e.detail.target);
});
}
});
</script>
</footer> </footer>
</body> </body>
</html> </html>

View file

@ -106,7 +106,7 @@ func Base(title string) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\">Source</a></p></div><script src=\"/assets/htmx.min.js\"></script><script src=\"/assets/alpine.min.js\"></script></footer></body></html>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\">Source</a></p></div><script src=\"/assets/htmx.min.js\"></script><script src=\"/assets/alpine.min.js\"></script><script>\n // Re-initialize templUI components after HTMX swaps\n document.body.addEventListener(\"htmx:afterSwap\", (e) => {\n if (window.templUI) {\n Object.values(window.templUI).forEach(comp => {\n comp.init?.(e.detail.elt);\n });\n }\n });\n \n // Re-initialize components after out-of-band swaps\n document.body.addEventListener(\"htmx:oobAfterSwap\", (e) => {\n if (window.templUI) {\n Object.values(window.templUI).forEach(comp => {\n comp.init?.(e.detail.target);\n });\n }\n });\n \n // Cleanup before swap (for components with event listeners)\n document.body.addEventListener(\"htmx:beforeSwap\", (e) => {\n if (window.templUI) {\n Object.values(window.templUI).forEach(comp => {\n comp.cleanup?.(e.detail.target);\n });\n }\n });\n </script></footer></body></html>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }