vevet/lib/esm/core/index.js

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

import { detect } from 'detect-browser';
import InAppSpy from 'inapp-spy';
import isMobileJs from 'ismobilejs';
import { cnAdd, cnToggle } from '../internal/cn';
import { body, doc, html } from '../internal/env';
import manifest from '../manifest.json';
import { createPageLoad } from './handlers/createPageLoad';
import { createViewport } from './handlers/createViewport';
export function Core(input) {
    // set default properties
    var _a;
    const defaultProps = {
        resizeDebounce: 0,
        easing: [0.25, 0.1, 0.25, 1],
        applyClassNames: false,
    };
    const props = Object.assign(Object.assign({}, defaultProps), input);
    const prefix = 'v-';
    // device info
    const browserData = detect();
    const device = isMobileJs();
    const osName = (_a = ((browserData === null || browserData === void 0 ? void 0 : browserData.os) || '')) === null || _a === void 0 ? void 0 : _a.split(' ')[0].toLowerCase();
    const browserName = ((browserData === null || browserData === void 0 ? void 0 : browserData.name) || '').toLowerCase();
    const isMobileByUserAgent = device.phone || device.tablet;
    let isMobile = isMobileByUserAgent;
    if (!isMobile) {
        if (!window.matchMedia('(pointer: fine)').matches) {
            isMobile = true;
        }
    }
    const { isInApp, appName } = InAppSpy();
    const inAppBrowser = isInApp ? (appName || 'unknown').toLowerCase() : false;
    // events
    const pageLoad = createPageLoad({
        prefix,
        applyClassNames: props.applyClassNames,
    });
    const viewport = createViewport({
        prefix,
        props,
        isMobile,
        isInApp,
        browserName,
    });
    // output
    const output = Object.assign(Object.assign({}, viewport.data), { viewportCallbacks: viewport.callbacks, version: manifest.version, props,
        prefix, phone: device.phone, tablet: device.tablet, mobile: isMobile, osName,
        browserName,
        inAppBrowser,
        doc,
        html,
        body, loaded: false, onLoad: pageLoad.onLoad, onResize: (...params) => viewport.callbacks.on(...params) });
    // update props on page load
    pageLoad.onLoad(() => {
        output.loaded = true;
    });
    // update props on viewport change
    viewport.callbacks.add('trigger', () => {
        const keys = Object.keys(viewport.data);
        keys.forEach((key) => {
            // @ts-ignore
            output[key] = viewport.data[key];
        });
    }, { protected: true, name: 'vevet core' });
    // set device features
    (function setDeviceFeatures() {
        if (!props.applyClassNames) {
            return;
        }
        cnAdd(html, `${prefix}os-${osName}`);
        cnAdd(html, `${prefix}browser-${browserName}`);
        cnToggle(html, `${prefix}phone`, output.phone);
        cnToggle(html, `${prefix}tablet`, output.tablet);
        cnToggle(html, `${prefix}mobile`, output.mobile);
    })();
    return output;
}
//# sourceMappingURL=index.js.map