ng-cw-v12/fesm2015/ng-cw-v12-typing-text.js

Angular UI component library

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

class TypingTextComponent {
    constructor(elementRef) {
        this.elementRef = elementRef;
        /** 展示的文本内容 */
        this._text = '';
        /** 每个字符之间的延迟 */
        this.ncDelayMultiple = 100;
        /** 每个字符之间的间距 */
        this.ncGap = 0;
        /** 延迟 */
        this.ncDelay = 0;
        /** 是否在视图可见时才开始动画 */
        this._startOnView = false;
        /** 是否只执行一次动画 */
        this._once = false;
        this.displayedText = '';
        this.observer = null;
        this.typingInterval = null;
        this.timeout = null;
    }
    set ncText(value) {
        this._text = value;
        setTimeout(() => {
            this.start();
        });
    }
    get ncText() {
        return this._text;
    }
    set ncStartOnView(val) {
        this._startOnView = val !== null && val !== undefined && val !== false && val !== 'false';
    }
    get ncStartOnView() {
        return this._startOnView;
    }
    set ncOnce(val) {
        this._once = val !== null && val !== undefined && val !== false && val !== 'false';
    }
    get ncOnce() {
        return this._once;
    }
    ngOnInit() { }
    ngOnDestroy() {
        this.clear();
    }
    start() {
        this.clear();
        if (!this.ncStartOnView) {
            this.timeout = setTimeout(() => {
                this.startTyping();
            }, this.ncDelay);
        }
        else {
            this.setupIntersectionObserver();
        }
    }
    clear() {
        if (this.observer) {
            this.observer.disconnect();
        }
        if (this.typingInterval) {
            clearInterval(this.typingInterval);
        }
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
    }
    setupIntersectionObserver() {
        this.observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                this.timeout = setTimeout(() => {
                    this.startTyping();
                }, this.ncDelay);
                if (this.ncOnce) {
                    if (this.observer) {
                        this.observer.disconnect();
                    }
                }
            }
            else if (!this.ncOnce) {
                this.endTyping();
            }
        }, { threshold: 0.1 });
        this.observer.observe(this.elementRef.nativeElement);
    }
    startTyping() {
        let i = 0;
        this.typingInterval = setInterval(() => {
            if (i < this.ncText.length) {
                this.displayedText = this.ncText.substring(0, i + 1);
                i++;
            }
            else {
                clearInterval(this.typingInterval);
            }
        }, this.ncDelayMultiple);
    }
    endTyping() {
        //若执行动画（startTyping）内部正在执行，则清除动画
        if (this.typingInterval) {
            clearInterval(this.typingInterval);
        }
        //若存在ncDelay，离开视图后，进入动画（startTyping）可能还未执行，则需要清除timeout
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        //隐藏显示的文本
        this.displayedText = '';
    }
}
TypingTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TypingTextComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
TypingTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TypingTextComponent, selector: "nc-typing-text", inputs: { ncText: "ncText", ncDelayMultiple: "ncDelayMultiple", ncGap: "ncGap", ncDelay: "ncDelay", ncStartOnView: "ncStartOnView", ncOnce: "ncOnce" }, ngImport: i0, template: "<div class=\"typing-text-container\" style=\"--gap: {{ncGap}}px;\">\r\n    {{ displayedText }}\r\n</div>", styles: [".typing-text-container{width:-moz-fit-content;width:fit-content;letter-spacing:var(--gap)}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TypingTextComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nc-typing-text',
                    templateUrl: './typing-text.component.html',
                    styleUrls: ['./typing-text.component.less']
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncText: [{
                type: Input
            }], ncDelayMultiple: [{
                type: Input
            }], ncGap: [{
                type: Input
            }], ncDelay: [{
                type: Input
            }], ncStartOnView: [{
                type: Input
            }], ncOnce: [{
                type: Input
            }] } });

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

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

export { NcTypingTextModule, TypingTextComponent };
//# sourceMappingURL=ng-cw-v12-typing-text.js.map