jas-context-menu.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-listbox/paper-listbox.html" />
<link rel="import" href="../paper-item/paper-item.html" />
<link rel="import" href="../paper-item/paper-icon-item.html" />
<link rel="import" href="../iron-icon/iron-icon.html" />
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
<!--
  Polymer element to replace right click functionality.
  ### Styling

The following custom properties are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--app-primary-color` | Background color of the menu when focused. | `#fff`
`--context-text-color` | Text color within the menu. | `#333`
`--context-link-text-color` | Text color and on hover background color for links<br>For text within 'A' tags. | `#0066aa`
`--context-horizontal-rule-color` | Color of 'HR' tags. | `#bcbcbc`
  @element l2t-context-menu
  @demo demo/index.html
-->
<dom-module id="jas-context-menu">
  <template>
    <style>
      .context-menu {
        display: none;
        position: absolute;
        z-index: 1000;
        padding: 6px;
        background-color: var(--context-background-color, #fff);
        -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .4);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .4);
      }

      .context-menu--active {
        display: block;
      }

      paper-icon-item {
        cursor: pointer;
        color: var(--app-primary-color, #0066aa);
      }

      paper-icon-item:hover {
        background-color: var(--app-primary-color, #0066aa);
        color: var(--app-primary-text-color, #fff);
      }

      paper-item {
        cursor: pointer;
        color: var(--app-primary-color, #0066aa);
      }

      paper-item:hover {
        background-color: var(--app-primary-color, #0066aa);
        color: var(--app-primary-text-color, #fff);
      }

      hr {
        background-color: var(--app-primary-color, #0066aa);
        border-color: var(--app-primary-color, #0066aa);
        height: 1px;
        border: 0;
      }
    </style>
    <iron-iconset-svg name="contextmenu" size="24">
      <svg>
        <defs>
          <g id="arrow-drop-down">
            <path d="M7 10l5 5 5-5z" />
          </g>
        </defs>
      </svg>
    </iron-iconset-svg>

    <div id="node" class="content">
      <paper-listbox id="contextMenu" class="context-menu drag-drop-ignore" allowOutsideScroll selected="-1">
        <template id="resultList" is="dom-repeat" items="{{menu}}" as="m">
          <template is="dom-if" if="[[m.isDivider]]">
            <hr>
          </template>
          <template is="dom-if" if="[[m.submenu]]">
            <paper-icon-item class="menu-trigger" role="menuitem" submenu="[[m.submenu]]" on-tap="_onSubMenuSelect">
              <iron-icon class="menu-trigger" on-tap="_onSubMenuSelect" submenu="[[m.submenu]]" icon="contextmenu:arrow-drop-down" slot="item-icon">
              </iron-icon>[[m.description]]</paper-icon-item>
          </template>
          <template is="dom-if" if="[[m.menu]]">
            <paper-icon-item role="menuitem" command="[[m.command]]" subcommand="[[m.subcommand]]" on-tap="_onMenuSelect">
              <iron-icon class="menu-trigger" on-tap="_onMenuSelect" command="[[m.command]]" subcommand="[[m.subcommand]]" icon="[[m.icon]]"
                slot="item-icon">
              </iron-icon>[[m.description]]</paper-icon-item>
          </template>
        </template>
      </paper-listbox>
    </div>
  </template>
</dom-module>
<script>
  var contextMenu;
  class JasContextMenu extends Polymer.Element {
    static get is() { return 'jas-context-menu'; }
    static get properties() {
      return {
        /**
         * Boolean for storing value
         * for menu state
         *
         * @attribute _menuState
         * @type Boolean
         * @default "false"
         */
        _menuState: {
          type: Boolean,
          value: 'false',
          notify: true
        },
        /**
         * Pass Menu To Build On Fly
         *
         * @attribute menu
         * @type Object
         * @default none
         */
        menu: {
          type: Object,
          notify: true
        }
      }
    }
    constructor(mainMenu) {
      super();
      this.mainMenu = mainMenu;
    }
    /**
     * Method to show the menu
     * updates class and vibrates on phones
     *
     */
    _toggleMenuOn() {
      1 !== this._menuState && (this._menuState = 1,
        this.$.contextMenu.classList.add('context-menu--active'));
      // Error catcher for IE and Edge
      if (typeof navigator.vibrate === "function") {
        navigator.vibrate([25])
      }
    }
    /**
     * Method to hide the menu
     * updates class
     *
     */
    _toggleMenuOff() {
      0 !== this._menuState && (this._menuState = 0, this.$.contextMenu.classList.remove('context-menu--active'))
    }
    /**
     * Method to work out to place
     * click event and return boolean
     *
     */
    _clickInsideElement(e, t) {
      var n = e.path[0];
      if (n.classList.contains(t)) return n;
    }
    /**
     * Method to listen for clicks
     * and pass data on to _clickInsideElement
     * hides menu if click is not allowed
     *
     */
    _clickListener() {
      var $this = this;
      document.addEventListener("click", function (e) {
        if ($this.ignoreNextClick == true) {
          $this.ignoreNextClick = false;
          return;
        }
        var t = $this._clickInsideElement(e, 'menu-trigger');
        if (!t)
          var n = e.which || e.button;
        1 === n && $this._toggleMenuOff()
      })
    }
    /**
     * Method to listen for keyup
     * hides menu if ESC is pressed
     *
     */
    _keyupListener() {
      var $this = this;
      window.onkeyup = function (e) {
        27 === e.keyCode && $this._toggleMenuOff()
      }
    }
    /**
     * Method to listen for page resize
     * hides menu when actioned
     *
     */
    _resizeListener() {
      var $this = this;
      window.onresize = function () {
        $this._toggleMenuOff()
      }
    }
    /**
     * Method to get mouse position
     * and return x and y values
     *
     */
    _getPosition(e) {
      var t, n;
      return e.pageX || e.pageY ? (t = e.pageX, n = e.pageY) :
        (e.clientX || e.clientY) && (t = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
          n = e.clientY + document.body.scrollTop + document.documentElement.scrollTop),
        { x: t, y: n }
    }
    /**
     * Method to start all listeners
     * called when the dom is ready
     *
     */
    _listenerInit() {
      this._clickListener();
      this._keyupListener();
      this._resizeListener();
    }
    /**
     * Method to move the menu
     * passes information to _getPosition
     * to get x and y cords, then restyles
     *
     */
    _positionMenu(e) {
      var clickCoords = this._getPosition(e);
      var menuSelector = this.$.contextMenu;
      var menuWidth = menuSelector.offsetWidth + 4;
      var menuHeight = menuSelector.offsetHeight + 4;
      var windowWidth = window.innerWidth + (clickCoords.x - e.clientX);
      var windowHeight = window.innerHeight + (clickCoords.y - e.clientY);
      var menuCoordsX = menuWidth > windowWidth - clickCoords.x ? clickCoords.x - menuWidth + "px" : clickCoords.x + "px";
      var menuCoordsY = menuHeight > windowHeight - clickCoords.y ? clickCoords.y - menuHeight + "px" : clickCoords.y + "px";
      menuSelector.style.left = menuCoordsX;
      menuSelector.style.top = menuCoordsY;
    }
    // Position on Document Clicked.  This needs to be translated by the click
    _positionClicked(e) {
      var clickCoords = this._getPosition(e);
      this.menuCoordsX = clickCoords.x;
      this.menuCoordsY = clickCoords.y;
    }
    /**
     * Method the scripts
     * domReady for when the dom is connected
     *
     */
    connectedCallback() {
      super.connectedCallback();
      this._listenerInit();
      // Main Menu - Sub Menu a copy is not linked as the main context menu
      if (contextMenu == undefined) {
        contextMenu = this;
      }
    }
    showMenu(menuData, e, menu, node, newHandleSelect) {
      // Build Menu
      var aMenu;
      var buildMenu = [];
      var i = 0;
      // Convert menu into array if it isn't.  Supports multi menu options
      if (!Array.isArray(menu)) {
        var tempObject = menu;
        menu = [];
        if (tempObject != null) {
          menu[0] = tempObject;
        }
      }
      // Check if option is on menu
      while (aMenu = menuData[i++]) {
        if (menu.indexOf(aMenu.type) > -1) {
          if (aMenu.description == "-") {
            aMenu.isDivider = true;
            buildMenu.push(aMenu);
          } else {
            if (aMenu.submenu == null) {
              aMenu.menu = true;
            }
            buildMenu.push(aMenu);
          }
        }
      }
      this.menu = buildMenu;
      this.menuType = menu;
      this.ownerNode = e;
      this.handleSelect = newHandleSelect;
      this._openContextMenu(node);
    }
    _openContextMenu(e) {
      var $this = this;
      // Stored incase required by Add Object here for example.  Unusual case but needs to be handled.
      var element = app.Poly.page.shadowRoot.querySelector('#samsPageItems');
      if (!this.isSubMenu) {
        // Get Position
        this._positionClicked(e);
        this.coordsClicked = { clientX: this.menuCoordsX, clientY: this.menuCoordsY };
      }

      // Trick to wait for component just about to be drawn (rendered),
      // so that we can measure width and move around (near bottom open upwards etc) in the right spot!
      Polymer.RenderStatus.beforeNextRender(this, function () {
        // Now menu updated.  Run open context menu and position
        $this._toggleMenuOn();
        $this._positionMenu(e);
      });
    }
    _onSubMenuSelect(data) {
      data.stopPropagation();
      if (this.submenu == undefined) {
        this.submenu = new JasContextMenu(this);
        this.submenu.setAttribute('id', "jassubmenu");
        this.parentNode.appendChild(this.submenu);
        this.submenu.isSubMenu = true;
      }
      this.submenu.coordsClicked = this.coordsClicked;
      data.clientX = data.detail.x;
      data.clientY = data.detail.y;
      this.submenu.showMenu(data.target.submenu, this, this.menuType, data, this.handleSelect);
      return false;
    }
    _onMenuSelect(data) {
      data.stopPropagation();
      this._toggleMenuOff();
      this.handleSelect(data.target.command, this.ownerNode, data.target.subcommand, this.coordsClicked);
      return false;
    }
  }
  customElements.define(JasContextMenu.is, JasContextMenu);
</script>