vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,233 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitText = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var Component_1 = require("../../base/Component");
+var common_1 = require("../../utils/common");
+/**
+ * The class splits text in an element into words, letters, and lines.
+ * This may be useful when animating the text.
+ */
+var SplitText = /** @class */ (function (_super) {
+    __extends(SplitText, _super);
+    function SplitText() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /**
+         * Text container
+         */
+        _this._container = null;
+        /**
+         * innerHTML of the container
+         */
+        _this._html = '';
+        /**
+         * textContent of the container
+         */
+        _this._text = '';
+        /**
+         * Defines if the text is already split
+         */
+        _this._isSplit = false;
+        /**
+         * Text letters
+         */
+        _this._letters = [];
+        return _this;
+    }
+    SplitText.prototype._getDefaultProp = function () {
+        var prop = {
+            container: '.v-text',
+            resizeTimeout: 0,
+            append: {
+                letters: true,
+                words: true,
+                lines: false,
+            },
+        };
+        return common_1.mergeWithoutArrays(_super.prototype._getDefaultProp.call(this), prop);
+    };
+    // Extra constructor
+    SplitText.prototype._constructor = function () {
+        this._create();
+    };
+    Object.defineProperty(SplitText.prototype, "container", {
+        /**
+         * Get text container
+         */
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SplitText.prototype, "letters", {
+        /**
+         * Get text letters
+         */
+        get: function () {
+            return this._letters;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Create split text
+     */
+    SplitText.prototype._create = function () {
+        // get container
+        var container = vevet_dom_1.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
+     */
+    SplitText.prototype._setEvents = function () {
+        var _this = this;
+        this.addViewportCallback('', function () {
+            _this._resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
+            name: this.name,
+        });
+    };
+    /**
+     * Resize the text
+     */
+    SplitText.prototype._resize = function () {
+        this.callbacks.tbt('resize', false);
+        this.split();
+    };
+    /**
+     * Split the text
+     */
+    SplitText.prototype.split = function () {
+        // break if there's no text
+        if (!this._text) {
+            return;
+        }
+        // get prop
+        var prop = this.prop;
+        // 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
+     */
+    SplitText.prototype._splitToWords = function (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;
+    };
+    return SplitText;
+}(Component_1.Component));
+exports.SplitText = SplitText;

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

@@ -0,0 +1,329 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitText = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var Component_1 = require("../../base/Component");
+/**
+ * Split text into letters, words & lines
+ */
+var SplitText = /** @class */ (function (_super) {
+    __extends(SplitText, _super);
+    function SplitText(initialProp, init) {
+        if (init === void 0) { init = true; }
+        var _this = _super.call(this, initialProp, false) || this;
+        // get text container
+        if (_this.prop.container) {
+            var container = vevet_dom_1.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();
+        }
+        return _this;
+    }
+    SplitText.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: "#" + this.prefix, appendLetters: true, appendLines: false });
+    };
+    Object.defineProperty(SplitText.prototype, "prefix", {
+        get: function () {
+            return this._app.prefix + "split-text";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SplitText.prototype, "container", {
+        /**
+         * Text container
+         */
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SplitText.prototype, "letters", {
+        get: function () {
+            return this._letters;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SplitText.prototype, "words", {
+        get: function () {
+            return this._words;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SplitText.prototype, "lines", {
+        get: function () {
+            return this._lines;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SplitText.prototype._setEvents = function () {
+        var _this = this;
+        _super.prototype._setEvents.call(this);
+        // split the text
+        this.splitText();
+        if (this.prop.appendLines) {
+            this.addViewportCallback('', function () {
+                _this.splitText();
+            });
+        }
+    };
+    /**
+     * Split the text
+     */
+    SplitText.prototype.splitText = function () {
+        // 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
+     */
+    SplitText.prototype._splitIntoWords = function () {
+        var _this = this;
+        var chars = this._initText.split('');
+        // create words
+        var wordIndex = 0;
+        chars.forEach(function (char) {
+            // get an existing word or create a base for a new one
+            var currentWord = _this._words[wordIndex] || {
+                content: '',
+                hasNewLine: false,
+                el: vevet_dom_1.createElement('span', {
+                    class: _this.prefix + "__word",
+                }),
+                letters: [],
+            };
+            currentWord.el.style.display = 'inline-block';
+            _this._words[wordIndex] = currentWord;
+            // get type of the char
+            var charCode = char.charCodeAt(0);
+            var isWhitespace = charCode === 32 || charCode === 160;
+            var isNewLine = charCode === 10;
+            // add elements
+            if (isWhitespace) {
+                currentWord.whitespace = document.createTextNode(' ');
+            }
+            if (isNewLine) {
+                currentWord.br = vevet_dom_1.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
+     */
+    SplitText.prototype._appendWords = function () {
+        var _this = this;
+        this._words.forEach(function (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
+     */
+    SplitText.prototype._removeWords = function () {
+        this._words.forEach(function (word) {
+            word.el.remove();
+            if (word.whitespace) {
+                word.whitespace.remove();
+            }
+            if (word.br) {
+                word.br.remove();
+            }
+        });
+    };
+    /**
+     * Split the text into letters
+     */
+    SplitText.prototype._splitIntoLetters = function () {
+        var _this = this;
+        // check if need to have letters
+        if (!this.prop.appendLetters) {
+            return;
+        }
+        // create letters
+        this._words.forEach(function (word) {
+            var chars = word.content.split('');
+            var wordLetters = [];
+            chars.forEach(function (char) {
+                var letter = {
+                    el: vevet_dom_1.createElement('span', {
+                        class: _this.prefix + "__letter",
+                        html: char,
+                    }),
+                    content: char,
+                    word: word,
+                };
+                letter.el.style.display = 'inline-block';
+                _this._letters.push(letter);
+                wordLetters.push(letter);
+            });
+            word.letters = wordLetters;
+        });
+        // append letters
+        this._letters.forEach(function (letter) {
+            letter.word.el.appendChild(letter.el);
+        });
+    };
+    /**
+     * Split the text into lines
+     */
+    SplitText.prototype._splitIntoLines = function () {
+        var _this = this;
+        // first of all, remove all previous lines
+        this._removeLines();
+        // create lines
+        var currentLine = false;
+        var prevOffsetTop = Infinity;
+        var prevWord = false;
+        this.words.forEach(function (word) {
+            // check if need to create a new line
+            var isNewLine = false;
+            var 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: vevet_dom_1.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(function (line) {
+            line.content = line.words.map(function (word) { return word.content; }).join(' ');
+        });
+        // append lines
+        this._lines.forEach(function (line) {
+            line.words.forEach(function (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
+     */
+    SplitText.prototype._removeLines = function () {
+        // remove lines
+        this._lines.forEach(function (line) {
+            line.el.remove();
+        });
+        this._lines = [];
+        // and append words
+        this._appendWords();
+    };
+    /**
+     * Destroy the module
+     */
+    SplitText.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        this._lines = [];
+        this._words = [];
+        this._letters = [];
+        this._container.innerHTML = this._initHTML;
+    };
+    return SplitText;
+}(Component_1.Component));
+exports.SplitText = SplitText;

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

@@ -0,0 +1,137 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StaticTimeline = void 0;
+var easing_progress_1 = __importDefault(require("easing-progress"));
+var Component_1 = require("../../base/Component");
+var scopeProgress_1 = __importDefault(require("../../utils/math/scopeProgress"));
+var boundVal_1 = __importDefault(require("../../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.
+ */
+var StaticTimeline = /** @class */ (function (_super) {
+    __extends(StaticTimeline, _super);
+    function StaticTimeline(initialProp, init) {
+        if (init === void 0) { init = true; }
+        var _this = _super.call(this, initialProp, false) || this;
+        // set default vars
+        _this._progress = 0;
+        _this._easing = 0;
+        _this._nestedTimelines = [];
+        if (init) {
+            _this.init();
+        }
+        return _this;
+    }
+    /**
+     * Get default properties
+     */
+    StaticTimeline.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { easing: this._app.prop.easing, scope: [0, 1], useNestedEasingProgress: false });
+    };
+    Object.defineProperty(StaticTimeline.prototype, "progress", {
+        /**
+         * Absolute progress of the timeline
+         */
+        get: function () {
+            return this._progress;
+        },
+        set: function (val) {
+            this._progress = val;
+            this._handleProgress();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(StaticTimeline.prototype, "easing", {
+        /**
+         * Easing progress of the timeline
+         */
+        get: function () {
+            return this._easing;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Add a nested timeline
+     */
+    StaticTimeline.prototype.addNestedTimeline = function (tm) {
+        // add the timeline to the stack
+        this._nestedTimelines.push(tm);
+    };
+    /**
+     * Handle progress event
+     */
+    StaticTimeline.prototype._handleProgress = function () {
+        // calculate easing progress
+        this._easing = easing_progress_1.default(this._progress, this.prop.easing);
+        // launch progress events
+        this._callbacks.tbt('progress', {
+            progress: this._progress,
+            easing: this._easing,
+        });
+        // render
+        this._renderNestedTimelines();
+    };
+    /**
+     * Render nested timelines
+     */
+    StaticTimeline.prototype._renderNestedTimelines = function () {
+        var length = this._nestedTimelines.length;
+        if (length === 0) {
+            return;
+        }
+        // vars
+        var progressForNested = this.prop.useNestedEasingProgress ? this.easing : this.progress;
+        // render nested timelines
+        for (var index = 0, l = length; index < l; index += 1) {
+            var tm = this._nestedTimelines[index];
+            // calculate progress of this very timeline
+            var tmProgress = boundVal_1.default(scopeProgress_1.default(progressForNested, tm.prop.nestedScope), [0, 1]);
+            tm.progress = tmProgress;
+        }
+    };
+    /**
+     * Destroy the animation frame
+     */
+    StaticTimeline.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        // destroy nested timelines
+        this._nestedTimelines.forEach(function (tm) {
+            tm.destroy();
+        });
+    };
+    return StaticTimeline;
+}(Component_1.Component));
+exports.StaticTimeline = StaticTimeline;