Skip to content

Commit

Permalink
fix(ripple): Use superclass properties without trailing underscores
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 312723985
  • Loading branch information
@patrickrodee @copybara-github
patrickrodee authored and copybara-github committed May 21, 2020
1 parent 39b0b8e commit 6167cd0
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 58 deletions.
10 changes: 5 additions & 5 deletions packages/mdc-ripple/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,23 +83,23 @@ export class MDCRipple extends MDCComponent<MDCRippleFoundation> implements MDCR
}

activate() {
this.foundation_.activate();
this.foundation.activate();
}

deactivate() {
this.foundation_.deactivate();
this.foundation.deactivate();
}

layout() {
this.foundation_.layout();
this.foundation.layout();
}

getDefaultFoundation() {
return new MDCRippleFoundation(MDCRipple.createAdapter(this));
}

initialSyncWithDOM() {
const root = this.root_ as HTMLElement;
const root = this.root as HTMLElement;
this.unbounded = 'mdcRippleIsUnbounded' in root.dataset;
}

Expand All @@ -110,6 +110,6 @@ export class MDCRipple extends MDCComponent<MDCRippleFoundation> implements MDCR
* That's why this function exists.
*/
private setUnbounded_() {
this.foundation_.setUnbounded(Boolean(this.unbounded_));
this.foundation.setUnbounded(Boolean(this.unbounded_));
}
}
115 changes: 62 additions & 53 deletions packages/mdc-ripple/foundation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,9 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
if (supportsPressRipple) {
const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;
requestAnimationFrame(() => {
this.adapter_.addClass(ROOT);
if (this.adapter_.isUnbounded()) {
this.adapter_.addClass(UNBOUNDED);
this.adapter.addClass(ROOT);
if (this.adapter.isUnbounded()) {
this.adapter.addClass(UNBOUNDED);
// Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
this.layoutInternal_();
}
Expand All @@ -155,19 +155,20 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
if (this.activationTimer_) {
clearTimeout(this.activationTimer_);
this.activationTimer_ = 0;
this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
}

if (this.fgDeactivationRemovalTimer_) {
clearTimeout(this.fgDeactivationRemovalTimer_);
this.fgDeactivationRemovalTimer_ = 0;
this.adapter_.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
this.adapter.removeClass(
MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
}

const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses;
requestAnimationFrame(() => {
this.adapter_.removeClass(ROOT);
this.adapter_.removeClass(UNBOUNDED);
this.adapter.removeClass(ROOT);
this.adapter.removeClass(UNBOUNDED);
this.removeCssVars_();
});
}
Expand Down Expand Up @@ -200,20 +201,21 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
setUnbounded(unbounded: boolean): void {
const {UNBOUNDED} = MDCRippleFoundation.cssClasses;
if (unbounded) {
this.adapter_.addClass(UNBOUNDED);
this.adapter.addClass(UNBOUNDED);
} else {
this.adapter_.removeClass(UNBOUNDED);
this.adapter.removeClass(UNBOUNDED);
}
}

handleFocus(): void {
requestAnimationFrame(() =>
this.adapter_.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED));
requestAnimationFrame(
() => this.adapter.addClass(MDCRippleFoundation.cssClasses.BG_FOCUSED));
}

handleBlur(): void {
requestAnimationFrame(() =>
this.adapter_.removeClass(MDCRippleFoundation.cssClasses.BG_FOCUSED));
requestAnimationFrame(
() => this.adapter.removeClass(
MDCRippleFoundation.cssClasses.BG_FOCUSED));
}

/**
Expand All @@ -223,7 +225,7 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
* and then initialized at mount time on the client.
*/
private supportsPressRipple_(): boolean {
return this.adapter_.browserSupportsCssVars();
return this.adapter.browserSupportsCssVars();
}

private defaultActivationState_(): ActivationStateType {
Expand All @@ -243,43 +245,45 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
private registerRootHandlers_(supportsPressRipple: boolean) {
if (supportsPressRipple) {
ACTIVATION_EVENT_TYPES.forEach((evtType) => {
this.adapter_.registerInteractionHandler(evtType, this.activateHandler_);
this.adapter.registerInteractionHandler(evtType, this.activateHandler_);
});
if (this.adapter_.isUnbounded()) {
this.adapter_.registerResizeHandler(this.resizeHandler_);
if (this.adapter.isUnbounded()) {
this.adapter.registerResizeHandler(this.resizeHandler_);
}
}

this.adapter_.registerInteractionHandler('focus', this.focusHandler_);
this.adapter_.registerInteractionHandler('blur', this.blurHandler_);
this.adapter.registerInteractionHandler('focus', this.focusHandler_);
this.adapter.registerInteractionHandler('blur', this.blurHandler_);
}

private registerDeactivationHandlers_(evt: Event) {
if (evt.type === 'keydown') {
this.adapter_.registerInteractionHandler('keyup', this.deactivateHandler_);
this.adapter.registerInteractionHandler('keyup', this.deactivateHandler_);
} else {
POINTER_DEACTIVATION_EVENT_TYPES.forEach((evtType) => {
this.adapter_.registerDocumentInteractionHandler(evtType, this.deactivateHandler_);
this.adapter.registerDocumentInteractionHandler(
evtType, this.deactivateHandler_);
});
}
}

private deregisterRootHandlers_() {
ACTIVATION_EVENT_TYPES.forEach((evtType) => {
this.adapter_.deregisterInteractionHandler(evtType, this.activateHandler_);
this.adapter.deregisterInteractionHandler(evtType, this.activateHandler_);
});
this.adapter_.deregisterInteractionHandler('focus', this.focusHandler_);
this.adapter_.deregisterInteractionHandler('blur', this.blurHandler_);
this.adapter.deregisterInteractionHandler('focus', this.focusHandler_);
this.adapter.deregisterInteractionHandler('blur', this.blurHandler_);

if (this.adapter_.isUnbounded()) {
this.adapter_.deregisterResizeHandler(this.resizeHandler_);
if (this.adapter.isUnbounded()) {
this.adapter.deregisterResizeHandler(this.resizeHandler_);
}
}

private deregisterDeactivationHandlers_() {
this.adapter_.deregisterInteractionHandler('keyup', this.deactivateHandler_);
this.adapter.deregisterInteractionHandler('keyup', this.deactivateHandler_);
POINTER_DEACTIVATION_EVENT_TYPES.forEach((evtType) => {
this.adapter_.deregisterDocumentInteractionHandler(evtType, this.deactivateHandler_);
this.adapter.deregisterDocumentInteractionHandler(
evtType, this.deactivateHandler_);
});
}

Expand All @@ -288,13 +292,13 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
const keys = Object.keys(rippleStrings) as Array<keyof typeof rippleStrings>;
keys.forEach((key) => {
if (key.indexOf('VAR_') === 0) {
this.adapter_.updateCssVariable(rippleStrings[key], null);
this.adapter.updateCssVariable(rippleStrings[key], null);
}
});
}

private activate_(evt?: Event) {
if (this.adapter_.isSurfaceDisabled()) {
if (this.adapter.isSurfaceDisabled()) {
return;
}

Expand All @@ -317,8 +321,10 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
evt.type === 'mousedown' || evt.type === 'touchstart' || evt.type === 'pointerdown'
);

const hasActivatedChild = evt !== undefined && activatedTargets.length > 0 && activatedTargets.some(
(target) => this.adapter_.containsEventTarget(target));
const hasActivatedChild = evt !== undefined &&
activatedTargets.length > 0 &&
activatedTargets.some(
(target) => this.adapter.containsEventTarget(target));
if (hasActivatedChild) {
// Immediately reset activation state, while preserving logic that prevents touch follow-on events
this.resetActivationState_();
Expand Down Expand Up @@ -362,7 +368,9 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
}

private checkElementMadeActive_(evt?: Event) {
return (evt !== undefined && evt.type === 'keydown') ? this.adapter_.isSurfaceActive() : true;
return (evt !== undefined && evt.type === 'keydown') ?
this.adapter.isSurfaceActive() :
true;
}

private animateActivation_() {
Expand All @@ -375,23 +383,23 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
let translateStart = '';
let translateEnd = '';

if (!this.adapter_.isUnbounded()) {
if (!this.adapter.isUnbounded()) {
const {startPoint, endPoint} = this.getFgTranslationCoordinates_();
translateStart = `${startPoint.x}px, ${startPoint.y}px`;
translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
}

this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
this.adapter_.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
this.adapter.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
this.adapter.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
// Cancel any ongoing activation/deactivation animations
clearTimeout(this.activationTimer_);
clearTimeout(this.fgDeactivationRemovalTimer_);
this.rmBoundedActivationClasses_();
this.adapter_.removeClass(FG_DEACTIVATION);
this.adapter.removeClass(FG_DEACTIVATION);

// Force layout in order to re-trigger the animation.
this.adapter_.computeBoundingRect();
this.adapter_.addClass(FG_ACTIVATION);
this.adapter.computeBoundingRect();
this.adapter.addClass(FG_ACTIVATION);
this.activationTimer_ = setTimeout(() => this.activationTimerCallback_(), DEACTIVATION_TIMEOUT_MS);
}

Expand All @@ -402,8 +410,8 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
if (wasActivatedByPointer) {
startPoint = getNormalizedEventCoords(
activationEvent,
this.adapter_.getWindowPageOffset(),
this.adapter_.computeBoundingRect(),
this.adapter.getWindowPageOffset(),
this.adapter.computeBoundingRect(),
);
} else {
startPoint = {
Expand Down Expand Up @@ -434,18 +442,18 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {

if (activationHasEnded && this.activationAnimationHasEnded_) {
this.rmBoundedActivationClasses_();
this.adapter_.addClass(FG_DEACTIVATION);
this.adapter.addClass(FG_DEACTIVATION);
this.fgDeactivationRemovalTimer_ = setTimeout(() => {
this.adapter_.removeClass(FG_DEACTIVATION);
this.adapter.removeClass(FG_DEACTIVATION);
}, numbers.FG_DEACTIVATION_MS);
}
}

private rmBoundedActivationClasses_() {
const {FG_ACTIVATION} = MDCRippleFoundation.cssClasses;
this.adapter_.removeClass(FG_ACTIVATION);
this.adapter.removeClass(FG_ACTIVATION);
this.activationAnimationHasEnded_ = false;
this.adapter_.computeBoundingRect();
this.adapter.computeBoundingRect();
}

private resetActivationState_() {
Expand Down Expand Up @@ -485,7 +493,7 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
}

private layoutInternal_() {
this.frame_ = this.adapter_.computeBoundingRect();
this.frame_ = this.adapter.computeBoundingRect();
const maxDim = Math.max(this.frame_.height, this.frame_.width);

// Surface diameter is treated differently for unbounded vs. bounded ripples.
Expand All @@ -499,12 +507,12 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
return hypotenuse + MDCRippleFoundation.numbers.PADDING;
};

this.maxRadius_ = this.adapter_.isUnbounded() ? maxDim : getBoundedRadius();
this.maxRadius_ = this.adapter.isUnbounded() ? maxDim : getBoundedRadius();

// Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
const initialSize = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
// Unbounded ripple size should always be even number to equally center align.
if (this.adapter_.isUnbounded() && initialSize % 2 !== 0) {
if (this.adapter.isUnbounded() && initialSize % 2 !== 0) {
this.initialSize_ = initialSize - 1;
} else {
this.initialSize_ = initialSize;
Expand All @@ -519,17 +527,18 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
VAR_FG_SIZE, VAR_LEFT, VAR_TOP, VAR_FG_SCALE,
} = MDCRippleFoundation.strings;

this.adapter_.updateCssVariable(VAR_FG_SIZE, `${this.initialSize_}px`);
this.adapter_.updateCssVariable(VAR_FG_SCALE, this.fgScale_);
this.adapter.updateCssVariable(VAR_FG_SIZE, `${this.initialSize_}px`);
this.adapter.updateCssVariable(VAR_FG_SCALE, this.fgScale_);

if (this.adapter_.isUnbounded()) {
if (this.adapter.isUnbounded()) {
this.unboundedCoords_ = {
left: Math.round((this.frame_.width / 2) - (this.initialSize_ / 2)),
top: Math.round((this.frame_.height / 2) - (this.initialSize_ / 2)),
};

this.adapter_.updateCssVariable(VAR_LEFT, `${this.unboundedCoords_.left}px`);
this.adapter_.updateCssVariable(VAR_TOP, `${this.unboundedCoords_.top}px`);
this.adapter.updateCssVariable(
VAR_LEFT, `${this.unboundedCoords_.left}px`);
this.adapter.updateCssVariable(VAR_TOP, `${this.unboundedCoords_.top}px`);
}
}
}
Expand Down

0 comments on commit 6167cd0

Please sign in to comment.