Skip to content

Commit

Permalink
Move fadeOutAll logic into renderer
Browse files Browse the repository at this point in the history
  • Loading branch information
devversion committed Feb 27, 2017
1 parent a4f2dbe commit 766027e
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 12 deletions.
22 changes: 16 additions & 6 deletions src/lib/core/ripple/ripple-renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export class RippleRenderer {
/** Events to be registered on the trigger element. */
private _triggerEvents = new Map<string, any>();

/** Currently active ripples. */
activeRipples: RippleRef[] = [];
/** Currently active ripple references. */
private _activeRipples: RippleRef[] = [];

/** Ripple config for all ripples created by events. */
rippleConfig: RippleConfig = {};
Expand Down Expand Up @@ -105,7 +105,7 @@ export class RippleRenderer {
// Once it's faded in, the ripple can be hidden immediately if the mouse is released.
this.runTimeoutOutsideZone(() => {
if (config.persistent || this._isMousedown) {
this.activeRipples.push(rippleRef);
this._activeRipples.push(rippleRef);
} else {
rippleRef.fadeOut();
}
Expand All @@ -117,11 +117,11 @@ export class RippleRenderer {
/** Fades out a ripple reference. */
fadeOutRipple(ripple: RippleRef) {
let rippleEl = ripple.element;
let rippleIndex = this.activeRipples.indexOf(ripple);
let rippleIndex = this._activeRipples.indexOf(ripple);

// Remove the ripple reference if added to the list of active ripples.
if (rippleIndex !== -1) {
this.activeRipples.splice(rippleIndex, 1);
this._activeRipples.splice(rippleIndex, 1);
}

rippleEl.style.transitionDuration = `${RIPPLE_FADE_OUT_DURATION}ms`;
Expand All @@ -133,6 +133,16 @@ export class RippleRenderer {
}, RIPPLE_FADE_OUT_DURATION);
}

/** Fades out all currently active ripples. */
fadeOutAll() {
// Iterate in reverse, to avoid issues with the `fadeOut` method that will immediately remove
// items from the array.
let i = this._activeRipples.length;
while (i--) {
this._activeRipples[i].fadeOut();
}
}

/** Sets the trigger element and registers the mouse events. */
setTriggerElement(element: HTMLElement) {
// Remove all previously register event listeners from the trigger element.
Expand Down Expand Up @@ -163,7 +173,7 @@ export class RippleRenderer {
this._isMousedown = false;

// On mouseup, fade-out all ripples that are active and not persistent.
this.activeRipples
this._activeRipples
.filter(ripple => !ripple.config.persistent)
.forEach(ripple => ripple.fadeOut());
}
Expand Down
7 changes: 1 addition & 6 deletions src/lib/core/ripple/ripple.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,7 @@ export class MdRipple implements OnChanges, OnDestroy {

/** Fades out all currently showing ripple elements. */
fadeOutAll() {
// Iterate in reverse, to avoid issues with the `fadeOut` method that will immediately remove
// items from the array.
let i = this._rippleRenderer.activeRipples.length;
while (i--) {
this._rippleRenderer.activeRipples[i].fadeOut();
}
this._rippleRenderer.fadeOutAll();
}

/** Ripple configuration from the directive's input values. */
Expand Down

0 comments on commit 766027e

Please sign in to comment.