@angular2-material/core
Version:
Angular 2 Material core
180 lines (178 loc) • 7.98 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { NgModule, Directive, ElementRef, HostBinding, Input } from '@angular/core';
import { RippleRenderer, ForegroundRippleState } from './ripple-renderer';
export var MdRipple = (function () {
function MdRipple(_elementRef) {
var _this = this;
/**
* If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius
* will be the distance from the center of the ripple to the furthest corner of the host element's
* bounding rectangle.
*/
this.maxRadius = 0;
/**
* If set, the normal duration of ripple animations is divided by this value. For example,
* setting it to 0.5 will cause the animations to take twice as long.
*/
this.speedFactor = 1;
// These event handlers are attached to the element that triggers the ripple animations.
var eventHandlers = new Map();
eventHandlers.set('mousedown', function (event) { return _this._mouseDown(event); });
eventHandlers.set('click', function (event) { return _this._click(event); });
eventHandlers.set('mouseleave', function (event) { return _this._mouseLeave(event); });
this._rippleRenderer = new RippleRenderer(_elementRef, eventHandlers);
}
/** TODO: internal */
MdRipple.prototype.ngOnInit = function () {
// If no trigger element was explicity set, use the host element
if (!this.trigger) {
this._rippleRenderer.setTriggerElementToHost();
}
};
/** TODO: internal */
MdRipple.prototype.ngOnDestroy = function () {
// Remove event listeners on the trigger element.
this._rippleRenderer.clearTriggerElement();
};
/** TODO: internal */
MdRipple.prototype.ngOnChanges = function (changes) {
// If the trigger element changed (or is being initially set), add event listeners to it.
var changedInputs = Object.keys(changes);
if (changedInputs.indexOf('trigger') !== -1) {
this._rippleRenderer.setTriggerElement(this.trigger);
}
};
/**
* Responds to the start of a ripple animation trigger by fading the background in.
*/
MdRipple.prototype.start = function () {
this._rippleRenderer.fadeInRippleBackground(this.backgroundColor);
};
/**
* Responds to the end of a ripple animation trigger by fading the background out, and creating a
* foreground ripple that expands from the event location (or from the center of the element if
* the "centered" property is set or forceCenter is true).
*/
MdRipple.prototype.end = function (left, top, forceCenter) {
var _this = this;
if (forceCenter === void 0) { forceCenter = true; }
this._rippleRenderer.createForegroundRipple(left, top, this.color, this.centered || forceCenter, this.maxRadius, this.speedFactor, function (ripple, e) { return _this._rippleTransitionEnded(ripple, e); });
this._rippleRenderer.fadeOutRippleBackground();
};
MdRipple.prototype._rippleTransitionEnded = function (ripple, event) {
if (event.propertyName === 'opacity') {
// If the ripple finished expanding, start fading it out. If it finished fading out,
// remove it from the DOM.
switch (ripple.state) {
case ForegroundRippleState.EXPANDING:
this._rippleRenderer.fadeOutForegroundRipple(ripple.rippleElement);
ripple.state = ForegroundRippleState.FADING_OUT;
break;
case ForegroundRippleState.FADING_OUT:
this._rippleRenderer.removeRippleFromDom(ripple.rippleElement);
break;
}
}
};
/**
* Called when the trigger element receives a mousedown event. Starts the ripple animation by
* fading in the background.
*/
MdRipple.prototype._mouseDown = function (event) {
if (!this.disabled && event.button === 0) {
this.start();
}
};
/**
* Called when the trigger element receives a click event. Creates a foreground ripple and
* runs its animation.
*/
MdRipple.prototype._click = function (event) {
if (!this.disabled && event.button === 0) {
// If screen and page positions are all 0, this was probably triggered by a keypress.
// In that case, use the center of the bounding rect as the ripple origin.
// FIXME: This fails on IE11, which still sets pageX/Y and screenX/Y on keyboard clicks.
var isKeyEvent = (event.screenX === 0 && event.screenY === 0 && event.pageX === 0 && event.pageY === 0);
this.end(event.pageX, event.pageY, isKeyEvent);
}
};
/**
* Called when the trigger element receives a mouseleave event. Fades out the background.
*/
MdRipple.prototype._mouseLeave = function (event) {
// We can always fade out the background here; It's a no-op if it was already inactive.
this._rippleRenderer.fadeOutRippleBackground();
};
__decorate([
Input('md-ripple-trigger'),
__metadata('design:type', Object)
], MdRipple.prototype, "trigger", void 0);
__decorate([
Input('md-ripple-centered'),
__metadata('design:type', Boolean)
], MdRipple.prototype, "centered", void 0);
__decorate([
Input('md-ripple-disabled'),
__metadata('design:type', Boolean)
], MdRipple.prototype, "disabled", void 0);
__decorate([
Input('md-ripple-max-radius'),
__metadata('design:type', Number)
], MdRipple.prototype, "maxRadius", void 0);
__decorate([
Input('md-ripple-speed-factor'),
__metadata('design:type', Number)
], MdRipple.prototype, "speedFactor", void 0);
__decorate([
Input('md-ripple-color'),
__metadata('design:type', String)
], MdRipple.prototype, "color", void 0);
__decorate([
Input('md-ripple-background-color'),
__metadata('design:type', String)
], MdRipple.prototype, "backgroundColor", void 0);
__decorate([
HostBinding('class.md-ripple-focused'),
Input('md-ripple-focused'),
__metadata('design:type', Boolean)
], MdRipple.prototype, "focused", void 0);
__decorate([
HostBinding('class.md-ripple-unbounded'),
Input('md-ripple-unbounded'),
__metadata('design:type', Boolean)
], MdRipple.prototype, "unbounded", void 0);
MdRipple = __decorate([
Directive({
selector: '[md-ripple]',
}),
__metadata('design:paramtypes', [ElementRef])
], MdRipple);
return MdRipple;
}());
export var MdRippleModule = (function () {
function MdRippleModule() {
}
MdRippleModule.forRoot = function () {
return {
ngModule: MdRippleModule,
providers: []
};
};
MdRippleModule = __decorate([
NgModule({
exports: [MdRipple],
declarations: [MdRipple],
}),
__metadata('design:paramtypes', [])
], MdRippleModule);
return MdRippleModule;
}());
//# sourceMappingURL=ripple.js.map