chore(list): Remove all references to Element from MDCListAdapter (#3398)

BREAKING CHANGE: Please update calls to MDCListFoundation.handleKeydown to pass in isRootListItem and listItemIndex, and update both MDCListFoundation.handleFocusIn, MDCListFoundation.handleFocusOut to pass in listItemIndex

Author: lynnmercier

packages/mdc-list/adapter.js

@@ -44,9 +44,6 @@ class MDCListAdapter {
    * @return {number} */
   getFocusedElementIndex() {}
 
-  /** @param {Element} node */
-  getListItemIndex(node) {}
-
   /**
    * @param {number} index
    * @param {string} attribute
@@ -78,12 +75,6 @@ class MDCListAdapter {
    */
   focusItemAtIndex(index) {}
 
-  /**
-   * Checks if the provided element is contains the mdc-list-item class.
-   * @param {Element} ele
-   */
-  isListItem(ele) {}
-
   /**
    * Sets the tabindex to the value specified for all button/a element children of
    * the list item at the index specified.

packages/mdc-list/foundation.js

@@ -47,13 +47,11 @@ class MDCListFoundation extends MDCFoundation {
     return /** @type {!MDCListAdapter} */ ({
       getListItemCount: () => {},
       getFocusedElementIndex: () => {},
-      getListItemIndex: () => {},
       setAttributeForElementIndex: () => {},
       removeAttributeForElementIndex: () => {},
       addClassForElementIndex: () => {},
       removeClassForElementIndex: () => {},
       focusItemAtIndex: () => {},
-      isListItem: () => {},
       setTabIndexForListItemChildren: () => {},
       followHref: () => {},
     });
@@ -135,13 +133,9 @@ class MDCListFoundation extends MDCFoundation {
   /**
    * Focus in handler for the list items.
    * @param evt
+   * @param {number} listItemIndex
    */
-  handleFocusIn(evt) {
-    const listItem = this.getListItem_(evt.target);
-    if (!listItem) return;
-
-    const listItemIndex = this.adapter_.getListItemIndex(listItem);
-
+  handleFocusIn(evt, listItemIndex) {
     if (listItemIndex >= 0) {
       this.adapter_.setTabIndexForListItemChildren(listItemIndex, 0);
     }
@@ -150,12 +144,9 @@ class MDCListFoundation extends MDCFoundation {
   /**
    * Focus out handler for the list items.
    * @param {Event} evt
+   * @param {number} listItemIndex
    */
-  handleFocusOut(evt) {
-    const listItem = this.getListItem_(evt.target);
-    if (!listItem) return;
-    const listItemIndex = this.adapter_.getListItemIndex(listItem);
-
+  handleFocusOut(evt, listItemIndex) {
     if (listItemIndex >= 0) {
       this.adapter_.setTabIndexForListItemChildren(listItemIndex, -1);
     }
@@ -164,8 +155,10 @@ class MDCListFoundation extends MDCFoundation {
   /**
    * Key handler for the list.
    * @param {Event} evt
+   * @param {boolean} isRootListItem
+   * @param {number} listItemIndex
    */
-  handleKeydown(evt) {
+  handleKeydown(evt, isRootListItem, listItemIndex) {
     const arrowLeft = evt.key === 'ArrowLeft' || evt.keyCode === 37;
     const arrowUp = evt.key === 'ArrowUp' || evt.keyCode === 38;
     const arrowRight = evt.key === 'ArrowRight' || evt.keyCode === 39;
@@ -176,10 +169,8 @@ class MDCListFoundation extends MDCFoundation {
     const isSpace = evt.key === 'Space' || evt.keyCode === 32;
 
     let currentIndex = this.adapter_.getFocusedElementIndex();
-
     if (currentIndex === -1) {
-      currentIndex = this.adapter_.getListItemIndex(this.getListItem_(evt.target));
-
+      currentIndex = listItemIndex;
       if (currentIndex < 0) {
         // If this event doesn't have a mdc-list-item ancestor from the
         // current list (not from a sublist), return early.
@@ -202,11 +193,11 @@ class MDCListFoundation extends MDCFoundation {
     } else if (this.isSingleSelectionList_ && (isEnter || isSpace)) {
       this.preventDefaultEvent_(evt);
       // Check if the space key was pressed on the list item or a child element.
-      if (this.adapter_.isListItem(evt.target)) {
+      if (isRootListItem) {
         this.setSelectedIndex(currentIndex);
 
-        // Explicitly activate links, since we're preventing default on Enter, and Space doesn't activate them
-        this.adapter_.followHref(evt.target);
+        // Explicitly activate links, since we're preventing default on Enter, and Space doesn't activate them.
+        this.adapter_.followHref(currentIndex);
       }
     }
   }
@@ -282,20 +273,6 @@ class MDCListFoundation extends MDCFoundation {
       this.adapter_.focusItemAtIndex(lastIndex);
     }
   }
-
-  /**
-   * Utility method to find the first ancestor with the mdc-list-item class.
-   * @param {EventTarget} target
-   * @return {?Element}
-   * @private
-   */
-  getListItem_(target) {
-    while (!this.adapter_.isListItem(target)) {
-      if (!target.parentElement) return null;
-      target = target.parentElement;
-    }
-    return target;
-  }
 }
 
 export default MDCListFoundation;

packages/mdc-list/index.js

@@ -59,10 +59,10 @@ class MDCList extends MDCComponent {
   }
 
   initialSyncWithDOM() {
-    this.handleKeydown_ = this.foundation_.handleKeydown.bind(this.foundation_);
     this.handleClick_ = this.foundation_.handleClick.bind(this.foundation_);
-    this.focusInEventListener_ = this.foundation_.handleFocusIn.bind(this.foundation_);
-    this.focusOutEventListener_ = this.foundation_.handleFocusOut.bind(this.foundation_);
+    this.handleKeydown_ = this.handleKeydownEvent_.bind(this);
+    this.focusInEventListener_ = this.handleFocusInEvent_.bind(this);
+    this.focusOutEventListener_ = this.handleFocusOutEvent_.bind(this);
     this.root_.addEventListener('keydown', this.handleKeydown_);
     this.root_.addEventListener('focusin', this.focusInEventListener_);
     this.root_.addEventListener('focusout', this.focusOutEventListener_);
@@ -85,6 +85,63 @@ class MDCList extends MDCComponent {
       .forEach((ele) => ele.setAttribute('tabindex', -1));
   }
 
+  /**
+   * Used to figure out which list item this event is targetting. Or returns -1 if
+   * there is no list item
+   * @param {Event} evt
+   * @private
+   */
+  getListItemIndex_(evt) {
+    let eventTarget = /** @type {HTMLElement} */ (evt.target);
+    let index = -1;
+
+    // Find the first ancestor that is a list item or the list.
+    while (!eventTarget.classList.contains(cssClasses.LIST_ITEM_CLASS)
+    && !eventTarget.classList.contains(cssClasses.ROOT)) {
+      eventTarget = eventTarget.parentElement;
+    }
+
+    // Get the index of the element if it is a list item.
+    if (eventTarget.classList.contains(cssClasses.LIST_ITEM_CLASS)) {
+      index = this.listElements_.indexOf(eventTarget);
+    }
+
+    return index;
+  }
+
+  /**
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   * @param {Event} evt
+   * @private
+   */
+  handleFocusInEvent_(evt) {
+    const index = this.getListItemIndex_(evt);
+    this.foundation_.handleFocusIn(evt, index);
+  }
+
+  /**
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   * @param {Event} evt
+   * @private
+   */
+  handleFocusOutEvent_(evt) {
+    const index = this.getListItemIndex_(evt);
+    this.foundation_.handleFocusOut(evt, index);
+  }
+
+  /**
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   * @param {Event} evt
+   * @private
+   */
+  handleKeydownEvent_(evt) {
+    const index = this.getListItemIndex_(evt);
+
+    if (index >= 0) {
+      this.foundation_.handleKeydown(evt, evt.target.classList.contains(cssClasses.LIST_ITEM_CLASS), index);
+    }
+  }
+
   initializeListType() {
     // Automatically set single selection if selected/activated classes are present.
     const preselectedElement =
@@ -136,7 +193,6 @@ class MDCList extends MDCComponent {
     return new MDCListFoundation(/** @type {!MDCListAdapter} */ (Object.assign({
       getListItemCount: () => this.listElements_.length,
       getFocusedElementIndex: () => this.listElements_.indexOf(document.activeElement),
-      getListItemIndex: (node) => this.listElements_.indexOf(node),
       setAttributeForElementIndex: (index, attr, value) => {
         const element = this.listElements_[index];
         if (element) {
@@ -161,7 +217,6 @@ class MDCList extends MDCComponent {
           element.classList.remove(className);
         }
       },
-      isListItem: (target) => target.classList.contains(cssClasses.LIST_ITEM_CLASS),
       focusItemAtIndex: (index) => {
         const element = this.listElements_[index];
         if (element) {
@@ -173,9 +228,10 @@ class MDCList extends MDCComponent {
         const listItemChildren = [].slice.call(element.querySelectorAll(strings.FOCUSABLE_CHILD_ELEMENTS));
         listItemChildren.forEach((ele) => ele.setAttribute('tabindex', tabIndexValue));
       },
-      followHref: (ele) => {
-        if (ele.href) {
-          ele.click();
+      followHref: (index) => {
+        const listItem = this.listElements_[index];
+        if (listItem && listItem.href) {
+          listItem.click();
         }
       },
     })));