MaterialRippleComponent constructor
MaterialRippleComponent(
- HtmlElement _element
Implementation
MaterialRippleComponent(this._element) {
// These are initialized here instead of when they're declared because
// dart2js would otherwise wait to initialize them until they are used.
_ripplePool ??=
List<DivElement?>.filled(_maxRipples, null, growable: false);
_opacityTiming ??= {
'duration': 300.0,
};
_opacityKeyframes ??= [
{'opacity': _minOpacity},
{'opacity': _maxOpacity, 'offset': 0.25},
{'opacity': _maxOpacity, 'offset': 0.5},
{'opacity': _minOpacity},
];
_transformTiming ??= {
'duration': 225.0,
'easing': 'cubic-bezier(0.4, 0.0, 0.2, 1)',
};
// This is className = instead of classes.add because classes.add compiles
// to a DOM read, conversion to List, and then a DOM write.
if (_rippleTemplate == null) {
final className =
(supportsAnimationApi) ? '__acx-ripple' : '__acx-ripple fallback';
_rippleTemplate = DivElement()..className = className;
}
// This is necessary because if _onMouseDown was a method, a new closure
// would be created each time it was referenced. That means that
// _onMouseDown in removeEventListener would point to a different listener,
// so the listener would not be removed.
_onMouseDown = (e) {
// This is inlined by dart2js so we aren't incurring an additional
// function call here.
final clientX = (e as MouseEvent).client.x;
final clientY = e.client.y;
_createRipple(clientX as int, clientY as int, _element, center);
};
_onKeyDown = (e) {
if (!isKeyboardTrigger(e as KeyboardEvent)) return;
// Ripples created by a keypress are always centered.
_createRipple(0, 0, _element, true);
};
// This is about 5x faster than _element.onMouseDown.listen or Angular
// (mousedown) because this compiles directly to addEventListener, whereas
// the streams approach adds several layers of slow indirection.
_element.addEventListener('mousedown', _onMouseDown);
_element.addEventListener('keydown', _onKeyDown);
}