How to use the @material/menu.MDCMenuFoundation function in @material/menu

To help you get started, we’ve selected a few @material/menu 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 trimox / angular-mdc-web / packages / menu / menu.ts View on Github external
const selectionGroupEl = closest(this.listItems.toArray()[index].getListItemElement(),
          `.${cssClasses.MENU_SELECTION_GROUP}`) as HTMLElement;
        const selectedItemEl = selectionGroupEl.querySelector(`.${cssClasses.MENU_SELECTED_LIST_ITEM}`);
        return selectedItemEl ? this.listItems.toArray().findIndex(_ =>
          _.elementRef.nativeElement === selectedItemEl) : -1;
      }
    });
  }

  private _menuFoundation: {
    destroy(): void,
    handleKeydown(evt: KeyboardEvent): void,
    handleItemAction(listItem: HTMLElement): void,
    handleMenuSurfaceOpened(): void,
    setDefaultFocusState(focusState: DefaultFocusState): void
  } = new MDCMenuFoundation(this._createAdapter());

  ngAfterContentInit(): void {
    this.initMenuSurface();
    this._initList();
    this._listenForListItemActions();

    this.opened.pipe(takeUntil(this._destroyed))
      .subscribe(() => this._menuFoundation.handleMenuSurfaceOpened());
  }

  ngOnDestroy(): void {
    this._destroyed.next();
    this._destroyed.complete();

    this.destroyMenuSurface();
    this._menuFoundation.destroy();
github fintechstudios / angularjs-mdc / src / mdc-menu / menu / component.js View on Github external
getDefaultFoundation() {
    return new MDCMenuFoundation({
      addClass: (className) => this.root_.classList.add(className),
      removeClass: (className) => this.root_.classList.remove(className),
      hasClass: (className) => this.root_.classList.contains(className),
      hasNecessaryDom: () => Boolean(this.itemsContainer_),
      getAttributeForEventTarget: (target, attributeName) => target.getAttribute(attributeName),
      eventTargetHasClass: (target, className) => target.classList.contains(className),
      getInnerDimensions: () => {
        const {itemsContainer_: itemsContainer} = this;
        return {width: itemsContainer.offsetWidth, height: itemsContainer.offsetHeight};
      },
      hasAnchor: () => Boolean(this.mdcMenuAnchorCtrl),
      getAnchorDimensions: () => this.mdcMenuAnchorCtrl.getDimensions(),
      getWindowDimensions: () => {
        return {width: this.$window.innerWidth, height: this.$window.innerHeight};
      },
      getNumberOfItems: () => this.items.length,
github jamesmfriedman / rmwc / src / menu / menu.tsx View on Github external
getDefaultFoundation() {
    return new MDCMenuFoundation({
      addClassToElementAtIndex: (index: number, className: string) => {
        const list = this.items;
        list[index].classList.add(className);
      },
      removeClassFromElementAtIndex: (index: number, className: string) => {
        const list = this.items;
        list[index].classList.remove(className);
      },
      addAttributeToElementAtIndex: (
        index: number,
        attr: string,
        value: string
      ) => {
        const list = this.items;
        list[index].setAttribute(attr, value);
      },