chnobli 0.1.4 → 0.1.6

package/dist/timeline/Nested.js

@@ -0,0 +1,51 @@
+import { takeProp } from '../utils/internal';
+import Timeline from './TimeLine';
+import { timelineAdd } from './public';
+export default class NestedTimeline {
+    _defaults;
+    _inner;
+    constructor(props = {}) {
+        this._defaults = takeProp(props, 'defaults', {});
+        if ('duration' in props)
+            throw new Error('a timeline does not accept a duration');
+        this._inner = new Timeline(props);
+    }
+    /**
+     * Set's properties
+     * offset can be staggered, a number, a label or a string `+=10`
+     */
+    set(targets, props, offset = null) {
+        // for the moment let's just add as usual but set the duration to 0
+        return this.add(targets, { ...props, duration: 0 }, offset);
+    }
+    /**
+     * Add an animation to the timeline
+     *
+     * offset can be staggered, a number, a label or a string `+=10`
+     */
+    add(targets, props, offset = null) {
+        timelineAdd(this, targets, props, offset);
+        return this;
+    }
+    /**
+     * Adds a label at to the current nOffse
+     *
+     * This label can then be used in offsets
+     */
+    label(label, offset = null) {
+        this._inner.label(label, offset);
+        return this;
+    }
+    /**
+     * Allows to nest timelines
+     *
+     * fn: (timeline)
+     */
+    nest(fn, opts = {}, offset = null) {
+        const tl = new NestedTimeline(opts);
+        fn(tl);
+        this._inner.addTimeline(tl._inner, offset);
+        return this;
+    }
+}
+//# sourceMappingURL=Nested.js.map

package/dist/timeline/Nested.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Nested.js","sourceRoot":"","sources":["../../src/timeline/Nested.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,CAAC,OAAO,OAAO,cAAc;IAClC,SAAS,CAAsB;IAC/B,MAAM,CAAW;IAEjB,YAAY,QAA6B,EAAE;QAC1C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;QAEjD,IAAI,UAAU,IAAI,KAAK;YACtB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAE1D,IAAI,CAAC,MAAM,GAAG,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED;;;OAGG;IACH,GAAG,CAAC,OAAY,EAAE,KAA0B,EAAE,SAAc,IAAI;QAC/D,mEAAmE;QACnE,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC7D,CAAC;IAED;;;;OAIG;IACH,GAAG,CAAC,OAAY,EAAE,KAA0B,EAAE,SAAc,IAAI;QAC/D,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAE1C,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,KAAa,EAAE,SAAc,IAAI;QACtC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAEjC,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;;OAIG;IACH,IAAI,CACH,EAAgC,EAChC,OAA4B,EAAE,EAC9B,SAAc,IAAI;QAElB,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;QAEpC,EAAE,CAAC,EAAE,CAAC,CAAC;QAEP,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAE3C,OAAO,IAAI,CAAC;IACb,CAAC;CACD"}

package/dist/timeline/TimeLine.d.ts

@@ -0,0 +1,32 @@
+import Timing from '../timing/Timing';
+import Ticker from '../timing/Ticker';
+/**
+ * Timeline is the most versatile class
+ *
+ * A timeline can contain multiple animation, ordered one after the other or
+ * offset.
+ */
+export default class Timeline {
+    timing: Timing;
+    ticker: Ticker;
+    private entries;
+    private _beforeResponsiveFn;
+    private _initialized;
+    private _renderQueue;
+    constructor(props?: Record<string, any>);
+    isFinite(): boolean;
+    add(target: any, props: Record<string, any>, offset?: any, relative?: number): this;
+    addTimeline(tl: Timeline, offset?: any): void;
+    label(label: string, offset?: any): this;
+    setBeforeResponsiveFn(fn: () => void): void;
+    advance(change: number): void;
+    seekMs(ms: number): void;
+    seek(pos: number): void;
+    init(): void;
+    _initAnimations(reset?: boolean): void;
+    render(): void;
+    _updateTimings(): void;
+    update(): void;
+    destroy(): void;
+}
+//# sourceMappingURL=TimeLine.d.ts.map

