Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A promise that can be set on an element, to resolve when that element's attributes have changed
** AttrPromise
* @param {element} DOM element. required
* @param {attributeName} String. Optional. Attribute that is expected to change.
* @param {rejectTime} Int. Optional. Seconds (not ms) to wait before rejecting. 0 means there is no reject time.
* @returns {promise}
*/
function attrPromise(element, attributeName,rejectTime = 0) {
return new Promise((resolve,reject) => {
let hasChanged = false;
const observerConfig = {attributes: true,attributeOldValue:true};
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// if attributeName is given and we have a matching change, disconnect and resolve
if (attributeName && mutation.attributeName == attributeName) {
hasChanged = true;
observer.disconnect();
resolve(element, element.getAttribute(attributeName));
}
// no attributeName is given, but some attribute in general changed, disconnect and resolve
if (!attributeName) {
hasChanged = true;
observer.disconnect();
resolve(element);
}
});
});
// Add a reject time if provided. Doesn't use recurrsion, but should it?
if (rejectTime > 0) {
window.setTimeout(()=>{
if (!hasChanged) {
reject(element);
}
},rejectTime * 100);
}
if (attributeName) observerConfig.attributeFilter =[attributeName];
observer.observe(element, observerConfig);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment