ui-lit/controllers/ResizeObserverController.js

UI Elements on LIT

import { noChange } from 'lit';
import { directive, Directive, PartType } from 'lit/directive.js';
class ResizeDirective extends Directive {
    constructor(partInfo) {
        super(partInfo);
        this._inited = false;
        if (partInfo.type !== PartType.ELEMENT) {
            throw new Error('Must be element');
        }
    }
    render(controller) {
        return noChange;
    }
    update(part, args) {
        if (this._inited === false) {
            args[0].startOberve(part.element);
            this._inited = true;
        }
    }
}
const resizeDirective = directive(ResizeDirective);
export class ResizeObserverController {
    constructor(host) {
        this._observer = null;
        this._observers = new Map();
        this.onMutate = (entries) => {
            for (const entry of entries) {
                const func = this._observers.get(entry.target);
                if (func) {
                    func(entry.contentRect);
                }
            }
        };
        (this.host = host).addController(this);
    }
    hostConnected() {
        this._observer = new ResizeObserver(this.onMutate);
    }
    hostDisconnected() {
        var _a;
        (_a = this._observer) === null || _a === void 0 ? void 0 : _a.disconnect();
        this._observers.clear();
    }
    startOberve(el) {
        var _a;
        this._observers.set(el, this._lastFunction);
        (_a = this._observer) === null || _a === void 0 ? void 0 : _a.observe(el, { 'box': 'content-box' });
    }
    observe(f) {
        this._lastFunction = f;
        return resizeDirective(this);
    }
}