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