vevet 2.17.0 → 3.0.0-beta.1

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

@@ -1,376 +0,0 @@
-"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 = (0, vevet_dom_1.selectOne)(_this.prop.container);
-            if (container instanceof HTMLElement) {
-                _this._container = container;
-            }
-        }
-        // disable translation
-        _this._container.translate = false;
-        // add classes
-        if (_this._container) {
-            _this._container.classList.add(_this.prefix);
-        }
-        // get initial text
-        _this._initHTML = _this._container.innerHTML;
-        var innerText = _this._container[_this.prop.textSource].trim();
-        _this._initText = innerText || 'no rendered text';
-        _this._initText = _this._initText.replace(/\s+\n/gm, '\n');
-        _this._initText = _this._initText.replace(/<br>/gm, String.fromCharCode(10));
-        _this._initText = _this._initText.replace(/<br\/>/gm, String.fromCharCode(10));
-        _this._initText = _this._initText.replace(/<br \/>/gm, String.fromCharCode(10));
-        _this._container.ariaLabel = _this._initText;
-        // 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: "#".concat(this.prefix), textSource: 'innerText', appendLetters: true, appendLines: false, viewportTarget: '', resizeTimeout: 0 });
-    };
-    Object.defineProperty(SplitText.prototype, "prefix", {
-        get: function () {
-            return "".concat(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(this.prop.viewportTarget, function () {
-                _this.splitText();
-            }, {
-                timeout: this.prop.resizeTimeout,
-            });
-        }
-    };
-    /**
-     * 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: (0, vevet_dom_1.createElement)('span', {
-                    class: "".concat(_this.prefix, "__word"),
-                    attr: [
-                        ['aria-hidden', 'true'],
-                    ],
-                }),
-                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 isSeparator = [45, 8208, 8211, 8212, 8722].includes(charCode);
-            var isNewLine = charCode === 10;
-            // add elements
-            if (isWhitespace) {
-                currentWord.whitespace = document.createTextNode(' ');
-            }
-            if (isNewLine) {
-                currentWord.br = (0, 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;
-            }
-            // go to next word if needed
-            if (isSeparator) {
-                wordIndex += 1;
-            }
-        });
-        // only filled words
-        this._words = this._words.filter(function (word, index) {
-            if (word.content.length === 0) {
-                if (index > 0) {
-                    _this._words[index - 1].whitespace = word.whitespace;
-                    _this._words[index - 1].br = word.br;
-                }
-                return false;
-            }
-            return true;
-        });
-        // post-processing
-        var prevWord;
-        this._words.forEach(function (word) {
-            if (prevWord) {
-                if (prevWord.whitespace) {
-                    word.el.classList.add('pre-whitespace');
-                }
-            }
-            if (word.whitespace) {
-                word.el.classList.add('has-whitespace');
-            }
-            prevWord = word;
-        });
-    };
-    /**
-     * 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: (0, vevet_dom_1.createElement)('span', {
-                        class: "".concat(_this.prefix, "__letter"),
-                        html: char,
-                        attr: [
-                            ['aria-hidden', 'true'],
-                        ],
-                    }),
-                    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: (0, vevet_dom_1.createElement)('span', {
-                        class: "".concat(_this.prefix, "__line"),
-                        attr: [
-                            ['aria-hidden', 'true'],
-                        ],
-                    }),
-                    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

@@ -1,137 +0,0 @@
-"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 scoped_1 = __importDefault(require("../../utils/math/scoped"));
-var clamp_1 = __importDefault(require("../../utils/math/clamp"));
-/**
- * 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 = (0, 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 = (0, clamp_1.default)((0, scoped_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;

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

@@ -1,191 +0,0 @@
-"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.Timeline = void 0;
-var StaticTimeline_1 = require("./StaticTimeline");
-var clamp_1 = __importDefault(require("../../utils/math/clamp"));
-/**
- * Timeline is an animation helper.
- */
-var Timeline = /** @class */ (function (_super) {
-    __extends(Timeline, _super);
-    function Timeline(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        // set default variables
-        _this._isPlaying = false;
-        _this._isReversed = false;
-        _this._isPaused = false;
-        _this._animationFrame = undefined;
-        _this._animationFrameLastTime = 0;
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    /**
-     * Get default properties
-     */
-    Timeline.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { duration: 1000, reset: false, destroyOnEnd: false });
-    };
-    Object.defineProperty(Timeline.prototype, "isPlaying", {
-        /**
-         * Check if timeline is playing
-         */
-        get: function () {
-            return typeof this._animationFrame !== 'undefined';
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Timeline.prototype, "isReversed", {
-        /**
-         * Check if timeline is reversed
-         */
-        get: function () {
-            return this._isReversed;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Timeline.prototype, "isPaused", {
-        /**
-         * Check if timeline is paused
-         */
-        get: function () {
-            return this._isPaused;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Play the timeline
-     */
-    Timeline.prototype.play = function () {
-        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
-     */
-    Timeline.prototype.reverse = function () {
-        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
-     */
-    Timeline.prototype.pause = function () {
-        if (this._destroyed) {
-            return;
-        }
-        this._isPaused = true;
-        if (this._animationFrame) {
-            window.cancelAnimationFrame(this._animationFrame);
-        }
-        this._animationFrame = undefined;
-    };
-    /**
-     * Start animation
-     */
-    Timeline.prototype._animate = function () {
-        // stop if animation is paused
-        if (this._isPaused) {
-            return;
-        }
-        var isReversed = this.isReversed;
-        // calculate difference between frames
-        var currentTime = +new Date();
-        var frameDiff = Math.abs(this._animationFrameLastTime - currentTime);
-        this._animationFrameLastTime = currentTime;
-        // calculate current progress
-        var progressIterator = frameDiff / this.prop.duration / (isReversed ? -1 : 1);
-        var progressTarget = (0, clamp_1.default)(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
-     */
-    Timeline.prototype._handleProgress = function () {
-        _super.prototype._handleProgress.call(this);
-        var 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
-     */
-    Timeline.prototype._destroy = function () {
-        this.pause();
-        _super.prototype._destroy.call(this);
-    };
-    return Timeline;
-}(StaticTimeline_1.StaticTimeline));
-exports.Timeline = Timeline;