vanillajs-browser-helpers/size.cjs

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.contentBoxSize = exports.contentSize = exports.innerSize = exports.outerSize = exports.marginBoxSize = exports.windowSize = exports.elmSize = void 0;
const boxModel_1 = __importDefault(require("./boxModel"));
const isWindow_1 = __importDefault(require("./isWindow"));
const viewport_1 = __importDefault(require("./viewport"));
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 } = (0, boxModel_1.default)(elm);
        return {
            width: offsetWidth + margin.left + margin.right,
            height: offsetHeight + margin.top + margin.bottom
        };
    }
    if (type === "content-box" /* CONTENT_BOX */) {
        const { padding } = (0, boxModel_1.default)(elm);
        return {
            width: clientWidth - padding.left - padding.right,
            height: clientHeight - padding.top - padding.bottom
        };
    }
    // Default: CONTENT
    const { scrollWidth, scrollHeight } = elm;
    const { padding } = (0, boxModel_1.default)(elm);
    return {
        width: scrollWidth - (padding.left + padding.right),
        height: scrollHeight - (padding.top + padding.bottom)
    };
}
exports.elmSize = elmSize;
function windowSize(win = window, type = "outer" /* OUTER */) {
    return type === "outer" /* OUTER */
        ? { width: win.outerWidth, height: win.outerHeight }
        : elmSize((0, viewport_1.default)(win), type);
}
exports.windowSize = windowSize;
function size(elm, type) {
    if (typeof elm === 'number') {
        type = elm;
        elm = window;
    }
    type = type !== null && type !== void 0 ? type : "outer" /* OUTER */;
    elm = elm || window;
    return (0, isWindow_1.default)(elm)
        ? windowSize(elm, type)
        : elmSize(elm, type);
}
exports.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
 */
const marginBoxSize = (elm) => size(elm, "margin-box" /* MARGIN_BOX */);
exports.marginBoxSize = marginBoxSize;
/**
 * 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
 */
const outerSize = (elm) => size(elm, "outer" /* OUTER */);
exports.outerSize = outerSize;
/**
 * 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
 */
const innerSize = (elm) => size(elm, "inner" /* INNER */);
exports.innerSize = innerSize;
/**
 * 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
 */
const contentSize = (elm) => size(elm, "content" /* CONTENT */);
exports.contentSize = contentSize;
/**
 * 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
 */
const contentBoxSize = (elm) => size(elm, "content-box" /* CONTENT_BOX */);
exports.contentBoxSize = contentBoxSize;