vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
68 lines • 3.23 kB
JavaScript
;
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.wrapWords = wrapWords;
/**
* Wraps each word inside the container in an HTML element with the specified tag and class.
*/
function wrapWords(_a) {
var container = _a.container, classname = _a.classname, tagName = _a.tagName;
var whitespace = String.fromCharCode(32); // ASCII for space
var 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';
}
var children = __spreadArray([], Array.from(node.childNodes), true);
children.forEach(function (child) { return recursive(child); });
return;
}
// If the node is a text node, split it into words
if (node.nodeType === 3) {
var nodeParent_1 = (_a = node.parentElement) !== null && _a !== void 0 ? _a : container;
var text = (_b = node.nodeValue) !== null && _b !== void 0 ? _b : '';
var splitWords_1 = text.split(whitespace);
// Handle case where node contains only whitespace
if (text === whitespace) {
nodeParent_1 === null || nodeParent_1 === void 0 ? void 0 : nodeParent_1.insertBefore(document.createTextNode(whitespace), node);
node.remove();
return;
}
// Wrap each word in an element and insert it into the DOM
splitWords_1.forEach(function (wordContents, index) {
if (wordContents) {
var element = document.createElement(tagName);
element.style.display = 'inline-block';
element.classList.add(classname);
element.appendChild(document.createTextNode(wordContents));
wordsMeta.push({ element: element, letters: [] });
nodeParent_1 === null || nodeParent_1 === void 0 ? void 0 : nodeParent_1.insertBefore(element, node);
}
// Add a whitespace between words, except after the last word
if (index < splitWords_1.length - 1) {
nodeParent_1 === null || nodeParent_1 === void 0 ? void 0 : nodeParent_1.insertBefore(document.createTextNode(whitespace), node);
}
});
node.remove();
}
}
// Begin processing the container
recursive(container);
return wordsMeta;
}
//# sourceMappingURL=wrapWords.js.map