menu-button.js

/**
 * @license
 * Copyright 2016 Leif Olsen. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * This code is built with Google Material Design Lite,
 * which is Licensed under the Apache License, Version 2.0
 */


/**
 * A menu button is a button that opens a menu. It is often styled as a
 * typical push button with a downward pointing arrow or triangle to hint
 * that activating the button will display a menu.
 */
import { randomString } from '../utils/string-utils';
import fullThrottle from '../utils/full-throttle';
import {
  VK_TAB,
  VK_ENTER,
  VK_ESC,
  VK_SPACE,
  VK_END,
  VK_HOME,
  VK_ARROW_LEFT,
  VK_ARROW_UP,
  VK_ARROW_RIGHT,
  VK_ARROW_DOWN,
  IS_UPGRADED,
} from '../utils/constants';

import { getScrollParents, tether } from '../utils/dom-utils';

const JS_MENU_BUTTON = 'mdlext-js-menu-button';
const MENU_BUTTON_MENU = 'mdlext-menu';
const MENU_BUTTON_MENU_ITEM = 'mdlext-menu__item';
const MENU_BUTTON_MENU_ITEM_SEPARATOR = 'mdlext-menu__item-separator';
//const MDL_LAYOUT_CONTENT = 'mdl-layout__content';

/**
 * Creates the menu controlled by the menu button
 * @param element
 * @return {{element: Element, selected: Element, open: (function(*=)), removeListeners: (function()), downgrade: (function())}}
 */

