bigskysoftware / bigskysoftware/htmx

[proposal] extend hx-preserve functionality to optionally preserve attibutes and classes only

Open
#2,195 5 comments 8 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.