1
2    Polymer('paper-menu-button-overlay', {
3
4      publish: {
5
6        /**
7         * The `relatedTarget` is an element used to position the overlay, for example a
8         * button the user taps to show a menu.
9         *
10         * @attribute relatedTarget
11         * @type Element
12         */
13        relatedTarget: null,
14
15        /**
16         * The horizontal alignment of the overlay relative to the `relatedTarget`.
17         *
18         * @attribute halign
19         * @type 'left'|'right'|'center'
20         * @default 'left'
21         */
22        halign: 'left'
23
24      },
25
26      updateTargetDimensions: function() {
27        this.super();
28
29        var t = this.target;
30        this.target.cachedSize = t.getBoundingClientRect();
31      },
32
33      positionTarget: function() {
34        if (this.relatedTarget) {
35
36          var rect = this.relatedTarget.getBoundingClientRect();
37
38          if (this.halign === 'left') {
39            this.target.style.left = rect.left + 'px';
40          } else if (this.halign === 'right') {
41            this.target.style.right = (window.innerWidth - rect.right) + 'px';
42          } else {
43            this.target.style.left = (rect.left - (rect.width - this.target.cachedSize.width) / 2) + 'px';
44          }
45
46          if (this.valign === 'top') {
47            this.target.style.top = rect.top + 'px';
48          } else if (this.valign === 'bottom') {
49            this.target.style.top = rect.bottom + 'px';
50          } else {
51            this.target.style.top = rect.top + 'px';
52          }
53
54          // this.target.style.top = rect.top + 'px';
55
56        } else {
57          this.super();
58        }
59      }
60
61    });
62