OLD | NEW |
1 (function() { | 1 (function() { |
2 | 2 |
3 Polymer({ | 3 Polymer({ |
4 | 4 |
5 is: 'paper-submenu', | 5 is: 'paper-submenu', |
6 | 6 |
7 properties: { | 7 properties: { |
8 /** | 8 /** |
9 * Fired when the submenu is opened. | 9 * Fired when the submenu is opened. |
10 * | 10 * |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
47 }, | 47 }, |
48 | 48 |
49 get __content() { | 49 get __content() { |
50 return Polymer.dom(this.$.content).getDistributedNodes()[0]; | 50 return Polymer.dom(this.$.content).getDistributedNodes()[0]; |
51 }, | 51 }, |
52 | 52 |
53 attached: function() { | 53 attached: function() { |
54 this.listen(this.__parent, 'iron-activate', '_onParentIronActivate'); | 54 this.listen(this.__parent, 'iron-activate', '_onParentIronActivate'); |
55 }, | 55 }, |
56 | 56 |
57 dettached: function() { | 57 detached: function() { |
58 this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate'); | 58 this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate'); |
59 }, | 59 }, |
60 | 60 |
61 /** | 61 /** |
62 * Expand the submenu content. | 62 * Expand the submenu content. |
63 */ | 63 */ |
64 open: function() { | 64 open: function() { |
65 if (!this.disabled && !this._active) { | 65 if (!this.disabled) { |
66 this.$.collapse.show(); | 66 this.opened = true; |
67 this._active = true; | |
68 this.__trigger && this.__trigger.classList.add('iron-selected'); | |
69 this.__content && this.__content.focus(); | |
70 } | 67 } |
71 }, | 68 }, |
72 | 69 |
73 /** | 70 /** |
74 * Collapse the submenu content. | 71 * Collapse the submenu content. |
75 */ | 72 */ |
76 close: function() { | 73 close: function() { |
77 if (this._active) { | 74 this.opened = false; |
78 this.$.collapse.hide(); | |
79 this._active = false; | |
80 this.__trigger && this.__trigger.classList.remove('iron-selected'); | |
81 } | |
82 }, | 75 }, |
83 | 76 |
84 /** | 77 /** |
85 * Toggle the submenu. | 78 * Toggle the submenu. |
86 */ | 79 */ |
87 toggle: function() { | 80 toggle: function() { |
88 if (this._active) { | 81 if (this.opened) { |
89 this.close(); | 82 this.close(); |
90 } else { | 83 } else { |
91 this.open(); | 84 this.open(); |
92 } | 85 } |
93 }, | 86 }, |
94 | 87 |
95 /** | 88 /** |
96 * A handler that is called when the trigger is tapped. | 89 * A handler that is called when the trigger is tapped. |
97 */ | 90 */ |
98 _onTap: function(e) { | 91 _onTap: function(e) { |
99 if (!this.disabled) { | 92 if (!this.disabled) { |
100 this.toggle(); | 93 this.toggle(); |
101 } | 94 } |
102 }, | 95 }, |
103 | 96 |
104 /** | 97 /** |
105 * Toggles the submenu content when the trigger is tapped. | 98 * Toggles the submenu content when the trigger is tapped. |
106 */ | 99 */ |
107 _openedChanged: function(opened, oldOpened) { | 100 _openedChanged: function(opened, oldOpened) { |
108 if (opened) { | 101 if (opened) { |
| 102 this.__trigger && this.__trigger.classList.add('iron-selected'); |
| 103 this.__content && this.__content.focus(); |
109 this.fire('paper-submenu-open'); | 104 this.fire('paper-submenu-open'); |
110 } else if (oldOpened != null) { | 105 } else if (oldOpened != null) { |
| 106 this.__trigger && this.__trigger.classList.remove('iron-selected'); |
111 this.fire('paper-submenu-close'); | 107 this.fire('paper-submenu-close'); |
112 } | 108 } |
113 }, | 109 }, |
114 | 110 |
115 /** | 111 /** |
116 * A handler that is called when `iron-activate` is fired. | 112 * A handler that is called when `iron-activate` is fired. |
117 * | 113 * |
118 * @param {CustomEvent} event An `iron-activate` event. | 114 * @param {CustomEvent} event An `iron-activate` event. |
119 */ | 115 */ |
120 _onParentIronActivate: function(event) { | 116 _onParentIronActivate: function(event) { |
121 var parent = this.__parent; | 117 var parent = this.__parent; |
122 if (Polymer.dom(event).localTarget === parent) { | 118 if (Polymer.dom(event).localTarget === parent) { |
123 // The activated item can either be this submenu, in which case it | 119 // The activated item can either be this submenu, in which case it |
124 // should be expanded, or any of the other sibling submenus, in which | 120 // should be expanded, or any of the other sibling submenus, in which |
125 // case this submenu should be collapsed. | 121 // case this submenu should be collapsed. |
126 if (event.detail.item !== this && !parent.multi) { | 122 if (event.detail.item !== this && !parent.multi) { |
127 this.close(); | 123 this.close(); |
128 } | 124 } |
129 } | 125 } |
130 }, | 126 }, |
131 | 127 |
132 /** | 128 /** |
133 * If the dropdown is open when disabled becomes true, close the | 129 * If the dropdown is open when disabled becomes true, close the |
134 * dropdown. | 130 * dropdown. |
135 * | 131 * |
136 * @param {boolean} disabled True if disabled, otherwise false. | 132 * @param {boolean} disabled True if disabled, otherwise false. |
137 */ | 133 */ |
138 _disabledChanged: function(disabled) { | 134 _disabledChanged: function(disabled) { |
139 Polymer.IronControlState._disabledChanged.apply(this, arguments); | 135 Polymer.IronControlState._disabledChanged.apply(this, arguments); |
140 if (disabled && this._active) { | 136 if (disabled && this.opened) { |
141 this.close(); | 137 this.close(); |
142 } | 138 } |
143 }, | 139 }, |
144 | 140 |
145 /** | 141 /** |
146 * Handler that is called when the menu receives focus. | 142 * Handler that is called when the menu receives focus. |
147 * | 143 * |
148 * @param {FocusEvent} event A focus event. | 144 * @param {FocusEvent} event A focus event. |
149 */ | 145 */ |
150 _onFocus: function(event) { | 146 _onFocus: function(event) { |
151 this.__trigger && this.__trigger.focus(); | 147 this.__trigger && this.__trigger.focus(); |
152 } | 148 } |
153 | 149 |
154 }); | 150 }); |
155 | 151 |
156 })(); | 152 })(); |
OLD | NEW |