@infinityfx/lively 0.0.1 → 0.0.4

package/animatable.js

@@ -1,300 +0,0 @@
-import { Children, cloneElement, Component, isValidElement } from 'react';
-import Animation from './animation';
-
-// on window resize reset initial elements sizes
-// implement keyframe position (not all evenly spaced)
-// mabye split whileViewport up into onEnter and onLeave
-// animate things like background color
-// implement repeat argument (and maybe repeat delay)
-
-export default class Animatable extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.hover = false;
-        this.hasFocus = false;
-        this.inView = false;
-        this.scrollDelta = 0;
-        this.viewportMargin = props.viewportMargin;
-
-        this.elements = [];
-        this.animations = {
-            animate: this.getAnimation(),
-            onMount: this.getAnimation('onMount'),
-            onUnmount: this.getAnimation('onUnmount'),
-            onClick: this.getAnimation('onClick'),
-            whileHover: this.getAnimation('whileHover'),
-            whileFocus: this.getAnimation('whileFocus'),
-            whileViewport: this.getAnimation('whileViewport')
-        };
-
-        this.level = 0;
-        this.children = [];
-    }
-
-    getAnimation(name = 'animate') {
-        if (name === 'animate' && this.props.animation && (typeof this.props.animation === 'object' || typeof this.props.animation === 'function') && 'use' in this.props.animation) {
-            return this.props.animation.use();
-        }
-
-        return Animation.from(this.props[name], this.props.initial, this.props.scaleCorrection);
-    }
-
-    countNestedLevels(children) {
-        if (!children) return 0;
-
-        let count = 0, nested = 0;
-        Children.forEach(children, (child) => {
-            if (!isValidElement(child)) return;
-            if (child.type === Animatable) count = 1;
-
-            const n = this.countNestedLevels(child.props?.children);
-            nested = nested < n ? n : nested;
-        });
-
-        return nested + count;
-    }
-
-    addEvent(event, callback) {
-        if (!(callback instanceof Function)) return;
-
-        if (!window.UITools?.Events) window.UITools = { Events: {} };
-        if (!(event in window.UITools.Events)) {
-            window.UITools.Events[event] = { unique: 0 };
-            window.addEventListener(event, e => {
-                Object.values(window.UITools.Events[event]).forEach(cb => {
-                    if (cb instanceof Function) cb(e);
-                })
-            });
-        }
-
-        callback.UITools = { ListenerID: window.UITools.Events[event].unique };
-        window.UITools.Events[event][window.UITools.Events[event].unique] = callback;
-        window.UITools.Events[event].unique++;
-    }
-
-    removeEvent(event, callback) {
-        if (!(event in window.UITools?.Events)) return;
-        if (!('ListenerID' in callback.UITools)) return;
-
-        delete window.UITools.Events[event][callback.UITools.ListenerID];
-    }
-
-    componentDidMount() {
-        this.elements.forEach(el => {
-            this.animations.animate?.setInitialStyles(el);
-        });
-
-
-        if (this.props.parentLevel < 1 || this.props.noCascade) {
-            this.scrollEventListener = this.onScroll.bind(this);
-            this.addEvent('scroll', this.scrollEventListener);
-
-            if (this.props.onMount) this.play('onMount', { staggerDelay: 0.001 });
-            if (this.props.whileViewport) this.onScroll();
-        }
-    }
-
-    componentWillUnmount() {
-        this.removeEvent('scroll', this.scrollEventListener);
-
-        if (this.props.onUnmount && (this.props.parentLevel < 1 || this.props.noCascade)) this.play('onUnmount', { reverse: true, immediate: true });
-    }
-
-    inViewport() {
-        let entered = true, left = true;
-
-        this.elements.forEach(el => {
-            const { y } = el.getBoundingClientRect();
-            entered = entered && y + el.clientHeight * (1 - this.viewportMargin) < window.innerHeight;
-            left = left && y > window.innerHeight + el.clientHeight * this.viewportMargin;
-        });
-
-        if (!this.elements.length) {
-            this.children.forEach(({ animatable }) => {
-                const [nestedEntered, nestedLeft] = animatable.inViewport();
-                entered = entered && nestedEntered;
-                left = left && nestedLeft;
-            });
-        }
-
-        return [entered, left];
-    }
-
-    async onScroll() {
-        if (Date.now() - this.scrollDelta < 350) return;
-        this.scrollDelta = Date.now();
-
-        let [entered, left] = this.inViewport();
-
-        if (!this.inView && entered) {
-            this.inView = true;
-            if (this.props.whileViewport) this.play('whileViewport');
-        }
-
-        if (this.inView && left) {
-            this.inView = false;
-            if (this.props.whileViewport) this.play('whileViewport', { reverse: true, immediate: true });
-        }
-    }
-
-    async onEnter(e, callback = false) {
-        if (!this.hover) {
-            if (this.props.whileHover) this.play('whileHover');
-            this.hover = true;
-        }
-
-        if (callback) callback(e);
-    }
-
-    async onLeave(e, callback = false) {
-        if (this.hover) {
-            if (this.props.whileHover) this.play('whileHover', { reverse: true });
-            this.hover = false;
-        }
-
-        if (callback) callback(e);
-    }
-
-    async onFocus(e, callback = false) {
-        if (!this.hasFocus) {
-            if (this.props.whileFocus) this.play('whileFocus');
-            this.hasFocus = true;
-        }
-
-        if (callback) callback(e);
-    }
-
-    async onBlur(e, callback = false) {
-        if (this.hasFocus) {
-            if (this.props.whileFocus) this.play('whileFocus', { reverse: true });
-            this.hasFocus = false;
-        }
-
-        if (callback) callback(e);
-    }
-
-    async onClick(e, callback = false) {
-        if (this.props.onClick) this.play('onClick');
-
-        if (callback) callback(e);
-    }
-
-    async play(animationName, { reverse = false, immediate = false, cascade = false, groupAdjust = 0, cascadeDelay = 0, staggerDelay = 0 } = {}) {
-        if (this.props.parentLevel > 0 && !cascade) return;
-
-        let animation = this.animations[animationName];
-        if (!animation) animation = this.animations.animate;
-        if (!animation) return;
-
-        this.elements.forEach((el, i) => {
-            let offset = 'group' in this.props ? this.props.parentLevel - this.props.group : this.level + groupAdjust;
-            cascadeDelay = reverse ? animation.duration : cascadeDelay; // NOT FULLY CORRECT (also take into account reverse staggering)
-            const delay = reverse ? offset * cascadeDelay : (this.props.parentLevel - offset) * cascadeDelay;
-
-            animation.play(el, {
-                delay: this.props.stagger * i + delay + staggerDelay,
-                reverse,
-                immediate
-            });
-        });
-
-        this.children.forEach(({ animatable, staggerIndex = -1 }) => {
-            animatable.play(animationName, {
-                reverse,
-                immediate,
-                cascade: true,
-                staggerDelay: staggerIndex < 0 ? 0 : this.props.stagger * staggerIndex,
-                cascadeDelay: animation.duration,
-                groupAdjust: staggerIndex < 0 ? 0 : 1
-            });
-        });
-    }
-
-    style(inherited = {}) {
-        const styles = {
-            ...inherited,
-            transitionProperty: `transform, opacity, clip-path, border-radius${this.props.scaleCorrection ? ', width, height, left, top' : ''}`,
-            willChange: 'transform'
-        };
-
-        return styles;
-    }
-
-    mergeProperties(own = {}, passed = {}) {
-        const merged = {};
-        merged.initial = this.mergeProperty(passed.initial, own.initial);
-        merged.animate = this.mergeProperty(passed.animate, own.animate);
-
-        merged.onMount = this.mergeProperty(passed.onMount, own.onMount);
-        merged.onUnmount = this.mergeProperty(passed.onUnmount, own.onUnmount);
-        merged.onClick = this.mergeProperty(passed.onClick, own.onClick);
-        merged.whileHover = this.mergeProperty(passed.whileHover, own.whileHover);
-        merged.whileFocus = this.mergeProperty(passed.whileFocus, own.whileFocus);
-        merged.whileViewport = this.mergeProperty(passed.whileViewport, own.whileViewport);
-
-        merged.viewportMargin = this.mergeProperty(passed.viewportMargin, own.viewportMargin);
-        merged.stagger = this.mergeProperty(passed.stagger, own.stagger);
-
-        return merged;
-    }
-
-    mergeProperty(a, b) {
-        if (!a) return b;
-        if (!b) return a;
-
-        if (typeof a === 'object' || typeof b === 'object') return { ...a, ...b };
-
-        return b;
-    }
-
-    deepClone(component, { index = 0, useElements = false, useEvents = false } = {}) {
-        if (!isValidElement(component)) return component;
-
-        let props = {};
-        if (component.type !== Animatable) {
-            if (useElements) props = { style: this.style(component.props?.style), ref: el => this.elements[index] = el };
-
-            if (useEvents && (this.props.parentLevel < 1 || this.props.noCascade)) {
-                props = {
-                    ...props,
-                    onMouseEnter: e => this.onEnter(e, component.props?.onMouseEnter),
-                    onMouseLeave: e => this.onLeave(e, component.props?.onMouseLeave),
-                    onFocus: e => this.onFocus(e, component.props?.onFocus),
-                    onBlur: e => this.onBlur(e, component.props?.onBlur),
-                    onClick: e => this.onClick(e, component.props?.onClick),
-                };
-                useEvents = false;
-            }
-        }
-
-        if (component.type === Animatable && !component.props?.noCascade) {
-            props = {
-                ...props,
-                ...this.mergeProperties(component.props, this.props),
-                parentLevel: this.parentLevel > 0 ? this.parentLevel : this.level,
-                ref: el => this.children[this.children.length] = { animatable: el, staggerIndex: useElements ? index : -1 }
-            };
-        }
-
-        const children = Children.map(component.props.children, (child, i) => this.deepClone(child, { index: i, useEvents }));
-
-        return Object.values(props).length ? cloneElement(component, props, children) : component; // CHECK IF CORRECT
-    }
-
-    render() {
-        this.level = this.countNestedLevels(this.props.children);
-
-        return Children.map(this.props.children, (child, i) => this.deepClone(child, { index: i, useElements: true, useEvents: true }));
-    }
-
-    static defaultProps = {
-        scaleCorrection: false,
-        parentLevel: 0,
-        stagger: 0.1,
-        viewportMargin: 0.25,
-        animate: {}
-    }
-
-}

