Skip to content

Commit

Permalink
fix(menu): Use superclass properties without trailing underscores
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 312718215
  • Loading branch information
@patrickrodee @copybara-github
patrickrodee authored and copybara-github committed May 21, 2020
1 parent a4aae3d commit 0008c8a
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 37 deletions.
40 changes: 24 additions & 16 deletions packages/mdc-menu/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,19 +61,21 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
}

initialSyncWithDOM() {
this.menuSurface_ = this.menuSurfaceFactory_(this.root_);
this.menuSurface_ = this.menuSurfaceFactory_(this.root);

const list = this.root_.querySelector(strings.LIST_SELECTOR);
const list = this.root.querySelector(strings.LIST_SELECTOR);
if (list) {
this.list_ = this.listFactory_(list);
this.list_.wrapFocus = true;
} else {
this.list_ = null;
}

this.handleKeydown_ = (evt) => this.foundation_.handleKeydown(evt);
this.handleItemAction_ = (evt) => this.foundation_.handleItemAction(this.items[evt.detail.index]);
this.handleMenuSurfaceOpened_ = () => this.foundation_.handleMenuSurfaceOpened();
this.handleKeydown_ = (evt) => this.foundation.handleKeydown(evt);
this.handleItemAction_ = (evt) =>
this.foundation.handleItemAction(this.items[evt.detail.index]);
this.handleMenuSurfaceOpened_ = () =>
this.foundation.handleMenuSurfaceOpened();

this.menuSurface_.listen(MDCMenuSurfaceFoundation.strings.OPENED_EVENT, this.handleMenuSurfaceOpened_);
this.listen('keydown', this.handleKeydown_);
Expand Down Expand Up @@ -154,7 +156,7 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
* @param focusState Default focus state.
*/
setDefaultFocusState(focusState: DefaultFocusState) {
this.foundation_.setDefaultFocusState(focusState);
this.foundation.setDefaultFocusState(focusState);
}

/**
Expand All @@ -173,7 +175,7 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
* @param index Index of list item within menu.
*/
setSelectedIndex(index: number) {
this.foundation_.setSelectedIndex(index);
this.foundation.setSelectedIndex(index);
}

/**
Expand All @@ -182,7 +184,7 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
* @param isEnabled The desired enabled state of the menu item.
*/
setEnabled(index: number, isEnabled: boolean): void {
this.foundation_.setEnabled(index, isEnabled);
this.foundation.setEnabled(index, isEnabled);
}

/**
Expand Down Expand Up @@ -238,17 +240,23 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
const list = this.items;
list[index].removeAttribute(attr);
},
elementContainsClass: (element, className) => element.classList.contains(className),
closeSurface: (skipRestoreFocus: boolean) => this.menuSurface_.close(skipRestoreFocus),
elementContainsClass: (element, className) =>
element.classList.contains(className),
closeSurface: (skipRestoreFocus: boolean) =>
this.menuSurface_.close(skipRestoreFocus),
getElementIndex: (element) => this.items.indexOf(element),
notifySelected: (evtData) => this.emit<MDCMenuItemComponentEventDetail>(strings.SELECTED_EVENT, {
index: evtData.index,
item: this.items[evtData.index],
}),
notifySelected: (evtData) =>
this.emit<MDCMenuItemComponentEventDetail>(strings.SELECTED_EVENT, {
index: evtData.index,
item: this.items[evtData.index],
}),
getMenuItemCount: () => this.items.length,
focusItemAtIndex: (index) => (this.items[index] as HTMLElement).focus(),
focusListRoot: () => (this.root_.querySelector(strings.LIST_SELECTOR) as HTMLElement).focus(),
isSelectableItemAtIndex: (index) => !!closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`),
focusListRoot: () =>
(this.root.querySelector(strings.LIST_SELECTOR) as HTMLElement)
.focus(),
isSelectableItemAtIndex: (index) =>
!!closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`),
getSelectedSiblingOfItemAtIndex: (index) => {
const selectionGroupEl = closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`) as HTMLElement;
const selectedItemEl = selectionGroupEl.querySelector(`.${cssClasses.MENU_SELECTED_LIST_ITEM}`);
Expand Down
51 changes: 30 additions & 21 deletions packages/mdc-menu/foundation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,32 +75,32 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
clearTimeout(this.closeAnimationEndTimerId_);
}

this.adapter_.closeSurface();
this.adapter.closeSurface();
}

handleKeydown(evt: KeyboardEvent) {
const {key, keyCode} = evt;
const isTab = key === 'Tab' || keyCode === 9;

if (isTab) {
this.adapter_.closeSurface(/** skipRestoreFocus */ true);
this.adapter.closeSurface(/** skipRestoreFocus */ true);
}
}

