ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
419 lines (412 loc) • 11.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
*/
class NzWaveRenderer {
/**
* @param {?} triggerElement
* @param {?} ngZone
* @param {?} insertExtraNode
*/
constructor(triggerElement, ngZone, insertExtraNode) {
this.triggerElement = triggerElement;
this.ngZone = ngZone;
this.insertExtraNode = insertExtraNode;
this.waveTransitionDuration = 400;
this.lastTime = 0;
this.platform = new Platform();
this.onClick = (/**
* @param {?} event
* @return {?}
*/
(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();
}
/**
* @return {?}
*/
get waveAttributeName() {
return this.insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
}
/**
* @return {?}
*/
bindTriggerEvent() {
if (this.platform.isBrowser) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.removeTriggerEvent();
if (this.triggerElement) {
this.triggerElement.addEventListener('click', this.clickHandler, true);
}
}));
}
}
/**
* @return {?}
*/
removeTriggerEvent() {
if (this.triggerElement) {
this.triggerElement.removeEventListener('click', this.clickHandler, true);
}
}
/**
* @return {?}
*/
removeStyleAndExtraNode() {
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 {?}
*/
destroy() {
this.removeTriggerEvent();
this.removeStyleAndExtraNode();
}
/**
* @private
* @return {?}
*/
fadeOutWave() {
/** @type {?} */
const node = this.triggerElement;
/** @type {?} */
const 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 = `
[ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {
--antd-wave-shadow-color: ${waveColor};
}`;
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 {?}
*/
() => {
node.removeAttribute(this.waveAttributeName);
this.removeStyleAndExtraNode();
}), this.waveTransitionDuration);
}
/**
* @private
* @param {?} color
* @return {?}
*/
isValidColor(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 {?}
*/
isNotGrey(color) {
/** @type {?} */
const 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 {?}
*/
getWaveColor(node) {
/** @type {?} */
const 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 {?}
*/
runTimeoutOutsideZone(fn, delay) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => setTimeout(fn, delay)));
}
}
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 {?} */
const NZ_WAVE_GLOBAL_DEFAULT_CONFIG = {
disabled: false
};
/** @type {?} */
const 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;
}
class NzWaveDirective {
/**
* @param {?} ngZone
* @param {?} elementRef
* @param {?} config
* @param {?} animationType
*/
constructor(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();
}
/**
* @return {?}
*/
get disabled() {
return this.waveDisabled;
}
/**
* @return {?}
*/
get rendererRef() {
return this.waveRenderer;
}
/**
* @return {?}
*/
isConfigDisabled() {
/** @type {?} */
let disabled = false;
if (this.config && typeof this.config.disabled === 'boolean') {
disabled = this.config.disabled;
}
if (this.animationType === 'NoopAnimations') {
disabled = true;
}
return disabled;
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.waveRenderer) {
this.waveRenderer.destroy();
}
}
/**
* @return {?}
*/
ngOnInit() {
this.renderWaveIfEnabled();
}
/**
* @return {?}
*/
renderWaveIfEnabled() {
if (!this.waveDisabled && this.elementRef.nativeElement) {
this.waveRenderer = new NzWaveRenderer(this.elementRef.nativeElement, this.ngZone, this.nzWaveExtraNode);
}
}
/**
* @return {?}
*/
disable() {
this.waveDisabled = true;
if (this.waveRenderer) {
this.waveRenderer.removeTriggerEvent();
this.waveRenderer.removeStyleAndExtraNode();
}
}
/**
* @return {?}
*/
enable() {
// 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 = () => [
{ 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 }]
};
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
*/
class NzWaveModule {
}
NzWaveModule.decorators = [
{ type: NgModule, args: [{
imports: [PlatformModule],
exports: [NzWaveDirective],
declarations: [NzWaveDirective]
},] }
];
/**
* @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