OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
6 Code distributed by Google as part of the polymer project is also | |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
8 --> | |
9 | |
10 <link rel="import" href="../polymer/polymer.html"> | |
11 <link rel="import" href="../core-overlay/core-overlay.html"> | |
12 | |
13 <!-- | |
14 | |
15 `paper-menu-button-overlay` is a helper class to position an overlay relative to
another | |
16 element, e.g. the button with a pulldown menu. | |
17 | |
18 @group Paper Elements | |
19 @element paper-menu-button-overlay | |
20 @extends core-overlay | |
21 @homepage github.io | |
22 --> | |
23 | |
24 <polymer-element name="paper-menu-button-overlay" extends="core-overlay" attribu
tes="relatedTarget halign valign"> | |
25 <script> | |
26 Polymer('paper-menu-button-overlay', { | |
27 | |
28 publish: { | |
29 | |
30 /** | |
31 * The `relatedTarget` is an element used to position the overlay, for e
xample a | |
32 * button the user taps to show a menu. | |
33 * | |
34 * @attribute relatedTarget | |
35 * @type Element | |
36 */ | |
37 relatedTarget: null, | |
38 | |
39 /** | |
40 * The horizontal alignment of the overlay relative to the `relatedTarge
t`. | |
41 * | |
42 * @attribute halign | |
43 * @type 'left'|'right'|'center' | |
44 * @default 'left' | |
45 */ | |
46 halign: 'left' | |
47 | |
48 }, | |
49 | |
50 updateTargetDimensions: function() { | |
51 this.super(); | |
52 | |
53 var t = this.target; | |
54 this.target.cachedSize = t.getBoundingClientRect(); | |
55 }, | |
56 | |
57 positionTarget: function() { | |
58 if (this.relatedTarget) { | |
59 | |
60 var rect = this.relatedTarget.getBoundingClientRect(); | |
61 | |
62 if (this.halign === 'left') { | |
63 this.target.style.left = rect.left + 'px'; | |
64 } else if (this.halign === 'right') { | |
65 this.target.style.right = (window.innerWidth - rect.right) + 'px'; | |
66 } else { | |
67 this.target.style.left = (rect.left - (rect.width - this.target.cach
edSize.width) / 2) + 'px'; | |
68 } | |
69 | |
70 if (this.valign === 'top') { | |
71 this.target.style.top = rect.top + 'px'; | |
72 } else if (this.valign === 'bottom') { | |
73 this.target.style.top = rect.bottom + 'px'; | |
74 } else { | |
75 this.target.style.top = rect.top + 'px'; | |
76 } | |
77 | |
78 // this.target.style.top = rect.top + 'px'; | |
79 | |
80 } else { | |
81 this.super(); | |
82 } | |
83 } | |
84 | |
85 }); | |
86 </script> | |
87 </polymer-element> | |
OLD | NEW |