| 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 |