2021-03-08 12:51:31 +00:00
|
|
|
import { LitElement, html, unsafeCSS } from 'lit-element';
|
|
|
|
import { event, EventEmitter, tag } from '../../internal/decorators';
|
2021-02-26 14:09:13 +00:00
|
|
|
import styles from 'sass:./resize-observer.scss';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @since 2.0
|
|
|
|
* @status experimental
|
|
|
|
*/
|
2021-03-08 12:51:31 +00:00
|
|
|
@tag('sl-resize-observer')
|
2021-03-09 00:14:32 +00:00
|
|
|
export default class SlResizeObserver extends LitElement {
|
2021-03-06 17:01:39 +00:00
|
|
|
static styles = unsafeCSS(styles);
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
private resizeObserver: ResizeObserver;
|
|
|
|
private observedElements: HTMLElement[] = [];
|
|
|
|
|
2021-03-06 21:37:39 +00:00
|
|
|
/** Emitted when the element is resized. */
|
2021-03-06 17:01:39 +00:00
|
|
|
@event('sl-resize') slResize: EventEmitter<{ entries: ResizeObserverEntry[] }>;
|
|
|
|
|
|
|
|
connectedCallback() {
|
|
|
|
super.connectedCallback();
|
|
|
|
this.resizeObserver = new ResizeObserver(entries => this.slResize.emit({ detail: { entries } }));
|
2021-02-26 14:09:13 +00:00
|
|
|
}
|
|
|
|
|
2021-03-06 17:01:39 +00:00
|
|
|
disconnectedCallback() {
|
|
|
|
super.disconnectedCallback();
|
2021-02-26 14:09:13 +00:00
|
|
|
this.resizeObserver.disconnect();
|
|
|
|
}
|
|
|
|
|
|
|
|
handleSlotChange() {
|
|
|
|
const slot = this.shadowRoot!.querySelector('slot')!;
|
|
|
|
const elements = slot.assignedElements({ flatten: true }) as HTMLElement[];
|
|
|
|
|
|
|
|
// Unwatch previous elements
|
|
|
|
this.observedElements.map(el => this.resizeObserver.unobserve(el));
|
|
|
|
this.observedElements = [];
|
|
|
|
|
|
|
|
// Watch new elements
|
|
|
|
elements.map(el => {
|
|
|
|
this.resizeObserver.observe(el);
|
|
|
|
this.observedElements.push(el);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2021-03-06 17:01:39 +00:00
|
|
|
return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
|
2021-02-26 14:09:13 +00:00
|
|
|
}
|
|
|
|
}
|