UNPKG

6.53 kBJavaScriptView Raw
1import { isActivatedDisabled } from './activator-base';
2import { Activator } from './activator';
3import { hasPointerMoved, pointerCoord } from '../util/dom';
4/**
5 * @hidden
6 */
7var RippleActivator = (function () {
8 /**
9 * @param {?} app
10 * @param {?} config
11 * @param {?} dom
12 */
13 function RippleActivator(app, config, dom) {
14 this.dom = dom;
15 this.highlight = new Activator(app, config, dom);
16 }
17 /**
18 * @param {?} ev
19 * @param {?} activatableEle
20 * @param {?} startCoord
21 * @return {?}
22 */
23 RippleActivator.prototype.clickAction = function (ev, activatableEle, startCoord) {
24 // Highlight
25 this.highlight && this.highlight.clickAction(ev, activatableEle, startCoord);
26 // Ripple
27 this._clickAction(ev, activatableEle, startCoord);
28 };
29 /**
30 * @param {?} ev
31 * @param {?} activatableEle
32 * @param {?} startCoord
33 * @return {?}
34 */
35 RippleActivator.prototype.downAction = function (ev, activatableEle, startCoord) {
36 // Highlight
37 this.highlight && this.highlight.downAction(ev, activatableEle, startCoord);
38 // Ripple
39 this._downAction(ev, activatableEle, startCoord);
40 };
41 /**
42 * @param {?} ev
43 * @param {?} activatableEle
44 * @param {?} startCoord
45 * @return {?}
46 */
47 RippleActivator.prototype.upAction = function (ev, activatableEle, startCoord) {
48 // Highlight
49 this.highlight && this.highlight.upAction(ev, activatableEle, startCoord);
50 // Ripple
51 this._upAction(ev, activatableEle, startCoord);
52 };
53 /**
54 * @param {?} animated
55 * @return {?}
56 */
57 RippleActivator.prototype.clearState = function (animated) {
58 // Highlight
59 this.highlight && this.highlight.clearState(animated);
60 };
61 /**
62 * @param {?} ev
63 * @param {?} activatableEle
64 * @param {?} _startCoord
65 * @return {?}
66 */
67 RippleActivator.prototype._downAction = function (ev, activatableEle, _startCoord) {
68 if (isActivatedDisabled(ev, activatableEle)) {
69 return;
70 }
71 var /** @type {?} */ j = activatableEle.childElementCount;
72 while (j--) {
73 var /** @type {?} */ rippleEle = activatableEle.children[j];
74 if (rippleEle.classList.contains('button-effect')) {
75 // DOM READ
76 var /** @type {?} */ clientRect = activatableEle.getBoundingClientRect();
77 rippleEle.$top = clientRect.top;
78 rippleEle.$left = clientRect.left;
79 rippleEle.$width = clientRect.width;
80 rippleEle.$height = clientRect.height;
81 break;
82 }
83 }
84 };
85 /**
86 * @param {?} ev
87 * @param {?} activatableEle
88 * @param {?} startCoord
89 * @return {?}
90 */
91 RippleActivator.prototype._upAction = function (ev, activatableEle, startCoord) {
92 if (!hasPointerMoved(6, startCoord, pointerCoord(ev))) {
93 var /** @type {?} */ i = activatableEle.childElementCount;
94 while (i--) {
95 var /** @type {?} */ rippleEle = activatableEle.children[i];
96 if (rippleEle.classList.contains('button-effect')) {
97 // DOM WRITE
98 this.startRippleEffect(rippleEle, activatableEle, startCoord);
99 break;
100 }
101 }
102 }
103 };
104 /**
105 * @param {?} _ev
106 * @param {?} _activatableEle
107 * @param {?} _startCoord
108 * @return {?}
109 */
110 RippleActivator.prototype._clickAction = function (_ev, _activatableEle, _startCoord) {
111 // NOTHING
112 };
113 /**
114 * @param {?} rippleEle
115 * @param {?} activatableEle
116 * @param {?} startCoord
117 * @return {?}
118 */
119 RippleActivator.prototype.startRippleEffect = function (rippleEle, activatableEle, startCoord) {
120 if (!startCoord) {
121 return;
122 }
123 var /** @type {?} */ clientPointerX = (startCoord.x - rippleEle.$left);
124 var /** @type {?} */ clientPointerY = (startCoord.y - rippleEle.$top);
125 var /** @type {?} */ x = Math.max(Math.abs(rippleEle.$width - clientPointerX), clientPointerX) * 2;
126 var /** @type {?} */ y = Math.max(Math.abs(rippleEle.$height - clientPointerY), clientPointerY) * 2;
127 var /** @type {?} */ diameter = Math.min(Math.max(Math.hypot(x, y), 64), 240);
128 if (activatableEle.hasAttribute('ion-item')) {
129 diameter = Math.min(diameter, 140);
130 }
131 clientPointerX -= diameter / 2;
132 clientPointerY -= diameter / 2;
133 clientPointerX = Math.round(clientPointerX);
134 clientPointerY = Math.round(clientPointerY);
135 diameter = Math.round(diameter);
136 // Reset ripple
137 // DOM WRITE
138 var /** @type {?} */ Css = this.dom.plt.Css;
139 rippleEle.style.opacity = '';
140 rippleEle.style[Css.transform] = "translate3d(" + clientPointerX + "px, " + clientPointerY + "px, 0px) scale(0.001)";
141 rippleEle.style[Css.transition] = '';
142 // Start ripple animation
143 var /** @type {?} */ radius = Math.sqrt(rippleEle.$width + rippleEle.$height);
144 var /** @type {?} */ scaleTransitionDuration = Math.max(1600 * Math.sqrt(radius / TOUCH_DOWN_ACCEL) + 0.5, 260);
145 var /** @type {?} */ opacityTransitionDuration = Math.round(scaleTransitionDuration * 0.7);
146 var /** @type {?} */ opacityTransitionDelay = Math.round(scaleTransitionDuration - opacityTransitionDuration);
147 scaleTransitionDuration = Math.round(scaleTransitionDuration);
148 var /** @type {?} */ transform = "translate3d(" + clientPointerX + "px, " + clientPointerY + "px, 0px) scale(1)";
149 var /** @type {?} */ transition = "transform " + scaleTransitionDuration + "ms,opacity " + opacityTransitionDuration + "ms " + opacityTransitionDelay + "ms";
150 this.dom.write(function () {
151 // DOM WRITE
152 rippleEle.style.width = rippleEle.style.height = diameter + 'px';
153 rippleEle.style.opacity = '0';
154 rippleEle.style[Css.transform] = transform;
155 rippleEle.style[Css.transition] = transition;
156 }, 16);
157 };
158 return RippleActivator;
159}());
160export { RippleActivator };
161function RippleActivator_tsickle_Closure_declarations() {
162 /** @type {?} */
163 RippleActivator.prototype.highlight;
164 /** @type {?} */
165 RippleActivator.prototype.dom;
166}
167var /** @type {?} */ TOUCH_DOWN_ACCEL = 300;
168//# sourceMappingURL=ripple.js.map
\No newline at end of file