const menuFactory = element => {

  let ariaControls = null;
  let parentNode = null;

  const removeAllSelected = () => {
    [...element.querySelectorAll(`.${MENU_BUTTON_MENU_ITEM}[aria-selected="true"]`)]
      .forEach(selectedItem => selectedItem.removeAttribute('aria-selected'));
  };

  const setSelected = (item, force=false) => {
    if(force || (item && !item.hasAttribute('aria-selected'))) {
      removeAllSelected();
      if(item) {
        item.setAttribute('aria-selected', 'true');
      }
    }
  };

  const getSelected = () => {
    return element.querySelector(`.${MENU_BUTTON_MENU_ITEM}[aria-selected="true"]`);
  };

  const isDisabled = item => item && item.hasAttribute('disabled');

  const isSeparator = item => item && item.classList.contains(MENU_BUTTON_MENU_ITEM_SEPARATOR);

  const focus = item => {
    if(item) {
      item = item.closest(`.${MENU_BUTTON_MENU_ITEM}`);
    }
    if(item) {
      item.focus();
    }
  };

  const nextItem = current => {
    let n = current.nextElementSibling;
    if(!n) {
      n = element.firstElementChild;
    }
    if(!isDisabled(n) && !isSeparator(n)) {
      focus(n);
    }
    else {
      let i = element.children.length;
      while(n && i-- > 0) {
        if(isDisabled(n) || isSeparator(n)) {
          n = n.nextElementSibling;
          if(!n) {
            n = element.firstElementChild;
          }
        }
        else {
          focus(n);
          break;
        }
      }
    }
  };

  const previousItem = current => {
    let p = current.previousElementSibling;
    if(!p) {
      p = element.lastElementChild;
    }
    if(!isDisabled(p) && !isSeparator(p)) {
      focus(p);
    }
    else {
      let i = element.children.length;
      while(p && i-- > 0) {
        if(isDisabled(p) || isSeparator(p)) {
          p = p.previousElementSibling;
          if(!p) {
            p = element.lastElementChild;
          }
        }
        else {
          focus(p);
          break;
        }
      }
    }
  };

  const firstItem = () => {
    const item = element.firstElementChild;
    if(isDisabled(item) || isSeparator(item) ) {
      nextItem(item);
    }
    else {
      focus(item);
    }
  };

  const lastItem = () => {
    const item = element.lastElementChild;
    if(isDisabled(item) || isSeparator(item)) {
      previousItem(item);
    }
    else {
      focus(item);
    }
  };

  const selectItem = item => {
    if(item && !isDisabled(item) && !isSeparator(item)) {
      setSelected(item);
      close(true, item);
    }
  };

  const keyDownHandler = event => {

    const item = event.target.closest(`.${MENU_BUTTON_MENU_ITEM}`);

    switch (event.keyCode) {
      case VK_ARROW_UP:
      case VK_ARROW_LEFT:
        if(item) {
          previousItem(item);
        }
        else {
          firstItem();
        }
        break;

      case VK_ARROW_DOWN:
      case VK_ARROW_RIGHT:
        if(item) {
          nextItem(item);
        }
        else {
          lastItem();
        }
        break;

      case VK_HOME:
        firstItem();
        break;

      case VK_END:
        lastItem();
        break;

      case VK_SPACE:
      case VK_ENTER:
        selectItem(item);
        break;

      case VK_ESC:
        close(true);
        break;

      case VK_TAB:
        // We do not have a "natural" tab order from menu, so the best we can do is to set focus back to the button
        close(true);
        break;

      default:
        return;
    }
    event.preventDefault();
  };


  const blurHandler = event => {

    // See: https://github.com/facebook/react/issues/2011
    const t = event.relatedTarget ||
      event.explicitOriginalTarget || // FF
      document.activeElement;         // IE11

    //console.log('***** blur, target, relatedTarget', event.target, t);

    try {
      if (t) {
        if (t.closest(`.${MENU_BUTTON_MENU}`) !== element && shouldClose(t)) {
          close();
        }
      }
      else {
        close();
      }
    }
    catch(err) {
      // FF throws error: "TypeError: n.closest is not a function" if related target is a text node
      close();
    }
  };

  const clickHandler = event => {
    //console.log('***** click, target', event.target);

    event.preventDefault();
    const t = event.target;
    if (t && t.closest(`.${MENU_BUTTON_MENU}`) === element) {
      const item = t.closest(`.${MENU_BUTTON_MENU_ITEM}`);
      if (item) {
        selectItem(item);
      }
    }
    else {
      if (shouldClose(t)) {
        close();
      }
    }
  };

  const touchStartHandler = event => {
    //console.log('***** touchStart, target', event.target);

    const t = event.target;
    if(!(t && t.closest(`.${MENU_BUTTON_MENU}`) === element)) {
      if (event.type === 'touchstart') {
        event.preventDefault();
      }
      close();
    }
  };

  const addListeners = () => {
    element.addEventListener('keydown', keyDownHandler, false);
    element.addEventListener('blur', blurHandler, true);
    element.addEventListener('click', clickHandler, true);
    document.documentElement.addEventListener('touchstart', touchStartHandler, true);
  };

  const removeListeners = () => {
    element.removeEventListener('keydown', keyDownHandler, false);
    element.removeEventListener('blur', blurHandler, true);
    element.removeEventListener('click', clickHandler, true);
    document.documentElement.removeEventListener('touchstart', touchStartHandler, true);
  };

  const open = (controlElement, position='first') => {

    ariaControls = controlElement.closest(`.${JS_MENU_BUTTON}`);

    element.style['min-width'] = `${Math.max(124, controlElement.getBoundingClientRect().width)}px`;
    element.removeAttribute('hidden');
    tether(controlElement, element);

    let item;
    switch (position.toLowerCase()) {
      case 'first':
        firstItem();
        break;

      case 'last':
        lastItem();
        break;

      case 'selected':
        item = getSelected();
        if(item && !item.hasAttribute('disabled')) {
          focus(item);
        }
        else {
          firstItem();
        }
        break;
    }

    addListeners();
  };


  const shouldClose = target => {
    //console.log('***** shouldClose');

    let result = false;
    const btn = (target && target.closest(`.${JS_MENU_BUTTON}`)) || null;
    if(!btn) {
      result = true;
    }
    else if(btn.getAttribute('aria-controls') === element.id) {
      if(btn !== ariaControls) {
        result = true;
      }
    }
    else {
      result = true;
    }
    return result;
  };

  const close = (forceFocus = false, item = null) => {
    removeListeners();

    element.dispatchEvent(
      new CustomEvent('_closemenu', {
        bubbles: true,
        cancelable: true,
        detail: { forceFocus: forceFocus, item: item }
      })
    );
  };

  const addWaiAria = () => {
    if (!element.hasAttribute('id')) {
      // Generate a random id
      element.id = `menu-button-${randomString()}`;
    }
    element.setAttribute('tabindex', '-1');
    element.setAttribute('role', 'menu');
    element.setAttribute('hidden', '');

    [...element.querySelectorAll(`.${MENU_BUTTON_MENU_ITEM}`)].forEach( menuitem => {
      menuitem.setAttribute('tabindex', '-1');
      menuitem.setAttribute('role', 'menuitem');
    });

    [...element.querySelectorAll(`.${MENU_BUTTON_MENU_ITEM_SEPARATOR}`)].forEach( menuitem => {
      menuitem.setAttribute('role', 'separator');
    });
  };

  const init = () => {
    addWaiAria();
    parentNode = element.parentNode;
    element.classList.add('is-upgraded');
  };

  const downgrade = () => {
    removeListeners();
    if(element.parentNode !== parentNode) {
      parentNode.appendChild(element);
    }
    element.classList.remove('is-upgraded');
  };

  init();

  return {
    /**
     * Get the menu element
     * @returns {Element} the menu element
     */
    get element() {
      return element;
    },

    /**
     * Set selected menu item
     * @param item
     */
    set selected(item) {
      setSelected(item, true);
    },

    /**
     * Open menu
     * @param {Element} controlElement the element where the menu should be aligned to
     * @param {String} position menuElement item to receive focus after menu element is opened
     */
    open: (controlElement, position='first') => open(controlElement, position),

    /**
     * Remove event listeners.
     */
    removeListeners: () => removeListeners(),

    /**
     * Downgrade menu
     */
    downgrade: () => downgrade(),
  };
};


