Skip to content

Instantly share code, notes, and snippets.

@rupertlssmith
Created November 24, 2023 09:41
Show Gist options
  • Save rupertlssmith/1ffb8eacca6fe5f7429155f2902d9159 to your computer and use it in GitHub Desktop.
Save rupertlssmith/1ffb8eacca6fe5f7429155f2902d9159 to your computer and use it in GitHub Desktop.
ElmResize.js
class Resizeable extends HTMLElement {
constructor() {
super();
this.resizeCallback = this.resizeCallback.bind(this);
this._observer = new ResizeObserver(this.resizeCallback);
}
connectedCallback() {
this._observer.observe(this);
}
disconnectedCallback() {
this._observer.disconnect();
}
resizeCallback(e) {
for (let entry of e) {
if (entry.borderBoxSize) {
// Firefox implements as a single content rect, rather than an array
const borderBoxSize = Array.isArray(entry.borderBoxSize) ? entry.borderBoxSize[0] : entry.borderBoxSize;
let event = new CustomEvent("resize", {
detail: {
w: borderBoxSize.inlineSize,
h: borderBoxSize.blockSize
}
});
this.dispatchEvent(event);
}
}
}
}
customElements.define('elm-resize', Resizeable);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment