ng-cw-v12
Version:
Angular UI component library
250 lines (241 loc) • 13.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/auto-scroll-text', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["auto-scroll-text"] = {}), global.ng.core));
})(this, (function (exports, i0) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var AutoScrollTextComponent = /** @class */ (function () {
function AutoScrollTextComponent() {
this.position = 0;
this.isPaused = false;
this.lastTimestamp = 0;
this.pauseStartTime = 0;
// 滚动文本
this._text = '';
// 滚动速度，单位为像素/秒
this.ncSpeed = 50;
// 是否开启无缝滚动
this._loop = false;
// 开启无缝滚动时，间距，单位为像素
this.ncGap = 0;
// 是否启用鼠标悬停暂停滚动
this._pause = false;
}
Object.defineProperty(AutoScrollTextComponent.prototype, "ncText", {
get: function () {
return this._text;
},
set: function (val) {
var _this = this;
this._text = val;
setTimeout(function () {
if (_this.textContainer && _this.scrollText) {
_this.resetScroll();
}
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(AutoScrollTextComponent.prototype, "ncLoop", {
get: function () {
return this._loop;
},
set: function (val) {
this._loop = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(AutoScrollTextComponent.prototype, "ncPause", {
get: function () {
return this._pause;
},
set: function (val) {
this._pause = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
AutoScrollTextComponent.prototype.ngOnInit = function () { };
AutoScrollTextComponent.prototype.ngOnDestroy = function () {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
}
};
// 鼠标移入事件处理
AutoScrollTextComponent.prototype.onMouseEnter = function () {
if (this.ncPause) {
this.isPaused = true;
this.pauseStartTime = performance.now();
}
};
// 鼠标移出事件处理
AutoScrollTextComponent.prototype.onMouseLeave = function () {
if (this.ncPause && this.isPaused) {
this.isPaused = false;
var pauseDuration = performance.now() - this.pauseStartTime;
this.lastTimestamp += pauseDuration;
}
};
AutoScrollTextComponent.prototype.startScrolling = function () {
var _this = this;
// 检查文本是否需要滚动
if (!this.textContainer || !this.scrollText)
return;
var containerWidth = this.textContainer.nativeElement.offsetWidth;
var textWidth = this.scrollText.nativeElement.offsetWidth;
// 只有当文本宽度大于容器宽度时才滚动
if (textWidth > containerWidth) {
this.lastTimestamp = 0;
var animate_1 = function (timestamp) {
if (!_this.lastTimestamp)
_this.lastTimestamp = timestamp;
// 当不处于暂停状态时才计算位移
if (!_this.isPaused) {
var elapsed = timestamp - _this.lastTimestamp;
// 根据时间和速度计算位移
_this.position += (elapsed / 1000) * _this.ncSpeed;
// 当文本的最后一个字符出现在视窗内时创建复制文本实现无缝衔接
if (_this.position >= textWidth - containerWidth) {
if (_this.ncLoop) {
// 让文本平滑地重新开始滚动，而不是突然跳回开始位置
// 将第二份文本复制品拼接在原文本后面，实现无缝衔接效果
if (!_this.scrollText.nativeElement.querySelector('.duplicate-text')) {
var duplicateText = document.createElement('span');
duplicateText.classList.add('duplicate-text');
duplicateText.textContent = _this.ncText;
duplicateText.style.marginLeft = _this.ncGap + "px";
_this.scrollText.nativeElement.appendChild(duplicateText);
}
}
else {
// 不开启无缝滚动时，当文本的最后一个字符出现在视窗内时重新开始
_this.position = 0;
}
}
// 实现真正的无缝滚动：当滚动位置超过第一段文本宽度时，重置位置并保持视觉连续
if (_this.ncLoop && _this.position >= textWidth + _this.ncGap) {
// 重置位置，但保持视觉效果不变
_this.position = 0;
// 移除复制的文本元素
var duplicateText = _this.scrollText.nativeElement.querySelector('.duplicate-text');
if (duplicateText) {
_this.scrollText.nativeElement.removeChild(duplicateText);
}
// 立即重新设置transform，避免闪烁
_this.scrollText.nativeElement.style.transform = 'translateX(0)';
// 立即创建新的复制文本
var newDuplicateText = document.createElement('span');
newDuplicateText.classList.add('duplicate-text');
newDuplicateText.textContent = _this.ncText;
newDuplicateText.style.marginLeft = _this.ncGap + "px";
_this.scrollText.nativeElement.appendChild(newDuplicateText);
}
else {
// 应用位移
_this.scrollText.nativeElement.style.transform = "translateX(-" + _this.position + "px)";
}
// 更新时间戳
_this.lastTimestamp = timestamp;
}
_this.animationId = requestAnimationFrame(animate_1);
};
this.animationId = requestAnimationFrame(animate_1);
}
};
AutoScrollTextComponent.prototype.resetScroll = function () {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
}
this.position = 0;
this.isPaused = false;
if (this.scrollText) {
this.scrollText.nativeElement.style.transform = 'translateX(0)';
// 清除可能存在的重复文本
var duplicateText = this.scrollText.nativeElement.querySelector('.duplicate-text');
if (duplicateText) {
this.scrollText.nativeElement.removeChild(duplicateText);
}
}
this.startScrolling();
};
return AutoScrollTextComponent;
}());
AutoScrollTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: AutoScrollTextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
AutoScrollTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AutoScrollTextComponent, selector: "nc-auto-scroll-text", inputs: { ncText: "ncText", ncSpeed: "ncSpeed", ncLoop: "ncLoop", ncGap: "ncGap", ncPause: "ncPause" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "textContainer", first: true, predicate: ["textContainer"], descendants: true }, { propertyName: "scrollText", first: true, predicate: ["scrollText"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"auto-scroll-container\" #textContainer>\n <div class=\"scroll-text\" #scrollText>\n <span>{{ ncText }}</span>\n </div>\n</div>\n", styles: [".auto-scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;white-space:nowrap}\n"] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: AutoScrollTextComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-auto-scroll-text',
templateUrl: './auto-scroll-text.component.html',
styleUrls: ['./auto-scroll-text.component.less']
}]
}], ctorParameters: function () { return []; }, propDecorators: { textContainer: [{
type: i0.ViewChild,
args: ['textContainer']
}], scrollText: [{
type: i0.ViewChild,
args: ['scrollText']
}], ncText: [{
type: i0.Input
}], ncSpeed: [{
type: i0.Input
}], ncLoop: [{
type: i0.Input
}], ncGap: [{
type: i0.Input
}], ncPause: [{
type: i0.Input
}], onMouseEnter: [{
type: i0.HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: i0.HostListener,
args: ['mouseleave']
}] } });
var NcAutoScrollTextModule = /** @class */ (function () {
function NcAutoScrollTextModule() {
}
return NcAutoScrollTextModule;
}());
NcAutoScrollTextModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAutoScrollTextModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcAutoScrollTextModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAutoScrollTextModule, declarations: [AutoScrollTextComponent], exports: [AutoScrollTextComponent] });
NcAutoScrollTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAutoScrollTextModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAutoScrollTextModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
AutoScrollTextComponent
],
imports: [],
exports: [
AutoScrollTextComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.AutoScrollTextComponent = AutoScrollTextComponent;
exports.NcAutoScrollTextModule = NcAutoScrollTextModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-auto-scroll-text.umd.js.map