Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(351)

Side by Side Diff: third_party/polymer/v0_8/components-chromium/iron-behaviors/iron-button-state-extracted.js

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 1
2 2
3 Polymer.IronButtonState = { 3 /** @polymerBehavior Polymer.IronButtonState */
4 Polymer.IronButtonStateImpl = {
4 5
5 properties: { 6 properties: {
6 7
7 /** 8 /**
8 * If true, the user is currently holding down the button. 9 * If true, the user is currently holding down the button.
9 * 10 *
10 * @attribute pressed 11 * @attribute pressed
11 * @type boolean 12 * @type boolean
12 * @default false 13 * @default false
13 */ 14 */
14 pressed: { 15 pressed: {
15 type: Boolean, 16 type: Boolean,
16 readOnly: true, 17 readOnly: true,
18 value: false,
17 reflectToAttribute: true, 19 reflectToAttribute: true,
18 observer: '_pressedChanged' 20 observer: '_pressedChanged'
19 }, 21 },
20 22
21 /** 23 /**
22 * If true, the button toggles the active state with each tap or press 24 * If true, the button toggles the active state with each tap or press
23 * of the spacebar. 25 * of the spacebar.
24 * 26 *
25 * @attribute toggles 27 * @attribute toggles
26 * @type boolean 28 * @type boolean
27 * @default false 29 * @default false
28 */ 30 */
29 toggles: { 31 toggles: {
30 type: Boolean, 32 type: Boolean,
33 value: false,
31 reflectToAttribute: true 34 reflectToAttribute: true
32 }, 35 },
33 36
34 /** 37 /**
35 * If true, the button is a toggle and is currently in the active state. 38 * If true, the button is a toggle and is currently in the active state.
36 * 39 *
37 * @attribute active 40 * @attribute active
38 * @type boolean 41 * @type boolean
39 * @default false 42 * @default false
40 */ 43 */
41 active: { 44 active: {
42 type: Boolean, 45 type: Boolean,
46 value: false,
43 notify: true, 47 notify: true,
44 reflectToAttribute: true, 48 reflectToAttribute: true,
45 observer: '_activeChanged' 49 observer: '_activeChanged'
50 },
51
52 /**
53 * True if the element is currently being pressed by a "pointer," which
54 * is loosely defined as mouse or touch input (but specifically excluding
55 * keyboard input).
56 */
57 pointerDown: {
58 type: Boolean,
59 readOnly: true,
60 value: false
61 },
62
63 /**
64 * True if the input device that caused the element to receive focus
65 * was a keyboard.
66 */
67 receivedFocusFromKeyboard: {
68 type: Boolean,
69 readOnly: true
46 } 70 }
47
48 }, 71 },
49 72
50 listeners: { 73 listeners: {
51 mousedown: '_downHandler', 74 down: '_downHandler',
52 mouseup: '_upHandler', 75 up: '_upHandler',
53 keydown: '_keyDownHandler',
54 keyup: '_keyUpHandler',
55 tap: '_tapHandler' 76 tap: '_tapHandler'
56 }, 77 },
57 78
79 observers: [
80 '_detectKeyboardFocus(focused)'
81 ],
82
83 keyBindings: {
84 'enter:keydown': '_asyncClick',
85 'space:keydown': '_spaceKeyDownHandler',
86 'space:keyup': '_spaceKeyUpHandler',
87 },
88
58 _tapHandler: function() { 89 _tapHandler: function() {
59 if (this.toggles) { 90 if (this.toggles) {
60 // a tap is needed to toggle the active state 91 // a tap is needed to toggle the active state
61 this._userActivate(!this.active); 92 this._userActivate(!this.active);
62 } else { 93 } else {
63 this.active = false; 94 this.active = false;
64 } 95 }
65 }, 96 },
66 97
98 _detectKeyboardFocus: function(focused) {
99 this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
100 },
101
67 // to emulate native checkbox, (de-)activations from a user interaction fire 102 // to emulate native checkbox, (de-)activations from a user interaction fire
68 // 'change' events 103 // 'change' events
69 _userActivate: function(active) { 104 _userActivate: function(active) {
70 this.active = active; 105 this.active = active;
71 this.fire('change'); 106 this.fire('change');
72 }, 107 },
73 108
74 _downHandler: function() { 109 _downHandler: function() {
110 this._setPointerDown(true);
111 this._setPressed(true);
112 this._setReceivedFocusFromKeyboard(false);
113 },
114
115 _upHandler: function() {
116 this._setPointerDown(false);
117 this._setPressed(false);
118 },
119
120 _spaceKeyDownHandler: function(event) {
121 var keyboardEvent = event.detail.keyboardEvent;
122 keyboardEvent.preventDefault();
123 keyboardEvent.stopImmediatePropagation();
75 this._setPressed(true); 124 this._setPressed(true);
76 }, 125 },
77 126
78 _upHandler: function(e) { 127 _spaceKeyUpHandler: function() {
128 if (this.pressed) {
129 this._asyncClick();
130 }
79 this._setPressed(false); 131 this._setPressed(false);
80 }, 132 },
81 133
82 _keyDownHandler: function(e) {
83 switch(e.keyCode) {
84 case this.keyCodes.ENTER_KEY:
85 this._asyncClick();
86 break;
87
88 case this.keyCodes.SPACE:
89 this._setPressed(true);
90 break;
91
92 }
93 },
94
95 _keyUpHandler: function(e) {
96 if (e.keyCode == this.keyCodes.SPACE) {
97 if (this.pressed) {
98 this._asyncClick();
99 }
100 this._setPressed(false);
101 }
102 },
103
104 // trigger click asynchronously, the asynchrony is useful to allow one 134 // trigger click asynchronously, the asynchrony is useful to allow one
105 // event handler to unwind before triggering another event 135 // event handler to unwind before triggering another event
106 _asyncClick: function() { 136 _asyncClick: function() {
107 this.async(function() { 137 this.async(function() {
108 this.click(); 138 this.click();
109 }, 1); 139 }, 1);
110 }, 140 },
111 141
112 // any of these changes are considered a change to button state 142 // any of these changes are considered a change to button state
113 143
114 _pressedChanged: function(pressed) { 144 _pressedChanged: function(pressed) {
115 this._changedButtonState(); 145 this._changedButtonState();
116 }, 146 },
117 147
118 _activeChanged: function(active) { 148 _activeChanged: function(active) {
119 this.setAttribute('aria-pressed', active ? 'true' : 'false'); 149 if (this.toggles) {
150 this.setAttribute('aria-pressed', active ? 'true' : 'false');
151 } else {
152 this.removeAttribute('aria-pressed');
153 }
120 this._changedButtonState(); 154 this._changedButtonState();
121 }, 155 },
122 156
123 _controlStateChanged: function() { 157 _controlStateChanged: function() {
124 if (this.disabled) { 158 if (this.disabled) {
125 this._setPressed(false); 159 this._setPressed(false);
126 this.active = false;
127 } else { 160 } else {
128 this._changedButtonState(); 161 this._changedButtonState();
129 } 162 }
130 }, 163 },
131 164
132 // provide hook for follow-on behaviors to react to button-state 165 // provide hook for follow-on behaviors to react to button-state
133 166
134 _changedButtonState: function() { 167 _changedButtonState: function() {
135 if (this._buttonStateChanged) { 168 if (this._buttonStateChanged) {
136 this._buttonStateChanged(); // abstract 169 this._buttonStateChanged(); // abstract
137 } 170 }
138 } 171 }
139 172
140 }; 173 };
141 174
175 /** @polymerBehavior Polymer.IronButtonState */
176 Polymer.IronButtonState = [
177 Polymer.IronA11yKeysBehavior,
178 Polymer.IronButtonStateImpl
179 ];
180
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698