package/dist/timeline/TimeLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeLine.d.ts","sourceRoot":"","sources":["../../src/timeline/TimeLine.ts"],"names":[],"mappings":"AACA,OAAO,MAON,MAAM,kBAAkB,CAAC;AAC1B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAatC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,OAAO,CAAU;IAEzB,OAAO,CAAC,mBAAmB,CAAa;IACxC,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,YAAY,CAIlB;gBASU,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM;IAwB3C,QAAQ;IAQR,GAAG,CACF,MAAM,EAAE,GAAG,EACX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,MAAM,GAAE,GAAU,EAClB,QAAQ,SAAI;IAiBb,WAAW,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAE,GAAU;IAW5C,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,GAAE,GAAU;IAYvC,qBAAqB,CAAC,EAAE,EAAE,MAAM,IAAI;IAIpC,OAAO,CAAC,MAAM,EAAE,MAAM;IAMtB,MAAM,CAAC,EAAE,EAAE,MAAM;IAMjB,IAAI,CAAC,GAAG,EAAE,MAAM;IAMhB,IAAI;IAiDJ,eAAe,CAAC,KAAK,UAAQ;IAyC7B,MAAM;IAmBN,cAAc;IA0Bd,MAAM;IAyBN,OAAO;CAiBP"}

package/dist/timeline/TimeLine.js

