vevet 1.4.27 → 2.0.1-dev.3

package/build/es/components/split-text/SplitText.js

@@ -0,0 +1,199 @@
+import { selectOne } from 'vevet-dom';
+import { Component } from '../../base/Component';
+import { mergeWithoutArrays } from '../../utils/common';
+/**
+ * The class splits text in an element into words, letters, and lines.
+ * This may be useful when animating the text.
+ */
+export class SplitText extends Component {
+    _getDefaultProp() {
+        const prop = {
+            container: '.v-text',
+            resizeTimeout: 0,
+            append: {
+                letters: true,
+                words: true,
+                lines: false,
+            },
+        };
+        return mergeWithoutArrays(super._getDefaultProp(), prop);
+    }
+    // Extra constructor
+    _constructor() {
+        this._create();
+    }
+    /**
+     * Text container
+     */
+    _container = null;
+    /**
+     * Get text container
+     */
+    get container() {
+        return this._container;
+    }
+    /**
+     * innerHTML of the container
+     */
+    _html = '';
+    /**
+     * textContent of the container
+     */
+    _text = '';
+    /**
+     * Defines if the text is already split
+     */
+    _isSplit = false;
+    /**
+     * Text letters
+     */
+    _letters = [];
+    /**
+     * Get text letters
+     */
+    get letters() {
+        return this._letters;
+    }
+    /**
+     * Create split text
+     */
+    _create() {
+        // get container
+        const container = selectOne(this.prop.container);
+        this._container = container;
+        if (!container) {
+            return;
+        }
+        container.classList.add(`${this.prefix}`);
+        console.log(this.prefix);
+        // update variables
+        this._text = container.textContent;
+        this._html = container.innerHTML;
+        console.log(this._container);
+    }
+    /**
+     * Set events
+     */
+    _setEvents() {
+        this.addViewportCallback('', () => {
+            this._resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
+            name: this.name,
+        });
+    }
+    /**
+     * Resize the text
+     */
+    _resize() {
+        this.callbacks.tbt('resize', false);
+        this.split();
+    }
+    /**
+     * Split the text
+     */
+    split() {
+        // break if there's no text
+        if (!this._text) {
+            return;
+        }
+        // get prop
+        const { prop } = this;
+        // split text into letters and words
+        // this must happen only once
+        if (!this._isSplit) {
+            // split
+            this._splitToWords(this._text);
+            // this._lettersSplit();
+            // // clear innerHTML
+            // this._outer.innerHTML = '';
+            // // and append
+            // this._lettersAppend();
+            // this._wordsAppend();
+        }
+        // remove previous lines
+        // if (this._splitBool) {
+        //     this._linesRemove();
+        // }
+        // // append spaces
+        // if (!prop.appendLines) {
+        //     if (!this._splitBool) {
+        //         this._appendSpaces();
+        //     }
+        // }
+        // // split to lines
+        // if (prop.appendLines) {
+        //     this._appendSpaces();
+        //     this._linesSplit();
+        //     this._removeBr();
+        //     this._linesAppend();
+        //     this._appendSpaces();
+        // } else {
+        //     this._linesSplit();
+        // }
+        // // change value
+        // this._splitBool = true;
+        // // remove the class
+        // this._outer.classList.remove(`${this._prefix}_splitting`);
+        // // launch callback
+        // this.lbt('split', this._el);
+    }
+    /**
+     * Split text into words
+     */
+    _splitToWords(text) {
+        console.log(text);
+        // split text to chars
+        // const chars = text.split('');
+        // const el = [];
+        // let word: string[] = [];
+        // // gor through all chars and add them to single words
+        // chars.forEach((char, index) => {
+        //     const charCode = char.charCodeAt(0);
+        //     const isNewLine = charCode === 10;
+        //     const isWhitespace = charCode === 32 || charCode === 160;
+        //     const isLastChar = index === (chars.length - 1);
+        //     // define if a new word
+        //     let isNewWord = false;
+        //     if (isNewLine || isWhitespace || isLastChar) {
+        //         isNewWord = true;
+        //         if (isLastChar) {
+        //             word.push(char);
+        //         }
+        //     }
+        //     // if a new word
+        //     if (isNewWord) {
+        //         // add previous word to elements
+        //         if (word.length > 0) {
+        //             el.push({
+        //                 el: false,
+        //                 children: word,
+        //                 newline: isNewLine,
+        //                 content: word.join(''),
+        //                 type: 'word',
+        //             });
+        //         }
+        //         word = [];
+        //     } else {
+        //         word.push(char);
+        //     }
+        //     // iteration
+        //     i++;
+        // });
+        // // add elements to words
+        // if (this._prop.appendWords) {
+        //     el.forEach((word) => {
+        //         word.el = dom({
+        //             selector: 'span',
+        //             styles: `${this._prefix}__word`,
+        //         });
+        //         word.el.classList.add();
+        //         if (!this._prop.appendLetters) {
+        //             word.el.innerHTML = word.content;
+        //         }
+        //     });
+        // }
+        // // add to stack
+        // this._el.words = el;
+    }
+}

