vanillajs-browser-helpers/size.js

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