Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
fix(line-ripple): Use superclass properties without trailing underscores
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 312717556
  • Loading branch information
patrickrodee authored and copybara-github committed May 21, 2020
1 parent 4847dd7 commit a4aae3d
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 16 deletions.
14 changes: 7 additions & 7 deletions packages/mdc-line-ripple/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,33 +36,33 @@ export class MDCLineRipple extends MDCComponent<MDCLineRippleFoundation> {
* Activates the line ripple
*/
activate() {
this.foundation_.activate();
this.foundation.activate();
}

/**
* Deactivates the line ripple
*/
deactivate() {
this.foundation_.deactivate();
this.foundation.deactivate();
}

/**
* Sets the transform origin given a user's click location.
* The `rippleCenter` is the x-coordinate of the middle of the ripple.
*/
setRippleCenter(xCoordinate: number) {
this.foundation_.setRippleCenter(xCoordinate);
this.foundation.setRippleCenter(xCoordinate);
}

getDefaultFoundation() {
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
const adapter: MDCLineRippleAdapter = {
addClass: (className) => this.root_.classList.add(className),
removeClass: (className) => this.root_.classList.remove(className),
hasClass: (className) => this.root_.classList.contains(className),
setStyle: (propertyName, value) => (this.root_ as HTMLElement).style.setProperty(propertyName, value),
addClass: (className) => this.root.classList.add(className),
removeClass: (className) => this.root.classList.remove(className),
hasClass: (className) => this.root.classList.contains(className),
setStyle: (propertyName, value) => (this.root as HTMLElement).style.setProperty(propertyName, value),
registerEventHandler: (evtType, handler) => this.listen(evtType, handler),
deregisterEventHandler: (evtType, handler) => this.unlisten(evtType, handler),
};
Expand Down
21 changes: 12 additions & 9 deletions packages/mdc-line-ripple/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,35 +56,38 @@ export class MDCLineRippleFoundation extends MDCFoundation<MDCLineRippleAdapter>
}

init() {
this.adapter_.registerEventHandler('transitionend', this.transitionEndHandler_);
this.adapter.registerEventHandler(
'transitionend', this.transitionEndHandler_);
}

destroy() {
this.adapter_.deregisterEventHandler('transitionend', this.transitionEndHandler_);
this.adapter.deregisterEventHandler(
'transitionend', this.transitionEndHandler_);
}

activate() {
this.adapter_.removeClass(cssClasses.LINE_RIPPLE_DEACTIVATING);
this.adapter_.addClass(cssClasses.LINE_RIPPLE_ACTIVE);
this.adapter.removeClass(cssClasses.LINE_RIPPLE_DEACTIVATING);
this.adapter.addClass(cssClasses.LINE_RIPPLE_ACTIVE);
}

setRippleCenter(xCoordinate: number) {
this.adapter_.setStyle('transform-origin', `${xCoordinate}px center`);
this.adapter.setStyle('transform-origin', `${xCoordinate}px center`);
}

deactivate() {
this.adapter_.addClass(cssClasses.LINE_RIPPLE_DEACTIVATING);
this.adapter.addClass(cssClasses.LINE_RIPPLE_DEACTIVATING);
}

handleTransitionEnd(evt: TransitionEvent) {
// Wait for the line ripple to be either transparent or opaque
// before emitting the animation end event
const isDeactivating = this.adapter_.hasClass(cssClasses.LINE_RIPPLE_DEACTIVATING);
const isDeactivating =
this.adapter.hasClass(cssClasses.LINE_RIPPLE_DEACTIVATING);

if (evt.propertyName === 'opacity') {
if (isDeactivating) {
this.adapter_.removeClass(cssClasses.LINE_RIPPLE_ACTIVE);
this.adapter_.removeClass(cssClasses.LINE_RIPPLE_DEACTIVATING);
this.adapter.removeClass(cssClasses.LINE_RIPPLE_ACTIVE);
this.adapter.removeClass(cssClasses.LINE_RIPPLE_DEACTIVATING);
}
}
}
Expand Down

0 comments on commit a4aae3d

Please sign in to comment.