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

Side by Side Diff: third_party/polymer/v0_8/components/iron-behaviors/iron-button-state.html

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 @license
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 --> 9 -->
9 10
10 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
11 <link rel="import" href="iron-control-state.html"> 13 <link rel="import" href="iron-control-state.html">
12 14
13 <script> 15 <script>
14 16
15 Polymer.IronButtonState = { 17 /** @polymerBehavior Polymer.IronButtonState */
18 Polymer.IronButtonStateImpl = {
16 19
17 properties: { 20 properties: {
18 21
19 /** 22 /**
20 * If true, the user is currently holding down the button. 23 * If true, the user is currently holding down the button.
21 * 24 *
22 * @attribute pressed 25 * @attribute pressed
23 * @type boolean 26 * @type boolean
24 * @default false 27 * @default false
25 */ 28 */
26 pressed: { 29 pressed: {
27 type: Boolean, 30 type: Boolean,
28 readOnly: true, 31 readOnly: true,
32 value: false,
29 reflectToAttribute: true, 33 reflectToAttribute: true,
30 observer: '_pressedChanged' 34 observer: '_pressedChanged'
31 }, 35 },
32 36
33 /** 37 /**
34 * If true, the button toggles the active state with each tap or press 38 * If true, the button toggles the active state with each tap or press
35 * of the spacebar. 39 * of the spacebar.
36 * 40 *
37 * @attribute toggles 41 * @attribute toggles
38 * @type boolean 42 * @type boolean
39 * @default false 43 * @default false
40 */ 44 */
41 toggles: { 45 toggles: {
42 type: Boolean, 46 type: Boolean,
47 value: false,
43 reflectToAttribute: true 48 reflectToAttribute: true
44 }, 49 },
45 50
46 /** 51 /**
47 * If true, the button is a toggle and is currently in the active state. 52 * If true, the button is a toggle and is currently in the active state.
48 * 53 *
49 * @attribute active 54 * @attribute active
50 * @type boolean 55 * @type boolean
51 * @default false 56 * @default false
52 */ 57 */
53 active: { 58 active: {
54 type: Boolean, 59 type: Boolean,
60 value: false,
55 notify: true, 61 notify: true,
56 reflectToAttribute: true, 62 reflectToAttribute: true,
57 observer: '_activeChanged' 63 observer: '_activeChanged'
64 },
65
66 /**
67 * True if the element is currently being pressed by a "pointer," which
68 * is loosely defined as mouse or touch input (but specifically excluding
69 * keyboard input).
70 */
71 pointerDown: {
72 type: Boolean,
73 readOnly: true,
74 value: false
75 },
76
77 /**
78 * True if the input device that caused the element to receive focus
79 * was a keyboard.
80 */
81 receivedFocusFromKeyboard: {
82 type: Boolean,
83 readOnly: true
58 } 84 }
59
60 }, 85 },
61 86
62 listeners: { 87 listeners: {
63 mousedown: '_downHandler', 88 down: '_downHandler',
64 mouseup: '_upHandler', 89 up: '_upHandler',
65 keydown: '_keyDownHandler',
66 keyup: '_keyUpHandler',
67 tap: '_tapHandler' 90 tap: '_tapHandler'
68 }, 91 },
69 92
93 observers: [
94 '_detectKeyboardFocus(focused)'
95 ],
96
97 keyBindings: {
98 'enter:keydown': '_asyncClick',
99 'space:keydown': '_spaceKeyDownHandler',
100 'space:keyup': '_spaceKeyUpHandler',
101 },
102
70 _tapHandler: function() { 103 _tapHandler: function() {
71 if (this.toggles) { 104 if (this.toggles) {
72 // a tap is needed to toggle the active state 105 // a tap is needed to toggle the active state
73 this._userActivate(!this.active); 106 this._userActivate(!this.active);
74 } else { 107 } else {
75 this.active = false; 108 this.active = false;
76 } 109 }
77 }, 110 },
78 111
112 _detectKeyboardFocus: function(focused) {
113 this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
114 },
115
79 // to emulate native checkbox, (de-)activations from a user interaction fire 116 // to emulate native checkbox, (de-)activations from a user interaction fire
80 // 'change' events 117 // 'change' events
81 _userActivate: function(active) { 118 _userActivate: function(active) {
82 this.active = active; 119 this.active = active;
83 this.fire('change'); 120 this.fire('change');
84 }, 121 },
85 122
86 _downHandler: function() { 123 _downHandler: function() {
124 this._setPointerDown(true);
125 this._setPressed(true);
126 this._setReceivedFocusFromKeyboard(false);
127 },
128
129 _upHandler: function() {
130 this._setPointerDown(false);
131 this._setPressed(false);
132 },
133
134 _spaceKeyDownHandler: function(event) {
135 var keyboardEvent = event.detail.keyboardEvent;
136 keyboardEvent.preventDefault();
137 keyboardEvent.stopImmediatePropagation();
87 this._setPressed(true); 138 this._setPressed(true);
88 }, 139 },
89 140
90 _upHandler: function(e) { 141 _spaceKeyUpHandler: function() {
142 if (this.pressed) {
143 this._asyncClick();
144 }
91 this._setPressed(false); 145 this._setPressed(false);
92 }, 146 },
93 147
94 _keyDownHandler: function(e) {
95 switch(e.keyCode) {
96 case this.keyCodes.ENTER_KEY:
97 this._asyncClick();
98 break;
99
100 case this.keyCodes.SPACE:
101 this._setPressed(true);
102 break;
103
104 }
105 },
106
107 _keyUpHandler: function(e) {
108 if (e.keyCode == this.keyCodes.SPACE) {
109 if (this.pressed) {
110 this._asyncClick();
111 }
112 this._setPressed(false);
113 }
114 },
115
116 // trigger click asynchronously, the asynchrony is useful to allow one 148 // trigger click asynchronously, the asynchrony is useful to allow one
117 // event handler to unwind before triggering another event 149 // event handler to unwind before triggering another event
118 _asyncClick: function() { 150 _asyncClick: function() {
119 this.async(function() { 151 this.async(function() {
120 this.click(); 152 this.click();
121 }, 1); 153 }, 1);
122 }, 154 },
123 155
124 // any of these changes are considered a change to button state 156 // any of these changes are considered a change to button state
125 157
126 _pressedChanged: function(pressed) { 158 _pressedChanged: function(pressed) {
127 this._changedButtonState(); 159 this._changedButtonState();
128 }, 160 },
129 161
130 _activeChanged: function(active) { 162 _activeChanged: function(active) {
131 this.setAttribute('aria-pressed', active ? 'true' : 'false'); 163 if (this.toggles) {
164 this.setAttribute('aria-pressed', active ? 'true' : 'false');
165 } else {
166 this.removeAttribute('aria-pressed');
167 }
132 this._changedButtonState(); 168 this._changedButtonState();
133 }, 169 },
134 170
135 _controlStateChanged: function() { 171 _controlStateChanged: function() {
136 if (this.disabled) { 172 if (this.disabled) {
137 this._setPressed(false); 173 this._setPressed(false);
138 this.active = false;
139 } else { 174 } else {
140 this._changedButtonState(); 175 this._changedButtonState();
141 } 176 }
142 }, 177 },
143 178
144 // provide hook for follow-on behaviors to react to button-state 179 // provide hook for follow-on behaviors to react to button-state
145 180
146 _changedButtonState: function() { 181 _changedButtonState: function() {
147 if (this._buttonStateChanged) { 182 if (this._buttonStateChanged) {
148 this._buttonStateChanged(); // abstract 183 this._buttonStateChanged(); // abstract
149 } 184 }
150 } 185 }
151 186
152 }; 187 };
153 188
189 /** @polymerBehavior Polymer.IronButtonState */
190 Polymer.IronButtonState = [
191 Polymer.IronA11yKeysBehavior,
192 Polymer.IronButtonStateImpl
193 ];
194
154 </script> 195 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698