/**
 * The menubutton component
 */

class MenuButton {

  constructor(element) {
    this.element = element;
    this.focusElement = undefined;
    this.focusElementLastScrollPosition = undefined;
    this.scrollElements = [];
    this.menu = undefined;
    this.selectedItem = null;
    this.init();
  }

  keyDownHandler = event => {
    if(!this.isDisabled()) {
      switch (event.keyCode) {
        case VK_ARROW_UP:
          this.openMenu('last');
          break;

        case VK_ARROW_DOWN:
          this.openMenu();
          break;

        case VK_SPACE:
        case VK_ENTER:
          this.openMenu('selected');
          break;

        case VK_ESC:
          this.closeMenu();
          break;

        case VK_TAB:
          this.closeMenu();
          return;

        default:
          return;
      }
    }
    //event.stopPropagation();
    event.preventDefault();
  };

  clickHandler = () => {

    if(!this.isDisabled()) {
      if(this.element.getAttribute('aria-expanded').toLowerCase() === 'true') {
        this.closeMenu(true);
      }
      else {
        this.openMenu('selected');
      }
    }
  };

  /**
   * Re-position menu if content is scrolled, window is resized or orientation change
   * @see https://javascriptweblog.wordpress.com/2015/11/02/of-classes-and-arrow-functions-a-cautionary-tale/
   */
  recalcMenuPosition = fullThrottle( () => {
    const c = this.focusElement.getBoundingClientRect();
    const dx = this.focusElementLastScrollPosition.left - c.left;
    const dy = this.focusElementLastScrollPosition.top - c.top;
    const left = (parseFloat(this.menu.element.style.left) || 0) - dx;
    const top = (parseFloat(this.menu.element.style.top) || 0) - dy;

    this.menu.element.style.left = `${left}px`;
    this.menu.element.style.top = `${top}px`;
    this.focusElementLastScrollPosition = c;
  });


