ng-cw-v12
Version:
Angular UI component library
68 lines • 12.1 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)';
this.ncDuration = 600; // ms
}
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 = this.el.nativeElement.style.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmlwcGxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvcmlwcGxlL3JpcHBsZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQWEsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOztBQUs5RixNQUFNLE9BQU8sZUFBZTtJQU0xQixZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7UUFMdEQsWUFBTyxHQUFXLDBCQUEwQixDQUFDO1FBQzdDLGVBQVUsR0FBVyxHQUFHLENBQUMsQ0FBQyxLQUFLO0lBSTJCLENBQUM7SUFFcEUsUUFBUTtRQUNOLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFTyxxQkFBcUI7UUFDM0IsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLGtCQUFrQixDQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7UUFDckUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxPQUFPLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDM0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxjQUFjLEVBQUUsU0FBUyxDQUFDLENBQUM7UUFDeEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxn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TSxDQUFDLENBQUM7UUFFeEQsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLE1BQU0sRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLENBQUM7WUFDeEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsTUFBTSxFQUFFLFNBQVMsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUMvQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxNQUFNLENBQUMsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDN0YsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ1IsQ0FBQzs7NEdBM0RVLGVBQWU7Z0dBQWYsZUFBZTsyRkFBZixlQUFlO2tCQUgzQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxZQUFZO2lCQUN2Qjt5SEFFVSxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkE0Qk4sT0FBTztzQkFETixZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBSZW5kZXJlcjIsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW25jUmlwcGxlXSdcclxufSlcclxuZXhwb3J0IGNsYXNzIFJpcHBsZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgbmNDb2xvcjogc3RyaW5nID0gJ3JnYmEoMjU1LCAyNTUsIDI1NSwgMC41KSc7XHJcbiAgQElucHV0KCkgbmNEdXJhdGlvbjogbnVtYmVyID0gNjAwOyAvLyBtc1xyXG5cclxuICBwcml2YXRlIHJpcHBsZUNvbnRhaW5lciE6IEhUTUxFbGVtZW50O1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuY3JlYXRlUmlwcGxlQ29udGFpbmVyKCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGNyZWF0ZVJpcHBsZUNvbnRhaW5lcigpIHtcclxuICAgIHRoaXMucmlwcGxlQ29udGFpbmVyID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdkaXYnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3ModGhpcy5yaXBwbGVDb250YWluZXIsICdyaXBwbGUtY29udGFpbmVyJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMucmlwcGxlQ29udGFpbmVyLCAncG9zaXRpb24nLCAnYWJzb2x1dGUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5yaXBwbGVDb250YWluZXIsICdpbnNldCcsICcwJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMucmlwcGxlQ29udGFpbmVyLCAnYm9yZGVyUmFkaXVzJywgJ2luaGVyaXQnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5yaXBwbGVDb250YWluZXIsICdwb2ludGVyLWV2ZW50cycsICdub25lJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMucmlwcGxlQ29udGFpbmVyLCAnb3ZlcmZsb3cnLCAnaGlkZGVuJyk7XHJcblxyXG4gICAgY29uc3QgZWxlbWVudFBvc2l0aW9uID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50LnN0eWxlLnBvc2l0aW9uO1xyXG4gICAgaWYgKCFlbGVtZW50UG9zaXRpb24gfHwgZWxlbWVudFBvc2l0aW9uID09PSAnc3RhdGljJykge1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ3Bvc2l0aW9uJywgJ3JlbGF0aXZlJyk7XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZCh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMucmlwcGxlQ29udGFpbmVyKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJywgWyckZXZlbnQnXSlcclxuICBvbkNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XHJcbiAgICBjb25zdCByaXBwbGUgPSB0aGlzLnJlbmRlcmVyLmNyZWF0ZUVsZW1lbnQoJ3NwYW4nKTtcclxuICAgIGNvbnN0IGRpYW1ldGVyID0gTWF0aC5tYXgodGhpcy5lbC5uYXRpdmVFbGVtZW50LmNsaWVudFdpZHRoLCB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuY2xpZW50SGVpZ2h0KTtcclxuICAgIGNvbnN0IHJhZGl1cyA9IGRpYW1ldGVyIC8gMjtcclxuXHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ3Bvc2l0aW9uJywgJ2Fic29sdXRlJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ2JvcmRlci1yYWRpdXMnLCAnNTAlJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ3BvaW50ZXItZXZlbnRzJywgJ25vbmUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUocmlwcGxlLCAnd2lkdGgnLCBgJHtkaWFtZXRlcn1weGApO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICdoZWlnaHQnLCBgJHtkaWFtZXRlcn1weGApO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICd0cmFuc2Zvcm0nLCAnc2NhbGUoMCknKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUocmlwcGxlLCAndHJhbnNpdGlvbicsIGBhbGwgJHt0aGlzLm5jRHVyYXRpb259bXNgKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUocmlwcGxlLCAnYmFja2dyb3VuZC1jb2xvcicsIHRoaXMubmNDb2xvcik7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHJpcHBsZSwgJ29wYWNpdHknLCAnMScpO1xyXG5cclxuICAgIGNvbnN0IHJlY3QgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcbiAgICBjb25zdCB4ID0gZXZlbnQuY2xpZW50WCAtIHJlY3QubGVmdCAtIHJhZGl1cztcclxuICAgIGNvbnN0IHkgPSBldmVudC5jbGllbnRZIC0gcmVjdC50b3AgLSByYWRpdXM7XHJcblxyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICdsZWZ0JywgYCR7eH1weGApO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICd0b3AnLCBgJHt5fXB4YCk7XHJcblxyXG4gICAgdGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZCh0aGlzLnJpcHBsZUNvbnRhaW5lciwgcmlwcGxlKTtcclxuXHJcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICd0cmFuc2Zvcm0nLCAnc2NhbGUoMiknKTtcclxuICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShyaXBwbGUsICdvcGFjaXR5JywgJzAnKTtcclxuICAgICAgc2V0VGltZW91dCgoKSA9PiB0aGlzLnJlbmRlcmVyLnJlbW92ZUNoaWxkKHRoaXMucmlwcGxlQ29udGFpbmVyLCByaXBwbGUpLCB0aGlzLm5jRHVyYXRpb24pO1xyXG4gICAgfSwgMCk7XHJcbiAgfVxyXG59Il19