Skip to content

Instantly share code, notes, and snippets.

@avisek
Created April 19, 2022 19:53
Show Gist options
  • Save avisek/0f057999baa52aca1bba37a54ce88486 to your computer and use it in GitHub Desktop.
Save avisek/0f057999baa52aca1bba37a54ce88486 to your computer and use it in GitHub Desktop.
Tiny ResizeObserver polyfill
// https://codepen.io/dgca/pen/WoJoNB
export const ResizeObserver = window.ResizeObserver || class ResizeObserver {
constructor(callback) {
this.observables = [];
// Array of observed elements that looks like this:
// [{
// el: domNode,
// size: {height: x, width: y}
// }]
this.boundCheck = this.check.bind(this);
this.boundCheck();
this.callback = callback;
}
observe(el) {
if (this.observables.some(observable => observable.el === el)) {
return;
}
const newObservable = {
el: el,
size: {
height: el.clientHeight,
width: el.clientWidth
}
};
this.observables.push(newObservable);
}
unobserve(el) {
this.observables = this.observables.filter(obj => obj.el !== el);
}
disconnect() {
this.observables = [];
}
check() {
const changedEntries = this.observables
.filter((obj) => {
const currentHeight = obj.el.clientHeight;
const currentWidth = obj.el.clientWidth;
if (
obj.size.height !== currentHeight ||
obj.size.width !== currentWidth
) {
obj.size.height = currentHeight;
obj.size.width = currentWidth;
return true;
}
})
.map(obj => obj.el);
if (changedEntries.length > 0) {
this.callback(changedEntries);
}
window.requestAnimationFrame(this.boundCheck);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment