casper-context-menu/casper-context-menu.js at master · cloudware-casper/casper-context-menu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/*
  - Copyright (c) 2018 Cloudware S.A. All rights reserved.
  -
  - This file is part of casper-context-menu.
  -
  - casper-context-menu is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as published by
  - the Free Software Foundation, either version 3 of the License, or
  - (at your option) any later version.
  -
  - casper-context-menu  is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with casper-context-menu.  If not, see <http://www.gnu.org/licenses/>.
  -
 */

import './casper-menu-item.js';
import './casper-menu-separator.js';
import '@polymer/paper-listbox/paper-listbox.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { CasperOverlayBehavior } from '@cloudware-casper/casper-overlay-behavior/casper-overlay-behavior.js';

class CasperContextMenu extends mixinBehaviors(CasperOverlayBehavior, PolymerElement) {
  static get template () {
    return html`
      <style>
        :host {
          overflow: hidden;
          background: var(--primary-background-color, white);
          border-radius: var(--radius-primary, 6px);
          box-shadow: rgba(0, 0, 0, 0.24) -2px 5px 12px 0px,
                      rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;

        }

        paper-listbox {
          border-radius: var(--radius-primary, 6px);
          padding: 0px;
        }

      </style>
      <paper-listbox>
        <slot></slot>
      </paper-listbox>
  `;
  }

  static get is () {
    return 'casper-context-menu';
  }

  /**
   * Install click listener to implememt auto close
   */
  ready () {
    super.ready();
    this.addEventListener('click', (e) => this._onTap(e));

    this.addEventListener('mouseenter', () => {
      this.style.transition = '';
      this.style.opacity = 1;
      clearTimeout(this.__animationTimeout);
      clearTimeout(this.__animationDelayTimeout);
    });

    const animationDuration = 500;
    this.addEventListener('mouseleave', () => {
      // Delay the beginning of the animation.
      this.__animationDelayTimeout = setTimeout(() => {
        this.style.transition = `opacity ${animationDuration}ms linear`;
        this.style.opacity = 0;

        this.__animationTimeout = setTimeout(() => {
          this.close();
          this.style.opacity = 1;
        }, animationDuration);
      }, animationDuration);
    });
  }

  /**
   * Autohide the menu when it's clicked
   *
   * @param {Object} event the click event
   */
  _onTap (event) {
    setTimeout((e) => this.close(), 0); // Use timeout to call close() outside of original event callstack
  }
}

customElements.define(CasperContextMenu.is, CasperContextMenu);