@infinityfx/lively 0.0.1

package/animations/move.js

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,112 @@
+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/package.json

@@ -0,0 +1,11 @@
+{
+	"name": "@infinityfx/lively",
+	"version": "0.0.1",
+	"description": "",
+	"main": "index.js",
+	"repository": "infinityfx-llc/lively",
+	"author": "InfinityFX <contact@infinity-fx.com> (https://infinity-fx.com)",
+	"license": "GPL-3.0",
+	"bugs": "https://github.com/infinityfx-llc/lively/issues",
+	"homepage": "https://github.com/infinityfx-llc/lively#readme"
+}

package/queue.js

@@ -0,0 +1,67 @@
+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);
+    }
+
+}