react-teffex
Version:
Text Effects: Stateful React text effects for amazing websites
181 lines (180 loc) • 7.74 kB
JavaScript
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);
};
import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { randomise, setCharAt } from "../utils";
var Glitch = /** @class */ (function (_super) {
__extends(Glitch, _super);
function Glitch(props) {
var _this = _super.call(this, props) || this;
_this.start = 0;
_this.generateRandomValue = function () {
if (_this.props.alphabet) {
return _this.letters[randomise(_this.letters.length)];
}
else {
return randomise(2).toString();
}
};
_this.returnToNormalText = function (text) {
if (_this.props.reverse) {
text = setCharAt(text, text.length - _this.start, _this.props.text[text.length - _this.start]);
}
else {
text = setCharAt(text, _this.start, _this.props.text[_this.start]);
}
_this.start++;
return text;
};
_this.randomiseRemainingText = function (text) {
if (_this.props.reverse) {
for (var j = 0; j < text.length - _this.start; j++) {
text = setCharAt(text, j, _this.generateRandomValue());
}
}
else {
for (var j = _this.start; j < text.length; j++) {
text = setCharAt(text, j, _this.generateRandomValue());
}
}
return text;
};
_this.renderText = function () {
// If we reach the buffer, start returning the word
var text = _this.state.text;
if (_this.index >= _this.buffer) {
text = _this.returnToNormalText(text);
}
text = _this.randomiseRemainingText(text);
if (_this.index === _this.total) {
_this.setState({ hasAnimated: true });
_this.glitchCycleTimer = performance.now();
}
_this.index++;
_this.setState({
text: text,
});
_this.timer = performance.now();
};
_this.animate = function () {
if (performance.now() - _this.timer >= _this.speed) {
if (!_this.state.hasAnimated)
_this.renderText();
}
if (performance.now() - _this.glitchCycleTimer >= _this.glitchCycleSpeed) {
if (_this.state.hasAnimated && !_this.props.dontGlitch)
_this.glitch();
}
requestAnimationFrame(_this.animate);
};
_this.setGlitchTimers = function () {
_this.glitchCycleTimer = performance.now();
_this.glitchCycleSpeed = randomise(_this.glitchSpeed);
_this.glitchTimers = [_this.glitchCycleSpeed + randomise(100), 0, 0].map(function (_current, i, array) {
if (i == 2)
return (array[i] += array[i - 1] ? array[i - 1] + randomise(300) : 0);
return (array[i] += array[i - 1] ? array[i - 1] + randomise(100) : 0);
});
};
_this.state = {
text: props.text,
hasAnimated: false,
};
_this.isGlitched = false;
_this.timer = performance.now();
_this.glitchSpeed = _this.props.glitchSpeed ? _this.props.glitchSpeed : 5000;
_this.setGlitchTimers();
_this.glitchWord = "";
_this.glitchMem = "";
_this.glitchLetter = 0;
_this.index = 0;
_this.speed = _this.props.speed ? _this.props.speed : 50;
_this.buffer = _this.props.buffer ? _this.props.buffer : 5;
_this.total = props.text.length + _this.buffer;
_this.style = _this.props.style ? _this.props.style : {};
if (_this.props.extendedAlphabet) {
_this.alph =
"aàáâäæãåābcçćčdeèéêëēėęfghiîïíīįìjklłmnñńoôöòóœøōõpqrsßśštuûüùúūvwxyÿzžźż";
}
else {
_this.alph = "abcdefghijklmnopqrstuvwxyz";
}
_this.letters = _this.alph
.split("")
.concat(_this.alph.toUpperCase().split(""));
return _this;
}
Glitch.prototype.glitch = function () {
if (this.state.text === this.props.text) {
this.glitchWord = this.state.text;
this.glitchLetter = randomise(this.glitchWord.length);
// Keep glitched letter in memory
this.glitchMem = this.glitchWord[this.glitchLetter];
// Glitch word
var newWord = setCharAt(this.glitchWord, this.glitchLetter, this.generateRandomValue());
this.setState({ text: newWord });
}
if (performance.now() - this.glitchCycleTimer >= this.glitchTimers[0] &&
this.glitchTimers[0] !== 0) {
var newWord = setCharAt(this.glitchWord, this.glitchLetter, this.glitchMem);
this.setState({ text: newWord });
this.glitchTimers[0] = 0;
}
if (performance.now() - this.glitchCycleTimer >= this.glitchTimers[1] &&
this.glitchTimers[1] !== 0) {
var newWord = setCharAt(this.glitchWord, this.glitchLetter, this.generateRandomValue());
this.setState({ text: newWord });
this.glitchTimers[1] = 0;
}
if (performance.now() - this.glitchCycleTimer >= this.glitchTimers[2]) {
var newWord = setCharAt(this.glitchWord, this.glitchLetter, this.glitchMem);
this.setState({ text: newWord });
this.setGlitchTimers();
}
};
Glitch.prototype.componentDidMount = function () {
// Randomise the text for the initial display
var text = this.state.text;
text = this.randomiseRemainingText(text);
this.setState({ text: text });
// start animation
this.animate();
};
Glitch.prototype.componentWillUnmount = function () { };
Glitch.prototype.render = function () {
var _this = this;
return (_jsx("span", __assign({ style: this.style, onMouseEnter: function (e) {
_this.props.onMouseEnter && _this.props.onMouseEnter(e);
}, onMouseLeave: function (e) {
_this.props.onMouseLeave && _this.props.onMouseLeave(e);
}, onClick: function (e) {
_this.props.onClick && _this.props.onClick(e);
}, id: this.props.id && this.props.id }, { children: this.state.text }), void 0));
};
return Glitch;
}(React.Component));
export default Glitch;