dropdown-menu/dropdown-menu.html at master · sharedlabs/dropdown-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
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/utils/templatize.html">
<link rel="import" href="dropdown-menu-overlay.html">

<dom-module id="dropdown-menu">
  <template>
    <style>
      :host {
        display: inline-block;
      }

      #dropdownTrigger {
        display: inline-block
      }
    </style>

    <div id="dropdownTrigger" on-click="_dropdownTriggerClicked">
      <slot></slot>
    </div>

    <dropdown-menu-overlay
        id="overlay"
        opened="{{opened}}"
        no-cancel-on-outside-click="{{noCancelOnOutsideClick}}"></dropdown-menu-overlay>

  </template>

  <script>

    class DropdownMenu extends Polymer.Element {

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

      static get properties() {
        return {

          noCancelOnOutsideClick: {
            type: Boolean,
            value: false
          },

          opened: Boolean,

          _instance: Object,

          _ctor: Object

        };
      }

      toggle() {
        if (!this._instance) {
          const template = this.querySelector('template');
          template.__dmc = this;

          if (!template) {
            throw new Error('dropdown-menu requires a <template> child');
          }

          const ctor = Polymer.Templatize.templatize(template, this, {
            forwardHostProp: function(prop, value) {
              const dmc = template.__dmc;
              if (dmc._instance) {
                dmc._instance.forwardHostProp(prop, value);
              }
            }
          });

          this._instance = new ctor(this);
          this.$.overlay.positionTarget = this.$.dropdownTrigger;
          this.$.overlay._dropdownContainer = this;
          this.$.overlay.appendChild(this._instance.root);
        }

        requestAnimationFrame(_ => {
          this.opened = !this.opened;
        });
      }

      _dropdownTriggerClicked(event) {
        event.preventDefault();
        event.stopPropagation();
        this.toggle();
      }

    }

    customElements.define(DropdownMenu.is, DropdownMenu);

  </script>
</dom-module>