| 1 | import { Directive, ElementRef, NgZone, Optional, NgModule } from '@angular/core';
|
| 2 | import { CommonModule } from '@angular/common';
|
| 3 | import { DomHandler } from 'primeng/dom';
|
| 4 | import { PrimeNGConfig } from 'primeng/api';
|
| 5 |
|
| 6 | class Ripple {
|
| 7 | constructor(el, zone, config) {
|
| 8 | this.el = el;
|
| 9 | this.zone = zone;
|
| 10 | this.config = config;
|
| 11 | }
|
| 12 | ngAfterViewInit() {
|
| 13 | if (this.config && this.config.ripple) {
|
| 14 | this.zone.runOutsideAngular(() => {
|
| 15 | this.create();
|
| 16 | this.mouseDownListener = this.onMouseDown.bind(this);
|
| 17 | this.el.nativeElement.addEventListener('mousedown', this.mouseDownListener);
|
| 18 | });
|
| 19 | }
|
| 20 | }
|
| 21 | onMouseDown(event) {
|
| 22 | let ink = this.getInk();
|
| 23 | if (!ink || getComputedStyle(ink, null).display === 'none') {
|
| 24 | return;
|
| 25 | }
|
| 26 | DomHandler.removeClass(ink, 'p-ink-active');
|
| 27 | if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
|
| 28 | let d = Math.max(DomHandler.getOuterWidth(this.el.nativeElement), DomHandler.getOuterHeight(this.el.nativeElement));
|
| 29 | ink.style.height = d + 'px';
|
| 30 | ink.style.width = d + 'px';
|
| 31 | }
|
| 32 | let offset = DomHandler.getOffset(this.el.nativeElement);
|
| 33 | let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
|
| 34 | let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
|
| 35 | ink.style.top = y + 'px';
|
| 36 | ink.style.left = x + 'px';
|
| 37 | DomHandler.addClass(ink, 'p-ink-active');
|
| 38 | }
|
| 39 | getInk() {
|
| 40 | for (let i = 0; i < this.el.nativeElement.children.length; i++) {
|
| 41 | if (this.el.nativeElement.children[i].className.indexOf('p-ink') !== -1) {
|
| 42 | return this.el.nativeElement.children[i];
|
| 43 | }
|
| 44 | }
|
| 45 | return null;
|
| 46 | }
|
| 47 | resetInk() {
|
| 48 | let ink = this.getInk();
|
| 49 | if (ink) {
|
| 50 | DomHandler.removeClass(ink, 'p-ink-active');
|
| 51 | }
|
| 52 | }
|
| 53 | onAnimationEnd(event) {
|
| 54 | DomHandler.removeClass(event.currentTarget, 'p-ink-active');
|
| 55 | }
|
| 56 | create() {
|
| 57 | let ink = document.createElement('span');
|
| 58 | ink.className = 'p-ink';
|
| 59 | this.el.nativeElement.appendChild(ink);
|
| 60 | this.animationListener = this.onAnimationEnd.bind(this);
|
| 61 | ink.addEventListener('animationend', this.animationListener);
|
| 62 | }
|
| 63 | remove() {
|
| 64 | let ink = this.getInk();
|
| 65 | if (ink) {
|
| 66 | this.el.nativeElement.removeEventListener('mousedown', this.mouseDownListener);
|
| 67 | ink.removeEventListener('animationend', this.animationListener);
|
| 68 | DomHandler.removeElement(ink);
|
| 69 | }
|
| 70 | }
|
| 71 | ngOnDestroy() {
|
| 72 | if (this.config && this.config.ripple) {
|
| 73 | this.remove();
|
| 74 | }
|
| 75 | }
|
| 76 | }
|
| 77 | Ripple.decorators = [
|
| 78 | { type: Directive, args: [{
|
| 79 | selector: '[pRipple]',
|
| 80 | host: {
|
| 81 | '[class.p-ripple]': 'true'
|
| 82 | }
|
| 83 | },] }
|
| 84 | ];
|
| 85 | Ripple.ctorParameters = () => [
|
| 86 | { type: ElementRef },
|
| 87 | { type: NgZone },
|
| 88 | { type: PrimeNGConfig, decorators: [{ type: Optional }] }
|
| 89 | ];
|
| 90 | class RippleModule {
|
| 91 | }
|
| 92 | RippleModule.decorators = [
|
| 93 | { type: NgModule, args: [{
|
| 94 | imports: [CommonModule],
|
| 95 | exports: [Ripple],
|
| 96 | declarations: [Ripple]
|
| 97 | },] }
|
| 98 | ];
|
| 99 |
|
| 100 | |
| 101 | |
| 102 |
|
| 103 |
|
| 104 | export { Ripple, RippleModule };
|
| 105 |
|