@@ -0,0 +1,288 @@
+import { takeProp } from '../utils/internal';
+import Timing, { parseEase, parseRepeat, parseAlternate, parseReversed, STATE_BEFORE, STATE_ENDED, } from '../timing/Timing';
+import Animation from '../animation/Animation';
+import AnimationFrameTicker from '../timing/AnimationFrameTicker';
+/**
+ * Timeline is the most versatile class
+ *
+ * A timeline can contain multiple animation, ordered one after the other or
+ * offset.
+ */
+export default class Timeline {
+    timing;
+    ticker;
+    entries;
+    _beforeResponsiveFn;
+    _initialized;
+    _renderQueue;
+    /*
+    {
+        ease,
+        repeat: -1 - x,
+        alternate
+    }
+    */
+    constructor(props = {}) {
+        const nProps = {
+            duration: 1000,
+            ease: parseEase(takeProp(props, 'ease', null)),
+            repeat: parseRepeat(takeProp(props, 'repeat', false)),
+            alternate: parseAlternate(takeProp(props, 'alternate', true)),
+            reversed: parseReversed(takeProp(props, 'reversed', false)),
+        };
+        this.timing = new Timing(nProps);
+        this.ticker = AnimationFrameTicker.global();
+        // { type: label|animation, value: {}, offset, start: x, end: y, render }
+        this.entries = [];
+        this._beforeResponsiveFn = () => { };
+        this._initialized = false;
+        this._renderQueue = {
+            upcoming: [],
+            passed: [],
+            active: [],
+        };
+    }
+    isFinite() {
+        return !this.entries.some(e => {
+            return e.type === 'animation' && !e.value.isFinite();
+        });
+    }
+    // relative represents the point which the offset should be taken
+    // if relative 1 is done the offset will be taken from the previous - 1
+    add(target, props, offset = null, relative = 0) {
+        const animation = new Animation(target, this.ticker, props);
+        if (!animation.isFinite())
+            throw new Error('the animation needs to be finite');
+        this.entries.push({
+            type: 'animation',
+            value: animation,
+            offset: new Offset(offset),
+            relativeOffset: relative,
+        });
+        return this;
+    }
+    addTimeline(tl, offset = null) {
+        if (!tl.isFinite())
+            throw new Error('the animation needs to be finite');
+        this.entries.push({
+            type: 'timeline',
+            value: tl,
+            offset: new Offset(offset),
+            relativeOffset: 0,
+        });
+    }
+    label(label, offset = null) {
+        this.entries.push({
+            type: 'label',
+            value: label,
+            offset: new Offset(offset),
+            relativeOffset: 0,
+        });
+        return this;
+    }
+    // set's a function which get's called before any responsive call
+    setBeforeResponsiveFn(fn) {
+        this._beforeResponsiveFn = fn;
+    }
+    advance(change) {
+        this.timing.advance(change);
+        this._updateTimings();
+    }
+    seekMs(ms) {
+        this.timing.seekMs(ms);
+        this._updateTimings();
+    }
+    seek(pos) {
+        this.timing.seek(pos);
+        this._updateTimings();
+    }
+    init() {
+        if (this._initialized)
+            return;
+        this._initialized = true;
+        let duration = 0;
+        const labels = {};
+        let i = -1;
+        for (const entry of this.entries) {
+            i++;
+            let offset = entry.offset;
+            const label = offset.label();
+            if (label) {
+                if (!(label in labels))
+                    throw new Error('could not find label ' + label);
+                offset = new Offset(labels[label]);
+            }
+            const pos = this.entries[i - 1 - entry.relativeOffset]?.end ?? 0;
+            let start = offset.calculate(pos);
+            if (start < 0)
+                throw new Error('cannot go in the past start < 0');
+            let end = start;
+            if (entry.type === 'animation')
+                end += entry.value.duration;
+            if (entry.type === 'timeline') {
+                entry.value.init();
+                end += entry.value.timing.duration;
+            }
+            if (entry.type === 'label')
+                labels[entry.value] = start;
+            entry.start = start;
+            entry.end = end;
+            duration = Math.max(end, duration);
+        }
+        this.timing.setDuration(duration);
+        this._beforeResponsiveFn();
+        this._initAnimations();
+    }
+    _initAnimations(reset = false) {
+        // we don't wan't to have a reversed timing
+        const reversed = this.timing.reversed;
+        this.timing.reversed = false;
+        // now initialize all animations
+        // initialization means
+        // we need to define which value should be used as the from and the to
+        // value
+        const startOrdered = this.entries.filter(e => {
+            return e.type === 'animation' || e.type === 'timeline';
+        });
+        startOrdered.sort((a, b) => a.start - b.start);
+        for (let i = 0; i < startOrdered.length; i++) {
+            const entry = startOrdered[i];
+            this.timing.seekMs(entry.start);
+            const pos = this.timing.positionMs();
+            // seek all previous and render
+            for (let y = 0; y < i; y++) {
+                const prevEntry = startOrdered[y];
+                const prevAnimation = prevEntry.value;
+                prevAnimation.seekMs(pos - prevEntry.start);
+                prevAnimation.render();
+            }
+            entry.value.init(reset);
+        }
+        this.timing.reversed = reversed;
+        this.timing.seek(-1);
+        startOrdered.forEach(e => {
+            e.value.seek(-1);
+            e.value.render();
+        });
+    }
+    render() {
+        // the rendering order needs to be as follows
+        // upcoming
+        // passed
+        // active
+        for (const animation of this._renderQueue.upcoming) {
+            animation.render();
+        }
+        for (const animation of this._renderQueue.passed) {
+            animation.render();
+        }
+        for (const animation of this._renderQueue.active) {
+            animation.render();
+        }
+    }
+    _updateTimings() {
+        this._renderQueue = {
+            upcoming: [],
+            passed: [],
+            active: [],
+        };
+        const pos = this.timing.positionMsUnbounded();
+        for (const entry of this.entries) {
+            if (entry.type !== 'animation' && entry.type !== 'timeline')
+                continue;
+            const animation = entry.value;
+            animation.seekMs(pos - entry.start);
+            if (animation.timing.state >= STATE_ENDED) {
+                this._renderQueue.passed.push(animation);
+            }
+            else if (animation.timing.state <= STATE_BEFORE) {
+                this._renderQueue.upcoming.push(animation);
+            }
+            else {
+                this._renderQueue.active.push(animation);
+            }
+        }
+    }
+    update() {
+        if (!this._initialized)
+            return;
+        const pos = this.timing.savePosition();
+        const reversed = this.timing.reversed;
+        this.timing.reversed = false;
+        this.timing.seek(-1);
+        this._updateTimings();
+        this.render();
+        this.ticker.applyTargets();
+        this._beforeResponsiveFn();
+        // we now have removed every style we set
+        // we should be able to recalculate everything now
+        this._initAnimations(true);
+        this.timing.reversed = reversed;
+        this.timing.restorePosition(pos);
+        this._updateTimings();
+        this.render();
+        this.ticker.applyTargets();
+    }
+    destroy() {
+        for (const entry of this.entries) {
+            if (entry.type === 'timeline') {
+                entry.value.destroy();
+                continue;
+            }
+            if (entry.type !== 'animation')
+                continue;
+            const animation = entry.value;
+            animation.destroy();
+        }
+        this.entries = [];
+        this._beforeResponsiveFn = () => { };
+        this.ticker.applyTargets();
+    }
+}
+class Offset {
+    type;
+    value;
+    constructor(offset = null) {
+        this.type = 'none';
+        this.value = null;
+        if (typeof offset === 'number') {
+            this.type = 'absolute';
+            this.value = offset;
+        }
+        else if (typeof offset === 'string') {
+            if (offset.startsWith('-=')) {
+                this.type = 'sub';
+                this.value = parseFloat(offset.substring(2));
+            }
+            else if (offset.startsWith('+=')) {
+                this.type = 'add';
+                this.value = parseFloat(offset.substring(2));
+            }
+            else {
+                this.type = 'label';
+                this.value = offset;
+            }
+        }
+    }
+    label() {
+        if (this.type !== 'label')
+            return null;
+        return this.value;
+    }
+    // this is bullshit
+    /* isAbsolute(this: Offset): this is { type: 'absolute'; value: number } {
+        return this.type === 'absolute';
+    } */
+    calculate(pos) {
+        if (this.type === 'none')
+            return pos;
+        if (this.type === 'absolute')
+            return this.value;
+        if (this.type === 'sub')
+            return pos - this.value;
+        if (this.type === 'add')
+            return pos + this.value;
+        throw new Error('cannot calculate for type ' + this.type);
+    }
+}
+//# sourceMappingURL=TimeLine.js.map

