vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
55 lines • 2.63 kB
JavaScript
/**
* Wraps each word inside the container in an HTML element with the specified tag and class.
*/
export function wrapWords({ container, classname, tagName }) {
const whitespace = String.fromCharCode(32); // ASCII for space
const wordsMeta = [];
/**
* Recursively processes each child node within the container to wrap words.
*/
function recursive(node) {
var _a, _b;
// If the node is an element, process its children
if (node instanceof HTMLElement || node instanceof DocumentFragment) {
if ('tagName' in node && node.tagName !== 'BR') {
// eslint-disable-next-line no-param-reassign
node.style.display = 'inline-block';
}
const children = [...Array.from(node.childNodes)];
children.forEach((child) => recursive(child));
return;
}
// If the node is a text node, split it into words
if (node.nodeType === 3) {
const nodeParent = (_a = node.parentElement) !== null && _a !== void 0 ? _a : container;
const text = (_b = node.nodeValue) !== null && _b !== void 0 ? _b : '';
const splitWords = text.split(whitespace);
// Handle case where node contains only whitespace
if (text === whitespace) {
nodeParent === null || nodeParent === void 0 ? void 0 : nodeParent.insertBefore(document.createTextNode(whitespace), node);
node.remove();
return;
}
// Wrap each word in an element and insert it into the DOM
splitWords.forEach((wordContents, index) => {
if (wordContents) {
const element = document.createElement(tagName);
element.style.display = 'inline-block';
element.classList.add(classname);
element.appendChild(document.createTextNode(wordContents));
wordsMeta.push({ element, letters: [] });
nodeParent === null || nodeParent === void 0 ? void 0 : nodeParent.insertBefore(element, node);
}
// Add a whitespace between words, except after the last word
if (index < splitWords.length - 1) {
nodeParent === null || nodeParent === void 0 ? void 0 : nodeParent.insertBefore(document.createTextNode(whitespace), node);
}
});
node.remove();
}
}
// Begin processing the container
recursive(container);
return wordsMeta;
}
//# sourceMappingURL=wrapWords.js.map