package/build/es/components/text/SplitText.js

@@ -0,0 +1,270 @@
+import { createElement, selectOne } from 'vevet-dom';
+import { Component } from '../../base/Component';
+/**
+ * Split text into letters, words & lines
+ */
+export class SplitText extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // get text container
+        if (this.prop.container) {
+            const container = selectOne(this.prop.container);
+            if (container instanceof HTMLElement) {
+                this._container = container;
+            }
+        }
+        // add classes
+        if (this._container) {
+            this._container.classList.add(this.prefix);
+        }
+        // get initial text
+        this._initHTML = this._container.innerHTML;
+        this._initText = (this._container.innerText || 'no rendered text').trim();
+        this._initText = this._initText.replace(/\s+\n/gm, '\n');
+        // set default vars
+        this._isPrimarySplit = false;
+        this._letters = [];
+        this._words = [];
+        this._lines = [];
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, appendLetters: true, appendLines: false });
+    }
+    get prefix() {
+        return `${this._app.prefix}split-text`;
+    }
+    /**
+     * Text container
+     */
+    get container() {
+        return this._container;
+    }
+    get letters() {
+        return this._letters;
+    }
+    get words() {
+        return this._words;
+    }
+    get lines() {
+        return this._lines;
+    }
+    _setEvents() {
+        super._setEvents();
+        // split the text
+        this.splitText();
+        if (this.prop.appendLines) {
+            this.addViewportCallback('', () => {
+                this.splitText();
+            });
+        }
+    }
+    /**
+     * Split the text
+     */
+    splitText() {
+        // split into words & letters
+        if (!this._isPrimarySplit) {
+            this.container.innerHTML = '';
+            this._splitIntoWords();
+            this._splitIntoLetters();
+            this._appendWords();
+            this._isPrimarySplit = true;
+        }
+        // split text into lines
+        if (this.prop.appendLines) {
+            this._splitIntoLines();
+        }
+        // launch callbacks
+        this.callbacks.tbt('split', false);
+    }
+    /**
+     * Split the text into words
+     */
+    _splitIntoWords() {
+        const chars = this._initText.split('');
+        // create words
+        let wordIndex = 0;
+        chars.forEach((char) => {
+            // get an existing word or create a base for a new one
+            const currentWord = this._words[wordIndex] || {
+                content: '',
+                hasNewLine: false,
+                el: createElement('span', {
+                    class: `${this.prefix}__word`,
+                }),
+                letters: [],
+            };
+            currentWord.el.style.display = 'inline-block';
+            this._words[wordIndex] = currentWord;
+            // get type of the char
+            const charCode = char.charCodeAt(0);
+            const isWhitespace = charCode === 32 || charCode === 160;
+            const isNewLine = charCode === 10;
+            // add elements
+            if (isWhitespace) {
+                currentWord.whitespace = document.createTextNode(' ');
+            }
+            if (isNewLine) {
+                currentWord.br = createElement('br');
+            }
+            // update word states
+            currentWord.hasNewLine = isNewLine;
+            // go to next word if needed
+            if (isWhitespace || isNewLine) {
+                wordIndex += 1;
+                return;
+            }
+            // update contents
+            currentWord.content += char;
+            if (!this.prop.appendLetters) {
+                currentWord.el.innerHTML = currentWord.content;
+            }
+        });
+    }
+    /**
+     * Append split words to the container
+     */
+    _appendWords() {
+        this._words.forEach((word) => {
+            this.container.appendChild(word.el);
+            if (word.whitespace) {
+                this.container.appendChild(word.whitespace);
+            }
+            if (word.br) {
+                this.container.appendChild(word.br);
+            }
+        });
+    }
+    /**
+     * Remove split words from DOM
+     */
+    _removeWords() {
+        this._words.forEach((word) => {
+            word.el.remove();
+            if (word.whitespace) {
+                word.whitespace.remove();
+            }
+            if (word.br) {
+                word.br.remove();
+            }
+        });
+    }
+    /**
+     * Split the text into letters
+     */
+    _splitIntoLetters() {
+        // check if need to have letters
+        if (!this.prop.appendLetters) {
+            return;
+        }
+        // create letters
+        this._words.forEach((word) => {
+            const chars = word.content.split('');
+            const wordLetters = [];
+            chars.forEach((char) => {
+                const letter = {
+                    el: createElement('span', {
+                        class: `${this.prefix}__letter`,
+                        html: char,
+                    }),
+                    content: char,
+                    word,
+                };
+                letter.el.style.display = 'inline-block';
+                this._letters.push(letter);
+                wordLetters.push(letter);
+            });
+            word.letters = wordLetters;
+        });
+        // append letters
+        this._letters.forEach((letter) => {
+            letter.word.el.appendChild(letter.el);
+        });
+    }
+    /**
+     * Split the text into lines
+     */
+    _splitIntoLines() {
+        // first of all, remove all previous lines
+        this._removeLines();
+        // create lines
+        let currentLine = false;
+        let prevOffsetTop = Infinity;
+        let prevWord = false;
+        this.words.forEach((word) => {
+            // check if need to create a new line
+            let isNewLine = false;
+            const top = word.el.offsetTop;
+            // check if the previous word contains BR
+            if (!!prevWord && !!prevWord.br) {
+                isNewLine = true;
+            }
+            else {
+                // otherwise check offset
+                isNewLine = top !== prevOffsetTop;
+            }
+            // update vars
+            prevWord = word;
+            prevOffsetTop = top;
+            // create new line
+            if (isNewLine) {
+                currentLine = {
+                    el: createElement('span', {
+                        class: `${this.prefix}__line`,
+                    }),
+                    content: '',
+                    words: [],
+                };
+                currentLine.el.style.display = 'block';
+                this._lines.push(currentLine);
+            }
+            // append words
+            if (currentLine) {
+                currentLine.words.push(word);
+            }
+        });
+        // update lines content
+        this._lines.forEach((line) => {
+            line.content = line.words.map((word) => word.content).join(' ');
+        });
+        // append lines
+        this._lines.forEach((line) => {
+            line.words.forEach((word) => {
+                line.el.appendChild(word.el);
+                if (word.br) {
+                    word.br.remove();
+                }
+                if (word.whitespace) {
+                    line.el.appendChild(word.whitespace);
+                }
+            });
+            this.container.appendChild(line.el);
+        });
+    }
+    /**
+     * Remove all lines
+     */
+    _removeLines() {
+        // remove lines
+        this._lines.forEach((line) => {
+            line.el.remove();
+        });
+        this._lines = [];
+        // and append words
+        this._appendWords();
+    }
+    /**
+     * Destroy the module
+     */
+    _destroy() {
+        super._destroy();
+        this._lines = [];
+        this._words = [];
+        this._letters = [];
+        this._container.innerHTML = this._initHTML;
+    }
+}