  positionChangeHandler = () => {
    this.recalcMenuPosition(this);
  };

  closeMenuHandler = event => {
    if(event && event.detail) {
      if(event.detail.item && event.detail.item !== this.selectedItem) {
        this.selectedItem = event.detail.item;
        this.dispatchMenuSelect();
      }
      this.closeMenu(event.detail.forceFocus);
    }
  };

  dispatchMenuSelect() {
    this.element.dispatchEvent(
      new CustomEvent('menuselect', {
        bubbles: true,
        cancelable: true,
        detail: { source: this.selectedItem }
      })
    );
  }

  isDisabled() {
    return this.element.hasAttribute('disabled');
  }

  removeListeners() {
    this.element.removeEventListener('keydown', this.keyDownHandler);
    this.element.removeEventListener('click', this.clickHandler);
  }

  openMenu(position='first') {
    if(!this.isDisabled() && this.menu) {

      // Close the menu if button position change
      this.scrollElements = getScrollParents(this.element);
      this.scrollElements.forEach(el => el.addEventListener('scroll', this.positionChangeHandler));
      window.addEventListener('resize', this.positionChangeHandler);
      window.addEventListener('orientationchange', this.positionChangeHandler);
      this.menu.element.addEventListener('_closemenu', this.closeMenuHandler);

      this.menu.selected = this.selectedItem;
      this.menu.open(this.focusElement, position);
      this.element.setAttribute('aria-expanded', 'true');

      this.focusElementLastScrollPosition = this.focusElement.getBoundingClientRect();
    }
  }

  closeMenu(forceFocus = false) {
    if(this.menu) {
      this.menu.removeListeners();
      this.scrollElements.forEach(el => el.removeEventListener('scroll', this.positionChangeHandler));
      window.removeEventListener('resize', this.positionChangeHandler);
      window.removeEventListener('orientationchange', this.positionChangeHandler);
      this.menu.element.removeEventListener('_closemenu', this.closeMenuHandler);

      if (forceFocus) {
        this.focus();
      }
      this.element.setAttribute('aria-expanded', 'false');
      this.menu.element.setAttribute('hidden', '');
    }
  }

  focus() {
    if(!this.isDisabled()) {
      this.focusElement.focus();
    }
  }

  init() {
    const addListeners = () => {
      this.element.addEventListener('keydown', this.keyDownHandler);
      this.element.addEventListener('click', this.clickHandler);
    };

    const addWaiAria = () => {
      this.element.setAttribute('role', 'button');
      this.element.setAttribute('aria-expanded', 'false');
      this.element.setAttribute('aria-haspopup', 'true');
    };

    const addFocusElement = () => {
      this.focusElement = this.element.querySelector('input[type="text"]');
      if(!this.focusElement) {
        this.focusElement = this.element;

        if(!(this.focusElement.tagName.toLowerCase() === 'button' || this.focusElement.tagName.toLowerCase() === 'input')) {
          if (!this.focusElement.hasAttribute('tabindex')) {
            this.focusElement.setAttribute('tabindex', '0');
          }
        }
      }
    };

    const moveElementToDocumentBody = (element) => {
      // To position an element on top of all other z-indexed elements, the element should be moved to document.body
      //       See: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

      if(element.parentNode !== document.body) {
        return document.body.appendChild(element);
      }
      return element;
    };

    const findMenuElement = () => {
      let menuElement;
      const menuElementId = this.element.getAttribute('aria-controls');
      if(menuElementId !== null) {
        menuElement = document.querySelector(`#${menuElementId }`);
      }
      else {
        menuElement = this.element.parentNode.querySelector(`.${MENU_BUTTON_MENU}`);
      }
      return menuElement;
    };

    const addMenu = () => {
      const menuElement = findMenuElement();
      if(menuElement) {
        if(menuElement.componentInstance) {
          this.menu = menuElement.componentInstance;
        }
        else {
          this.menu = menuFactory(menuElement);
          menuElement.componentInstance = this.menu;
          moveElementToDocumentBody(menuElement);
        }
        this.element.setAttribute('aria-controls', this.menu.element.id);
      }
    };

    addFocusElement();
    addWaiAria();
    addMenu();
    this.removeListeners();
    addListeners();
  }

