ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
480 lines (473 loc) • 13.5 kB
JavaScript
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { InjectionToken, Directive, NgZone, ElementRef, Optional, Inject, Input, NgModule } from '@angular/core';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
/**
* @fileoverview added by tsickle
* Generated from: nz-wave-renderer.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzWaveRenderer = /** @class */ (function () {
function NzWaveRenderer(triggerElement, ngZone, insertExtraNode) {
var _this = this;
this.triggerElement = triggerElement;
this.ngZone = ngZone;
this.insertExtraNode = insertExtraNode;
this.waveTransitionDuration = 400;
this.lastTime = 0;
this.platform = new Platform();
this.onClick = (/**
* @param {?} event
* @return {?}
*/
function (event) {
if (!_this.triggerElement ||
!_this.triggerElement.getAttribute ||
_this.triggerElement.getAttribute('disabled') ||
((/** @type {?} */ (event.target))).tagName === 'INPUT' ||
_this.triggerElement.className.indexOf('disabled') >= 0) {
return;
}
_this.fadeOutWave();
});
this.clickHandler = this.onClick.bind(this);
this.bindTriggerEvent();
}
Object.defineProperty(NzWaveRenderer.prototype, "waveAttributeName", {
get: /**
* @return {?}
*/
function () {
return this.insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NzWaveRenderer.prototype.bindTriggerEvent = /**
* @return {?}
*/
function () {
var _this = this;
if (this.platform.isBrowser) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.removeTriggerEvent();
if (_this.triggerElement) {
_this.triggerElement.addEventListener('click', _this.clickHandler, true);
}
}));
}
};
/**
* @return {?}
*/
NzWaveRenderer.prototype.removeTriggerEvent = /**
* @return {?}
*/
function () {
if (this.triggerElement) {
this.triggerElement.removeEventListener('click', this.clickHandler, true);
}
};
/**
* @return {?}
*/
NzWaveRenderer.prototype.removeStyleAndExtraNode = /**
* @return {?}
*/
function () {
if (this.styleForPseudo && document.body.contains(this.styleForPseudo)) {
document.body.removeChild(this.styleForPseudo);
this.styleForPseudo = null;
}
if (this.insertExtraNode && this.triggerElement.contains(this.extraNode)) {
this.triggerElement.removeChild((/** @type {?} */ (this.extraNode)));
}
};
/**
* @return {?}
*/
NzWaveRenderer.prototype.destroy = /**
* @return {?}
*/
function () {
this.removeTriggerEvent();
this.removeStyleAndExtraNode();
};
/**
* @private
* @return {?}
*/
NzWaveRenderer.prototype.fadeOutWave = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var node = this.triggerElement;
/** @type {?} */
var waveColor = this.getWaveColor(node);
node.setAttribute(this.waveAttributeName, 'true');
if (Date.now() < this.lastTime + this.waveTransitionDuration) {
return;
}
if (this.isValidColor(waveColor)) {
if (!this.styleForPseudo) {
this.styleForPseudo = document.createElement('style');
}
this.styleForPseudo.innerHTML = "\n [ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {\n --antd-wave-shadow-color: " + waveColor + ";\n }";
document.body.appendChild(this.styleForPseudo);
}
if (this.insertExtraNode) {
if (!this.extraNode) {
this.extraNode = document.createElement('div');
}
this.extraNode.className = 'ant-click-animating-node';
node.appendChild(this.extraNode);
}
this.lastTime = Date.now();
this.runTimeoutOutsideZone((/**
* @return {?}
*/
function () {
node.removeAttribute(_this.waveAttributeName);
_this.removeStyleAndExtraNode();
}), this.waveTransitionDuration);
};
/**
* @private
* @param {?} color
* @return {?}
*/
NzWaveRenderer.prototype.isValidColor = /**
* @private
* @param {?} color
* @return {?}
*/
function (color) {
return (!!color &&
color !== '#ffffff' &&
color !== 'rgb(255, 255, 255)' &&
this.isNotGrey(color) &&
!/rgba\(\d*, \d*, \d*, 0\)/.test(color) &&
color !== 'transparent');
};
/**
* @private
* @param {?} color
* @return {?}
*/
NzWaveRenderer.prototype.isNotGrey = /**
* @private
* @param {?} color
* @return {?}
*/
function (color) {
/** @type {?} */
var match = color.match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/);
if (match && match[1] && match[2] && match[3]) {
return !(match[1] === match[2] && match[2] === match[3]);
}
return true;
};
/**
* @private
* @param {?} node
* @return {?}
*/
NzWaveRenderer.prototype.getWaveColor = /**
* @private
* @param {?} node
* @return {?}
*/
function (node) {
/** @type {?} */
var nodeStyle = getComputedStyle(node);
return (nodeStyle.getPropertyValue('border-top-color') || // Firefox Compatible
nodeStyle.getPropertyValue('border-color') ||
nodeStyle.getPropertyValue('background-color'));
};
/**
* @private
* @param {?} fn
* @param {?} delay
* @return {?}
*/
NzWaveRenderer.prototype.runTimeoutOutsideZone = /**
* @private
* @param {?} fn
* @param {?} delay
* @return {?}
*/
function (fn, delay) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { return setTimeout(fn, delay); }));
};
return NzWaveRenderer;
}());
if (false) {
/**
* @type {?}
* @private
*/
NzWaveRenderer.prototype.waveTransitionDuration;
/**
* @type {?}
* @private
*/
NzWaveRenderer.prototype.styleForPseudo;
/**
* @type {?}
* @private
*/
NzWaveRenderer.prototype.extraNode;
/**
* @type {?}
* @private
*/
NzWaveRenderer.prototype.lastTime;
/**
* @type {?}
* @private
*/
NzWaveRenderer.prototype.platform;
/** @type {?} */
NzWaveRenderer.prototype.clickHandler;
/** @type {?} */
NzWaveRenderer.prototype.onClick;
/**
* @type {?}
* @private
*/
NzWaveRenderer.prototype.triggerElement;
/**
* @type {?}
* @private
*/
NzWaveRenderer.prototype.ngZone;
/**
* @type {?}
* @private
*/
NzWaveRenderer.prototype.insertExtraNode;
}
/**
* @fileoverview added by tsickle
* Generated from: nz-wave.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function NzWaveConfig() { }
if (false) {
/** @type {?|undefined} */
NzWaveConfig.prototype.disabled;
}
/** @type {?} */
var NZ_WAVE_GLOBAL_DEFAULT_CONFIG = {
disabled: false
};
/** @type {?} */
var NZ_WAVE_GLOBAL_CONFIG = new InjectionToken('nz-wave-global-options', {
providedIn: 'root',
factory: NZ_WAVE_GLOBAL_CONFIG_FACTORY
});
/**
* @return {?}
*/
function NZ_WAVE_GLOBAL_CONFIG_FACTORY() {
return NZ_WAVE_GLOBAL_DEFAULT_CONFIG;
}
var NzWaveDirective = /** @class */ (function () {
function NzWaveDirective(ngZone, elementRef, config, animationType) {
this.ngZone = ngZone;
this.elementRef = elementRef;
this.config = config;
this.animationType = animationType;
this.nzWaveExtraNode = false;
this.waveDisabled = false;
this.waveDisabled = this.isConfigDisabled();
}
Object.defineProperty(NzWaveDirective.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this.waveDisabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzWaveDirective.prototype, "rendererRef", {
get: /**
* @return {?}
*/
function () {
return this.waveRenderer;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NzWaveDirective.prototype.isConfigDisabled = /**
* @return {?}
*/
function () {
/** @type {?} */
var disabled = false;
if (this.config && typeof this.config.disabled === 'boolean') {
disabled = this.config.disabled;
}
if (this.animationType === 'NoopAnimations') {
disabled = true;
}
return disabled;
};
/**
* @return {?}
*/
NzWaveDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.waveRenderer) {
this.waveRenderer.destroy();
}
};
/**
* @return {?}
*/
NzWaveDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.renderWaveIfEnabled();
};
/**
* @return {?}
*/
NzWaveDirective.prototype.renderWaveIfEnabled = /**
* @return {?}
*/
function () {
if (!this.waveDisabled && this.elementRef.nativeElement) {
this.waveRenderer = new NzWaveRenderer(this.elementRef.nativeElement, this.ngZone, this.nzWaveExtraNode);
}
};
/**
* @return {?}
*/
NzWaveDirective.prototype.disable = /**
* @return {?}
*/
function () {
this.waveDisabled = true;
if (this.waveRenderer) {
this.waveRenderer.removeTriggerEvent();
this.waveRenderer.removeStyleAndExtraNode();
}
};
/**
* @return {?}
*/
NzWaveDirective.prototype.enable = /**
* @return {?}
*/
function () {
// config priority
this.waveDisabled = this.isConfigDisabled() || false;
if (this.waveRenderer) {
this.waveRenderer.bindTriggerEvent();
}
};
NzWaveDirective.decorators = [
{ type: Directive, args: [{
selector: '[nz-wave],button[nz-button]',
exportAs: 'nzWave'
},] }
];
/** @nocollapse */
NzWaveDirective.ctorParameters = function () { return [
{ type: NgZone },
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [NZ_WAVE_GLOBAL_CONFIG,] }] },
{ type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
]; };
NzWaveDirective.propDecorators = {
nzWaveExtraNode: [{ type: Input }]
};
return NzWaveDirective;
}());
if (false) {
/** @type {?} */
NzWaveDirective.prototype.nzWaveExtraNode;
/**
* @type {?}
* @private
*/
NzWaveDirective.prototype.waveRenderer;
/**
* @type {?}
* @private
*/
NzWaveDirective.prototype.waveDisabled;
/**
* @type {?}
* @private
*/
NzWaveDirective.prototype.ngZone;
/**
* @type {?}
* @private
*/
NzWaveDirective.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzWaveDirective.prototype.config;
/**
* @type {?}
* @private
*/
NzWaveDirective.prototype.animationType;
}
/**
* @fileoverview added by tsickle
* Generated from: nz-wave.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzWaveModule = /** @class */ (function () {
function NzWaveModule() {
}
NzWaveModule.decorators = [
{ type: NgModule, args: [{
imports: [PlatformModule],
exports: [NzWaveDirective],
declarations: [NzWaveDirective]
},] }
];
return NzWaveModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-zorro-antd-core-wave.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NZ_WAVE_GLOBAL_CONFIG, NZ_WAVE_GLOBAL_CONFIG_FACTORY, NZ_WAVE_GLOBAL_DEFAULT_CONFIG, NzWaveDirective, NzWaveModule, NzWaveRenderer };
//# sourceMappingURL=ng-zorro-antd-core-wave.js.map