package/build/es/components/timeline/StaticTimeline.js

@@ -0,0 +1,92 @@
+import easingProgress from 'easing-progress';
+import { Component } from '../../base/Component';
+import scopeProgress from '../../utils/math/scopeProgress';
+import boundVal from '../../utils/math/boundVal';
+/**
+ * StaticTimeline is the base class for Timeline itself.
+ * The difference between the coponents is that StaticTimeline has no animation:
+ * no play & pause methods.
+ */
+export class StaticTimeline extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // set default vars
+        this._progress = 0;
+        this._easing = 0;
+        this._nestedTimelines = [];
+        if (init) {
+            this.init();
+        }
+    }
+    /**
+     * Get default properties
+     */
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { easing: this._app.prop.easing, scope: [0, 1], useNestedEasingProgress: false });
+    }
+    /**
+     * Absolute progress of the timeline
+     */
+    get progress() {
+        return this._progress;
+    }
+    set progress(val) {
+        this._progress = val;
+        this._handleProgress();
+    }
+    /**
+     * Easing progress of the timeline
+     */
+    get easing() {
+        return this._easing;
+    }
+    /**
+     * Add a nested timeline
+     */
+    addNestedTimeline(tm) {
+        // add the timeline to the stack
+        this._nestedTimelines.push(tm);
+    }
+    /**
+     * Handle progress event
+     */
+    _handleProgress() {
+        // calculate easing progress
+        this._easing = easingProgress(this._progress, this.prop.easing);
+        // launch progress events
+        this._callbacks.tbt('progress', {
+            progress: this._progress,
+            easing: this._easing,
+        });
+        // render
+        this._renderNestedTimelines();
+    }
+    /**
+     * Render nested timelines
+     */
+    _renderNestedTimelines() {
+        const { length } = this._nestedTimelines;
+        if (length === 0) {
+            return;
+        }
+        // vars
+        const progressForNested = this.prop.useNestedEasingProgress ? this.easing : this.progress;
+        // render nested timelines
+        for (let index = 0, l = length; index < l; index += 1) {
+            const tm = this._nestedTimelines[index];
+            // calculate progress of this very timeline
+            const tmProgress = boundVal(scopeProgress(progressForNested, tm.prop.nestedScope), [0, 1]);
+            tm.progress = tmProgress;
+        }
+    }
+    /**
+     * Destroy the animation frame
+     */
+    _destroy() {
+        super._destroy();
+        // destroy nested timelines
+        this._nestedTimelines.forEach((tm) => {
+            tm.destroy();
+        });
+    }
+}

