Element Resize Detector

var elementResizeDetectorMaker = require("element-resize-detector");

import elementResizeDetectorMaker from "element-resize-detector";

<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>

var elementResizeDetectorMaker = require("element-resize-detector");

// Create detector with default options
var erd = elementResizeDetectorMaker();

// Listen to resize events
erd.listenTo(document.getElementById("test"), function(element) {
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    console.log("Size: " + width + "x" + height);
});

// High performance setup
var erdFast = elementResizeDetectorMaker({
    strategy: "scroll"
});

// Listen to multiple elements
var elements = document.querySelectorAll(".resizable");
erdFast.listenTo(elements, function(element) {
    // Handle resize for each element
});

// Cleanup when done
erd.uninstall(document.getElementById("test"));

/**
 * Creates an element resize detector instance
 * @param {Options} options - Optional configuration object
 * @returns {ElementResizeDetector} Detector instance with public API methods
 */
function elementResizeDetectorMaker(options);

interface ElementResizeDetector {
    listenTo(options: Options, elements: Element | Element[] | NodeList, listener: (element: Element) => void): void;
    listenTo(elements: Element | Element[] | NodeList, listener: (element: Element) => void): void;
    removeListener(element: Element, listener: (element: Element) => void): void;
    removeAllListeners(element: Element): void;
    uninstall(elements: Element | Element[] | NodeList): void;
    initDocument(targetDocument: Document): void;
}

/**
 * Makes elements resize-detectable and starts listening to resize events
 * @param {ListenToOptions} options - Options that override global options for this call (includes onReady callback)
 * @param {Element|Element[]|NodeList} elements - Single element, array of elements, or element collection
 * @param {Function} listener - Callback executed for each resize event, receives element as argument
 */
listenTo(options, elements, listener);

/**
 * Overload without options parameter
 * @param {Element|Element[]|NodeList} elements - Single element, array of elements, or element collection  
 * @param {Function} listener - Callback executed for each resize event, receives element as argument
 */
listenTo(elements, listener);

// With options
erd.listenTo({ callOnAdd: false }, element, function(el) {
    console.log("Element resized:", el);
});

// Without options
erd.listenTo(element, function(el) {
    console.log("Element resized:", el);
});

// Multiple elements
erd.listenTo([element1, element2], function(el) {
    console.log("Element resized:", el);
});

// With onReady callback
erd.listenTo({
    onReady: function() {
        console.log("All elements are ready for detection");
        // Safe to trigger size changes here
    }
}, elements, function(el) {
    console.log("Element resized:", el);
});

/**
 * Removes a specific listener from an element
 * @param {Element} element - DOM element to remove listener from
 * @param {Function} listener - Specific listener function to remove
 */
removeListener(element, listener);

/**
 * Removes all listeners from an element without completely removing the detector
 * @param {Element} element - DOM element to remove all listeners from
 */
removeAllListeners(element);

/**
 * Completely removes the detector and all listeners from elements
 * @param {Element|Element[]|NodeList} elements - Elements to uninstall detector from
 */
uninstall(elements);

/**
 * Initializes the detector for elements in another document (e.g., iframe)
 * @param {Document} targetDocument - Document object to initialize for element detection
 */
initDocument(targetDocument);

// Initialize for iframe content
var iframe = document.getElementById("myFrame");
erd.initDocument(iframe.contentDocument);

// Now you can listen to elements in the iframe
var iframeElement = iframe.contentDocument.getElementById("resizable");
erd.listenTo(iframeElement, function(element) {
    console.log("Iframe element resized");
});

interface Options {
    /** Detection strategy to use. "scroll" is recommended for performance */
    strategy?: "object" | "scroll";
    
    /** Whether listeners should be called when added (guarantees initial call) */
    callOnAdd?: boolean;
    
    /** Enable debug logging for the listenTo method */
    debug?: boolean;
    
    /** Custom ID handler for generating and managing element IDs */
    idHandler?: IdHandler;
    
    /** Custom reporter for logs/warnings/errors. Set to false for quiet mode */
    reporter?: Reporter | false;
    
    /** Custom batch processor for handling resize events */
    batchProcessor?: BatchProcessor;
    
    /** Adds !important to injected CSS rules to avoid conflicts */
    important?: boolean;
}

interface IdHandler {
    /** Gets the resize detector id of the element */
    get(element: Element, readonly?: boolean): string;
    /** Generate and sets the resize detector id of the element */
    set(element: Element): string;
}

interface Reporter {
    log(message: string): void;
    warn(message: string): void;
    error(message: string): void;
}

{
    strategy: "object",
    callOnAdd: true,
    debug: false,
    idHandler: /* internal default */,
    reporter: /* internal default */,
    batchProcessor: /* internal default */,
    important: false
}

interface ListenToOptions {
    /** Override global callOnAdd setting for this listener */
    callOnAdd?: boolean;
    
    /** Override global debug setting for this listener */
    debug?: boolean;
    
    /** Callback invoked when all elements are ready for detection */
    onReady?: () => void;
}

var erd = elementResizeDetectorMaker({
    strategy: "scroll" // May automatically fallback to object strategy
});

var erd = elementResizeDetectorMaker({
    strategy: "object"
});

try {
    var erd = elementResizeDetectorMaker({
        strategy: "invalid-strategy"
    });
} catch (error) {
    console.error("Strategy error:", error.message);
    // Fallback to default strategy
    erd = elementResizeDetectorMaker();
}

// The library will automatically handle invalid elements via reporter
erd.listenTo("not-an-element", function() {}); // Logs error, doesn't throw

var iframe = document.getElementById("myFrame");

// Initialize when iframe loads
iframe.onload = function() {
    erd.initDocument(iframe.contentDocument);
    
    // Now you can listen to elements inside the iframe
    var iframeElement = iframe.contentDocument.getElementById("resizable");
    erd.listenTo(iframeElement, function(element) {
        console.log("Iframe element resized");
    });
};

var erd = elementResizeDetectorMaker({
    important: true  // Adds !important to injected CSS rules
});