How to use the @material/dom/ponyfill.closest function in @material/dom

To help you get started, we’ve selected a few @material/dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github material-components / material-components-web / packages / mdc-list / component.ts View on Github external
private getListItemIndex_(evt: Event) {
    const eventTarget = evt.target as Element;
    const nearestParent = closest(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);

    // Get the index of the element if it is a list item.
    if (nearestParent && matches(nearestParent, `.${cssClasses.LIST_ITEM_CLASS}`)) {
      return this.listElements.indexOf(nearestParent);
    }

    return -1;
  }
github pgbross / vue-material-adapter / packages / mcwv-menu / menu.js View on Github external
isSelectableItemAtIndex: index =>
        !!closest(this.items[index], `.${cssClasses.MENU_SELECTION_GROUP}`),
      getSelectedSiblingOfItemAtIndex: index => {
github material-components / material-components-web / packages / mdc-data-table / component.ts View on Github external
getRowIndexByChildElement: (el: Element) => {
        return this.getRows().indexOf((closest(el, strings.ROW_SELECTOR) as HTMLElement));
      },
      getSelectedRowCount: () => this.root_.querySelectorAll(strings.ROW_SELECTED_SELECTOR).length,
github pgbross / vue-material-adapter / packages / mcwv-snackbar / mdc-snackbar.js View on Github external
isActionIcon_(target) {
      return Boolean(
        closest(target, MDCSnackbarFoundation.strings.DISMISS_SELECTOR),
      );
    },
github material-components / material-components-web / packages / mdc-snackbar / component.ts View on Github external
private isActionIcon_(target: Element): boolean {
    return Boolean(closest(target, DISMISS_SELECTOR));
  }
}
github pgbross / vue-material-adapter / packages / mcwv-menu / menu.js View on Github external
getSelectedSiblingOfItemAtIndex: index => {
        const selectionGroupEl = closest(
          this.items[index],
          `.${cssClasses.MENU_SELECTION_GROUP}`,
        );
        const selectedItemEl = selectionGroupEl.querySelector(
          `.${cssClasses.MENU_SELECTED_LIST_ITEM}`,
        );
        return selectedItemEl ? this.items.indexOf(selectedItemEl) : -1;
      },
      notifySelected: evtData => {
github trimox / angular-mdc-web / packages / menu / menu.ts View on Github external
isSelectableItemAtIndex: (index: number) =>
        !!closest(this.listItems.toArray()[index].getListItemElement(), `.${cssClasses.MENU_SELECTION_GROUP}`),
      getSelectedSiblingOfItemAtIndex: (index: number) => {
github material-components / material-components-web / packages / mdc-snackbar / component.ts View on Github external
private isActionButton_(target: Element): boolean {
    return Boolean(closest(target, ACTION_SELECTOR));
  }
github material-components / material-components-web / packages / mdc-dialog / component.ts View on Github external
getActionFromEvent: (evt: Event) => {
        if (!evt.target) {
          return '';
        }
        const element = closest(evt.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);
        return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
      },
      hasClass: (className) => this.root_.classList.contains(className),
github material-components / material-components-web-components / packages / select / src / mwc-select-base.ts View on Github external
getSelectedSiblingOfItemAtIndex: (index) => {
        if (!this.listElement) {
          return -1;
        }

        const elementAtIndex =
            mwcList.getElementAtIndex(this.listElement, index);

        if (!elementAtIndex) {
          return -1;
        }

        const selectionGroupEl =
            closest(elementAtIndex, '.mdc-menu__selection-group');

        if (!selectionGroupEl) {
          return -1;
        }

        const selectedItemEl =
            selectionGroupEl.querySelector('.mdc-menu-item--selected');

        if (!selectedItemEl) {
          return -1;
        }

        const elements = mwcList.listElements(this.listElement);

        return elements.indexOf(selectedItemEl);
      },

@material/dom

DOM manipulation utilities for Material Components for the web

MIT
Latest version published 3 years ago

Package Health Score

85 / 100
Full package analysis

Similar packages