package/dist/timeline/TimeLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeLine.js","sourceRoot":"","sources":["../../src/timeline/TimeLine.ts"],"names":[],"mappings":"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"}

package/dist/timeline/public.d.ts

@@ -0,0 +1,120 @@
+import Timeline from './TimeLine';
+import NestedTimeline from './Nested';
+export type Responsive = {
+    responsive: () => void;
+};
+export default class PublicTimeline {
+    _defaults: Record<string, any>;
+    private _responsive;
+    _inner: Timeline;
+    private _events;
+    private _state;
+    private _renderedOnce;
+    private _runningTicker;
+    private _responsiveBlocks;
+    private _responsiveEvent;
+    constructor(props?: Record<string, any>);
+    /**
+     * Set's properties
+     * offset can be staggered, a number, a label or a string `+=10`
+     */
+    set(targets: any, props: Record<string, any>, offset?: null): this;
+    /**
+     * Add an animation to the timeline
+     *
+     * offset can be staggered, a number, a label or a string `+=10`
+     */
+    add(targets: any, props: Record<string, any>, offset?: null): this;
+    /**
+     * Adds a label at to the current nOffse
+     *
+     * This label can then be used in offsets
+     */
+    label(label: string, offset?: any): this;
+    /**
+     * Allows to nest timelines
+     *
+     * fn: (timeline)
+     */
+    nest(fn: (tl: NestedTimeline) => void, opts?: {}, offset?: any): this;
+    /**
+     * Adds a responsive function call which get's called before the responsive
+     * functions in properties
+     */
+    addResponsive(responsive: Responsive | Responsive[]): this;
+    /**
+     * Starts to play the timeline if it hasn't started
+     */
+    play(): this;
+    /**
+     * Pause the timeline at the current position
+     */
+    pause(): void;
+    /**
+     * Seeks to a position in the timeline
+     */
+    seekMs(ms: number): void;
+    /**
+     * Seeks to a normalized position in the timeline
+     *
+     * @param pos = number between 0 and 1
+     */
+    seek(pos: number): void;
+    /**
+     * Resets the current timeline to the start
+     * without changing anything
+     */
+    reset(): void;
+    /**
+     * Resets every used prop to it's previous value
+     */
+    resetProps(): void;
+    /**
+     * Recalculates all values this should be called for example after a resize
+     */
+    update(): void;
+    /**
+     * Returns wether the timeline is set to reversed
+     */
+    isReversed(): boolean;
+    /**
+     * Set's the timeline to a specific direction
+     */
+    setReversed(reversed: boolean): void;
+    /**
+     * Reverses the order of the current timeline
+     */
+    reverse(): void;
+    /**
+     * Listen on events
+     *
+     * returns a function to remove the event listener
+     *
+     * ## Events
+     *
+     * ### end
+     * Get's executed once the timeline comes to the end
+     * Does not get executed during seeking
+     *
+     */
+    on(event: string, fn: (...args: any[]) => void): () => void;
+    onPromise(event: string): any;
+    /**
+     * Destroys this timeline and resets all props
+     */
+    destroy(): void;
+    _startTicker(): void;
+    _stopTicker(): void;
+    _onResponsive(a: {
+        width: number;
+        height: number;
+    }, b: {
+        remove: () => void;
+    }): void;
+}
+/**
+ * Add an animation to the timeline
+ * tl needs to have _defaults, and _inner
+ */
+export declare function timelineAdd(tl: PublicTimeline | NestedTimeline, targets: any, props: Record<string, any>, offset?: any): void;
+//# sourceMappingURL=public.d.ts.map

