ng-cw-v12/fesm2015/ng-cw-v12-scroll-list.js

Angular UI component library

import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';

class ScrollListComponent {
    constructor(eleRef, cdr) {
        this.eleRef = eleRef;
        this.cdr = cdr;
        this.ncTime = 1; //多少秒滚动一格
        this.pauseMode = false;
    }
    set ncPause(value) {
        this.pauseMode = value !== null && value !== undefined && value !== false && value !== 'false';
    }
    ngAfterViewInit() {
        this.initializeScrollList();
        this.setupMutationObserver();
    }
    initializeScrollList() {
        var _a;
        const scoll = this.eleRef.nativeElement.querySelector('.scroll');
        // 清空现有内容
        while (scoll.childNodes.length > 1) {
            scoll.removeChild(scoll.lastChild);
        }
        // 克隆并添加新内容
        const clone = (_a = scoll.firstElementChild) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
        if (clone) {
            scoll.appendChild(clone);
        }
        const scollList = this.eleRef.nativeElement.querySelectorAll('.scroll-list');
        let eleCount = scollList[0].childElementCount;
        // 重置动画
        scollList.forEach(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 = () => {
                scollList[0].style.animationPlayState = 'paused';
                scollList[1].style.animationPlayState = 'paused';
            };
            this.mouseleaveHandler = () => {
                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();
    }
    setupMutationObserver() {
        const list = this.eleRef.nativeElement.querySelector('#scroll-container');
        if (!list)
            return;
        this.observer = new MutationObserver(() => {
            // console.log('数据发生变化');
            this.initializeScrollList();
        });
        this.observer.observe(list, {
            // childList: true,//该项开启后非常卡顿，initializeCarousel会一直执行
            subtree: true,
            characterData: true
        });
    }
    ngOnDestroy() {
        // 在组件销毁时清理事件监听器
        const 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();
        }
    }
}
ScrollListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ScrollListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
ScrollListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ScrollListComponent, selector: "nc-scroll-list", inputs: { ncTime: "ncTime", ncPause: "ncPause" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ScrollListComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nc-scroll-list',
                    templateUrl: './scroll-list.component.html',
                    styleUrls: ['./scroll-list.component.less']
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ncTime: [{
                type: Input
            }], ncPause: [{
                type: Input
            }] } });

class NcScrollListModule {
}
NcScrollListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcScrollListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcScrollListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcScrollListModule, declarations: [ScrollListComponent], exports: [ScrollListComponent] });
NcScrollListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcScrollListModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcScrollListModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        ScrollListComponent
                    ],
                    imports: [],
                    exports: [
                        ScrollListComponent
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { NcScrollListModule, ScrollListComponent };
//# sourceMappingURL=ng-cw-v12-scroll-list.js.map