vanillajs-browser-helpers/size.mjs

Collection of convenience code snippets (helpers) that aims to make it a little easier to work with vanilla JS in the browser

import boxModel from './boxModel';
import isWindow from './isWindow';
import viewport from './viewport';
export function elmSize(elm, type) {
    const { offsetWidth, offsetHeight, clientWidth, clientHeight } = elm;
    if (type === "outer" /* OUTER */) {
        return { width: offsetWidth, height: offsetHeight };
    }
    if (type === "inner" /* INNER */) {
        return { width: clientWidth, height: clientHeight };
    }
    if (type === "margin-box" /* MARGIN_BOX */) {
        const { margin } = boxModel(elm);
        return {
            width: offsetWidth + margin.left + margin.right,
            height: offsetHeight + margin.top + margin.bottom
        };
    }
    if (type === "content-box" /* CONTENT_BOX */) {
        const { padding } = boxModel(elm);
        return {
            width: clientWidth - padding.left - padding.right,
            height: clientHeight - padding.top - padding.bottom
        };
    }
    // Default: CONTENT
    const { scrollWidth, scrollHeight } = elm;
    const { padding } = boxModel(elm);
    return {
        width: scrollWidth - (padding.left + padding.right),
        height: scrollHeight - (padding.top + padding.bottom)
    };
}
export function windowSize(win = window, type = "outer" /* OUTER */) {
    return type === "outer" /* OUTER */
        ? { width: win.outerWidth, height: win.outerHeight }
        : elmSize(viewport(win), type);
}
function size(elm, type) {
    if (typeof elm === 'number') {
        type = elm;
        elm = window;
    }
    type = type ?? "outer" /* OUTER */;
    elm = elm || window;
    return isWindow(elm)
        ? windowSize(elm, type)
        : elmSize(elm, type);
}
export default size;
/**
 * Find the size of a DOM element or window including margins and borders
 *
 * @param elm - The DOM element (or window) to find the size of
 * @return Object describing width and height of the element
 */
export const marginBoxSize = (elm) => size(elm, "margin-box" /* MARGIN_BOX */);
/**
 * Find the size of a DOM element or window including borders
 *
 * @param elm - The DOM element (or window) to find the size of
 * @return Object describing width and height of the element
 */
export const outerSize = (elm) => size(elm, "outer" /* OUTER */);
/**
 * Find the size of a DOM element or window excluding borders and margins
 *
 * @param elm - The DOM element (or window) to find the size of
 * @return Object describing width and height of the element
 */
export const innerSize = (elm) => size(elm, "inner" /* INNER */);
/**
 * Find the size of the content (scrollable area minus padding) of a DOM element or window
 *
 * @param elm - The DOM element (or window) to find the size of
 * @return Object describing width and height of the element
 */
export const contentSize = (elm) => size(elm, "content" /* CONTENT */);
/**
 * Find the size of a DOM element or window excluding borders, margins and padding
 *
 * @param elm - The DOM element (or window) to find the size of
 * @return Object describing width and height of the element
 */
export const contentBoxSize = (elm) => size(elm, "content-box" /* CONTENT_BOX */);