OLD | NEW |
| (Empty) |
1 <!-- | |
2 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 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 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 --> | |
9 | |
10 <link rel="import" href="../polymer/polymer.html"> | |
11 <link rel="import" href="iron-control-state.html"> | |
12 | |
13 <script> | |
14 | |
15 Polymer.IronButtonState = { | |
16 | |
17 properties: { | |
18 | |
19 /** | |
20 * If true, the user is currently holding down the button. | |
21 * | |
22 * @attribute pressed | |
23 * @type boolean | |
24 * @default false | |
25 */ | |
26 pressed: { | |
27 type: Boolean, | |
28 readOnly: true, | |
29 reflectToAttribute: true, | |
30 observer: '_pressedChanged' | |
31 }, | |
32 | |
33 /** | |
34 * If true, the button toggles the active state with each tap or press | |
35 * of the spacebar. | |
36 * | |
37 * @attribute toggles | |
38 * @type boolean | |
39 * @default false | |
40 */ | |
41 toggles: { | |
42 type: Boolean, | |
43 reflectToAttribute: true | |
44 }, | |
45 | |
46 /** | |
47 * If true, the button is a toggle and is currently in the active state. | |
48 * | |
49 * @attribute active | |
50 * @type boolean | |
51 * @default false | |
52 */ | |
53 active: { | |
54 type: Boolean, | |
55 notify: true, | |
56 reflectToAttribute: true, | |
57 observer: '_activeChanged' | |
58 } | |
59 | |
60 }, | |
61 | |
62 listeners: { | |
63 mousedown: '_downHandler', | |
64 mouseup: '_upHandler', | |
65 keydown: '_keyDownHandler', | |
66 keyup: '_keyUpHandler', | |
67 tap: '_tapHandler' | |
68 }, | |
69 | |
70 _tapHandler: function() { | |
71 if (this.toggles) { | |
72 // a tap is needed to toggle the active state | |
73 this._userActivate(!this.active); | |
74 } else { | |
75 this.active = false; | |
76 } | |
77 }, | |
78 | |
79 // to emulate native checkbox, (de-)activations from a user interaction fire | |
80 // 'change' events | |
81 _userActivate: function(active) { | |
82 this.active = active; | |
83 this.fire('change'); | |
84 }, | |
85 | |
86 _downHandler: function() { | |
87 this._setPressed(true); | |
88 }, | |
89 | |
90 _upHandler: function(e) { | |
91 this._setPressed(false); | |
92 }, | |
93 | |
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 | |
117 // event handler to unwind before triggering another event | |
118 _asyncClick: function() { | |
119 this.async(function() { | |
120 this.click(); | |
121 }, 1); | |
122 }, | |
123 | |
124 // any of these changes are considered a change to button state | |
125 | |
126 _pressedChanged: function(pressed) { | |
127 this._changedButtonState(); | |
128 }, | |
129 | |
130 _activeChanged: function(active) { | |
131 this.setAttribute('aria-pressed', active ? 'true' : 'false'); | |
132 this._changedButtonState(); | |
133 }, | |
134 | |
135 _controlStateChanged: function() { | |
136 if (this.disabled) { | |
137 this._setPressed(false); | |
138 this.active = false; | |
139 } else { | |
140 this._changedButtonState(); | |
141 } | |
142 }, | |
143 | |
144 // provide hook for follow-on behaviors to react to button-state | |
145 | |
146 _changedButtonState: function() { | |
147 if (this._buttonStateChanged) { | |
148 this._buttonStateChanged(); // abstract | |
149 } | |
150 } | |
151 | |
152 }; | |
153 | |
154 </script> | |
OLD | NEW |