handleItemAction(listItem: Element) {
const index = this.adapter_.getElementIndex(listItem);
const index = this.adapter.getElementIndex(listItem);
if (index < 0) {
return;
}

this.adapter_.notifySelected({index});
this.adapter_.closeSurface();
this.adapter.notifySelected({index});
this.adapter.closeSurface();

// Wait for the menu to close before adding/removing classes that affect styles.
this.closeAnimationEndTimerId_ = setTimeout(() => {
// Recompute the index in case the menu contents have changed.
const recomputedIndex = this.adapter_.getElementIndex(listItem);
if (this.adapter_.isSelectableItemAtIndex(recomputedIndex)) {
const recomputedIndex = this.adapter.getElementIndex(listItem);
if (this.adapter.isSelectableItemAtIndex(recomputedIndex)) {
this.setSelectedIndex(recomputedIndex);
}
}, MDCMenuSurfaceFoundation.numbers.TRANSITION_CLOSE_DURATION);
Expand All @@ -109,16 +109,16 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
handleMenuSurfaceOpened() {
switch (this.defaultFocusState_) {
case DefaultFocusState.FIRST_ITEM:
this.adapter_.focusItemAtIndex(0);
this.adapter.focusItemAtIndex(0);
break;
case DefaultFocusState.LAST_ITEM:
this.adapter_.focusItemAtIndex(this.adapter_.getMenuItemCount() - 1);
this.adapter.focusItemAtIndex(this.adapter.getMenuItemCount() - 1);
break;
case DefaultFocusState.NONE:
// Do nothing.
break;
default:
this.adapter_.focusListRoot();
this.adapter.focusListRoot();
break;
}
}
Expand All @@ -139,18 +139,23 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
setSelectedIndex(index: number) {
this.validatedIndex_(index);

if (!this.adapter_.isSelectableItemAtIndex(index)) {
if (!this.adapter.isSelectableItemAtIndex(index)) {
throw new Error('MDCMenuFoundation: No selection group at specified index.');
}

const prevSelectedIndex = this.adapter_.getSelectedSiblingOfItemAtIndex(index);
const prevSelectedIndex =
this.adapter.getSelectedSiblingOfItemAtIndex(index);
if (prevSelectedIndex >= 0) {
this.adapter_.removeAttributeFromElementAtIndex(prevSelectedIndex, strings.ARIA_CHECKED_ATTR);
this.adapter_.removeClassFromElementAtIndex(prevSelectedIndex, cssClasses.MENU_SELECTED_LIST_ITEM);
this.adapter.removeAttributeFromElementAtIndex(
prevSelectedIndex, strings.ARIA_CHECKED_ATTR);
this.adapter.removeClassFromElementAtIndex(
prevSelectedIndex, cssClasses.MENU_SELECTED_LIST_ITEM);
}

this.adapter_.addClassToElementAtIndex(index, cssClasses.MENU_SELECTED_LIST_ITEM);
this.adapter_.addAttributeToElementAtIndex(index, strings.ARIA_CHECKED_ATTR, 'true');
this.adapter.addClassToElementAtIndex(
index, cssClasses.MENU_SELECTED_LIST_ITEM);
this.adapter.addAttributeToElementAtIndex(
index, strings.ARIA_CHECKED_ATTR, 'true');
}

/**
Expand All @@ -162,16 +167,20 @@ export class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
this.validatedIndex_(index);

if (isEnabled) {
this.adapter_.removeClassFromElementAtIndex(index, listCssClasses.LIST_ITEM_DISABLED_CLASS);
this.adapter_.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'false');
this.adapter.removeClassFromElementAtIndex(
index, listCssClasses.LIST_ITEM_DISABLED_CLASS);
this.adapter.addAttributeToElementAtIndex(
index, strings.ARIA_DISABLED_ATTR, 'false');
} else {
this.adapter_.addClassToElementAtIndex(index, listCssClasses.LIST_ITEM_DISABLED_CLASS);
this.adapter_.addAttributeToElementAtIndex(index, strings.ARIA_DISABLED_ATTR, 'true');
this.adapter.addClassToElementAtIndex(
index, listCssClasses.LIST_ITEM_DISABLED_CLASS);
this.adapter.addAttributeToElementAtIndex(
index, strings.ARIA_DISABLED_ATTR, 'true');
}
}

private validatedIndex_(index: number): void {
const menuSize = this.adapter_.getMenuItemCount();
const menuSize = this.adapter.getMenuItemCount();
const isIndexInRange = index >= 0 && index < menuSize;

if (!isIndexInRange) {
Expand Down

0 comments on commit 0008c8a

Please sign in to comment.