l2t-context-menu.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-menu/paper-menu.html" />
<link rel="import" href="../paper-menu/paper-submenu.html" />

<!--
  Polymer element to replace right click functionality.

  ### Examples
  You can do anything you would expect to be able to do within paper-menu. See the documentation for that element here: <a href="https://elements.polymer-project.org/elements/paper-menu">Paper-menu</a>.
  The only real difference is that l2t-context-menu tags are used as the initial paper-menu tags.

      <l2t-context-menu parentclass="standardExample">
        <paper-item>
          <a href="#">Normal Item</a>
        </paper-item>
      </l2t-context-menu>
      
  You may need to use actual paper-menu tags further down the chain if they are required, like when using submenus for instance.

      <l2t-context-menu parentclass="submenuExample">
        <paper-submenu opened>
          <paper-item class="menu-trigger">Submenu Head</paper-item>
          <paper-menu class="menu-content">
            <paper-item><a href='#'>Submenu Item</a></paper-item>
          </paper-menu>
        </paper-submenu>
      </l2t-context-menu>
  
  ### Styling
    
The following custom properties are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--context-background-color` | Background color of the menu. | `#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="l2t-context-menu">
  <style>
    .context-menu {
      display: none;
      position: absolute;
      z-index: 10;
      padding: 12px;
      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;
    }

    ::content li, ::content paper-item{
      display: block;
      color: var(--context-text-color, #333);
      padding: 2px;
    }

    ::content paper-item {
      cursor: pointer;
    }

    ::content li:last-child {
      margin-bottom: 0;
    }

    ::content a {
      display: block;
      color: var(--context-link-text-color, #0066aa);
      padding: 4px 12px;
      text-decoration: none;
    }

    ::content a:hover {
      background-color: var(--context-link-text-color, #0066aa);
      color: var(--context-background-color, #fff);
    }

    ::content hr {
      border-color: var(--context-horizontal-rule-color, #bcbcbc);
    }

    ::content .paper-menu-0{
      background-color: var(--context-background-color, #fff);
    }                                       
  </style>
  <template>
    <paper-menu id="context-menu" class="context-menu">
      <content></content>
    </paper-menu>
  </template>
</dom-module>
<script>
  ( function () {
    Polymer({
      is: 'l2t-context-menu',
      properties: {
        /**
        * Sting for storing class name
        * of which classes should be listened too
        *
        * @attribute parentclass
        * @type String
        * @default "default"
        */
        parentclass: {
        type: String,
        value: 'default',
        notify: true
        },
        /** 
        * Boolean for storing value
        * for menu state
        *
        * @attribute _menuState
        * @type Boolean
        * @default "false"
        */
        _menuState: {
        type: Boolean,
        value: 'false',
        notify: true
        },
      },
      /**
      * Method to show the menu
      * updates class and vibrates on phones
      *
      */
      _toggleMenuOn: function (){
        1!==this._menuState&&(this._menuState=1,
        Polymer.dom(this.root).querySelector("#context-menu").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: function(){
        0!==this._menuState&&(this._menuState=0,
        Polymer.dom(this.root).querySelector("#context-menu").classList.remove('context-menu--active'))
      },
      /**
      * Method to work out to place
      * click event and return boolean
      *
      */
      _clickInsideElement: function(e,t) {
        var n=e.srcElement||e.target;
        if(n.classList.contains(t))return n;
        for(;n=n.parentNode;)
        if(n.classList&&n.classList.contains(t))return n;
        return!1
      },
      /**
      * Method to listen for clicks
      * and pass data on to _clickInsideElement
      * hides menu if click is not allowed
      *
      */
      _clickListener: function(){
        var $this = this;
        document.addEventListener("click",function(e){
          var t=$this._clickInsideElement(e,'menu-trigger');
          if(!t)
          var n=e.which||e.button;
          1===n&&$this._toggleMenuOff()
        })
      },
      /**
      * Method to listen for context menu
      * and pass data on to _clickInsideElement
      * shows menu is click is in parentclass
      *
      */
      _contextListener: function(){
        var taskItemInContext,
        $this = this;
        document.addEventListener("contextmenu",function(e){
          taskItemInContext=$this._clickInsideElement(e, $this.parentclass),
          taskItemInContext?(e.preventDefault(),$this._toggleMenuOn(),$this._positionMenu(e)):(taskItemInContext=null,$this._toggleMenuOff())
        })
      },
      /**
      * Method to listen for keyup
      * hides menu is ESC is pressed
      *
      */
      _keyupListener: function(){
        var $this = this;
        window.onkeyup=function(e){
          27===e.keyCode&&$this._toggleMenuOff()
        }
      },
      /**
      * Method to listen for page resize
      * hides menu when actioned
      *
      */
      _resizeListener: function(){
        var $this = this;
        window.onresize=function(){
          $this._toggleMenuOff()
        }
      },
      /**
      * Method to get mouse position
      * and return x and y values
      *
      */
      _getPosition: function(e){
        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 : function() {
        this._contextListener();
        this._clickListener();
        this._keyupListener();
        this._resizeListener();
      },
      /**
      * Method to move the menu
      * passes information to _getPosition
      * to get x and y cords, then restyles
      *
      */
      _positionMenu: function(e){
        clickCoords = this._getPosition(e),
        menuSelector = Polymer.dom(this.root).querySelector("#context-menu"),
        menuWidth = menuSelector.offsetWidth + 4,
        menuHeight = menuSelector.offsetHeight + 4,
        windowWidth = window.innerWidth + (clickCoords.x - e.clientX),
        windowHeight = window.innerHeight + (clickCoords.y - e.clientY),
        menuCoordsX = menuWidth > windowWidth-clickCoords.x ? clickCoords.x-menuWidth+"px" : clickCoords.x+"px",
        menuCoordsY = menuHeight > windowHeight-clickCoords.y ? clickCoords.y-menuHeight+"px" : clickCoords.y+"px",
        menuSelector.style.left = menuCoordsX,
        menuSelector.style.top = menuCoordsY
      },
      /**
      * Method the scripts
      * domReady for when the dom is... rea
      *
      */
      ready: function() {
        this._listenerInit();
      }
    });
  })();
</script>