package/animate.js

@@ -1,43 +0,0 @@
-import { Children, cloneElement, Component, isValidElement } from 'react';
-import Animatable from './animatable';
-import Move from './animations/move';
-import Pop from './animations/pop';
-
-export default class Animate extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.levels = this.props.levels;
-        this.animations = new Array(this.levels).fill(0).map((_, i) => {
-            return i  < this.props.animations.length ? this.props.animations[i] : this.props.animations[this.props.animations.length - 1];
-        });
-    }
-
-    makeAnimatable(children, level = 1) {
-        if (level < 1 || Children.count(children) < 1) return children;
-
-        const { levels, animations, ...props } = this.props;
-        const animation = this.animations[this.levels - level];
-
-        return <Animatable animation={animation} scaleCorrection={animation.scaleCorrection} {...props}>
-            {Children.map(children, child => {
-                if (!isValidElement(child)) return child;
-
-                return cloneElement(child, {}, this.makeAnimatable(child.props.children, level - 1));
-            })}
-        </Animatable>;
-    }
-
-    render() {
-        return this.makeAnimatable(this.props.children, this.levels);
-    }
-
-    static defaultProps = {
-        levels: 1,
-        stagger: 0.1,
-        viewportMargin: 0.25,
-        animations: [Move, Pop]
-    }
-
-}