  downgrade() {
    if(this.menu) {
      // Do not downgrade menu if there are other buttons sharing this menu
      const related = [...document.querySelectorAll(`.${JS_MENU_BUTTON}[aria-controls="${this.element.getAttribute('aria-controls')}"]`)];
      if(related.filter( c => c !== this.element && c.getAttribute('data-upgraded').indexOf('MaterialExtMenuButton') >= 0).length === 0) {
        this.menu.downgrade();
      }
    }
    this.removeListeners();
  }

}

(function() {
  'use strict';

  /**
   * https://github.com/google/material-design-lite/issues/4205
   * @constructor
   * @param {Element} element The element that will be upgraded.
   */
  const MaterialExtMenuButton = function MaterialExtMenuButton(element) {
    this.element_ = element;
    this.menuButton_ = null;

    // Initialize instance.
    this.init();
  };
  window['MaterialExtMenuButton'] = MaterialExtMenuButton;


  // Public methods.

  /**
   * Get the menu element controlled by this button, null if no menu is controlled by this button
   * @public
   */
  MaterialExtMenuButton.prototype.getMenuElement = function() {
    return this.menuButton_.menu ? this.menuButton_.menu.element : null;
  };
  MaterialExtMenuButton.prototype['getMenuElement'] = MaterialExtMenuButton.prototype.getMenuElement;

  /**
   * Open menu
   * @public
   * @param {String} position one of "first", "last" or "selected"
   */
  MaterialExtMenuButton.prototype.openMenu = function(position) {
    this.menuButton_.openMenu(position);
  };
  MaterialExtMenuButton.prototype['openMenu'] = MaterialExtMenuButton.prototype.openMenu;

  /**
   * Close menu
   * @public
   */
  MaterialExtMenuButton.prototype.closeMenu = function() {
    this.menuButton_.closeMenu(true);
  };
  MaterialExtMenuButton.prototype['closeMenu'] = MaterialExtMenuButton.prototype.closeMenu;

  /**
   * Get selected menu item
   * @public
   * @returns {Element} The selected menu item or null if no item selected
   */
  MaterialExtMenuButton.prototype.getSelectedMenuItem = function() {
    return this.menuButton_.selectedItem;
  };
  MaterialExtMenuButton.prototype['getSelectedMenuItem'] = MaterialExtMenuButton.prototype.getSelectedMenuItem;


  /**
   * Set (default) selected menu item
   * @param {Element} item
   */
  MaterialExtMenuButton.prototype.setSelectedMenuItem = function(item) {
    this.menuButton_.selectedItem = item;
  };
  MaterialExtMenuButton.prototype['setSelectedMenuItem'] = MaterialExtMenuButton.prototype.setSelectedMenuItem;

  /**
   * Initialize component
   */
  MaterialExtMenuButton.prototype.init = function() {
    if (this.element_) {
      this.menuButton_ = new MenuButton(this.element_);
      this.element_.addEventListener('mdl-componentdowngraded', this.mdlDowngrade_.bind(this));
      this.element_.classList.add(IS_UPGRADED);
    }
  };

  /**
   * Downgrade component
   * E.g remove listeners and clean up resources
   */
  MaterialExtMenuButton.prototype.mdlDowngrade_ = function() {
    this.menuButton_.downgrade();
  };

  // The component registers itself. It can assume componentHandler is available
  // in the global scope.
  /* eslint no-undef: 0 */
  componentHandler.register({
    constructor: MaterialExtMenuButton,
    classAsString: 'MaterialExtMenuButton',
    cssClass: JS_MENU_BUTTON,
    widget: true
  });
})();