@infinityfx/lively 0.0.1 → 0.0.4

package/animations/move.js

@@ -1,23 +0,0 @@
-import Animation from '../animation';
-
-export default function Move(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Move.use.bind(this, options)
-    };
-}
-
-Move.use = ({ direction = 'up', scaleCorrection = false } = {}) => {
-
-    let x = '0px', y = '20px';
-    switch (direction) {
-        case 'down': y = '-20px';
-        break;
-        case 'left': x = '20px', y = '0px';
-        break;
-        case 'right': x = '-20px', y = '0px';
-        break;
-    }
-    
-    return new Animation({ position: { x: '0px', y: '0px' }, opacity: 1, scaleCorrection, duration: 0.5 }, { position: { x, y }, opacity: 0 });
-}

package/animations/pop.js

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

package/animations/scale.js

@@ -1,22 +0,0 @@
-import Animation from '../animation';
-
-export default function Scale(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Scale.use.bind(this, options)
-    };
-}
-
-Scale.use = ({ direction = 'right', scaleCorrection = false } = {}) => {
-    let x = 0, y = 1, origin = { x: 0, y: 0.5 };
-    switch (direction) {
-        case 'left': origin.x = 1;
-        break;
-        case 'up': x = 1, y = 0, origin = { x: 0, y: 1 };
-        break;
-        case 'down': x = 1, y = 0, origin = { x: 0, y: 0 };
-        break;
-    }
-
-    return new Animation({ scale: { x: 1 }, scaleCorrection, origin, duration: 0.6 }, { scale: { x, y } });
-}

package/animations/wipe.js

@@ -1,13 +0,0 @@
-import Animation from '../animation';
-
-export default function Wipe(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Wipe.use.bind(this, options)
-    };
-}
-
-Wipe.use = ({ direction = 'right', scaleCorrection = false } = {}) => {
-    if (!['left', 'right', 'top', 'bottom'].includes(direction)) direction = 'right';
-    return new Animation({ clip: { [direction]: 0 }, scaleCorrection }, { clip: { [direction]: 1 } });
-}

package/morph.js

@@ -1,112 +0,0 @@
-import Animatable from './animatable';
-import Animation from './animation';
-import AnimationQueue from './queue';
-
-export default class Morph extends Animatable {
-
-    constructor(props) {
-        super(props);
-
-        this.animations.morphs = [];
-    }
-
-    componentDidMount() {
-        const element = this.elements[0];
-        if (!element) return;
-
-        Animation.setInitial(element);
-        element.setAttribute('uitools-morph-id', this.props.id);
-        element.setAttribute('uitools-morph-active', this.props.active);
-        this.self = element;
-        this.createResetAnimation();
-
-        AnimationQueue.delay(() => {
-            const targets = document.querySelectorAll(`[uitools-morph-id="${this.props.id}"]`);
-
-            for (let i = 0; i < targets.length; i++) {
-                if (targets[i] === element) continue;
-
-                this.createMorphAnimation(targets[i], i);
-                if (targets[i].getAttribute('uitools-morph-active') !== 'true') this.animations.transition.setInitialStyles(targets[i]);
-            }
-        }, 0.001);
-    }
-
-    componentDidUpdate() {
-        const active = this.self.getAttribute('uitools-morph-active') === 'true';
-        this.self.setAttribute('uitools-morph-active', this.props.active);
-
-        AnimationQueue.delay(() => {
-            if (this.props.active && !active) {
-                this.animations.transition.setInitialStyles(this.self);
-                this.animations.transition.play(this.self);
-            } else
-                if (!this.props.active && active) {
-
-                    let index = 0;
-                    
-                    const targets = document.querySelectorAll(`[uitools-morph-id="${this.props.id}"]`);
-                    for (let i = 0; i < targets.length; i++) {
-                        if (targets[i] === this.self) continue;
-            
-                        if (targets[i].getAttribute('uitools-morph-active') === 'true') {
-                            index = i;
-                            break;
-                        }
-                    }
-
-                    this.animations.morphs[index].play(this.self);
-                }
-        }, 0.001);
-    }
-
-    createResetAnimation() {
-        const a = this.self.UITools?.initialStyles;
-
-        this.animations.transition = Animation.from({
-            opacity: [0, 0, 1],
-            scale: { x: 1, y: 1 },
-            position: { x: 0, y: 0 },
-            borderRadius: a.borderRadius
-        }, {}, this.scaleCorrection);
-    }
-
-    createMorphAnimation(target, index) {
-        const a = this.self.UITools?.initialStyles;
-        const b = target.UITools?.initialStyles;
-
-        this.animations.morphs[index] = Animation.from({
-            position: [
-                { x: 0, y: 0 },
-                {
-                    x: b.x - a.x + (b.clientWidth - a.clientWidth) / 2,
-                    y: b.y - a.y + (b.clientHeight - a.clientHeight) / 2,
-                },
-                {
-                    x: b.x - a.x + (b.clientWidth - a.clientWidth) / 2,
-                    y: b.y - a.y + (b.clientHeight - a.clientHeight) / 2,
-                }
-            ],
-            scale: [
-                { x: 1, y: 1 },
-                {
-                    x: b.clientWidth / a.clientWidth,
-                    y: b.clientHeight / a.clientHeight,
-                },
-                {
-                    x: b.clientWidth / a.clientWidth,
-                    y: b.clientHeight / a.clientHeight,
-                }
-            ],
-            opacity: [1, 1, 0],
-            borderRadius: [a.borderRadius, b.borderRadius, b.borderRadius]
-        }, {}, this.scaleCorrection);
-    }
-
-    static defaultProps = {
-        id: 0,
-        active: false,
-        scaleCorrection: false
-    }
-
-}

package/queue.js

@@ -1,67 +0,0 @@
-export default class AnimationQueue {
-
-    constructor() {
-        this.queue = [];
-
-        this.tick();
-    }
-
-    static get() {
-        if (!('UITools' in window)) window.UITools = {};
-        if (!('AnimationLoop' in window.UITools)) window.UITools.AnimationQueue = new AnimationQueue();
-
-        return window.UITools.AnimationQueue;
-    }
-
-    async tick() {
-        const tick = Date.now();
-
-        for (let i = 0; i < this.queue.length + 1; i++) {
-            if (this.queue.length === i || this.queue[i].timestamp > tick) {
-                this.queue.splice(0, i);
-                break;
-            }
-
-            this.queue[i].callback();
-        }
-
-        requestAnimationFrame(this.tick.bind(this));
-    }
-
-    search(item) {
-        let l = 0, h = this.queue.length - 1, m, c;
-
-        while (l <= h) {
-            m = (l + h) >>> 1;
-            c = this.queue[m].timestamp - item.timestamp;
-
-            if (c < 0) {
-                l = m + 1;
-            } else
-            if (c > 0) {
-                h = m - 1;
-            } else {
-                return m;
-            }
-        }
-
-        return l;
-    }
-
-    insert(item) {
-        const idx = this.search(item);
-
-        this.queue.splice(idx, 0, item);
-    }
-
-    delay(callback, seconds) {
-        if (!(callback instanceof Function)) return;
-
-        this.insert({ callback, timestamp: Date.now() + seconds * 1000 });
-    }
-
-    static async delay(callback, seconds) {
-        return this.get().delay(callback, seconds);
-    }
-
-}