OLD | NEW |
1 (function() { | 1 (function() { |
| 2 Polymer({ |
| 3 is: 'paper-submenu', |
2 | 4 |
3 Polymer({ | 5 properties: { |
| 6 /** |
| 7 * Fired when the submenu is opened. |
| 8 * |
| 9 * @event paper-submenu-open |
| 10 */ |
4 | 11 |
5 is: 'paper-submenu', | 12 /** |
| 13 * Fired when the submenu is closed. |
| 14 * |
| 15 * @event paper-submenu-close |
| 16 */ |
6 | 17 |
7 properties: { | 18 /** |
8 /** | 19 * Set opened to true to show the collapse element and to false to hid
e it. |
9 * Fired when the submenu is opened. | 20 * |
10 * | 21 * @attribute opened |
11 * @event paper-submenu-open | 22 */ |
12 */ | 23 opened: { |
| 24 type: Boolean, |
| 25 value: false, |
| 26 notify: true, |
| 27 observer: '_openedChanged' |
| 28 } |
| 29 }, |
13 | 30 |
14 /** | 31 behaviors: [ |
15 * Fired when the submenu is closed. | 32 Polymer.IronControlState |
16 * | 33 ], |
17 * @event paper-submenu-close | |
18 */ | |
19 | 34 |
20 /** | 35 get __parent() { |
21 * Set opened to true to show the collapse element and to false to hide it
. | 36 return Polymer.dom(this).parentNode; |
22 * | 37 }, |
23 * @attribute opened | |
24 */ | |
25 opened: { | |
26 type: Boolean, | |
27 value: false, | |
28 notify: true, | |
29 observer: '_openedChanged' | |
30 } | |
31 }, | |
32 | 38 |
33 behaviors: [ | 39 get __trigger() { |
34 Polymer.IronControlState | 40 return Polymer.dom(this.$.trigger).getDistributedNodes()[0]; |
35 ], | 41 }, |
36 | 42 |
37 get __parent() { | 43 attached: function() { |
38 return Polymer.dom(this).parentNode; | 44 this.listen(this.__parent, 'iron-activate', '_onParentIronActivate'); |
39 }, | 45 }, |
40 | 46 |
41 get __trigger() { | 47 dettached: function() { |
42 return Polymer.dom(this.$.trigger).getDistributedNodes()[0]; | 48 this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate')
; |
43 }, | 49 }, |
44 | 50 |
45 attached: function() { | 51 /** |
46 this.listen(this.__parent, 'iron-activate', '_onParentIronActivate'); | 52 * Expand the submenu content. |
47 }, | 53 */ |
| 54 open: function() { |
| 55 if (this.disabled) |
| 56 return; |
| 57 this.$.collapse.show(); |
| 58 this._active = true; |
| 59 this.__trigger.classList.add('iron-selected'); |
| 60 }, |
48 | 61 |
49 dettached: function() { | 62 /** |
50 this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate'); | 63 * Collapse the submenu content. |
51 }, | 64 */ |
| 65 close: function() { |
| 66 this.$.collapse.hide(); |
| 67 this._active = false; |
| 68 this.__trigger.classList.remove('iron-selected'); |
| 69 }, |
52 | 70 |
53 /** | 71 /** |
54 * Expand the submenu content. | 72 * A handler that is called when the trigger is tapped. |
55 */ | 73 */ |
56 open: function() { | 74 _onTap: function() { |
57 if (this.disabled) | 75 if (this.disabled) |
58 return; | 76 return; |
59 this.$.collapse.show(); | 77 this.$.collapse.toggle(); |
60 this._active = true; | 78 }, |
61 this.__trigger.classList.add('iron-selected'); | |
62 }, | |
63 | 79 |
64 /** | 80 /** |
65 * Collapse the submenu content. | 81 * Toggles the submenu content when the trigger is tapped. |
66 */ | 82 */ |
67 close: function() { | 83 _openedChanged: function(opened, oldOpened) { |
68 this.$.collapse.hide(); | 84 if (opened) { |
69 this._active = false; | 85 this.fire('paper-submenu-open'); |
70 this.__trigger.classList.remove('iron-selected'); | 86 } else if (oldOpened != null) { |
71 }, | 87 this.fire('paper-submenu-close'); |
| 88 } |
| 89 }, |
72 | 90 |
73 /** | 91 /** |
74 * A handler that is called when the trigger is tapped. | 92 * A handler that is called when `iron-activate` is fired. |
75 */ | 93 * |
76 _onTap: function() { | 94 * @param {CustomEvent} event An `iron-activate` event. |
77 if (this.disabled) | 95 */ |
78 return; | 96 _onParentIronActivate: function(event) { |
79 this.$.collapse.toggle(); | 97 if (Polymer.Gestures.findOriginalTarget(event) !== this.__parent) { |
80 }, | 98 return; |
| 99 } |
81 | 100 |
82 /** | 101 // The activated item can either be this submenu, in which case it |
83 * Toggles the submenu content when the trigger is tapped. | 102 // should be expanded, or any of the other sibling submenus, in which |
84 */ | 103 // case this submenu should be collapsed. |
85 _openedChanged: function(opened, oldOpened) { | 104 if (event.detail.item == this) { |
86 if (opened) { | 105 if (this._active) |
87 this.fire('paper-submenu-open'); | 106 return; |
88 } else if (oldOpened != null) { | 107 this.open(); |
89 this.fire('paper-submenu-close'); | 108 } else { |
90 } | 109 this.close(); |
91 }, | 110 } |
| 111 }, |
92 | 112 |
93 /** | 113 /** |
94 * A handler that is called when `iron-activate` is fired. | 114 * If the dropdown is open when disabled becomes true, close the |
95 * | 115 * dropdown. |
96 * @param {CustomEvent} event An `iron-activate` event. | 116 * |
97 */ | 117 * @param {boolean} disabled True if disabled, otherwise false. |
98 _onParentIronActivate: function(event) { | 118 */ |
99 if (Polymer.Gestures.findOriginalTarget(event) !== this.__parent) { | 119 _disabledChanged: function(disabled) { |
100 return; | 120 Polymer.IronControlState._disabledChanged.apply(this, arguments); |
101 } | 121 if (disabled && this._active) { |
| 122 this.close(); |
102 | 123 |
103 // The activated item can either be this submenu, in which case it | 124 } |
104 // should be expanded, or any of the other sibling submenus, in which | 125 } |
105 // case this submenu should be collapsed. | 126 }); |
106 if (event.detail.item == this) { | 127 })(); |
107 if (this._active) | |
108 return; | |
109 this.open(); | |
110 } else { | |
111 this.close(); | |
112 } | |
113 }, | |
114 | |
115 /** | |
116 * If the dropdown is open when disabled becomes true, close the | |
117 * dropdown. | |
118 * | |
119 * @param {boolean} disabled True if disabled, otherwise false. | |
120 */ | |
121 _disabledChanged: function(disabled) { | |
122 Polymer.IronControlState._disabledChanged.apply(this, arguments); | |
123 if (disabled && this._active) { | |
124 this.close(); | |
125 | |
126 } | |
127 } | |
128 | |
129 }); | |
130 | |
131 })(); | |
OLD | NEW |