bigskysoftware / bigskysoftware/htmx
[proposal] extend hx-preserve functionality to optionally preserve attibutes and classes only
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
When updating elements on the frontend sometimes we just want to update the data and keep some frontend specific classes/attributes unchanged. Some elements might be highlighted, hidden, or expanded on the frontend and when the update is received we want to preserve classes and attributes that are responsible for this (eg. `
hx-preserve currently only supports the preservation of the whole element which means that it can not be used if we want to update the data. We can however extend its functionality by accepting parameters in a following manner:
`hx-preserve="attr:open"` and `hx-preserve="class:hidden" ` This way we can preserve specific attributes or classes.
implementation seems quite simple:
```
` function handlePreservedElements(fragment) {
forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function (preservedElt) {
var id = getAttributeValue(preservedElt, "id");
var oldElt = getDocument().getElementById(id);
if (oldElt == null){
return
}
var parameters = getAttributeValue(preservedElt, 'hx-preserve')
if (parameters){
preserveAttributesAndClasses(oldElt, preservedElt, parameters)
} else {
preservedElt.parentNode.replaceChild(oldElt, preservedElt);
}
});
}
function preserveAttributesAndClasses(oldElt, preservedElt, parameters){
forEach(parameters.split(","), function (parameter){
{
var splitted_parameter = parameter.split(":")
var qualifier = splitted_parameter[0]
var name = splitted_parameter[1]
if (qualifier === 'attr') {
if (oldElt.hasAttribute(name)) {
preservedElt.setAttribute(name, oldElt.getAttribute(name))
} else {
preservedElt.removeAttribute(name)
}
} else if (qualifier === 'class') {
if (oldElt.classList.contains(name)) {
preservedElt.classList.add(name)
} else {
preservedElt.classList.remove(name)
}
}
}
})
}
```
Contributor guide
Assessment
This issue has not been assessed yet.