popmotion-pose/lib/dom/events.js

A declarative animation library for HTML and SVG

import { listen } from 'popmotion';
var makeUIEventApplicator = function (_a) {
    var startEvents = _a.startEvents, endEvents = _a.endEvents, startPose = _a.startPose, endPose = _a.endPose, startCallback = _a.startCallback, endCallback = _a.endCallback, useDocumentToEnd = _a.useDocumentToEnd, preventScroll = _a.preventScroll;
    return function (element, activeActions, poser, config) {
        var startListener = startPose + 'Start';
        var endListener = startPose + 'End';
        var moveListener = startPose + 'Move';
        if (preventScroll) {
            var touchMoveListener = listen(element, 'touchmove', {
                passive: false
            }).start(function (e) {
                e.preventDefault();
            });
            activeActions.set(moveListener, touchMoveListener);
        }
        var eventStartListener = listen(element, startEvents).start(function (startEvent) {
            poser.unset(endPose);
            poser.set(startPose);
            if (startCallback && config[startCallback])
                config[startCallback](startEvent);
            var eventEndListener = listen(useDocumentToEnd ? document.documentElement : element, endEvents + (useDocumentToEnd ? ' mouseenter' : '')).start(function (endEvent) {
                if (useDocumentToEnd &&
                    endEvent.type === 'mouseenter' &&
                    endEvent.buttons === 1) {
                    return;
                }
                activeActions.get(endListener).stop();
                poser.unset(startPose);
                poser.set(endPose);
                if (endCallback && config[endCallback])
                    config[endCallback](endEvent);
            });
            activeActions.set(endListener, eventEndListener);
        });
        activeActions.set(startListener, eventStartListener);
    };
};
var events = {
    draggable: makeUIEventApplicator({
        startEvents: 'mousedown touchstart',
        endEvents: 'mouseup touchend',
        startPose: 'drag',
        endPose: 'dragEnd',
        startCallback: 'onDragStart',
        endCallback: 'onDragEnd',
        useDocumentToEnd: true,
        preventScroll: true
    }),
    hoverable: makeUIEventApplicator({
        startEvents: 'mouseenter',
        endEvents: 'mouseleave',
        startPose: 'hover',
        endPose: 'hoverEnd'
    }),
    focusable: makeUIEventApplicator({
        startEvents: 'focus',
        endEvents: 'blur',
        startPose: 'focus',
        endPose: 'blur'
    }),
    pressable: makeUIEventApplicator({
        startEvents: 'mousedown touchstart',
        endEvents: 'mouseup touchend',
        startPose: 'press',
        endPose: 'pressEnd',
        startCallback: 'onPressStart',
        endCallback: 'onPressEnd',
        useDocumentToEnd: true
    })
};
var eventKeys = Object.keys(events);
export default (function (element, activeActions, poser, _a) {
    var props = _a.props;
    return eventKeys.forEach(function (key) {
        if (props[key])
            events[key](element, activeActions, poser, props);
    });
});
//# sourceMappingURL=events.js.map