ng-cw-v12
Version:
Angular UI component library
237 lines (228 loc) • 12 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/flip-text', ['exports', '@angular/core', '@angular/animations', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["flip-text"] = {}), global.ng.core, global.ng.animations, global.ng.common));
})(this, (function (exports, i0, animations, i1) { '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 i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var FlipTextComponent = /** @class */ (function () {
function FlipTextComponent(elementRef) {
this.elementRef = elementRef;
/** 展示的文本内容 */
this._text = '';
/** 每个字符动画持续时间 */
this.ncDuration = 500;
/** 每个字符之间的延迟 */
this.ncDelayMultiple = 80;
/** 每个字符之间的间距 */
this.ncGap = 0;
/** 延迟 */
this.ncDelay = 0;
/** 是否在视图可见时才开始动画 */
this._startOnView = false;
/** 是否只执行一次动画 */
this._once = false;
this.characters = [];
this.observer = null;
this.timeout = null;
}
Object.defineProperty(FlipTextComponent.prototype, "ncText", {
get: function () {
return this._text;
},
set: function (value) {
var _this = this;
this._text = value;
setTimeout(function () {
_this.start();
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(FlipTextComponent.prototype, "ncStartOnView", {
get: function () {
return this._startOnView;
},
set: function (val) {
this._startOnView = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(FlipTextComponent.prototype, "ncOnce", {
get: function () {
return this._once;
},
set: function (val) {
this._once = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
FlipTextComponent.prototype.ngOnInit = function () { };
FlipTextComponent.prototype.ngOnDestroy = function () {
this.clear();
};
FlipTextComponent.prototype.start = function () {
var _this = this;
this.clear();
if (!this.ncStartOnView) {
this.processText();
this.timeout = setTimeout(function () {
_this.startAnimation();
}, this.ncDelay);
}
else {
this.setupIntersectionObserver();
}
};
FlipTextComponent.prototype.clear = function () {
if (this.observer) {
this.observer.disconnect();
}
if (this.timeout) {
clearTimeout(this.timeout);
}
};
FlipTextComponent.prototype.setupIntersectionObserver = function () {
var _this = this;
this.observer = new IntersectionObserver(function (entries) {
if (entries[0].isIntersecting) {
_this.processText();
_this.timeout = setTimeout(function () {
_this.startAnimation();
}, _this.ncDelay);
if (_this.ncOnce) {
if (_this.observer) {
_this.observer.disconnect();
}
}
}
else if (!_this.ncOnce) {
_this.endAnimation();
}
}, { threshold: 0.1 });
this.observer.observe(this.elementRef.nativeElement);
};
FlipTextComponent.prototype.processText = function () {
var _this = this;
this.characters = this.ncText.split('').map(function (char, i) { return ({
char: char,
state: 'hidden',
delay: i * _this.ncDelayMultiple
}); });
};
FlipTextComponent.prototype.startAnimation = function () {
this.characters.forEach(function (char) {
char.state = 'visible';
});
};
FlipTextComponent.prototype.endAnimation = function () {
//若存在ncDelay，离开视图后，startAnimation可能还未执行，则需要清除timeout
if (this.timeout) {
clearTimeout(this.timeout);
}
//隐藏显示的文本
this.characters.forEach(function (char) {
char.state = 'hidden';
});
};
return FlipTextComponent;
}());
FlipTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FlipTextComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
FlipTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FlipTextComponent, selector: "nc-flip-text", inputs: { ncText: "ncText", ncDuration: "ncDuration", ncDelayMultiple: "ncDelayMultiple", ncGap: "ncGap", ncDelay: "ncDelay", ncStartOnView: "ncStartOnView", ncOnce: "ncOnce" }, ngImport: i0__namespace, template: "<div class=\"flip-text-container gap-x\" style=\"--gap: {{ncGap}}px;\">\r\n <ng-container *ngFor=\"let char of characters; let i = index\">\r\n <span [@flipState]=\"{value: char.state, params: {duration: ncDuration, delay: char.delay}}\"\r\n class=\"origin-center drop-shadow-sm flip-span\" [innerHTML]=\"char.char === ' ' ? ' ' : char.char\"></span>\r\n </ng-container>\r\n</div>", styles: [":host{display:block}.flip-text-container{width:-moz-fit-content;width:fit-content}.gap-x>*+*{margin-left:var(--gap)}.origin-center{transform-origin:center}.drop-shadow-sm{filter:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.flip-span{display:inline-block;transform-origin:center center;perspective:1000px}\n"], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
animations.trigger('flipState', [
animations.state('hidden', animations.style({
transform: 'rotateX(-90deg) scaleY(0)',
opacity: 0
})),
animations.state('visible', animations.style({
transform: 'rotateX(0) scaleY(1)',
opacity: 1
})),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms cubic-bezier(0.33, 1, 0.68, 1)')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms'))
])
] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: FlipTextComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-flip-text',
templateUrl: './flip-text.component.html',
styleUrls: ['./flip-text.component.less'],
animations: [
animations.trigger('flipState', [
animations.state('hidden', animations.style({
transform: 'rotateX(-90deg) scaleY(0)',
opacity: 0
})),
animations.state('visible', animations.style({
transform: 'rotateX(0) scaleY(1)',
opacity: 1
})),
animations.transition('hidden => visible', animations.animate('{{duration}}ms {{delay}}ms cubic-bezier(0.33, 1, 0.68, 1)')),
animations.transition('visible => hidden', animations.animate('{{duration}}ms'))
])
]
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { ncText: [{
type: i0.Input
}], ncDuration: [{
type: i0.Input
}], ncDelayMultiple: [{
type: i0.Input
}], ncGap: [{
type: i0.Input
}], ncDelay: [{
type: i0.Input
}], ncStartOnView: [{
type: i0.Input
}], ncOnce: [{
type: i0.Input
}] } });
var NcFlipTextModule = /** @class */ (function () {
function NcFlipTextModule() {
}
return NcFlipTextModule;
}());
NcFlipTextModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcFlipTextModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcFlipTextModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcFlipTextModule, declarations: [FlipTextComponent], imports: [i1.CommonModule], exports: [FlipTextComponent] });
NcFlipTextModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcFlipTextModule, imports: [[i1.CommonModule]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcFlipTextModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
FlipTextComponent
],
imports: [i1.CommonModule],
exports: [
FlipTextComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.FlipTextComponent = FlipTextComponent;
exports.NcFlipTextModule = NcFlipTextModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-flip-text.umd.js.map