ng-cw-v12
Version:
Angular UI Component Library
70 lines • 12.3 kB
JavaScript
import { Directive, HostListener, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class RippleDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
/** 波纹颜色 */
this.ncColor = 'rgba(255, 255, 255, 0.5)';
/** 动画时长，单位ms */
this.ncDuration = 600;
}
ngOnInit() {
this.createRippleContainer();
}
createRippleContainer() {
this.rippleContainer = this.renderer.createElement('div');
this.renderer.addClass(this.rippleContainer, 'ripple-container');
this.renderer.setStyle(this.rippleContainer, 'position', 'absolute');
this.renderer.setStyle(this.rippleContainer, 'inset', '0');
this.renderer.setStyle(this.rippleContainer, 'borderRadius', 'inherit');
this.renderer.setStyle(this.rippleContainer, 'pointer-events', 'none');
this.renderer.setStyle(this.rippleContainer, 'overflow', 'hidden');
const elementPosition = getComputedStyle(this.el.nativeElement).position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
this.renderer.appendChild(this.el.nativeElement, this.rippleContainer);
}
onClick(event) {
const ripple = this.renderer.createElement('span');
const diameter = Math.max(this.el.nativeElement.clientWidth, this.el.nativeElement.clientHeight);
const radius = diameter / 2;
this.renderer.setStyle(ripple, 'position', 'absolute');
this.renderer.setStyle(ripple, 'border-radius', '50%');
this.renderer.setStyle(ripple, 'pointer-events', 'none');
this.renderer.setStyle(ripple, 'width', `${diameter}px`);
this.renderer.setStyle(ripple, 'height', `${diameter}px`);
this.renderer.setStyle(ripple, 'transform', 'scale(0)');
this.renderer.setStyle(ripple, 'transition', `all ${this.ncDuration}ms`);
this.renderer.setStyle(ripple, 'background-color', this.ncColor);
this.renderer.setStyle(ripple, 'opacity', '1');
const rect = this.el.nativeElement.getBoundingClientRect();
const x = event.clientX - rect.left - radius;
const y = event.clientY - rect.top - radius;
this.renderer.setStyle(ripple, 'left', `${x}px`);
this.renderer.setStyle(ripple, 'top', `${y}px`);
this.renderer.appendChild(this.rippleContainer, ripple);
setTimeout(() => {
this.renderer.setStyle(ripple, 'transform', 'scale(2)');
this.renderer.setStyle(ripple, 'opacity', '0');
setTimeout(() => this.renderer.removeChild(this.rippleContainer, ripple), this.ncDuration);
}, 0);
}
}
RippleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
RippleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: RippleDirective, selector: "[ncRipple]", inputs: { ncColor: "ncColor", ncDuration: "ncDuration" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RippleDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncRipple]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncColor: [{
type: Input
}], ncDuration: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmlwcGxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvcmlwcGxlL3JpcHBsZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQWEsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOztBQUs5RixNQUFNLE9BQU8sZUFBZTtJQVExQixZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7UUFQL0QsV0FBVztRQUNGLFlBQU8sR0FBVywwQkFBMEIsQ0FBQztRQUN0RCxnQkFBZ0I7UUFDUCxlQUFVLEdBQVcsR0FBRyxDQUFDO0lBSWlDLENBQUM7SUFFcEUsUUFBUTtRQUNOLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFTyxxQkFBcUI7UUFDM0IsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLGtCQUFrQixDQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7UUFDckUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxPQUFPLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDM0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxjQUFjLEVBQUUsU0FBUyxDQUFDLENBQUM7UUFDeEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFD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LENBQUMsZUFBZSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBRXhELFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEVBQUUsV0FBVyxFQUFFLFVBQVUsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLE1BQU0sRUFBRSxTQUFTLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDL0MsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxlQUFlLEVBQUUsTUFBTSxDQUFDLEVBQUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzdGLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNSLENBQUM7OzRHQTdEVSxlQUFlO2dHQUFmLGVBQWU7MkZBQWYsZUFBZTtrQkFIM0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtpQkFDdkI7eUhBR1UsT0FBTztzQkFBZixLQUFLO2dCQUVHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBNEJOLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciwgUmVuZGVyZXIyLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tuY1JpcHBsZV0nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBSaXBwbGVEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIC8qKiDms6LnurnpopzoibIgKi9cclxuICBASW5wdXQoKSBuY0NvbG9yOiBzdHJpbmcgPSAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpJztcclxuICAvKiog5Yqo55S75pe26ZW/77yM5Y2V5L2NbXMgKi9cclxuICBASW5wdXQoKSBuY0R1cmF0aW9uOiBudW1iZXIgPSA2MDA7XHJcblxyXG4gIHByaXZhdGUgcmlwcGxlQ29udGFpbmVyITogSFRNTEVsZW1lbnQ7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5jcmVhdGVSaXBwbGVDb250YWluZXIoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgY3JlYXRlUmlwcGxlQ29udGFpbmVyKCkge1xyXG4gICAgdGhpcy5yaXBwbGVDb250YWluZXIgPSB0aGlzLnJlbmRlcmVyLmNyZWF0ZUVsZW1lbnQoJ2RpdicpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLnJpcHBsZUNvbnRhaW5lciwgJ3JpcHBsZS1jb250YWluZXInKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5yaXBwbGVDb250YWluZXIsICdwb3NpdGlvbicsICdhYnNvbHV0ZScpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLnJpcHBsZUNvbnRhaW5lciwgJ2luc2V0JywgJzAnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5yaXBwbGVDb250YWluZXIsICdib3JkZXJSYWRpdXMnLCAnaW5oZXJpdCcpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLnJpcHBsZUNvbnRhaW5lciwgJ3BvaW50ZXItZXZlbnRzJywgJ25vbmUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5yaXBwbGVDb250YWluZXIsICdvdmVyZmxvdycsICdoaWRkZW4nKTtcclxuXHJcbiAgICBjb25zdCBlbGVtZW50UG9zaXRpb24gPSBnZXRDb21wdXRlZFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCkucG9zaXRpb247XHJcbiAgICBpZiAoIWVsZW1lbnRQb3NpdGlvbiB8fCBlbGVtZW50UG9zaXRpb24gPT09ICdzdGF0aWMnKSB7XHJcbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAncG9zaXRpb24nLCAncmVsYXRpdmUnKTtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgdGhpcy5yaXBwbGVDb250YWluZXIpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudCddKVxyXG4gIG9uQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuICAgIGNvbnN0IHJpcHBsZSA9IHRoaXMucmVuZGVyZXIuY3JlYXRlRWxlbWVudCgnc3BhbicpO1xyXG4gICAgY29uc3QgZGlhbWV0ZXIgPSBNYXRoLm1heCh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuY2xpZW50V2lkdGgsIHRoaXMuZWwubmF0aXZlRWxlbWVudC5jbGllbnRIZWlnaHQpO1xyXG4gICAgY29uc3QgcmFkaXVzID0gZGlhbWV0ZXIgLyAyO1xyXG5cclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUocmlwcGxlLCAncG9zaXRpb24nLCAnYWJzb2x1dGUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUocmlwcGxlLCAnYm9yZGVyLXJhZGl1cycsICc1MCUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUocmlwcGxlLCAncG9pbnRlci1ldmVudHMnLCAnbm9uZScpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICd3aWR0aCcsIGAke2RpYW1ldGVyfXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ2hlaWdodCcsIGAke2RpYW1ldGVyfXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ3RyYW5zZm9ybScsICdzY2FsZSgwKScpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICd0cmFuc2l0aW9uJywgYGFsbCAke3RoaXMubmNEdXJhdGlvbn1tc2ApO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICdiYWNrZ3JvdW5kLWNvbG9yJywgdGhpcy5uY0NvbG9yKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUocmlwcGxlLCAnb3BhY2l0eScsICcxJyk7XHJcblxyXG4gICAgY29uc3QgcmVjdCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgIGNvbnN0IHggPSBldmVudC5jbGllbnRYIC0gcmVjdC5sZWZ0IC0gcmFkaXVzO1xyXG4gICAgY29uc3QgeSA9IGV2ZW50LmNsaWVudFkgLSByZWN0LnRvcCAtIHJhZGl1cztcclxuXHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ2xlZnQnLCBgJHt4fXB4YCk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ3RvcCcsIGAke3l9cHhgKTtcclxuXHJcbiAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHRoaXMucmlwcGxlQ29udGFpbmVyLCByaXBwbGUpO1xyXG5cclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ3RyYW5zZm9ybScsICdzY2FsZSgyKScpO1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ29wYWNpdHknLCAnMCcpO1xyXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHRoaXMucmVuZGVyZXIucmVtb3ZlQ2hpbGQodGhpcy5yaXBwbGVDb250YWluZXIsIHJpcHBsZSksIHRoaXMubmNEdXJhdGlvbik7XHJcbiAgICB9LCAwKTtcclxuICB9XHJcbn0iXX0=