package/build/es/components/timeline/Timeline.js

@@ -0,0 +1,141 @@
+import { StaticTimeline } from './StaticTimeline';
+import boundVal from '../../utils/math/boundVal';
+/**
+ * Timeline is an animation helper.
+ */
+export class Timeline extends StaticTimeline {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // set default variables
+        this._isPlaying = false;
+        this._isReversed = false;
+        this._isPaused = false;
+        this._animationFrameLastTime = 0;
+        if (init) {
+            this.init();
+        }
+    }
+    /**
+     * Get default properties
+     */
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { duration: 1000, reset: false, destroyOnEnd: false });
+    }
+    /**
+     * Check if timeline is playing
+     */
+    get isPlaying() {
+        return typeof this._animationFrame !== 'undefined';
+    }
+    /**
+     * Check if timeline is reversed
+     */
+    get isReversed() {
+        return this._isReversed;
+    }
+    /**
+     * Check if timeline is paused
+     */
+    get isPaused() {
+        return this._isPaused;
+    }
+    /**
+     * Play the timeline
+     */
+    play() {
+        if (this._destroyed) {
+            return;
+        }
+        if (this.prop.reset && this.progress === 1) {
+            this._progress = 0;
+        }
+        this._isReversed = false;
+        this._isPaused = false;
+        if (!this.isPlaying) {
+            this._animationFrameLastTime = +new Date();
+            this._animate();
+        }
+    }
+    /**
+     * Play reversed timeline
+     */
+    reverse() {
+        if (this._destroyed) {
+            return;
+        }
+        if (this.prop.reset && this.progress === 0) {
+            this._progress = 1;
+        }
+        this._isReversed = true;
+        this._isPaused = false;
+        if (!this.isPlaying) {
+            this._animationFrameLastTime = +new Date();
+            this._animate();
+        }
+    }
+    /**
+     * Pause animation
+     */
+    pause() {
+        if (this._destroyed) {
+            return;
+        }
+        this._isPaused = true;
+        if (this._animationFrame) {
+            window.cancelAnimationFrame(this._animationFrame);
+        }
+        this._animationFrame = undefined;
+    }
+    /**
+     * Start animation
+     */
+    _animate() {
+        // stop if animation is paused
+        if (this._isPaused) {
+            return;
+        }
+        const { isReversed } = this;
+        // calculate difference between frames
+        const currentTime = +new Date();
+        const frameDiff = Math.abs(this._animationFrameLastTime - currentTime);
+        this._animationFrameLastTime = currentTime;
+        // calculate current progress
+        const progressIterator = frameDiff / this.prop.duration / (isReversed ? -1 : 1);
+        const progressTarget = boundVal(this.progress + progressIterator, [0, 1]);
+        this.progress = progressTarget;
+        // end animation
+        if ((progressTarget === 1 && !isReversed)
+            || (progressTarget === 0 && isReversed)) {
+            this._isReversed = false;
+            this._isPaused = false;
+            this._animationFrame = undefined;
+            return;
+        }
+        // continue animation
+        this._animationFrame = window.requestAnimationFrame(this._animate.bind(this));
+    }
+    /**
+     * Events on progress
+     */
+    _handleProgress() {
+        super._handleProgress();
+        const progress = this._progress;
+        // launch callbacks
+        if (progress === 0) {
+            this.callbacks.tbt('start', false);
+        }
+        else if (progress === 1) {
+            this.callbacks.tbt('end', false);
+            if (this.prop.destroyOnEnd) {
+                this.destroy();
+            }
+        }
+    }
+    /**
+     * Destroy the timeline
+     */
+    _destroy() {
+        this.pause();
+        super._destroy();
+    }
+}