1 | import { isActivatedDisabled } from './activator-base';
|
2 | import { Activator } from './activator';
|
3 | import { hasPointerMoved, pointerCoord } from '../util/dom';
|
4 |
|
5 |
|
6 |
|
7 | var RippleActivator = (function () {
|
8 | |
9 |
|
10 |
|
11 |
|
12 |
|
13 | function RippleActivator(app, config, dom) {
|
14 | this.dom = dom;
|
15 | this.highlight = new Activator(app, config, dom);
|
16 | }
|
17 | |
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | RippleActivator.prototype.clickAction = function (ev, activatableEle, startCoord) {
|
24 |
|
25 | this.highlight && this.highlight.clickAction(ev, activatableEle, startCoord);
|
26 |
|
27 | this._clickAction(ev, activatableEle, startCoord);
|
28 | };
|
29 | |
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 | RippleActivator.prototype.downAction = function (ev, activatableEle, startCoord) {
|
36 |
|
37 | this.highlight && this.highlight.downAction(ev, activatableEle, startCoord);
|
38 |
|
39 | this._downAction(ev, activatableEle, startCoord);
|
40 | };
|
41 | |
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 | RippleActivator.prototype.upAction = function (ev, activatableEle, startCoord) {
|
48 |
|
49 | this.highlight && this.highlight.upAction(ev, activatableEle, startCoord);
|
50 |
|
51 | this._upAction(ev, activatableEle, startCoord);
|
52 | };
|
53 | |
54 |
|
55 |
|
56 |
|
57 | RippleActivator.prototype.clearState = function (animated) {
|
58 |
|
59 | this.highlight && this.highlight.clearState(animated);
|
60 | };
|
61 | |
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 | RippleActivator.prototype._downAction = function (ev, activatableEle, _startCoord) {
|
68 | if (isActivatedDisabled(ev, activatableEle)) {
|
69 | return;
|
70 | }
|
71 | var j = activatableEle.childElementCount;
|
72 | while (j--) {
|
73 | var rippleEle = activatableEle.children[j];
|
74 | if (rippleEle.classList.contains('button-effect')) {
|
75 |
|
76 | var 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 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 | RippleActivator.prototype._upAction = function (ev, activatableEle, startCoord) {
|
92 | if (!hasPointerMoved(6, startCoord, pointerCoord(ev))) {
|
93 | var i = activatableEle.childElementCount;
|
94 | while (i--) {
|
95 | var rippleEle = activatableEle.children[i];
|
96 | if (rippleEle.classList.contains('button-effect')) {
|
97 |
|
98 | this.startRippleEffect(rippleEle, activatableEle, startCoord);
|
99 | break;
|
100 | }
|
101 | }
|
102 | }
|
103 | };
|
104 | |
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 | RippleActivator.prototype._clickAction = function (_ev, _activatableEle, _startCoord) {
|
111 |
|
112 | };
|
113 | |
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 | RippleActivator.prototype.startRippleEffect = function (rippleEle, activatableEle, startCoord) {
|
120 | if (!startCoord) {
|
121 | return;
|
122 | }
|
123 | var clientPointerX = (startCoord.x - rippleEle.$left);
|
124 | var clientPointerY = (startCoord.y - rippleEle.$top);
|
125 | var x = Math.max(Math.abs(rippleEle.$width - clientPointerX), clientPointerX) * 2;
|
126 | var y = Math.max(Math.abs(rippleEle.$height - clientPointerY), clientPointerY) * 2;
|
127 | var 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 |
|
137 |
|
138 | var 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 |
|
143 | var radius = Math.sqrt(rippleEle.$width + rippleEle.$height);
|
144 | var scaleTransitionDuration = Math.max(1600 * Math.sqrt(radius / TOUCH_DOWN_ACCEL) + 0.5, 260);
|
145 | var opacityTransitionDuration = Math.round(scaleTransitionDuration * 0.7);
|
146 | var opacityTransitionDelay = Math.round(scaleTransitionDuration - opacityTransitionDuration);
|
147 | scaleTransitionDuration = Math.round(scaleTransitionDuration);
|
148 | var transform = "translate3d(" + clientPointerX + "px, " + clientPointerY + "px, 0px) scale(1)";
|
149 | var transition = "transform " + scaleTransitionDuration + "ms,opacity " + opacityTransitionDuration + "ms " + opacityTransitionDelay + "ms";
|
150 | this.dom.write(function () {
|
151 |
|
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 | }());
|
160 | export { RippleActivator };
|
161 | function RippleActivator_tsickle_Closure_declarations() {
|
162 |
|
163 | RippleActivator.prototype.highlight;
|
164 |
|
165 | RippleActivator.prototype.dom;
|
166 | }
|
167 | var TOUCH_DOWN_ACCEL = 300;
|
168 |
|
\ | No newline at end of file |