ng-cw-v12/bundles/ng-cw-v12-carousel-list.umd.js

Angular UI component library

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
    typeof define === 'function' && define.amd ? define('ng-cw-v12/carousel-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"]["carousel-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 CarouselListComponent = /** @class */ (function () {
        function CarouselListComponent(eleRef, cdr) {
            var _this = this;
            this.eleRef = eleRef;
            this.cdr = cdr;
            this.ncTime = 1; //多少秒滚动一格
            this.ncRow = 1; //显示多少行
            this.liCount = 0; //计算
            this.liHeight = 0; //计算
            // 将事件处理函数定义为类的属性
            this.handleMouseEnter = function () {
                var ul = _this.eleRef.nativeElement.querySelector('ul');
                if (!ul)
                    return;
                ul.style.animationPlayState = 'paused';
                Array.from(ul.getElementsByTagName('li')).forEach(function (li) {
                    li.style.animationPlayState = 'paused';
                });
            };
            this.handleMouseLeave = function () {
                var ul = _this.eleRef.nativeElement.querySelector('ul');
                if (!ul)
                    return;
                ul.style.animationPlayState = 'running';
                Array.from(ul.getElementsByTagName('li')).forEach(function (li) {
                    li.style.animationPlayState = 'running';
                });
            };
        }
        CarouselListComponent.prototype.ngAfterViewInit = function () {
            this.initializeCarousel();
            this.setupMutationObserver();
        };
        CarouselListComponent.prototype.initializeCarousel = function () {
            var _this = this;
            var ul = this.eleRef.nativeElement.querySelector('ul');
            if (!ul)
                return;
            var liElements = Array.from(ul.getElementsByTagName('li')).filter(function (li) { return !li.classList.contains('cloned'); });
            if (liElements.length === 0)
                return;
            this.liCount = liElements.length;
            this.liHeight = liElements[0].offsetHeight;
            this.ncRow = this.ncRow <= this.liCount ? this.ncRow : this.liCount;
            // 清除之前可能添加的克隆元素
            var clonedElements = ul.querySelectorAll('.cloned');
            clonedElements.forEach(function (el) { return el.remove(); });
            // 添加新的克隆元素
            var copy = liElements.slice(0, this.ncRow).map(function (li) {
                var clonedLi = li.cloneNode(true);
                clonedLi.classList.add('cloned');
                return clonedLi;
            });
            copy.forEach(function (li) { return ul.appendChild(li); });
            // 重置动画
            ul.style.animation = 'none';
            ul.offsetHeight; // 触发重排
            ul.style.animation = "move calc(" + this.ncTime + " * " + this.liCount + " * 1s) steps(" + this.liCount + ") infinite";
            // 重置所有 li 的动画
            var allLis = ul.getElementsByTagName('li');
            Array.from(allLis).forEach(function (li) {
                li.style.animation = 'none';
                li.offsetHeight; // 触发重排
                li.style.animation = "liMove calc(" + _this.ncTime + " * 1s) infinite";
            });
            // 先移除旧的事件监听器，再添加新的
            ul.removeEventListener('mouseenter', this.handleMouseEnter);
            ul.removeEventListener('mouseleave', this.handleMouseLeave);
            ul.addEventListener('mouseenter', this.handleMouseEnter);
            ul.addEventListener('mouseleave', this.handleMouseLeave);
            //在操作完 DOM 后调用 detectChanges() 确保变更被正确检测，防止下面的错误，用setTimeout的话该组件存在闪烁的问题
            //ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '0'. Current value: '5'.. Find more at https://angular.io/errors/NG0100
            this.cdr.detectChanges();
        };
        CarouselListComponent.prototype.setupMutationObserver = function () {
            var _this = this;
            var ul = this.eleRef.nativeElement.querySelector('ul');
            if (!ul)
                return;
            this.observer = new MutationObserver(function () {
                // console.log('数据发生变化');
                _this.initializeCarousel();
            });
            this.observer.observe(ul, {
                // childList: true,//该项开启后非常卡顿，initializeCarousel会一直执行
                subtree: true,
                characterData: true
            });
        };
        CarouselListComponent.prototype.ngOnDestroy = function () {
            if (this.observer) {
                this.observer.disconnect();
            }
            // 使用类属性中定义的事件处理函数来移除监听器
            var ul = this.eleRef.nativeElement.querySelector('ul');
            if (ul) {
                ul.removeEventListener('mouseenter', this.handleMouseEnter);
                ul.removeEventListener('mouseleave', this.handleMouseLeave);
            }
        };
        return CarouselListComponent;
    }());
    CarouselListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: CarouselListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
    CarouselListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: CarouselListComponent, selector: "nc-carousel-list", inputs: { ncTime: "ncTime", ncRow: "ncRow" }, ngImport: i0__namespace, template: "<div class=\"carousel\" style=\"--liCount: {{liCount}};--liHeight: {{liHeight}};--speed: {{ncTime}};--row: {{ncRow}};\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["::ng-deep .carousel{height:calc(var(--liHeight) * 1px * var(--row));overflow:hidden}::ng-deep .carousel ul{margin:0;padding:0}::ng-deep .carousel ul li{list-style:none;cursor:pointer}@keyframes move{0%{transform:translate(0)}to{transform:translateY(calc(var(--liCount) * var(--liHeight) * -1px))}}@keyframes liMove{0%{transform:translate(0)}80%,to{transform:translateY(calc(var(--liHeight) * -1px))}}\n"] });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: CarouselListComponent, decorators: [{
                type: i0.Component,
                args: [{
                        selector: 'nc-carousel-list',
                        templateUrl: './carousel-list.component.html',
                        styleUrls: ['./carousel-list.component.less']
                    }]
            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { ncTime: [{
                    type: i0.Input
                }], ncRow: [{
                    type: i0.Input
                }] } });

    var NcCarouselListModule = /** @class */ (function () {
        function NcCarouselListModule() {
        }
        return NcCarouselListModule;
    }());
    NcCarouselListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcCarouselListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
    NcCarouselListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcCarouselListModule, declarations: [CarouselListComponent], exports: [CarouselListComponent] });
    NcCarouselListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcCarouselListModule, imports: [[]] });
    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcCarouselListModule, decorators: [{
                type: i0.NgModule,
                args: [{
                        declarations: [
                            CarouselListComponent
                        ],
                        imports: [],
                        exports: [
                            CarouselListComponent
                        ]
                    }]
            }] });

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

    exports.CarouselListComponent = CarouselListComponent;
    exports.NcCarouselListModule = NcCarouselListModule;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=ng-cw-v12-carousel-list.umd.js.map