2 (function ($, window
, document
, undefined) {
5 Foundation
.libs
.slider
= {
18 trigger_input_change
: false,
19 on_change: function () {
25 init: function (scope
, method
, options
) {
26 Foundation
.inherit(this, 'throttle');
27 this.bindings(method
, options
);
36 .on('mousedown.fndtn.slider touchstart.fndtn.slider pointerdown.fndtn.slider',
37 '[' + self
.attr_name() + ']:not(.disabled, [disabled]) .range-slider-handle', function (e
) {
38 if (!self
.cache
.active
) {
40 self
.set_active_slider($(e
.target
));
43 .on('mousemove.fndtn.slider touchmove.fndtn.slider pointermove.fndtn.slider', function (e
) {
44 if (!!self
.cache
.active
) {
46 if ($.data(self
.cache
.active
[0], 'settings').vertical
) {
47 var scroll_offset
= 0;
49 scroll_offset
= window
.scrollY
;
51 self
.calculate_position(self
.cache
.active
, self
.get_cursor_position(e
, 'y') + scroll_offset
);
53 self
.calculate_position(self
.cache
.active
, self
.get_cursor_position(e
, 'x'));
57 .on('mouseup.fndtn.slider touchend.fndtn.slider pointerup.fndtn.slider', function (e
) {
58 self
.remove_active_slider();
60 .on('change.fndtn.slider', function (e
) {
61 self
.settings
.on_change();
65 .on('resize.fndtn.slider', self
.throttle(function (e
) {
70 get_cursor_position: function (e
, xy
) {
71 var pageXY
= 'page' + xy
.toUpperCase(),
72 clientXY
= 'client' + xy
.toUpperCase(),
75 if (typeof e
[pageXY
] !== 'undefined') {
78 else if (typeof e
.originalEvent
[clientXY
] !== 'undefined') {
79 position
= e
.originalEvent
[clientXY
];
81 else if (e
.originalEvent
.touches
&& e
.originalEvent
.touches
[0] && typeof e
.originalEvent
.touches
[0][clientXY
] !== 'undefined') {
82 position
= e
.originalEvent
.touches
[0][clientXY
];
84 else if (e
.currentPoint
&& typeof e
.currentPoint
[xy
] !== 'undefined') {
85 position
= e
.currentPoint
[xy
];
90 set_active_slider: function ($handle
) {
91 this.cache
.active
= $handle
;
94 remove_active_slider: function () {
95 this.cache
.active
= null;
98 calculate_position: function ($handle
, cursor_x
) {
100 settings
= $.data($handle
[0], 'settings'),
101 handle_l
= $.data($handle
[0], 'handle_l'),
102 handle_o
= $.data($handle
[0], 'handle_o'),
103 bar_l
= $.data($handle
[0], 'bar_l'),
104 bar_o
= $.data($handle
[0], 'bar_o');
106 requestAnimationFrame(function () {
109 if (Foundation
.rtl
&& !settings
.vertical
) {
110 pct
= self
.limit_to(((bar_o
+ bar_l
- cursor_x
) / bar_l
), 0, 1);
112 pct
= self
.limit_to(((cursor_x
- bar_o
) / bar_l
), 0, 1);
115 pct
= settings
.vertical
? 1 - pct
: pct
;
117 var norm
= self
.normalized_value(pct
, settings
.start
, settings
.end
, settings
.step
, settings
.precision
);
119 self
.set_ui($handle
, norm
);
123 set_ui: function ($handle
, value
) {
124 var settings
= $.data($handle
[0], 'settings'),
125 handle_l
= $.data($handle
[0], 'handle_l'),
126 bar_l
= $.data($handle
[0], 'bar_l'),
127 norm_pct
= this.normalized_percentage(value
, settings
.start
, settings
.end
),
128 handle_offset
= norm_pct
* (bar_l
- handle_l
) - 1,
129 progress_bar_length
= norm_pct
* 100,
130 $handle_parent
= $handle
.parent(),
131 $hidden_inputs
= $handle
.parent().children('input[type=hidden]');
133 if (Foundation
.rtl
&& !settings
.vertical
) {
134 handle_offset
= -handle_offset
;
137 handle_offset
= settings
.vertical
? -handle_offset
+ bar_l
- handle_l
+ 1 : handle_offset
;
138 this.set_translate($handle
, handle_offset
, settings
.vertical
);
140 if (settings
.vertical
) {
141 $handle
.siblings('.range-slider-active-segment').css('height', progress_bar_length
+ '%');
143 $handle
.siblings('.range-slider-active-segment').css('width', progress_bar_length
+ '%');
146 $handle_parent
.attr(this.attr_name(), value
).trigger('change').trigger('change.fndtn.slider');
148 $hidden_inputs
.val(value
);
149 if (settings
.trigger_input_change
) {
150 $hidden_inputs
.trigger('change');
153 if (!$handle
[0].hasAttribute('aria-valuemin')) {
155 'aria-valuemin': settings
.start
,
156 'aria-valuemax': settings
.end
159 $handle
.attr('aria-valuenow', value
);
161 if (settings
.display_selector
!= '') {
162 $(settings
.display_selector
).each(function () {
163 if (this.hasOwnProperty('value')) {
173 normalized_percentage: function (val
, start
, end
) {
174 return Math
.min(1, (val
- start
) / (end
- start
));
177 normalized_value: function (val
, start
, end
, step
, precision
) {
178 var range
= end
- start
,
180 mod
= (point
- (point
% step
)) / step
,
182 round
= ( rem
>= step
* 0.5 ? step
: 0);
183 return ((mod
* step
+ round
) + start
).toFixed(precision
);
186 set_translate: function (ele
, offset
, vertical
) {
189 .css('-webkit-transform', 'translateY(' + offset
+ 'px)')
190 .css('-moz-transform', 'translateY(' + offset
+ 'px)')
191 .css('-ms-transform', 'translateY(' + offset
+ 'px)')
192 .css('-o-transform', 'translateY(' + offset
+ 'px)')
193 .css('transform', 'translateY(' + offset
+ 'px)');
196 .css('-webkit-transform', 'translateX(' + offset
+ 'px)')
197 .css('-moz-transform', 'translateX(' + offset
+ 'px)')
198 .css('-ms-transform', 'translateX(' + offset
+ 'px)')
199 .css('-o-transform', 'translateX(' + offset
+ 'px)')
200 .css('transform', 'translateX(' + offset
+ 'px)');
204 limit_to: function (val
, min
, max
) {
205 return Math
.min(Math
.max(val
, min
), max
);
209 initialize_settings: function (handle
) {
210 var settings
= $.extend({}, this.settings
, this.data_options($(handle
).parent())),
211 decimal_places_match_result
;
213 if (settings
.precision
=== null) {
214 decimal_places_match_result
= ('' + settings
.step
).match(/\.([\d]*)/);
215 settings
.precision
= decimal_places_match_result
&& decimal_places_match_result
[1] ? decimal_places_match_result
[1].length
: 0;
218 if (settings
.vertical
) {
219 $.data(handle
, 'bar_o', $(handle
).parent().offset().top
);
220 $.data(handle
, 'bar_l', $(handle
).parent().outerHeight());
221 $.data(handle
, 'handle_o', $(handle
).offset().top
);
222 $.data(handle
, 'handle_l', $(handle
).outerHeight());
224 $.data(handle
, 'bar_o', $(handle
).parent().offset().left
);
225 $.data(handle
, 'bar_l', $(handle
).parent().outerWidth());
226 $.data(handle
, 'handle_o', $(handle
).offset().left
);
227 $.data(handle
, 'handle_l', $(handle
).outerWidth());
230 $.data(handle
, 'bar', $(handle
).parent());
231 $.data(handle
, 'settings', settings
);
234 set_initial_position: function ($ele
) {
235 var settings
= $.data($ele
.children('.range-slider-handle')[0], 'settings'),
236 initial
= ((typeof settings
.initial
== 'number' && !isNaN(settings
.initial
)) ? settings
.initial
: Math
.floor((settings
.end
- settings
.start
) * 0.5 / settings
.step
) * settings
.step
+ settings
.start
),
237 $handle
= $ele
.children('.range-slider-handle');
238 this.set_ui($handle
, initial
);
241 set_value: function (value
) {
243 $('[' + self
.attr_name() + ']', this.scope
).each(function () {
244 $(this).attr(self
.attr_name(), value
);
246 if (!!$(this.scope
).attr(self
.attr_name())) {
247 $(this.scope
).attr(self
.attr_name(), value
);
252 reflow: function () {
254 self
.S('[' + this.attr_name() + ']').each(function () {
255 var handle
= $(this).children('.range-slider-handle')[0],
256 val
= $(this).attr(self
.attr_name());
257 self
.initialize_settings(handle
);
260 self
.set_ui($(handle
), parseFloat(val
));
262 self
.set_initial_position($(this));
268 }(jQuery
, window
, window
.document
));