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