Skip to content

Commit

Permalink
fix(dialog): Use superclass properties without trailing underscores
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 312722073
  • Loading branch information
@patrickrodee @copybara-github
patrickrodee authored and copybara-github committed May 21, 2020
1 parent 541638f commit b4e2fe9
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 51 deletions.
57 changes: 33 additions & 24 deletions packages/mdc-dialog/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,31 +36,31 @@ const {strings} = MDCDialogFoundation;

export class MDCDialog extends MDCComponent<MDCDialogFoundation> {
get isOpen() {
return this.foundation_.isOpen();
return this.foundation.isOpen();
}

get escapeKeyAction() {
return this.foundation_.getEscapeKeyAction();
return this.foundation.getEscapeKeyAction();
}

set escapeKeyAction(action) {
this.foundation_.setEscapeKeyAction(action);
this.foundation.setEscapeKeyAction(action);
}

get scrimClickAction() {
return this.foundation_.getScrimClickAction();
return this.foundation.getScrimClickAction();
}

set scrimClickAction(action) {
this.foundation_.setScrimClickAction(action);
this.foundation.setScrimClickAction(action);
}

get autoStackButtons() {
return this.foundation_.getAutoStackButtons();
return this.foundation.getAutoStackButtons();
}

set autoStackButtons(autoStack) {
this.foundation_.setAutoStackButtons(autoStack);
this.foundation.setAutoStackButtons(autoStack);
}

static attachTo(root: Element) {
Expand All @@ -86,14 +86,18 @@ export class MDCDialog extends MDCComponent<MDCDialogFoundation> {
initialize(
focusTrapFactory: MDCDialogFocusTrapFactory = (el, focusOptions) => new FocusTrap(el, focusOptions),
) {
const container = this.root_.querySelector<HTMLElement>(strings.CONTAINER_SELECTOR);
const container =
this.root.querySelector<HTMLElement>(strings.CONTAINER_SELECTOR);
if (!container) {
throw new Error(`Dialog component requires a ${strings.CONTAINER_SELECTOR} container element`);
}
this.container_ = container;
this.content_ = this.root_.querySelector<HTMLElement>(strings.CONTENT_SELECTOR);
this.buttons_ = [].slice.call(this.root_.querySelectorAll<HTMLElement>(strings.BUTTON_SELECTOR));
this.defaultButton_ = this.root_.querySelector<HTMLElement>(`[${strings.BUTTON_DEFAULT_ATTRIBUTE}]`);
this.content_ =
this.root.querySelector<HTMLElement>(strings.CONTENT_SELECTOR);
this.buttons_ = [].slice.call(
this.root.querySelectorAll<HTMLElement>(strings.BUTTON_SELECTOR));
this.defaultButton_ = this.root.querySelector<HTMLElement>(
`[${strings.BUTTON_DEFAULT_ATTRIBUTE}]`);
this.focusTrapFactory_ = focusTrapFactory;
this.buttonRipples_ = [];

Expand All @@ -106,9 +110,10 @@ export class MDCDialog extends MDCComponent<MDCDialogFoundation> {
this.focusTrap_ = util.createFocusTrapInstance(
this.container_, this.focusTrapFactory_, this.getInitialFocusEl_() || undefined);

this.handleClick_ = this.foundation_.handleClick.bind(this.foundation_);
this.handleKeydown_ = this.foundation_.handleKeydown.bind(this.foundation_);
this.handleDocumentKeydown_ = this.foundation_.handleDocumentKeydown.bind(this.foundation_);
this.handleClick_ = this.foundation.handleClick.bind(this.foundation);
this.handleKeydown_ = this.foundation.handleKeydown.bind(this.foundation);
this.handleDocumentKeydown_ =
this.foundation.handleDocumentKeydown.bind(this.foundation);
this.handleLayout_ = this.layout.bind(this);

const LAYOUT_EVENTS = ['resize', 'orientationchange'];
Expand Down Expand Up @@ -139,26 +144,28 @@ export class MDCDialog extends MDCComponent<MDCDialogFoundation> {
}

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

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

close(action = '') {
this.foundation_.close(action);
this.foundation.close(action);
}

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.
const adapter: MDCDialogAdapter = {
addBodyClass: (className) => document.body.classList.add(className),
addClass: (className) => this.root_.classList.add(className),
addClass: (className) => this.root.classList.add(className),
areButtonsStacked: () => util.areTopsMisaligned(this.buttons_),
clickDefaultButton: () => this.defaultButton_ && this.defaultButton_.click(),
eventTargetMatches: (target, selector) => target ? matches(target as Element, selector) : false,
clickDefaultButton: () =>
this.defaultButton_ && this.defaultButton_.click(),
eventTargetMatches: (target, selector) =>
target ? matches(target as Element, selector) : false,
getActionFromEvent: (evt: Event) => {
if (!evt.target) {
return '';
Expand All @@ -167,15 +174,17 @@ export class MDCDialog extends MDCComponent<MDCDialogFoundation> {
return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
},
getInitialFocusEl: () => this.getInitialFocusEl_(),
hasClass: (className) => this.root_.classList.contains(className),
hasClass: (className) => this.root.classList.contains(className),
isContentScrollable: () => util.isScrollable(this.content_),
notifyClosed: (action) => this.emit<MDCDialogCloseEventDetail>(strings.CLOSED_EVENT, action ? {action} : {}),
notifyClosing: (action) => this.emit<MDCDialogCloseEventDetail>(strings.CLOSING_EVENT, action ? {action} : {}),
notifyClosed: (action) => this.emit<MDCDialogCloseEventDetail>(
strings.CLOSED_EVENT, action ? {action} : {}),
notifyClosing: (action) => this.emit<MDCDialogCloseEventDetail>(
strings.CLOSING_EVENT, action ? {action} : {}),
notifyOpened: () => this.emit(strings.OPENED_EVENT, {}),
notifyOpening: () => this.emit(strings.OPENING_EVENT, {}),
releaseFocus: () => this.focusTrap_.releaseFocus(),
removeBodyClass: (className) => document.body.classList.remove(className),
removeClass: (className) => this.root_.classList.remove(className),
removeClass: (className) => this.root.classList.remove(className),
reverseButtons: () => {
this.buttons_.reverse();
this.buttons_.forEach((button) => {
Expand Down
55 changes: 28 additions & 27 deletions packages/mdc-dialog/foundation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {
}

init() {
if (this.adapter_.hasClass(cssClasses.STACKED)) {
if (this.adapter.hasClass(cssClasses.STACKED)) {
this.setAutoStackButtons(false);
}
}
Expand All @@ -98,20 +98,20 @@ export class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {

open() {
this.isOpen_ = true;
this.adapter_.notifyOpening();
this.adapter_.addClass(cssClasses.OPENING);
this.adapter.notifyOpening();
this.adapter.addClass(cssClasses.OPENING);

// Wait a frame once display is no longer "none", to establish basis for animation
this.runNextAnimationFrame_(() => {
this.adapter_.addClass(cssClasses.OPEN);
this.adapter_.addBodyClass(cssClasses.SCROLL_LOCK);
this.adapter.addClass(cssClasses.OPEN);
this.adapter.addBodyClass(cssClasses.SCROLL_LOCK);

this.layout();

this.animationTimer_ = setTimeout(() => {
this.handleAnimationTimerEnd_();
this.adapter_.trapFocus(this.adapter_.getInitialFocusEl());
this.adapter_.notifyOpened();
this.adapter.trapFocus(this.adapter.getInitialFocusEl());
this.adapter.notifyOpened();
}, numbers.DIALOG_ANIMATION_OPEN_TIME_MS);
});
}
Expand All @@ -123,19 +123,19 @@ export class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {
}

this.isOpen_ = false;
this.adapter_.notifyClosing(action);
this.adapter_.addClass(cssClasses.CLOSING);
this.adapter_.removeClass(cssClasses.OPEN);
this.adapter_.removeBodyClass(cssClasses.SCROLL_LOCK);
this.adapter.notifyClosing(action);
this.adapter.addClass(cssClasses.CLOSING);
this.adapter.removeClass(cssClasses.OPEN);
this.adapter.removeBodyClass(cssClasses.SCROLL_LOCK);

cancelAnimationFrame(this.animationFrame_);
this.animationFrame_ = 0;

clearTimeout(this.animationTimer_);
this.animationTimer_ = setTimeout(() => {
this.adapter_.releaseFocus();
this.adapter.releaseFocus();
this.handleAnimationTimerEnd_();
this.adapter_.notifyClosed(action);
this.adapter.notifyClosed(action);
}, numbers.DIALOG_ANIMATION_CLOSE_TIME_MS);
}

Expand Down Expand Up @@ -179,12 +179,13 @@ export class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {

/** Handles click on the dialog root element. */
handleClick(evt: MouseEvent) {
const isScrim = this.adapter_.eventTargetMatches(evt.target, strings.SCRIM_SELECTOR);
const isScrim =
this.adapter.eventTargetMatches(evt.target, strings.SCRIM_SELECTOR);
// Check for scrim click first since it doesn't require querying ancestors.
if (isScrim && this.scrimClickAction_ !== '') {
this.close(this.scrimClickAction_);
} else {
const action = this.adapter_.getActionFromEvent(evt);
const action = this.adapter.getActionFromEvent(evt);
if (action) {
this.close(action);
}
Expand All @@ -197,17 +198,17 @@ export class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {
if (!isEnter) {
return;
}
const action = this.adapter_.getActionFromEvent(evt);
const action = this.adapter.getActionFromEvent(evt);
if (action) {
// Action button callback is handled in `handleClick`,
// since space/enter keydowns on buttons trigger click events.
return;
}

const isDefault = !this.adapter_.eventTargetMatches(
const isDefault = !this.adapter.eventTargetMatches(
evt.target, strings.SUPPRESS_DEFAULT_PRESS_SELECTOR);
if (isEnter && isDefault) {
this.adapter_.clickDefaultButton();
this.adapter.clickDefaultButton();
}
}

Expand All @@ -228,8 +229,8 @@ export class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {

private handleAnimationTimerEnd_() {
this.animationTimer_ = 0;
this.adapter_.removeClass(cssClasses.OPENING);
this.adapter_.removeClass(cssClasses.CLOSING);
this.adapter.removeClass(cssClasses.OPENING);
this.adapter.removeClass(cssClasses.CLOSING);
}

/**
Expand All @@ -246,25 +247,25 @@ export class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {

private detectStackedButtons_() {
// Remove the class first to let us measure the buttons' natural positions.
this.adapter_.removeClass(cssClasses.STACKED);
this.adapter.removeClass(cssClasses.STACKED);

const areButtonsStacked = this.adapter_.areButtonsStacked();
const areButtonsStacked = this.adapter.areButtonsStacked();

if (areButtonsStacked) {
this.adapter_.addClass(cssClasses.STACKED);
this.adapter.addClass(cssClasses.STACKED);
}

if (areButtonsStacked !== this.areButtonsStacked_) {
this.adapter_.reverseButtons();
this.adapter.reverseButtons();
this.areButtonsStacked_ = areButtonsStacked;
}
}

private detectScrollableContent_() {
// Remove the class first to let us measure the natural height of the content.
this.adapter_.removeClass(cssClasses.SCROLLABLE);
if (this.adapter_.isContentScrollable()) {
this.adapter_.addClass(cssClasses.SCROLLABLE);
this.adapter.removeClass(cssClasses.SCROLLABLE);
if (this.adapter.isContentScrollable()) {
this.adapter.addClass(cssClasses.SCROLLABLE);
}
}
}
Expand Down

0 comments on commit b4e2fe9

Please sign in to comment.