@quadible/web-sdk/dist/src/collectors/MouseCollector.js

The web sdk for Quadible's behavioral authentication service.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const eventemitter2_1 = require("eventemitter2");
class MouseCollector extends eventemitter2_1.EventEmitter2 {
    static MOUSE_EVENTS = [
        'mousedown',
        'mouseup',
        'mouseenter',
        'mouseleave',
        'mousemove',
        // Removing mouseover events due to high volume of data
        // 'mouseover',
        'mousewheel',
        'contextmenu'
    ];
    name = 'WebMouse';
    isCollecting = false;
    data = [];
    lastMouseMoveTimestamp = 0;
    constructor() {
        super();
        this.registerMouseEventListeners();
        this.registerScrollListener();
        this.registerWindowFocusListeners();
        this.registerElementFocusListeners();
    }
    flush() {
        return this.data.splice(0);
    }
    async isAvailable() {
        return true;
    }
    start() {
        this.isCollecting = true;
    }
    stop() {
        this.isCollecting = false;
    }
    registerElementFocusListeners() {
        const listener = (e) => {
            if (this.isCollecting) {
                const target = e.target;
                this.data.push({
                    kind: e.type,
                    name: e.type,
                    timestamp: Date.now(),
                    element: {
                        class: target?.className,
                        name: target?.getAttribute?.('name'),
                        id: target?.getAttribute?.('id'),
                        type: target?.getAttribute?.('type'),
                        tagName: target?.tagName,
                        scrollTop: target?.scrollTop,
                        width: target?.clientWidth,
                        height: target?.clientHeight
                    }
                });
            }
        };
        document.addEventListener('focusin', listener);
        document.addEventListener('focusout', listener);
    }
    registerWindowFocusListeners() {
        const listener = (e) => {
            if (this.isCollecting) {
                this.data.push({
                    kind: `window${e.type}`,
                    name: `window-${e.type}`,
                    timestamp: Date.now()
                });
            }
        };
        window.addEventListener('focus', listener);
        window.addEventListener('blur', listener);
    }
    registerScrollListener() {
        window.addEventListener('scroll', (e) => {
            if (this.isCollecting) {
                const target = e.target;
                this.data.push({
                    kind: "scroll" /* EventKind.Scroll */,
                    name: 'scroll',
                    timestamp: Date.now(),
                    element: {
                        class: target?.className,
                        name: target?.getAttribute?.('name'),
                        id: target?.getAttribute?.('id'),
                        type: target?.getAttribute?.('type'),
                        tagName: target?.tagName,
                        scrollTop: target?.scrollTop,
                        width: target?.clientWidth,
                        height: target?.clientHeight
                    }
                });
            }
        });
    }
    registerMouseEventListeners() {
        for (const event of MouseCollector.MOUSE_EVENTS) {
            window.addEventListener(event, (e) => {
                if (this.isCollecting) {
                    this.collect(event, e);
                }
            });
        }
    }
    collect(eventName, event) {
        const target = event.srcElement;
        let xpath = '';
        // Skip event if part of a mousemove series collected sooner than 150ms from last
        if (eventName === 'mousemove') {
            if (Date.now() - this.lastMouseMoveTimestamp < 150) {
                return;
            }
            this.lastMouseMoveTimestamp = Date.now();
        }
        if (eventName === 'mouseup' || eventName === 'mousedown') {
            xpath = this.tryGetXPathTo(target);
        }
        this.data.push({
            kind: eventName,
            name: eventName,
            type: event.type,
            x: event.x,
            y: event.y,
            offsetX: event.offsetX,
            offsetY: event.offsetY,
            element: {
                class: target?.className,
                name: target?.getAttribute?.('name'),
                id: target?.getAttribute?.('id'),
                type: target?.getAttribute?.('type'),
                tagName: target?.tagName,
                scrollTop: target?.scrollTop,
                width: target?.clientWidth,
                height: target?.clientHeight
            },
            timestamp: Date.now(),
            viewportWidth: innerWidth,
            viewportHeight: innerHeight,
            isTrusted: event.isTrusted,
            altKey: event.altKey,
            shiftKey: event.shiftKey,
            ctrlKey: event.ctrlKey,
            metaKey: event.metaKey,
            which: event.which,
            detail: event.detail,
            button: event.button,
            buttons: event.buttons,
            xpath
        });
    }
    getXPathTo(element) {
        if (element.tagName == 'HTML')
            return '/HTML[1]';
        if (element === document.body)
            return '/HTML[1]/BODY[1]';
        var ix = 0;
        var siblings = element.parentNode.childNodes;
        for (var i = 0; i < siblings.length; i++) {
            var sibling = siblings[i];
            if (sibling === element)
                return this.getXPathTo(element.parentNode) + '/' + element.tagName + '[' + (ix + 1) + ']';
            if (sibling.nodeType === 1 && sibling['tagName'] === element.tagName)
                ix++;
        }
    }
    tryGetXPathTo(element) {
        try {
            return this.getXPathTo(element);
        }
        catch (e) {
            this.emit('error', e);
        }
    }
}
exports.default = MouseCollector;
//# sourceMappingURL=MouseCollector.js.map