OLD | NEW |
| (Empty) |
1 | |
2 | |
3 Polymer('paper-slider', { | |
4 | |
5 /** | |
6 * Fired when the slider's value changes. | |
7 * | |
8 * @event core-change | |
9 */ | |
10 | |
11 /** | |
12 * Fired when the slider's immediateValue changes. | |
13 * | |
14 * @event immediate-value-change | |
15 */ | |
16 | |
17 /** | |
18 * Fired when the slider's value changes due to user interaction. | |
19 * | |
20 * Changes to the slider's value due to changes in an underlying | |
21 * bound variable will not trigger this event. | |
22 * | |
23 * @event change | |
24 */ | |
25 | |
26 /** | |
27 * If true, the slider thumb snaps to tick marks evenly spaced based | |
28 * on the `step` property value. | |
29 * | |
30 * @attribute snaps | |
31 * @type boolean | |
32 * @default false | |
33 */ | |
34 snaps: false, | |
35 | |
36 /** | |
37 * If true, a pin with numeric value label is shown when the slider thumb | |
38 * is pressed. Use for settings for which users need to know the exact | |
39 * value of the setting. | |
40 * | |
41 * @attribute pin | |
42 * @type boolean | |
43 * @default false | |
44 */ | |
45 pin: false, | |
46 | |
47 /** | |
48 * If true, this slider is disabled. A disabled slider cannot be tapped | |
49 * or dragged to change the slider value. | |
50 * | |
51 * @attribute disabled | |
52 * @type boolean | |
53 * @default false | |
54 */ | |
55 disabled: false, | |
56 | |
57 /** | |
58 * The number that represents the current secondary progress. | |
59 * | |
60 * @attribute secondaryProgress | |
61 * @type number | |
62 * @default 0 | |
63 */ | |
64 secondaryProgress: 0, | |
65 | |
66 /** | |
67 * If true, an input is shown and user can use it to set the slider value. | |
68 * | |
69 * @attribute editable | |
70 * @type boolean | |
71 * @default false | |
72 */ | |
73 editable: false, | |
74 | |
75 /** | |
76 * The immediate value of the slider. This value is updated while the user | |
77 * is dragging the slider. | |
78 * | |
79 * @attribute immediateValue | |
80 * @type number | |
81 * @default 0 | |
82 */ | |
83 | |
84 maxMarkers: 100, | |
85 | |
86 observe: { | |
87 'step snaps': 'update' | |
88 }, | |
89 | |
90 ready: function() { | |
91 this.update(); | |
92 }, | |
93 | |
94 update: function() { | |
95 this.positionKnob(this.calcRatio(this.value)); | |
96 this.updateMarkers(); | |
97 }, | |
98 | |
99 minChanged: function() { | |
100 this.update(); | |
101 this.setAttribute('aria-valuemin', this.min); | |
102 }, | |
103 | |
104 maxChanged: function() { | |
105 this.update(); | |
106 this.setAttribute('aria-valuemax', this.max); | |
107 }, | |
108 | |
109 valueChanged: function() { | |
110 this.update(); | |
111 this.setAttribute('aria-valuenow', this.value); | |
112 this.fire('core-change'); | |
113 }, | |
114 | |
115 disabledChanged: function() { | |
116 if (this.disabled) { | |
117 this.removeAttribute('tabindex'); | |
118 } else { | |
119 this.tabIndex = 0; | |
120 } | |
121 }, | |
122 | |
123 immediateValueChanged: function() { | |
124 if (!this.dragging) { | |
125 this.value = this.immediateValue; | |
126 } | |
127 this.fire('immediate-value-change'); | |
128 }, | |
129 | |
130 expandKnob: function() { | |
131 this.expand = true; | |
132 }, | |
133 | |
134 resetKnob: function() { | |
135 this.expandJob && this.expandJob.stop(); | |
136 this.expand = false; | |
137 }, | |
138 | |
139 positionKnob: function(ratio) { | |
140 this.immediateValue = this.calcStep(this.calcKnobPosition(ratio)) || 0; | |
141 this._ratio = this.snaps ? this.calcRatio(this.immediateValue) : ratio; | |
142 this.$.sliderKnob.style.left = this._ratio * 100 + '%'; | |
143 }, | |
144 | |
145 inputChange: function() { | |
146 this.value = this.$.input.value; | |
147 this.fire('change'); | |
148 }, | |
149 | |
150 calcKnobPosition: function(ratio) { | |
151 return (this.max - this.min) * ratio + this.min; | |
152 }, | |
153 | |
154 trackStart: function(e) { | |
155 this._w = this.$.sliderBar.offsetWidth; | |
156 this._x = this._ratio * this._w; | |
157 this._startx = this._x || 0; | |
158 this._minx = - this._startx; | |
159 this._maxx = this._w - this._startx; | |
160 this.$.sliderKnob.classList.add('dragging'); | |
161 this.dragging = true; | |
162 e.preventTap(); | |
163 }, | |
164 | |
165 trackx: function(e) { | |
166 var x = Math.min(this._maxx, Math.max(this._minx, e.dx)); | |
167 this._x = this._startx + x; | |
168 this.immediateValue = this.calcStep( | |
169 this.calcKnobPosition(this._x / this._w)) || 0; | |
170 var s = this.$.sliderKnob.style; | |
171 s.transform = s.webkitTransform = 'translate3d(' + (this.snaps ? | |
172 (this.calcRatio(this.immediateValue) * this._w) - this._startx : x) +
'px, 0, 0)'; | |
173 }, | |
174 | |
175 trackEnd: function() { | |
176 var s = this.$.sliderKnob.style; | |
177 s.transform = s.webkitTransform = ''; | |
178 this.$.sliderKnob.classList.remove('dragging'); | |
179 this.dragging = false; | |
180 this.resetKnob(); | |
181 this.value = this.immediateValue; | |
182 this.fire('change'); | |
183 }, | |
184 | |
185 knobdown: function(e) { | |
186 e.preventDefault(); | |
187 this.expandKnob(); | |
188 }, | |
189 | |
190 bardown: function(e) { | |
191 e.preventDefault(); | |
192 this.transiting = true; | |
193 this._w = this.$.sliderBar.offsetWidth; | |
194 var rect = this.$.sliderBar.getBoundingClientRect(); | |
195 var ratio = (e.x - rect.left) / this._w; | |
196 this.positionKnob(ratio); | |
197 this.expandJob = this.job(this.expandJob, this.expandKnob, 60); | |
198 this.fire('change'); | |
199 }, | |
200 | |
201 knobTransitionEnd: function(e) { | |
202 if (e.target === this.$.sliderKnob) { | |
203 this.transiting = false; | |
204 } | |
205 }, | |
206 | |
207 updateMarkers: function() { | |
208 this.markers = []; | |
209 var l = (this.max - this.min) / this.step; | |
210 if (!this.snaps && l > this.maxMarkers) { | |
211 return; | |
212 } | |
213 for (var i = 0; i < l; i++) { | |
214 this.markers.push(''); | |
215 } | |
216 }, | |
217 | |
218 increment: function() { | |
219 this.value = this.clampValue(this.value + this.step); | |
220 }, | |
221 | |
222 decrement: function() { | |
223 this.value = this.clampValue(this.value - this.step); | |
224 }, | |
225 | |
226 incrementKey: function(ev, keys) { | |
227 if (keys.key === "end") { | |
228 this.value = this.max; | |
229 } else { | |
230 this.increment(); | |
231 } | |
232 this.fire('change'); | |
233 }, | |
234 | |
235 decrementKey: function(ev, keys) { | |
236 if (keys.key === "home") { | |
237 this.value = this.min; | |
238 } else { | |
239 this.decrement(); | |
240 } | |
241 this.fire('change'); | |
242 } | |
243 | |
244 }); | |
245 | |
OLD | NEW |