| OLD | NEW |
| (Empty) |
| 1 /** | |
| 2 * @group Polymer Mixins | |
| 3 * | |
| 4 * `Polymer.CoreFocusable` is a mixin for elements that the user can interact wi
th. | |
| 5 * Elements using this mixin will receive attributes reflecting the focus, press
ed | |
| 6 * and disabled states. | |
| 7 * | |
| 8 * @element Polymer.CoreFocusable | |
| 9 * @status unstable | |
| 10 */ | |
| 11 | |
| 12 Polymer.CoreFocusable = { | |
| 13 | |
| 14 mixinPublish: { | |
| 15 | |
| 16 /** | |
| 17 * If true, the element is currently active either because the | |
| 18 * user is touching it, or the button is a toggle | |
| 19 * and is currently in the active state. | |
| 20 * | |
| 21 * @attribute active | |
| 22 * @type boolean | |
| 23 * @default false | |
| 24 */ | |
| 25 active: {value: false, reflect: true}, | |
| 26 | |
| 27 /** | |
| 28 * If true, the element currently has focus due to keyboard | |
| 29 * navigation. | |
| 30 * | |
| 31 * @attribute focused | |
| 32 * @type boolean | |
| 33 * @default false | |
| 34 */ | |
| 35 focused: {value: false, reflect: true}, | |
| 36 | |
| 37 /** | |
| 38 * If true, the user is currently holding down the button. | |
| 39 * | |
| 40 * @attribute pressed | |
| 41 * @type boolean | |
| 42 * @default false | |
| 43 */ | |
| 44 pressed: {value: false, reflect: true}, | |
| 45 | |
| 46 /** | |
| 47 * If true, the user cannot interact with this element. | |
| 48 * | |
| 49 * @attribute disabled | |
| 50 * @type boolean | |
| 51 * @default false | |
| 52 */ | |
| 53 disabled: {value: false, reflect: true}, | |
| 54 | |
| 55 /** | |
| 56 * If true, the button toggles the active state with each tap. | |
| 57 * Otherwise, the button becomes active when the user is holding | |
| 58 * it down. | |
| 59 * | |
| 60 * @attribute toggle | |
| 61 * @type boolean | |
| 62 * @default false | |
| 63 */ | |
| 64 toggle: false | |
| 65 | |
| 66 }, | |
| 67 | |
| 68 mixinDelegates: { | |
| 69 contextMenu: '_contextMenuAction', | |
| 70 down: '_downAction', | |
| 71 up: '_upAction', | |
| 72 focus: '_focusAction', | |
| 73 blur: '_blurAction' | |
| 74 }, | |
| 75 | |
| 76 mixinObserve: { | |
| 77 disabled: '_disabledChanged' | |
| 78 }, | |
| 79 | |
| 80 _disabledChanged: function() { | |
| 81 if (this.disabled) { | |
| 82 this.style.pointerEvents = 'none'; | |
| 83 this.removeAttribute('tabindex'); | |
| 84 this.setAttribute('aria-disabled', ''); | |
| 85 } else { | |
| 86 this.style.pointerEvents = ''; | |
| 87 this.setAttribute('tabindex', 0); | |
| 88 this.removeAttribute('aria-disabled'); | |
| 89 } | |
| 90 }, | |
| 91 | |
| 92 _downAction: function() { | |
| 93 this.pressed = true; | |
| 94 | |
| 95 if (this.toggle) { | |
| 96 this.active = !this.active; | |
| 97 } else { | |
| 98 this.active = true; | |
| 99 } | |
| 100 }, | |
| 101 | |
| 102 // Pulling up the context menu for an item should focus it; but we need to | |
| 103 // be careful about how we deal with down/up events surrounding context | |
| 104 // menus. The up event typically does not fire until the context menu | |
| 105 // closes: so we focus immediately. | |
| 106 // | |
| 107 // This fires _after_ downAction. | |
| 108 _contextMenuAction: function(e) { | |
| 109 // Note that upAction may fire _again_ on the actual up event. | |
| 110 this._upAction(e); | |
| 111 this._focusAction(); | |
| 112 }, | |
| 113 | |
| 114 _upAction: function() { | |
| 115 this.pressed = false; | |
| 116 | |
| 117 if (!this.toggle) { | |
| 118 this.active = false; | |
| 119 } | |
| 120 }, | |
| 121 | |
| 122 _focusAction: function() { | |
| 123 if (!this.pressed) { | |
| 124 // Only render the "focused" state if the element gains focus due to | |
| 125 // keyboard navigation. | |
| 126 this.focused = true; | |
| 127 } | |
| 128 }, | |
| 129 | |
| 130 _blurAction: function() { | |
| 131 this.focused = false; | |
| 132 } | |
| 133 | |
| 134 } | |
| OLD | NEW |