package/dist/timeline/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/timeline/public.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAKlC,OAAO,cAAc,MAAM,UAAU,CAAC;AAMtC,MAAM,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc;IAClC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,OAAO,CAAC,WAAW,CAAU;IAE7B,MAAM,EAAE,QAAQ,CAAC;IAEjB,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,iBAAiB,CAA+B;IACxD,OAAO,CAAC,gBAAgB,CAAM;gBAElB,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM;IAkC3C;;;OAGG;IACH,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,OAAO;IAK3D;;;;OAIG;IACH,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,OAAO;IAM3D;;;;OAIG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,GAAE,GAAU;IAMvC;;;;OAIG;IAEH,IAAI,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,EAAE,IAAI,KAAK,EAAE,MAAM,GAAE,GAAU;IAUpE;;;OAGG;IACH,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,EAAE;IAiBnD;;OAEG;IACH,IAAI;IAUJ;;OAEG;IACH,KAAK;IAQL;;OAEG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM;IAUjB;;;;OAIG;IACH,IAAI,CAAC,GAAG,EAAE,MAAM;IAahB;;;OAGG;IACH,KAAK;IAIL;;OAEG;IACH,UAAU;IAWV;;OAEG;IACH,MAAM;IAIN;;OAEG;IACH,UAAU;IAIV;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,OAAO;IAK7B;;OAEG;IACH,OAAO;IAIP;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI;IAK9C,SAAS,CAAC,KAAK,EAAE,MAAM;IAIvB;;OAEG;IACH,OAAO;IAUP,YAAY;IAmDZ,WAAW;IAOX,aAAa,CACZ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EACpC,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE;CAO1B;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAC1B,EAAE,EAAE,cAAc,GAAG,cAAc,EACnC,OAAO,EAAE,GAAG,EACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,MAAM,GAAE,GAAU,QAsBlB"}