vanillajs-browser-helpers/inView.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 });
var isDOMChildNode_1 = __importDefault(require("./isDOMChildNode"));
var hidden_1 = __importDefault(require("./hidden"));
/**
 * Determines whether the element is in the area of the viewport or not.
 *
 * @param elm - DOM element to test
 * @param threshold - The distance to the edge of the viewport before
 *                    the element is no longer inside in the viewport area,
 *                    in pixels
 *
 * @return An object with indications of where the element is compared to the viewport area
 *
 * @example
 *
 * ```ts
 * // Element inside viewport
 * const { inside } = inView(myElement);
 * // -> inside === true
 *
 * // Element outside viewport
 * const { inside, below } = inView(myElement);
 * // -> inside === false; below === true
 *
 * // With a threshold
 * const { inside } = inView(myElement, 30);
 * // -> inside === true
 * ```
 */
function inView(elm, threshold) {
    if (threshold === void 0) { threshold = 0; }
    if (!isDOMChildNode_1.default(elm) || hidden_1.default(elm)) {
        return { above: false, below: false, left: false, right: false, inside: false };
    }
    var rect = elm.getBoundingClientRect();
    var vpWidth = window.innerWidth;
    var vpHeight = window.innerHeight;
    var above = rect.bottom - threshold <= 0;
    var below = rect.top - vpHeight + threshold >= 0;
    var left = rect.right - threshold <= 0;
    var right = rect.left - vpWidth + threshold >= 0;
    var inside = !above && !below && !left && !right;
    return { above: above, below: below, left: left, right: right, inside: inside };
}
exports.default = inView;