package/animation.js

@@ -1,333 +0,0 @@
-import AnimationQueue from './queue';
-
-export default class Animation {
-
-    static initials = {
-        opacity: 1,
-        scale: { x: 1, y: 1 },
-        position: { x: 0, y: 0 },
-        clip: { left: 0, top: 0, right: 0, bottom: 0 },
-        borderRadius: 0,
-        active: { value: true, at: 0 }
-    }
-
-    constructor({ delay = 0, duration = 1, loop = false, interpolate = 'ease', origin = { x: 0.5, y: 0.5 }, scaleCorrection = false, ...properties } = {}, initial = {}) {
-        this.scaleCorrection = scaleCorrection;
-        this.keyframes = this.getKeyframes(properties, initial);
-
-        this.delay = delay;
-        this.duration = duration;
-        this.delta = duration / (this.keyframes.length - 1);
-        this.interpolation = interpolate;
-        this.origin = this.originToStyle(origin);
-
-        this.loop = loop;
-    }
-
-    static from(options, initial = {}, scaleCorrection = false) {
-        if (!options || typeof options === 'boolean') return null;
-
-        return new Animation({ ...options, scaleCorrection }, initial);
-    }
-
-    originToStyle(origin) {
-        let x = 0.5, y = 0.5;
-
-        if (typeof origin === 'object') {
-            x = origin.x;
-            y = origin.y;
-        } else
-            if (typeof origin === 'string') {
-                switch (origin) {
-                    case 'left':
-                        x = 0;
-                        break;
-                    case 'right':
-                        x = 1;
-                        break;
-                    case 'top':
-                        y = 0;
-                        break;
-                    case 'bottom':
-                        y = 1;
-                    case 'center':
-                        break;
-                    default:
-                        x = y = parseFloat(origin);
-                }
-            } else {
-                x = y = origin;
-            }
-
-        return `${x * 100}% ${y * 100}%`;
-    }
-
-    getKeyframes(properties, initial = {}) {
-        for (const key in properties) {
-            let first = key in initial ? initial[key] : Animation.initials[key];
-
-            if (Array.isArray(properties[key])) {
-                properties[key] = properties[key].length > 1 ? properties[key] : [first, ...properties[key]];
-            } else {
-                properties[key] = [first, properties[key]];
-            }
-        }
-
-        const len = Object.values(properties).reduce((len, arr) => arr.length > len ? arr.length : len, 0);
-        let keyframes = new Array(len).fill(0);
-
-        keyframes = keyframes.map((_, i) => {
-            const keyframe = {};
-
-            for (const key in properties) {
-                keyframe[key] = this.interpolateKeyframe(properties[key], i, len);
-            }
-
-            return this.keyframeToStyle(keyframe);
-        });
-
-        return keyframes;
-    }
-
-    interpolate(from, to, n) { // when interpolating pure strings fix!!! (also bools)
-        let unit = typeof from === 'string' ? from.match(/[^0-9\.]*/i) : null;
-        if (typeof to === 'string' && !unit) unit = to.match(/[^0-9\.]*/i);
-
-        from = parseFloat(from);
-        to = parseFloat(to);
-
-        const res = from * (1 - n) + to * n;
-        return unit ? res + unit : res;
-    }
-
-    interpolateKeyframe(property, i, len) {
-        if (!property) return null;
-        if (property.length === len) return property[i];
-
-        const idx = i * ((property.length - 1) / (len - 1));
-        const absIdx = Math.floor(idx);
-
-        let from = property[absIdx];
-        let to = absIdx === property.length - 1 ? null : property[absIdx + 1];
-        if (!to) return from;
-
-        if (typeof from === 'object') {
-            const obj = {};
-            Object.keys(from).forEach(key => {
-                obj[key] = this.interpolate(from[key], to[key], idx - absIdx);
-            });
-
-            return obj;
-        }
-
-        return this.interpolate(from, to, idx - absIdx);
-    }
-
-    propertyToString(property, value, key, unit) {
-        value = value[key];
-        if (typeof value === 'string') return value;
-
-        value = isNaN(value) ? Animation.initials[property][key] : value;
-        return `${value * (unit === '%' ? 100 : 1)}${unit}`;
-    }
-
-    propertyToNumber(property, value, key) {
-        value = value[key];
-        if (typeof value === 'string') {
-            return value.match(/[^0-9\.]*/i) === '%' ? parseFloat(value) / 100 : value;
-        }
-
-        return isNaN(value) ? Animation.initials[property][key] : value;
-    }
-
-    keyframeToStyle(keyframe) {
-        let properties = {
-            transform: ''
-        };
-
-        Object.entries(keyframe).forEach(([key, val]) => {
-            if (val === null || val === undefined) return;
-
-            switch (key) {
-                case 'position':
-                    properties.transform += `translate(${this.propertyToString(key, val, 'x', 'px')}, ${this.propertyToString(key, val, 'y', 'px')}) `;
-                    break;
-                case 'scale':
-                    val = typeof val !== 'object' ? { x: val, y: val } : val;
-
-                    if (this.scaleCorrection) {
-                        properties.width = this.propertyToNumber(key, val, 'x');
-                        properties.height = this.propertyToNumber(key, val, 'y');
-                        break;
-                    }
-
-                    properties.transform += `scale(${this.propertyToString(key, val, 'x', '%')}, ${this.propertyToString(key, val, 'y', '%')}) `;
-                    break;
-                case 'rotation':
-                    properties.transform += `rotate(${parseFloat(val)}deg) `;
-                    break;
-                case 'clip':
-                    const top = this.propertyToString(key, val, 'top', '%'), right = this.propertyToString(key, val, 'right', '%'),
-                        bottom = this.propertyToString(key, val, 'bottom', '%'), left = this.propertyToString(key, val, 'left', '%');
-
-                    properties.clipPath = `inset(${top} ${right} ${bottom} ${left})`;
-                    break;
-                case 'borderRadius':
-                    properties[key] = typeof val === 'string' ? val : val + 'px';
-                break;
-                case 'opacity':
-                case 'active':
-                    properties[key] = val;
-            }
-        });
-
-        if (!properties.transform.length) delete properties.transform;
-        return properties;
-    }
-
-    static setInitial(element) {
-        const {
-            width,
-            height,
-            paddingLeft,
-            paddingRight,
-            paddingTop,
-            paddingBottom,
-            borderRadius,
-            boxSizing
-        } = getComputedStyle(element);
-        const { x, y } = element.getBoundingClientRect();
-
-        if (!('UITools' in element)) element.UITools = {};
-        if (!('queue' in element.UITools)) element.UITools.queue = [];
-        if (!('initialStyles' in element.UITools)) element.UITools.initialStyles = {
-            x,
-            y,
-            includePadding: boxSizing === 'border-box',
-            clientWidth: element.clientWidth,
-            clientHeight: element.clientHeight,
-            width: parseInt(width),
-            height: parseInt(height),
-            paddingLeft: parseInt(paddingLeft),
-            paddingRight: parseInt(paddingRight),
-            paddingTop: parseInt(paddingTop),
-            paddingBottom: parseInt(paddingBottom),
-            borderRadius: parseInt(borderRadius.split(' ')[0])
-        };
-    }
-
-    setInitialStyles(element) {
-        Animation.setInitial(element);
-
-        const keyframe = this.keyframes[0];
-        element.style.transitionDuration = '0s';
-        this.apply(element, keyframe, true);
-    }
-
-    test(scale, total, size, padStart, padEnd, includePadding) {
-        scale = typeof scale === 'string' ? parseInt(scale) / total : scale;
-        size = size - (total - scale * total);
-
-        const pad = padStart + padEnd + (size < 0 ? size : 0);
-        const ratio = padStart / (padStart + padEnd);
-        padStart = includePadding ? scale * padStart : pad * ratio;
-        padEnd = includePadding ? scale * padEnd : pad * (1 - ratio);
-
-        return {
-            size: (size < 0 ? 0 : size) + 'px',
-            padStart: padStart + 'px',
-            padEnd: padEnd + 'px'
-        };
-    }
-
-    apply(element, keyframe, initial = false) {
-        const applyStyles = () => {
-            Object.entries(keyframe).forEach(([key, val]) => {
-                if (key === 'width') {
-                    const { clientWidth, width, paddingLeft, paddingRight, includePadding } = element.UITools.initialStyles;
-                    const { size, padStart, padEnd } = this.test(val, clientWidth, width, paddingLeft, paddingRight, includePadding);
-
-                    element.style.width = size;
-                    element.style.paddingLeft = padStart;
-                    element.style.paddingRight = padEnd;
-                    return;
-                }
-
-                if (key === 'height') {
-                    const { clientHeight, height, paddingTop, paddingBottom, includePadding } = element.UITools.initialStyles;
-                    const { size, padStart, padEnd } = this.test(val, clientHeight, height, paddingTop, paddingBottom, includePadding);
-
-                    element.style.height = size;
-                    element.style.paddingTop = padStart;
-                    element.style.paddingBottom = padEnd;
-                    return;
-                }
-
-                if (key === 'active') return;
-
-                element.style[key] = val;
-            });
-        };
-
-        if ('active' in keyframe) {
-            let when = Object.keys(keyframe.active)[0];
-
-            if (when === 'start' || initial) {
-                element.style.display = keyframe.active[when] ? '' : 'none';
-                initial ? applyStyles() : AnimationQueue.delay(applyStyles, 0.01);
-            } else {
-                AnimationQueue.delay(() => {
-                    element.style.display = keyframe.active[when] ? '' : 'none';
-                }, this.delta);
-                applyStyles();
-            }
-        } else {
-            applyStyles();
-        }
-    }
-
-    start(element, { immediate = false, reverse = false } = {}) {
-        if (element.UITools.animating && !immediate) {
-            element.UITools.queue.push([this, { reverse }]);
-            return;
-        }
-
-        element.style.transitionDuration = `${this.delta}s`;
-        element.style.transitionTimingFunction = this.interpolation;
-        element.style.transformOrigin = this.origin;
-        element.UITools.animating = true;
-        element.UITools.index = 1;
-
-        this.getNext(element, reverse);
-    }
-
-    play(element, { delay = 0, immediate = false, reverse = false } = {}) {
-        if (!element.style) return;
-
-        this.delay || delay ? AnimationQueue.delay(() => this.start(element, { immediate, reverse }), this.delay + delay) : this.start(element, { immediate, reverse });
-    }
-
-    getNext(element, reverse = false) {
-        if (element.UITools.index === this.keyframes.length) {
-            element.UITools.animating = false;
-
-            const [next, options] = element.UITools.queue.shift() || [];
-            if (next) return next.start(element, options);
-
-            if (this.loop) this.start(element, options);
-            return;
-        }
-
-        let idx = element.UITools.index;
-        if (reverse) idx = this.keyframes.length - 1 - idx;
-
-
-        requestAnimationFrame(() => {
-            this.apply(element, this.keyframes[idx]);
-        });
-        element.UITools.index++;
-
-        AnimationQueue.delay(() => this.getNext(element, reverse), this.delta); // cancel this when using immediate
-    }
-
-}

package/animations/fade.js

@@ -1,12 +0,0 @@
-import Animation from '../animation';
-
-export default function Fade(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Fade.use.bind(this, options)
-    };
-}
-
-Fade.use = ({ scaleCorrection = false } = {}) => {
-    return new Animation({ opacity: 1, scaleCorrection, duration: 0.65 }, { opacity: 0 });
-}