preact-material-design
Version:
A set of material components for Preact.
138 lines • 5.45 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { h, Component } from 'preact';
import { Coord2d } from '../../core/types';
var Ripple = (function (_super) {
__extends(Ripple, _super);
function Ripple(props) {
var _this = _super.call(this, props) || this;
_this.ripples = new Set();
_this.onMouseDown = _this.onMouseDown.bind(_this);
_this.onMouseUp = _this.onMouseUp.bind(_this);
return _this;
}
Ripple.prototype.render = function () {
return h("div", { class: "pmd-ripple-container" });
};
Ripple.prototype.shouldComponentUpdate = function () {
return false;
};
Ripple.prototype.componentDidMount = function () {
var parent = this.base.parentElement;
parent.style.position = 'relative';
parent.style.overflow = 'hidden';
parent.addEventListener('mousedown', this.onMouseDown);
document.addEventListener('mouseup', this.onMouseUp);
};
Ripple.prototype.componentWillUnmount = function () {
var parent = this.base.parentElement;
parent.style.position = '';
parent.style.overflow = '';
parent.removeEventListener('mousedown', this.onMouseDown);
document.removeEventListener('mouseup', this.onMouseUp);
this.ripples.forEach(function (ripple) { return ripple.remove(); });
};
Ripple.prototype.onMouseDown = function (evt) {
var _this = this;
var parent = this.base.parentElement;
this.activeRipple = this.add(Coord2d.fromMouseEvent(evt, 'offset', parent), this.props.color || this.props.colour);
this.activeRipple.trigger(true);
this.ripples.add(this.activeRipple);
this.activeRipple.onDestroy = function (ripple) { return _this.ripples.delete(ripple); };
};
Ripple.prototype.onMouseUp = function () {
if (this.activeRipple) {
this.activeRipple.unlock();
}
};
Ripple.prototype.add = function (pos, colour) {
var ripple = new RippleRef(pos, colour);
ripple.attach(this.base);
return ripple;
};
return Ripple;
}(Component));
export { Ripple };
Ripple.defaultProps = {
colour: 'rgba(0, 0, 0, .1)',
};
var RippleRef = (function () {
function RippleRef(position, colour) {
var _this = this;
this.position = position;
this.colour = colour;
this.element = document.createElement('div');
this.locked = false;
this.done = false;
this.onDestroy = function () { return undefined; };
this.element.classList.add('pmd-ripple');
this.setStyles({
position: 'absolute',
top: position.y + "px",
left: position.x + "px",
width: '1px',
height: '1px',
background: colour,
transform: 'translate(-50%, -50%) scale(0)',
'border-radius': '50%',
'pointer-events': 'none',
transition: '0.55s all cubic-bezier(0.0, 0.0, 0.2, 1)',
});
this.element.addEventListener('transitionend', function () {
if (_this.done) {
_this.remove();
return;
}
_this.done = true;
if (!_this.locked) {
_this.out();
}
});
}
RippleRef.prototype.attach = function (container, parent) {
if (parent === void 0) { parent = container.parentElement; }
container.appendChild(this.element);
this.parent = parent;
};
RippleRef.prototype.trigger = function (lock) {
if (lock === void 0) { lock = false; }
this.locked = lock;
var size = this.distanceToCorner(this.parent.getBoundingClientRect()) * 2;
this.setStyles({ transform: "translate(-50%, -50%) scale(" + size + ")" }, true);
};
RippleRef.prototype.unlock = function () {
this.out();
};
RippleRef.prototype.remove = function () {
this.element.parentElement.removeChild(this.element);
this.onDestroy(this);
};
RippleRef.prototype.out = function () {
this.setStyles({ opacity: 0 }, true);
};
RippleRef.prototype.distanceToCorner = function (rect) {
var distX = Math.max(this.position.x, rect.width - this.position.x);
var distY = Math.max(this.position.y, rect.height - this.position.y);
return Math.sqrt(distX * distX + distY * distY);
};
RippleRef.prototype.setStyles = function (styles, defer) {
var _this = this;
if (defer === void 0) { defer = false; }
if (defer) {
requestAnimationFrame(function () { return _this.setStyles(styles, false); });
return;
}
Object.assign(this.element.style, styles);
};
return RippleRef;
}());
export { RippleRef };
//# sourceMappingURL=Ripple.js.map