vevet/lib/cjs/core/handlers/createViewport/index.js

Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createViewport = createViewport;
var Callbacks_1 = require("../../../base/Callbacks");
var cn_1 = require("../../../internal/cn");
var env_1 = require("../../../internal/env");
var isFiniteNumber_1 = require("../../../internal/isFiniteNumber");
var listeners_1 = require("../../../utils/listeners");
function createViewport(_a) {
    var prefix = _a.prefix, props = _a.props, isMobile = _a.isMobile, isInApp = _a.isInApp, browserName = _a.browserName;
    // create styles
    var styles = env_1.doc.getElementById('vevet_css_preset');
    if (!styles) {
        styles = env_1.doc.createElement('style');
        styles.id = 'vevet_css_preset';
        env_1.body.appendChild(styles);
    }
    // create svh helper
    var svhHelper = env_1.doc.createElement('div');
    var style = svhHelper.style;
    svhHelper.id = 'vevet_svh_helper';
    style.position = 'fixed';
    style.top = '-100svh';
    style.left = '-100px';
    style.width = '1px';
    style.height = '100svh';
    env_1.body.appendChild(svhHelper);
    // create callbacks
    var callbacks = new Callbacks_1.Callbacks();
    // default data
    var data = {
        width: 0,
        height: 0,
        sHeight: 0,
        vw: 0,
        vh: 0,
        svh: 0,
        scrollbarWidth: 0,
        rem: 16,
        landscape: false,
        portrait: false,
        dpr: window.devicePixelRatio,
        lowerDpr: window.devicePixelRatio,
    };
    // update values for the first time
    updateValues();
    updateClassNames();
    updateCSSVars();
    // add resize events
    var debounce;
    function debounceResize() {
        if (debounce) {
            clearTimeout(debounce);
            debounce = undefined;
        }
        if (props.resizeDebounce) {
            debounce = setTimeout(function () { return onResize(); }, props.resizeDebounce);
        }
        else {
            onResize();
        }
    }
    (0, listeners_1.addEventListener)(window, 'resize', function () { return debounceResize(); });
    var observer = new ResizeObserver(function () { return debounceResize(); });
    observer.observe(env_1.html);
    observer.observe(env_1.body);
    /** Event on window resize */
    function onResize() {
        var prevWidth = data.width, prevHeight = data.height;
        updateValues();
        updateClassNames();
        updateCSSVars();
        var width = data.width, height = data.height;
        callbacks.emit('trigger', undefined);
        if (width !== prevWidth || height !== prevHeight) {
            callbacks.emit('any', undefined);
        }
        if (width !== prevWidth && height === prevHeight) {
            callbacks.emit('onlyWidth', undefined);
        }
        if (height !== prevHeight && width === prevWidth) {
            callbacks.emit('onlyHeight', undefined);
        }
        if (width !== prevWidth && height !== prevHeight) {
            callbacks.emit('both', undefined);
        }
        if (width !== prevWidth) {
            callbacks.emit('width', undefined);
        }
        if (height !== prevHeight) {
            callbacks.emit('height', undefined);
        }
    }
    /** Update viewport values */
    function updateValues() {
        var prevWidth = data.width;
        var vWidth = window.innerWidth;
        var vHeight = window.innerHeight;
        data.width = vWidth;
        data.height = vHeight;
        data.scrollbarWidth = vWidth - env_1.html.clientWidth;
        data.vw = data.width / 100;
        data.vh = data.height / 100;
        var rootStyles = getComputedStyle(env_1.html);
        var fontSize = parseFloat(rootStyles.fontSize);
        data.rem = (0, isFiniteNumber_1.isFiniteNumber)(fontSize) ? fontSize : 16;
        data.landscape = data.width > data.height;
        data.portrait = data.width < data.height;
        data.dpr = window.devicePixelRatio;
        data.lowerDpr = !isMobile ? 1 : Math.min(data.dpr, 2);
        // for in-app browser, update svh only if width changed
        if (isMobile && (isInApp || browserName.includes('fxios'))) {
            var rootHeight = env_1.html.clientHeight;
            if (prevWidth !== data.width || !data.sHeight) {
                data.sHeight = rootHeight;
                data.svh = data.sHeight / 100;
            }
            else if (prevWidth === data.width && rootHeight < data.sHeight) {
                data.sHeight = rootHeight;
                data.svh = data.sHeight / 100;
            }
        }
        else {
            // when other browser, update svh directly
            data.svh = svhHelper.clientHeight / 100 || env_1.html.clientHeight / 100;
            data.sHeight = data.svh * 100;
        }
    }
    /** Update page classnames according to the viewport data */
    function updateClassNames() {
        if (!props.applyClassNames) {
            return;
        }
        (0, cn_1.cnToggle)(env_1.html, "".concat(prefix, "landscape"), data.landscape);
        (0, cn_1.cnToggle)(env_1.html, "".concat(prefix, "portrait"), data.portrait);
    }
    /** Update CSS variables */
    function updateCSSVars() {
        styles.innerHTML = "\n      html {\n        --vw: ".concat(data.vw, "px;\n        --vh: ").concat(data.vh, "px;\n        --svh: ").concat(data.svh, "px;\n        --scrollbar-width: ").concat(data.scrollbarWidth, "px;\n      }\n    ");
    }
    return { data: data, callbacks: callbacks };
}
//# sourceMappingURL=index.js.map