ng-cw-v12
Version:
Angular UI component library
170 lines (161 loc) • 9.12 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/scroll-list', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["scroll-list"] = {}), 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 ScrollListComponent = /** @class */ (function () {
function ScrollListComponent(eleRef, cdr) {
this.eleRef = eleRef;
this.cdr = cdr;
this.ncTime = 1; //多少秒滚动一格
this.pauseMode = false;
}
Object.defineProperty(ScrollListComponent.prototype, "ncPause", {
set: function (value) {
this.pauseMode = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
ScrollListComponent.prototype.ngAfterViewInit = function () {
this.initializeScrollList();
this.setupMutationObserver();
};
ScrollListComponent.prototype.initializeScrollList = function () {
var _this = this;
var _a;
var scoll = this.eleRef.nativeElement.querySelector('.scroll');
// 清空现有内容
while (scoll.childNodes.length > 1) {
scoll.removeChild(scoll.lastChild);
}
// 克隆并添加新内容
var clone = (_a = scoll.firstElementChild) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
if (clone) {
scoll.appendChild(clone);
}
var scollList = this.eleRef.nativeElement.querySelectorAll('.scroll-list');
var eleCount = scollList[0].childElementCount;
// 重置动画
scollList.forEach(function (element) {
element.style.animation = 'none';
element.offsetHeight; // 触发重排
element.style.animation = "scroll calc(" + _this.ncTime + " * " + eleCount + " * 1s) linear infinite";
});
if (this.pauseMode) {
// 移除旧的事件监听器
if (this.mouseenterHandler) {
scoll.removeEventListener('mouseenter', this.mouseenterHandler);
}
if (this.mouseleaveHandler) {
scoll.removeEventListener('mouseleave', this.mouseleaveHandler);
}
// 创建新的事件处理函数
this.mouseenterHandler = function () {
scollList[0].style.animationPlayState = 'paused';
scollList[1].style.animationPlayState = 'paused';
};
this.mouseleaveHandler = function () {
scollList[0].style.animationPlayState = 'running';
scollList[1].style.animationPlayState = 'running';
};
// 添加新的事件监听器
scoll.addEventListener('mouseenter', this.mouseenterHandler);
scoll.addEventListener('mouseleave', this.mouseleaveHandler);
//mouseleave：仅在鼠标指针离开被选元素时触发，不会因为鼠标移动到任何子元素上而触发；不会向上冒泡到父元素。
//mouseout：会在鼠标指针离开被选元素或其任何子元素时触发；会冒泡到父元素，如果父元素上绑定了mouseout事件监听器，那么鼠标在子元素上移动也可能触发该监听器。
}
this.cdr.detectChanges();
};
ScrollListComponent.prototype.setupMutationObserver = function () {
var _this = this;
var list = this.eleRef.nativeElement.querySelector('#scroll-container');
if (!list)
return;
this.observer = new MutationObserver(function () {
// console.log('数据发生变化');
_this.initializeScrollList();
});
this.observer.observe(list, {
// childList: true,//该项开启后非常卡顿，initializeCarousel会一直执行
subtree: true,
characterData: true
});
};
ScrollListComponent.prototype.ngOnDestroy = function () {
// 在组件销毁时清理事件监听器
var scoll = this.eleRef.nativeElement.querySelector('.scroll');
if (scoll) {
if (this.mouseenterHandler) {
scoll.removeEventListener('mouseenter', this.mouseenterHandler);
}
if (this.mouseleaveHandler) {
scoll.removeEventListener('mouseleave', this.mouseleaveHandler);
}
}
if (this.observer) {
this.observer.disconnect();
}
};
return ScrollListComponent;
}());
ScrollListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ScrollListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
ScrollListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ScrollListComponent, selector: "nc-scroll-list", inputs: { ncTime: "ncTime", ncPause: "ncPause" }, ngImport: i0__namespace, template: "<div class=\"scroll\" id=\"scroll-container\">\r\n <div class=\"scroll-list\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".scroll{width:100%;height:100%;overflow:hidden}@keyframes scroll{0%{transform:translateY(0)}to{transform:translateY(-100%)}}\n"] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ScrollListComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-scroll-list',
templateUrl: './scroll-list.component.html',
styleUrls: ['./scroll-list.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { ncTime: [{
type: i0.Input
}], ncPause: [{
type: i0.Input
}] } });
var NcScrollListModule = /** @class */ (function () {
function NcScrollListModule() {
}
return NcScrollListModule;
}());
NcScrollListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcScrollListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcScrollListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcScrollListModule, declarations: [ScrollListComponent], exports: [ScrollListComponent] });
NcScrollListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcScrollListModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcScrollListModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
ScrollListComponent
],
imports: [],
exports: [
ScrollListComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcScrollListModule = NcScrollListModule;
exports.ScrollListComponent = ScrollListComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-scroll-list.umd.js.map