@ima/plugin-atoms/dist/cjs/UIComponentHelper.js

IMA.js UI React atoms

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, /**
 * UI component helper.
 */ "default", {
    enumerable: true,
    get: function() {
        return UIComponentHelper;
    }
});
const _infinitecircle = require("infinite-circle");
const _ComponentPositions = /*#__PURE__*/ _interop_require_default(require("./ComponentPositions"));
const _Visibility = /*#__PURE__*/ _interop_require_default(require("./Visibility"));
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
class UIComponentHelper {
    static $dependencies = [
        '$Router',
        '$Window',
        _ComponentPositions.default,
        _Visibility.default,
        _infinitecircle.Infinite,
        '$CssClasses'
    ];
    _router;
    _window;
    componentPositions;
    visibility;
    infinite;
    _cssClassNameProcessor;
    /**
   * Initializes the helper.
   * @param router
   * @param window
   * @param componentPositions
   * @param visibility
   * @param infinite
   * @param cssClassNameProcessor
   */ constructor(router, window, componentPositions, visibility, infinite, cssClassNameProcessor// TODO
    ){
        this._router = router;
        this._window = window;
        this.componentPositions = componentPositions;
        this.visibility = visibility;
        this.infinite = infinite;
        this._cssClassNameProcessor = cssClassNameProcessor;
    }
    /**
   * The public method which registers visibility circle to inifinite loop.
   */ init() {
        this.infinite.add(this.visibility.circle);
    }
    /**
   * The regular expression was taken from the Closure sanitization library.
   * @param url
   */ sanitizeUrl(url) {
        const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|data|ftp|tel|file|sms):|[^&:/?#]*(?:[/?#]|$))/gi;
        url = String(url).trim();
        if (url.match(SAFE_URL_PATTERN)) return url;
        return 'unsafe:' + url;
    }
    /**
   * Serialize object as key and value pairs for using in noscript tag.
   * @param object
   */ serializeObjectToNoScript(object) {
        return Object.keys(object).reduce((string, key)=>{
            return string + ` ${key?.toLowerCase?.()}="${object[key]}"`;
        }, '');
    }
    /**
   * Generate a string of CSS classes from the properties of the passed-in
   * object that resolve to true.
   * @param {...any} classRuleGroups
   */ cssClasses(...classRuleGroups) {
        return this._cssClassNameProcessor(...classRuleGroups);
    }
    getVisibilityReader(element, options) {
        if (options.useIntersectionObserver && // @ts-expect-error
        this._window.getWindow()?.IntersectionObserver) {
            return this._getObserableReader(element, options);
        } else {
            return this._getReader(element, options);
        }
    }
    _getReader(element, options) {
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const self = this;
        return function readVisibility() {
            const elementRect = self.componentPositions.getBoundingClientRect(element, {
                width: options.width,
                height: options.height
            }, options.extendedPadding);
            return self.componentPositions.getPercentOfVisibility(elementRect);
        };
    }
    _getObserableReader(element, options) {
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const self = this;
        const observerConfig = {
            rootMargin: options.extendedPadding + 'px',
            threshold: options.threshold || [
                0
            ]
        };
        let intersectionObserverEntry = null;
        let isFirstPositionCalculated = false;
        const observer = new IntersectionObserver((entries)=>{
            intersectionObserverEntry = entries[0];
            this.visibility.circle.notify({
                type: 'intersectionobserver',
                entries
            });
        }, observerConfig);
        observer.observe(element);
        return function readVisibility() {
            if (!isFirstPositionCalculated) {
                isFirstPositionCalculated = true;
                return {
                    visibility: self._getReader(element, options)(),
                    observer
                };
            }
            return {
                intersectionObserverEntry,
                observer
            };
        };
    }
    wrapVisibilityWriter(writer) {
        return function parsePayload(circleEntry) {
            const { payload } = circleEntry;
            if (typeof payload === 'object' && payload.observer && payload.intersectionObserverEntry) {
                const { intersectionObserverEntry: entry, observer } = payload;
                const isIntersectionBugged = entry.intersectionRatio === 0 && entry.isIntersecting;
                return writer(!isIntersectionBugged ? entry.intersectionRatio * 100 : 100, observer);
            } else if (typeof payload === 'object' && payload.observer && payload.visibility) {
                return writer(payload.visibility, payload.observer);
            } else {
                return writer(payload);
            }
        };
    }
}

//# sourceMappingURL=UIComponentHelper.js.map