vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
43 lines • 1.78 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.wrapLetters = wrapLetters;
var lodash_split_1 = __importDefault(require("lodash.split"));
/**
* Wraps each letter in every word inside the container with the specified HTML tag and class name.
*/
function wrapLetters(_a) {
var wordsMeta = _a.wordsMeta, classname = _a.classname, tagName = _a.tagName;
var lettersMeta = [];
// Iterate over each word to wrap its letters
wordsMeta.forEach(function (wordMeta) {
var textNode = wordMeta.element.childNodes[0];
if (!textNode) {
return;
}
var text = textNode.textContent;
if (!text) {
return;
}
// Split the word into individual letters
var splitLetters = (0, lodash_split_1.default)(text, '');
splitLetters.forEach(function (letterContents) {
var element = document.createElement(tagName);
element.style.display = 'inline-block';
element.classList.add(classname);
element.appendChild(document.createTextNode(letterContents));
// Append the letter element to the word's container
wordMeta.element.append(element);
var letter = { element: element };
// Add the letter to the word's letters array and the global letters array
wordMeta.letters.push(letter);
lettersMeta.push(letter);
});
// Remove the original text node after wrapping the letters
textNode.remove();
});
return { lettersMeta: lettersMeta };
}
//# sourceMappingURL=wrapLetters.js.map