vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
126 lines • 4.74 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.MarqueeNodes = void 0;
var env_1 = require("../../../internal/env");
var isFiniteNumber_1 = require("../../../internal/isFiniteNumber");
var MarqueeNodes = /** @class */ (function () {
function MarqueeNodes(_ctx) {
this._ctx = _ctx;
/** Initial child nodes of the container */
this._initial = [];
/** Elements array */
this._elements = [];
}
Object.defineProperty(MarqueeNodes.prototype, "elements", {
/** Elements array */
get: function () {
return this._elements;
},
enumerable: false,
configurable: true
});
/* Save initial nodes */
MarqueeNodes.prototype.save = function () {
var container = this._ctx.props.container;
this._initial = __spreadArray([], Array.from(container.childNodes), true);
};
/**
* Wraps the first text node in the container in a span if no other elements exist.
*/
MarqueeNodes.prototype.wrap = function () {
var container = this._ctx.props.container;
var nodes = this._initial;
nodes.forEach(function (node) {
var _a, _b;
if (node.nodeType === 3) {
if (((_b = (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) === 0) {
return;
}
var wrapper = env_1.doc.createElement('span');
var style = wrapper.style;
style.position = 'relative';
style.display = 'block';
style.width = 'max-content';
style.whiteSpace = 'nowrap';
container.insertBefore(wrapper, node);
wrapper.appendChild(node);
}
});
this._elements = Array.from(container.children);
};
/**
* Adds necessary styles to all elements.
*/
MarqueeNodes.prototype.applyStyles = function () {
var _this = this;
this._elements.forEach(function (element, index) {
return _this._applyElementStyles(element, index !== 0);
});
};
/**
* Adds necessary styles to a given element.
*/
MarqueeNodes.prototype._applyElementStyles = function (element, isAbsolute) {
var _a = this._ctx, isVertical = _a.isVertical, props = _a.props;
var el = element;
var style = el.style;
style.position = isAbsolute ? 'absolute' : 'relative';
style.top = isAbsolute && !isVertical ? '50%' : '0';
style.left = isAbsolute && isVertical ? '50%' : '0';
style.willChange = props.hasWillChange ? 'transform' : '';
style.flexShrink = '0';
if (isVertical) {
style.height = style.height || 'max-content';
}
else {
style.width = style.width || 'max-content';
}
};
/**
* Clone elements
*/
MarqueeNodes.prototype.cloneAll = function (times) {
var _this = this;
if (!(0, isFiniteNumber_1.isFiniteNumber)(times) || times <= 0) {
return;
}
var elements = __spreadArray([], this.elements, true);
var container = this._ctx.props.container;
for (var i = 0; i < times; i += 1) {
elements.forEach(function (element) {
var copy = element.cloneNode(true);
_this._applyElementStyles(copy, true);
container.appendChild(copy);
});
}
// Update element references after cloning
this._elements = Array.from(container.children);
};
/** Restores the initial nodes */
MarqueeNodes.prototype.destroy = function () {
var container = this._ctx.props.container;
this._initial.forEach(function (node) { return container.appendChild(node); });
this._elements.forEach(function (element) {
var style = element.style;
style.position = '';
style.top = '';
style.left = '';
style.flexShrink = '';
style.width = '';
style.transform = '';
style.willChange = '';
});
};
return MarqueeNodes;
}());
exports.MarqueeNodes = MarqueeNodes;
//# sourceMappingURL=index.js.map