1
|
|
|
/*! |
2
|
|
|
* jQuery UI Slider 1.12.1 |
3
|
|
|
* http://jqueryui.com |
4
|
|
|
* |
5
|
|
|
* Copyright jQuery Foundation and other contributors |
6
|
|
|
* Released under the MIT license. |
7
|
|
|
* http://jquery.org/license |
8
|
|
|
*/ |
9
|
|
|
|
10
|
|
|
//>>label: Slider |
11
|
|
|
//>>group: Widgets |
12
|
|
|
//>>description: Displays a flexible slider with ranges and accessibility via keyboard. |
13
|
|
|
//>>docs: http://api.jqueryui.com/slider/ |
14
|
|
|
//>>demos: http://jqueryui.com/slider/ |
15
|
|
|
//>>css.structure: ../../themes/base/core.css |
16
|
|
|
//>>css.structure: ../../themes/base/slider.css |
17
|
|
|
//>>css.theme: ../../themes/base/theme.css |
18
|
|
|
|
19
|
|
|
( function( factory ) { |
20
|
|
|
if ( typeof define === "function" && define.amd ) { |
21
|
|
|
|
22
|
|
|
// AMD. Register as an anonymous module. |
23
|
|
|
define( [ |
24
|
|
|
"jquery", |
25
|
|
|
"./mouse", |
26
|
|
|
"../keycode", |
27
|
|
|
"../version", |
28
|
|
|
"../widget" |
29
|
|
|
], factory ); |
30
|
|
|
} else { |
31
|
|
|
|
32
|
|
|
// Browser globals |
33
|
|
|
factory( jQuery ); |
34
|
|
|
} |
35
|
|
|
}( function( $ ) { |
36
|
|
|
|
37
|
|
|
return $.widget( "ui.slider", $.ui.mouse, { |
38
|
|
|
version: "1.12.1", |
39
|
|
|
widgetEventPrefix: "slide", |
40
|
|
|
|
41
|
|
|
options: { |
42
|
|
|
animate: false, |
43
|
|
|
classes: { |
44
|
|
|
"ui-slider": "ui-corner-all", |
45
|
|
|
"ui-slider-handle": "ui-corner-all", |
46
|
|
|
|
47
|
|
|
// Note: ui-widget-header isn't the most fittingly semantic framework class for this |
48
|
|
|
// element, but worked best visually with a variety of themes |
49
|
|
|
"ui-slider-range": "ui-corner-all ui-widget-header" |
50
|
|
|
}, |
51
|
|
|
distance: 0, |
52
|
|
|
max: 100, |
53
|
|
|
min: 0, |
54
|
|
|
orientation: "horizontal", |
55
|
|
|
range: false, |
56
|
|
|
step: 1, |
57
|
|
|
value: 0, |
58
|
|
|
values: null, |
59
|
|
|
|
60
|
|
|
// Callbacks |
61
|
|
|
change: null, |
62
|
|
|
slide: null, |
63
|
|
|
start: null, |
64
|
|
|
stop: null |
65
|
|
|
}, |
66
|
|
|
|
67
|
|
|
// Number of pages in a slider |
68
|
|
|
// (how many times can you page up/down to go through the whole range) |
69
|
|
|
numPages: 5, |
70
|
|
|
|
71
|
|
|
_create: function() { |
72
|
|
|
this._keySliding = false; |
73
|
|
|
this._mouseSliding = false; |
74
|
|
|
this._animateOff = true; |
75
|
|
|
this._handleIndex = null; |
76
|
|
|
this._detectOrientation(); |
77
|
|
|
this._mouseInit(); |
78
|
|
|
this._calculateNewMax(); |
79
|
|
|
|
80
|
|
|
this._addClass( "ui-slider ui-slider-" + this.orientation, |
81
|
|
|
"ui-widget ui-widget-content" ); |
82
|
|
|
|
83
|
|
|
this._refresh(); |
84
|
|
|
|
85
|
|
|
this._animateOff = false; |
86
|
|
|
}, |
87
|
|
|
|
88
|
|
|
_refresh: function() { |
89
|
|
|
this._createRange(); |
90
|
|
|
this._createHandles(); |
91
|
|
|
this._setupEvents(); |
92
|
|
|
this._refreshValue(); |
93
|
|
|
}, |
94
|
|
|
|
95
|
|
|
_createHandles: function() { |
96
|
|
|
var i, handleCount, |
97
|
|
|
options = this.options, |
98
|
|
|
existingHandles = this.element.find( ".ui-slider-handle" ), |
99
|
|
|
handle = "<span tabindex='0'></span>", |
100
|
|
|
handles = []; |
101
|
|
|
|
102
|
|
|
handleCount = ( options.values && options.values.length ) || 1; |
103
|
|
|
|
104
|
|
|
if ( existingHandles.length > handleCount ) { |
105
|
|
|
existingHandles.slice( handleCount ).remove(); |
106
|
|
|
existingHandles = existingHandles.slice( 0, handleCount ); |
107
|
|
|
} |
108
|
|
|
|
109
|
|
|
for ( i = existingHandles.length; i < handleCount; i++ ) { |
110
|
|
|
handles.push( handle ); |
111
|
|
|
} |
112
|
|
|
|
113
|
|
|
this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) ); |
114
|
|
|
|
115
|
|
|
this._addClass( this.handles, "ui-slider-handle", "ui-state-default" ); |
116
|
|
|
|
117
|
|
|
this.handle = this.handles.eq( 0 ); |
118
|
|
|
|
119
|
|
|
this.handles.each( function( i ) { |
120
|
|
|
$( this ) |
121
|
|
|
.data( "ui-slider-handle-index", i ) |
122
|
|
|
.attr( "tabIndex", 0 ); |
123
|
|
|
} ); |
124
|
|
|
}, |
125
|
|
|
|
126
|
|
|
_createRange: function() { |
127
|
|
|
var options = this.options; |
128
|
|
|
|
129
|
|
|
if ( options.range ) { |
130
|
|
|
if ( options.range === true ) { |
131
|
|
|
if ( !options.values ) { |
132
|
|
|
options.values = [ this._valueMin(), this._valueMin() ]; |
133
|
|
|
} else if ( options.values.length && options.values.length !== 2 ) { |
134
|
|
|
options.values = [ options.values[ 0 ], options.values[ 0 ] ]; |
135
|
|
|
} else if ( $.isArray( options.values ) ) { |
136
|
|
|
options.values = options.values.slice( 0 ); |
137
|
|
|
} |
138
|
|
|
} |
139
|
|
|
|
140
|
|
|
if ( !this.range || !this.range.length ) { |
141
|
|
|
this.range = $( "<div>" ) |
142
|
|
|
.appendTo( this.element ); |
143
|
|
|
|
144
|
|
|
this._addClass( this.range, "ui-slider-range" ); |
145
|
|
|
} else { |
146
|
|
|
this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" ); |
147
|
|
|
|
148
|
|
|
// Handle range switching from true to min/max |
149
|
|
|
this.range.css( { |
150
|
|
|
"left": "", |
151
|
|
|
"bottom": "" |
152
|
|
|
} ); |
153
|
|
|
} |
154
|
|
|
if ( options.range === "min" || options.range === "max" ) { |
155
|
|
|
this._addClass( this.range, "ui-slider-range-" + options.range ); |
156
|
|
|
} |
157
|
|
|
} else { |
158
|
|
|
if ( this.range ) { |
159
|
|
|
this.range.remove(); |
160
|
|
|
} |
161
|
|
|
this.range = null; |
162
|
|
|
} |
163
|
|
|
}, |
164
|
|
|
|
165
|
|
|
_setupEvents: function() { |
166
|
|
|
this._off( this.handles ); |
167
|
|
|
this._on( this.handles, this._handleEvents ); |
168
|
|
|
this._hoverable( this.handles ); |
169
|
|
|
this._focusable( this.handles ); |
170
|
|
|
}, |
171
|
|
|
|
172
|
|
|
_destroy: function() { |
173
|
|
|
this.handles.remove(); |
174
|
|
|
if ( this.range ) { |
175
|
|
|
this.range.remove(); |
176
|
|
|
} |
177
|
|
|
|
178
|
|
|
this._mouseDestroy(); |
179
|
|
|
}, |
180
|
|
|
|
181
|
|
|
_mouseCapture: function( event ) { |
182
|
|
|
var position, normValue, distance, closestHandle, index, allowed, offset, mouseOverHandle, |
183
|
|
|
that = this, |
184
|
|
|
o = this.options; |
185
|
|
|
|
186
|
|
|
if ( o.disabled ) { |
187
|
|
|
return false; |
188
|
|
|
} |
189
|
|
|
|
190
|
|
|
this.elementSize = { |
191
|
|
|
width: this.element.outerWidth(), |
192
|
|
|
height: this.element.outerHeight() |
193
|
|
|
}; |
194
|
|
|
this.elementOffset = this.element.offset(); |
195
|
|
|
|
196
|
|
|
position = { x: event.pageX, y: event.pageY }; |
197
|
|
|
normValue = this._normValueFromMouse( position ); |
198
|
|
|
distance = this._valueMax() - this._valueMin() + 1; |
199
|
|
|
this.handles.each( function( i ) { |
200
|
|
|
var thisDistance = Math.abs( normValue - that.values( i ) ); |
201
|
|
|
if ( ( distance > thisDistance ) || |
202
|
|
|
( distance === thisDistance && |
203
|
|
|
( i === that._lastChangedValue || that.values( i ) === o.min ) ) ) { |
204
|
|
|
distance = thisDistance; |
205
|
|
|
closestHandle = $( this ); |
206
|
|
|
index = i; |
207
|
|
|
} |
208
|
|
|
} ); |
209
|
|
|
|
210
|
|
|
allowed = this._start( event, index ); |
211
|
|
|
if ( allowed === false ) { |
212
|
|
|
return false; |
213
|
|
|
} |
214
|
|
|
this._mouseSliding = true; |
215
|
|
|
|
216
|
|
|
this._handleIndex = index; |
217
|
|
|
|
218
|
|
|
this._addClass( closestHandle, null, "ui-state-active" ); |
219
|
|
|
closestHandle.trigger( "focus" ); |
220
|
|
|
|
221
|
|
|
offset = closestHandle.offset(); |
222
|
|
|
mouseOverHandle = !$( event.target ).parents().addBack().is( ".ui-slider-handle" ); |
223
|
|
|
this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : { |
224
|
|
|
left: event.pageX - offset.left - ( closestHandle.width() / 2 ), |
225
|
|
|
top: event.pageY - offset.top - |
226
|
|
|
( closestHandle.height() / 2 ) - |
227
|
|
|
( parseInt( closestHandle.css( "borderTopWidth" ), 10 ) || 0 ) - |
228
|
|
|
( parseInt( closestHandle.css( "borderBottomWidth" ), 10 ) || 0 ) + |
229
|
|
|
( parseInt( closestHandle.css( "marginTop" ), 10 ) || 0 ) |
230
|
|
|
}; |
231
|
|
|
|
232
|
|
|
if ( !this.handles.hasClass( "ui-state-hover" ) ) { |
233
|
|
|
this._slide( event, index, normValue ); |
234
|
|
|
} |
235
|
|
|
this._animateOff = true; |
236
|
|
|
return true; |
237
|
|
|
}, |
238
|
|
|
|
239
|
|
|
_mouseStart: function() { |
240
|
|
|
return true; |
241
|
|
|
}, |
242
|
|
|
|
243
|
|
|
_mouseDrag: function( event ) { |
244
|
|
|
var position = { x: event.pageX, y: event.pageY }, |
245
|
|
|
normValue = this._normValueFromMouse( position ); |
246
|
|
|
|
247
|
|
|
this._slide( event, this._handleIndex, normValue ); |
248
|
|
|
|
249
|
|
|
return false; |
250
|
|
|
}, |
251
|
|
|
|
252
|
|
|
_mouseStop: function( event ) { |
253
|
|
|
this._removeClass( this.handles, null, "ui-state-active" ); |
254
|
|
|
this._mouseSliding = false; |
255
|
|
|
|
256
|
|
|
this._stop( event, this._handleIndex ); |
257
|
|
|
this._change( event, this._handleIndex ); |
258
|
|
|
|
259
|
|
|
this._handleIndex = null; |
260
|
|
|
this._clickOffset = null; |
261
|
|
|
this._animateOff = false; |
262
|
|
|
|
263
|
|
|
return false; |
264
|
|
|
}, |
265
|
|
|
|
266
|
|
|
_detectOrientation: function() { |
267
|
|
|
this.orientation = ( this.options.orientation === "vertical" ) ? "vertical" : "horizontal"; |
268
|
|
|
}, |
269
|
|
|
|
270
|
|
|
_normValueFromMouse: function( position ) { |
271
|
|
|
var pixelTotal, |
272
|
|
|
pixelMouse, |
273
|
|
|
percentMouse, |
274
|
|
|
valueTotal, |
275
|
|
|
valueMouse; |
276
|
|
|
|
277
|
|
|
if ( this.orientation === "horizontal" ) { |
278
|
|
|
pixelTotal = this.elementSize.width; |
279
|
|
|
pixelMouse = position.x - this.elementOffset.left - |
280
|
|
|
( this._clickOffset ? this._clickOffset.left : 0 ); |
281
|
|
|
} else { |
282
|
|
|
pixelTotal = this.elementSize.height; |
283
|
|
|
pixelMouse = position.y - this.elementOffset.top - |
284
|
|
|
( this._clickOffset ? this._clickOffset.top : 0 ); |
285
|
|
|
} |
286
|
|
|
|
287
|
|
|
percentMouse = ( pixelMouse / pixelTotal ); |
288
|
|
|
if ( percentMouse > 1 ) { |
289
|
|
|
percentMouse = 1; |
290
|
|
|
} |
291
|
|
|
if ( percentMouse < 0 ) { |
292
|
|
|
percentMouse = 0; |
293
|
|
|
} |
294
|
|
|
if ( this.orientation === "vertical" ) { |
295
|
|
|
percentMouse = 1 - percentMouse; |
296
|
|
|
} |
297
|
|
|
|
298
|
|
|
valueTotal = this._valueMax() - this._valueMin(); |
299
|
|
|
valueMouse = this._valueMin() + percentMouse * valueTotal; |
300
|
|
|
|
301
|
|
|
return this._trimAlignValue( valueMouse ); |
302
|
|
|
}, |
303
|
|
|
|
304
|
|
|
_uiHash: function( index, value, values ) { |
305
|
|
|
var uiHash = { |
306
|
|
|
handle: this.handles[ index ], |
307
|
|
|
handleIndex: index, |
308
|
|
|
value: value !== undefined ? value : this.value() |
309
|
|
|
}; |
310
|
|
|
|
311
|
|
|
if ( this._hasMultipleValues() ) { |
312
|
|
|
uiHash.value = value !== undefined ? value : this.values( index ); |
313
|
|
|
uiHash.values = values || this.values(); |
314
|
|
|
} |
315
|
|
|
|
316
|
|
|
return uiHash; |
317
|
|
|
}, |
318
|
|
|
|
319
|
|
|
_hasMultipleValues: function() { |
320
|
|
|
return this.options.values && this.options.values.length; |
321
|
|
|
}, |
322
|
|
|
|
323
|
|
|
_start: function( event, index ) { |
324
|
|
|
return this._trigger( "start", event, this._uiHash( index ) ); |
325
|
|
|
}, |
326
|
|
|
|
327
|
|
|
_slide: function( event, index, newVal ) { |
328
|
|
|
var allowed, otherVal, |
329
|
|
|
currentValue = this.value(), |
330
|
|
|
newValues = this.values(); |
331
|
|
|
|
332
|
|
|
if ( this._hasMultipleValues() ) { |
333
|
|
|
otherVal = this.values( index ? 0 : 1 ); |
334
|
|
|
currentValue = this.values( index ); |
335
|
|
|
|
336
|
|
|
if ( this.options.values.length === 2 && this.options.range === true ) { |
337
|
|
|
newVal = index === 0 ? Math.min( otherVal, newVal ) : Math.max( otherVal, newVal ); |
338
|
|
|
} |
339
|
|
|
|
340
|
|
|
newValues[ index ] = newVal; |
341
|
|
|
} |
342
|
|
|
|
343
|
|
|
if ( newVal === currentValue ) { |
344
|
|
|
return; |
345
|
|
|
} |
346
|
|
|
|
347
|
|
|
allowed = this._trigger( "slide", event, this._uiHash( index, newVal, newValues ) ); |
348
|
|
|
|
349
|
|
|
// A slide can be canceled by returning false from the slide callback |
350
|
|
|
if ( allowed === false ) { |
351
|
|
|
return; |
352
|
|
|
} |
353
|
|
|
|
354
|
|
|
if ( this._hasMultipleValues() ) { |
355
|
|
|
this.values( index, newVal ); |
356
|
|
|
} else { |
357
|
|
|
this.value( newVal ); |
358
|
|
|
} |
359
|
|
|
}, |
360
|
|
|
|
361
|
|
|
_stop: function( event, index ) { |
362
|
|
|
this._trigger( "stop", event, this._uiHash( index ) ); |
363
|
|
|
}, |
364
|
|
|
|
365
|
|
|
_change: function( event, index ) { |
366
|
|
|
if ( !this._keySliding && !this._mouseSliding ) { |
367
|
|
|
|
368
|
|
|
//store the last changed value index for reference when handles overlap |
369
|
|
|
this._lastChangedValue = index; |
370
|
|
|
this._trigger( "change", event, this._uiHash( index ) ); |
371
|
|
|
} |
372
|
|
|
}, |
373
|
|
|
|
374
|
|
|
value: function( newValue ) { |
375
|
|
|
if ( arguments.length ) { |
376
|
|
|
this.options.value = this._trimAlignValue( newValue ); |
377
|
|
|
this._refreshValue(); |
378
|
|
|
this._change( null, 0 ); |
379
|
|
|
return; |
380
|
|
|
} |
381
|
|
|
|
382
|
|
|
return this._value(); |
383
|
|
|
}, |
384
|
|
|
|
385
|
|
|
values: function( index, newValue ) { |
386
|
|
|
var vals, |
387
|
|
|
newValues, |
388
|
|
|
i; |
389
|
|
|
|
390
|
|
|
if ( arguments.length > 1 ) { |
391
|
|
|
this.options.values[ index ] = this._trimAlignValue( newValue ); |
392
|
|
|
this._refreshValue(); |
393
|
|
|
this._change( null, index ); |
394
|
|
|
return; |
395
|
|
|
} |
396
|
|
|
|
397
|
|
|
if ( arguments.length ) { |
398
|
|
|
if ( $.isArray( arguments[ 0 ] ) ) { |
399
|
|
|
vals = this.options.values; |
400
|
|
|
newValues = arguments[ 0 ]; |
401
|
|
|
for ( i = 0; i < vals.length; i += 1 ) { |
402
|
|
|
vals[ i ] = this._trimAlignValue( newValues[ i ] ); |
403
|
|
|
this._change( null, i ); |
404
|
|
|
} |
405
|
|
|
this._refreshValue(); |
406
|
|
|
} else { |
407
|
|
|
if ( this._hasMultipleValues() ) { |
408
|
|
|
return this._values( index ); |
409
|
|
|
} else { |
410
|
|
|
return this.value(); |
411
|
|
|
} |
412
|
|
|
} |
413
|
|
|
} else { |
414
|
|
|
return this._values(); |
415
|
|
|
} |
416
|
|
|
}, |
417
|
|
|
|
418
|
|
|
_setOption: function( key, value ) { |
419
|
|
|
var i, |
420
|
|
|
valsLength = 0; |
421
|
|
|
|
422
|
|
|
if ( key === "range" && this.options.range === true ) { |
423
|
|
|
if ( value === "min" ) { |
424
|
|
|
this.options.value = this._values( 0 ); |
425
|
|
|
this.options.values = null; |
426
|
|
|
} else if ( value === "max" ) { |
427
|
|
|
this.options.value = this._values( this.options.values.length - 1 ); |
428
|
|
|
this.options.values = null; |
429
|
|
|
} |
430
|
|
|
} |
431
|
|
|
|
432
|
|
|
if ( $.isArray( this.options.values ) ) { |
433
|
|
|
valsLength = this.options.values.length; |
434
|
|
|
} |
435
|
|
|
|
436
|
|
|
this._super( key, value ); |
437
|
|
|
|
438
|
|
|
switch ( key ) { |
|
|
|
|
439
|
|
|
case "orientation": |
440
|
|
|
this._detectOrientation(); |
441
|
|
|
this._removeClass( "ui-slider-horizontal ui-slider-vertical" ) |
442
|
|
|
._addClass( "ui-slider-" + this.orientation ); |
443
|
|
|
this._refreshValue(); |
444
|
|
|
if ( this.options.range ) { |
445
|
|
|
this._refreshRange( value ); |
446
|
|
|
} |
447
|
|
|
|
448
|
|
|
// Reset positioning from previous orientation |
449
|
|
|
this.handles.css( value === "horizontal" ? "bottom" : "left", "" ); |
450
|
|
|
break; |
451
|
|
|
case "value": |
452
|
|
|
this._animateOff = true; |
453
|
|
|
this._refreshValue(); |
454
|
|
|
this._change( null, 0 ); |
455
|
|
|
this._animateOff = false; |
456
|
|
|
break; |
457
|
|
|
case "values": |
458
|
|
|
this._animateOff = true; |
459
|
|
|
this._refreshValue(); |
460
|
|
|
|
461
|
|
|
// Start from the last handle to prevent unreachable handles (#9046) |
462
|
|
|
for ( i = valsLength - 1; i >= 0; i-- ) { |
463
|
|
|
this._change( null, i ); |
464
|
|
|
} |
465
|
|
|
this._animateOff = false; |
466
|
|
|
break; |
467
|
|
|
case "step": |
468
|
|
|
case "min": |
469
|
|
|
case "max": |
470
|
|
|
this._animateOff = true; |
471
|
|
|
this._calculateNewMax(); |
472
|
|
|
this._refreshValue(); |
473
|
|
|
this._animateOff = false; |
474
|
|
|
break; |
475
|
|
|
case "range": |
476
|
|
|
this._animateOff = true; |
477
|
|
|
this._refresh(); |
478
|
|
|
this._animateOff = false; |
479
|
|
|
break; |
480
|
|
|
} |
481
|
|
|
}, |
482
|
|
|
|
483
|
|
|
_setOptionDisabled: function( value ) { |
484
|
|
|
this._super( value ); |
485
|
|
|
|
486
|
|
|
this._toggleClass( null, "ui-state-disabled", !!value ); |
487
|
|
|
}, |
488
|
|
|
|
489
|
|
|
//internal value getter |
490
|
|
|
// _value() returns value trimmed by min and max, aligned by step |
491
|
|
|
_value: function() { |
492
|
|
|
var val = this.options.value; |
493
|
|
|
val = this._trimAlignValue( val ); |
494
|
|
|
|
495
|
|
|
return val; |
496
|
|
|
}, |
497
|
|
|
|
498
|
|
|
//internal values getter |
499
|
|
|
// _values() returns array of values trimmed by min and max, aligned by step |
500
|
|
|
// _values( index ) returns single value trimmed by min and max, aligned by step |
501
|
|
|
_values: function( index ) { |
502
|
|
|
var val, |
503
|
|
|
vals, |
504
|
|
|
i; |
505
|
|
|
|
506
|
|
|
if ( arguments.length ) { |
507
|
|
|
val = this.options.values[ index ]; |
508
|
|
|
val = this._trimAlignValue( val ); |
509
|
|
|
|
510
|
|
|
return val; |
511
|
|
|
} else if ( this._hasMultipleValues() ) { |
512
|
|
|
|
513
|
|
|
// .slice() creates a copy of the array |
514
|
|
|
// this copy gets trimmed by min and max and then returned |
515
|
|
|
vals = this.options.values.slice(); |
516
|
|
|
for ( i = 0; i < vals.length; i += 1 ) { |
517
|
|
|
vals[ i ] = this._trimAlignValue( vals[ i ] ); |
518
|
|
|
} |
519
|
|
|
|
520
|
|
|
return vals; |
521
|
|
|
} else { |
522
|
|
|
return []; |
523
|
|
|
} |
524
|
|
|
}, |
525
|
|
|
|
526
|
|
|
// Returns the step-aligned value that val is closest to, between (inclusive) min and max |
527
|
|
|
_trimAlignValue: function( val ) { |
528
|
|
|
if ( val <= this._valueMin() ) { |
529
|
|
|
return this._valueMin(); |
530
|
|
|
} |
531
|
|
|
if ( val >= this._valueMax() ) { |
532
|
|
|
return this._valueMax(); |
533
|
|
|
} |
534
|
|
|
var step = ( this.options.step > 0 ) ? this.options.step : 1, |
535
|
|
|
valModStep = ( val - this._valueMin() ) % step, |
536
|
|
|
alignValue = val - valModStep; |
537
|
|
|
|
538
|
|
|
if ( Math.abs( valModStep ) * 2 >= step ) { |
539
|
|
|
alignValue += ( valModStep > 0 ) ? step : ( -step ); |
540
|
|
|
} |
541
|
|
|
|
542
|
|
|
// Since JavaScript has problems with large floats, round |
543
|
|
|
// the final value to 5 digits after the decimal point (see #4124) |
544
|
|
|
return parseFloat( alignValue.toFixed( 5 ) ); |
545
|
|
|
}, |
546
|
|
|
|
547
|
|
|
_calculateNewMax: function() { |
548
|
|
|
var max = this.options.max, |
549
|
|
|
min = this._valueMin(), |
550
|
|
|
step = this.options.step, |
551
|
|
|
aboveMin = Math.round( ( max - min ) / step ) * step; |
552
|
|
|
max = aboveMin + min; |
553
|
|
|
if ( max > this.options.max ) { |
554
|
|
|
|
555
|
|
|
//If max is not divisible by step, rounding off may increase its value |
556
|
|
|
max -= step; |
557
|
|
|
} |
558
|
|
|
this.max = parseFloat( max.toFixed( this._precision() ) ); |
559
|
|
|
}, |
560
|
|
|
|
561
|
|
|
_precision: function() { |
562
|
|
|
var precision = this._precisionOf( this.options.step ); |
563
|
|
|
if ( this.options.min !== null ) { |
564
|
|
|
precision = Math.max( precision, this._precisionOf( this.options.min ) ); |
565
|
|
|
} |
566
|
|
|
return precision; |
567
|
|
|
}, |
568
|
|
|
|
569
|
|
|
_precisionOf: function( num ) { |
570
|
|
|
var str = num.toString(), |
571
|
|
|
decimal = str.indexOf( "." ); |
572
|
|
|
return decimal === -1 ? 0 : str.length - decimal - 1; |
573
|
|
|
}, |
574
|
|
|
|
575
|
|
|
_valueMin: function() { |
576
|
|
|
return this.options.min; |
577
|
|
|
}, |
578
|
|
|
|
579
|
|
|
_valueMax: function() { |
580
|
|
|
return this.max; |
581
|
|
|
}, |
582
|
|
|
|
583
|
|
|
_refreshRange: function( orientation ) { |
584
|
|
|
if ( orientation === "vertical" ) { |
585
|
|
|
this.range.css( { "width": "", "left": "" } ); |
586
|
|
|
} |
587
|
|
|
if ( orientation === "horizontal" ) { |
588
|
|
|
this.range.css( { "height": "", "bottom": "" } ); |
589
|
|
|
} |
590
|
|
|
}, |
591
|
|
|
|
592
|
|
|
_refreshValue: function() { |
593
|
|
|
var lastValPercent, valPercent, value, valueMin, valueMax, |
594
|
|
|
oRange = this.options.range, |
595
|
|
|
o = this.options, |
596
|
|
|
that = this, |
597
|
|
|
animate = ( !this._animateOff ) ? o.animate : false, |
598
|
|
|
_set = {}; |
599
|
|
|
|
600
|
|
|
if ( this._hasMultipleValues() ) { |
601
|
|
|
this.handles.each( function( i ) { |
602
|
|
|
valPercent = ( that.values( i ) - that._valueMin() ) / ( that._valueMax() - |
603
|
|
|
that._valueMin() ) * 100; |
604
|
|
|
_set[ that.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; |
605
|
|
|
$( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate ); |
606
|
|
|
if ( that.options.range === true ) { |
607
|
|
|
if ( that.orientation === "horizontal" ) { |
608
|
|
|
if ( i === 0 ) { |
609
|
|
|
that.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { |
610
|
|
|
left: valPercent + "%" |
611
|
|
|
}, o.animate ); |
612
|
|
|
} |
613
|
|
|
if ( i === 1 ) { |
614
|
|
|
that.range[ animate ? "animate" : "css" ]( { |
615
|
|
|
width: ( valPercent - lastValPercent ) + "%" |
616
|
|
|
}, { |
617
|
|
|
queue: false, |
618
|
|
|
duration: o.animate |
619
|
|
|
} ); |
620
|
|
|
} |
621
|
|
|
} else { |
622
|
|
|
if ( i === 0 ) { |
623
|
|
|
that.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { |
624
|
|
|
bottom: ( valPercent ) + "%" |
625
|
|
|
}, o.animate ); |
626
|
|
|
} |
627
|
|
|
if ( i === 1 ) { |
628
|
|
|
that.range[ animate ? "animate" : "css" ]( { |
629
|
|
|
height: ( valPercent - lastValPercent ) + "%" |
630
|
|
|
}, { |
631
|
|
|
queue: false, |
632
|
|
|
duration: o.animate |
633
|
|
|
} ); |
634
|
|
|
} |
635
|
|
|
} |
636
|
|
|
} |
637
|
|
|
lastValPercent = valPercent; |
638
|
|
|
} ); |
639
|
|
|
} else { |
640
|
|
|
value = this.value(); |
641
|
|
|
valueMin = this._valueMin(); |
642
|
|
|
valueMax = this._valueMax(); |
643
|
|
|
valPercent = ( valueMax !== valueMin ) ? |
644
|
|
|
( value - valueMin ) / ( valueMax - valueMin ) * 100 : |
645
|
|
|
0; |
646
|
|
|
_set[ this.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; |
647
|
|
|
this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate ); |
648
|
|
|
|
649
|
|
|
if ( oRange === "min" && this.orientation === "horizontal" ) { |
650
|
|
|
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { |
651
|
|
|
width: valPercent + "%" |
652
|
|
|
}, o.animate ); |
653
|
|
|
} |
654
|
|
|
if ( oRange === "max" && this.orientation === "horizontal" ) { |
655
|
|
|
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { |
656
|
|
|
width: ( 100 - valPercent ) + "%" |
657
|
|
|
}, o.animate ); |
658
|
|
|
} |
659
|
|
|
if ( oRange === "min" && this.orientation === "vertical" ) { |
660
|
|
|
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { |
661
|
|
|
height: valPercent + "%" |
662
|
|
|
}, o.animate ); |
663
|
|
|
} |
664
|
|
|
if ( oRange === "max" && this.orientation === "vertical" ) { |
665
|
|
|
this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { |
666
|
|
|
height: ( 100 - valPercent ) + "%" |
667
|
|
|
}, o.animate ); |
668
|
|
|
} |
669
|
|
|
} |
670
|
|
|
}, |
671
|
|
|
|
672
|
|
|
_handleEvents: { |
673
|
|
|
keydown: function( event ) { |
674
|
|
|
var allowed, curVal, newVal, step, |
675
|
|
|
index = $( event.target ).data( "ui-slider-handle-index" ); |
676
|
|
|
|
677
|
|
|
switch ( event.keyCode ) { |
|
|
|
|
678
|
|
|
case $.ui.keyCode.HOME: |
679
|
|
|
case $.ui.keyCode.END: |
680
|
|
|
case $.ui.keyCode.PAGE_UP: |
681
|
|
|
case $.ui.keyCode.PAGE_DOWN: |
682
|
|
|
case $.ui.keyCode.UP: |
683
|
|
|
case $.ui.keyCode.RIGHT: |
684
|
|
|
case $.ui.keyCode.DOWN: |
685
|
|
|
case $.ui.keyCode.LEFT: |
686
|
|
|
event.preventDefault(); |
687
|
|
|
if ( !this._keySliding ) { |
688
|
|
|
this._keySliding = true; |
689
|
|
|
this._addClass( $( event.target ), null, "ui-state-active" ); |
690
|
|
|
allowed = this._start( event, index ); |
691
|
|
|
if ( allowed === false ) { |
692
|
|
|
return; |
693
|
|
|
} |
694
|
|
|
} |
695
|
|
|
break; |
696
|
|
|
} |
697
|
|
|
|
698
|
|
|
step = this.options.step; |
699
|
|
|
if ( this._hasMultipleValues() ) { |
700
|
|
|
curVal = newVal = this.values( index ); |
701
|
|
|
} else { |
702
|
|
|
curVal = newVal = this.value(); |
703
|
|
|
} |
704
|
|
|
|
705
|
|
|
switch ( event.keyCode ) { |
|
|
|
|
706
|
|
|
case $.ui.keyCode.HOME: |
707
|
|
|
newVal = this._valueMin(); |
708
|
|
|
break; |
709
|
|
|
case $.ui.keyCode.END: |
710
|
|
|
newVal = this._valueMax(); |
711
|
|
|
break; |
712
|
|
|
case $.ui.keyCode.PAGE_UP: |
713
|
|
|
newVal = this._trimAlignValue( |
714
|
|
|
curVal + ( ( this._valueMax() - this._valueMin() ) / this.numPages ) |
715
|
|
|
); |
716
|
|
|
break; |
717
|
|
|
case $.ui.keyCode.PAGE_DOWN: |
718
|
|
|
newVal = this._trimAlignValue( |
719
|
|
|
curVal - ( ( this._valueMax() - this._valueMin() ) / this.numPages ) ); |
720
|
|
|
break; |
721
|
|
|
case $.ui.keyCode.UP: |
722
|
|
|
case $.ui.keyCode.RIGHT: |
723
|
|
|
if ( curVal === this._valueMax() ) { |
724
|
|
|
return; |
725
|
|
|
} |
726
|
|
|
newVal = this._trimAlignValue( curVal + step ); |
727
|
|
|
break; |
728
|
|
|
case $.ui.keyCode.DOWN: |
729
|
|
|
case $.ui.keyCode.LEFT: |
730
|
|
|
if ( curVal === this._valueMin() ) { |
731
|
|
|
return; |
732
|
|
|
} |
733
|
|
|
newVal = this._trimAlignValue( curVal - step ); |
734
|
|
|
break; |
735
|
|
|
} |
736
|
|
|
|
737
|
|
|
this._slide( event, index, newVal ); |
738
|
|
|
}, |
739
|
|
|
keyup: function( event ) { |
740
|
|
|
var index = $( event.target ).data( "ui-slider-handle-index" ); |
741
|
|
|
|
742
|
|
|
if ( this._keySliding ) { |
743
|
|
|
this._keySliding = false; |
744
|
|
|
this._stop( event, index ); |
745
|
|
|
this._change( event, index ); |
746
|
|
|
this._removeClass( $( event.target ), null, "ui-state-active" ); |
747
|
|
|
} |
748
|
|
|
} |
749
|
|
|
} |
750
|
|
|
} ); |
751
|
|
|
|
752
|
|
|
} ) ); |
753
|
|
|
|