You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

201 lines
6.3 KiB
JavaScript

;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.slider = {
name : 'slider',
version : '5.2.2',
settings: {
start: 0,
end: 100,
step: 1,
initial: null,
display_selector: '',
on_change: function(){}
},
cache : {},
init : function (scope, method, options) {
Foundation.inherit(this,'throttle');
this.bindings(method, options);
this.reflow();
},
events : function() {
var self = this;
$(this.scope)
.off('.slider')
.on('mousedown.fndtn.slider touchstart.fndtn.slider pointerdown.fndtn.slider',
'[' + self.attr_name() + '] .range-slider-handle', function(e) {
if (!self.cache.active) {
e.preventDefault();
self.set_active_slider($(e.target));
}
})
.on('mousemove.fndtn.slider touchmove.fndtn.slider pointermove.fndtn.slider', function(e) {
if (!!self.cache.active) {
e.preventDefault();
self.calculate_position(self.cache.active, e.pageX || e.originalEvent.clientX || e.originalEvent.touches[0].clientX || e.currentPoint.x);
}
})
.on('mouseup.fndtn.slider touchend.fndtn.slider pointerup.fndtn.slider', function(e) {
self.remove_active_slider();
})
.on('change.fndtn.slider', function(e) {
self.settings.on_change();
});
self.S(window)
.on('resize.fndtn.slider', self.throttle(function(e) {
self.reflow();
}, 300));
},
set_active_slider : function($handle) {
this.cache.active = $handle;
},
remove_active_slider : function() {
this.cache.active = null;
},
calculate_position : function($handle, cursor_x) {
var self = this,
settings = $.extend({}, self.settings, self.data_options($handle.parent())),
handle_w = $.data($handle[0], 'handle_w'),
handle_o = $.data($handle[0], 'handle_o'),
bar_w = $.data($handle[0], 'bar_w'),
bar_o = $.data($handle[0], 'bar_o');
requestAnimationFrame(function(){
var pct;
if (Foundation.rtl) {
pct = self.limit_to(((bar_o+bar_w-cursor_x)/bar_w),0,1);
} else {
pct = self.limit_to(((cursor_x-bar_o)/bar_w),0,1);
}
var norm = self.normalized_value(pct, settings.start, settings.end, settings.step);
self.set_ui($handle, norm);
});
},
set_ui : function($handle, value) {
var settings = $.extend({}, this.settings, this.data_options($handle.parent())),
handle_w = $.data($handle[0], 'handle_w'),
bar_w = $.data($handle[0], 'bar_w'),
norm_pct = this.normalized_percentage(value, settings.start, settings.end),
handle_offset = norm_pct*(bar_w-handle_w)-1,
progress_bar_width = norm_pct*100;
if (Foundation.rtl) {
handle_offset = -handle_offset;
}
this.set_translate($handle, handle_offset);
$handle.siblings('.range-slider-active-segment').css('width', progress_bar_width+'%');
$handle.parent().attr(this.attr_name(), value);
$handle.parent().trigger('change');
$handle.parent().children('input[type=hidden]').val(value);
if (settings.input_id != '') {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty('value')) {
$(this).val(value);
} else {
$(this).text(value);
}
});
}
},
normalized_percentage : function(val, start, end) {
return (val - start)/(end - start);
},
normalized_value : function(val, start, end, step) {
var range = end - start,
step = step,
point = val*range,
mod = (point-(point%step)) / step,
rem = point % step,
round = ( rem >= step*0.5 ? step : 0);
return (mod*step + round) + start;
},
set_translate : function(ele, offset, vertical) {
if (vertical) {
$(ele)
.css('-webkit-transform', 'translateY('+offset+'px)')
.css('-moz-transform', 'translateY('+offset+'px)')
.css('-ms-transform', 'translateY('+offset+'px)')
.css('-o-transform', 'translateY('+offset+'px)')
.css('transform', 'translateY('+offset+'px)');
} else {
$(ele)
.css('-webkit-transform', 'translateX('+offset+'px)')
.css('-moz-transform', 'translateX('+offset+'px)')
.css('-ms-transform', 'translateX('+offset+'px)')
.css('-o-transform', 'translateX('+offset+'px)')
.css('transform', 'translateX('+offset+'px)');
}
},
limit_to : function(val, min, max) {
return Math.min(Math.max(val, min), max);
},
initialize_settings : function(handle) {
$.data(handle, 'bar', $(handle).parent());
$.data(handle, 'bar_o', $(handle).parent().offset().left);
$.data(handle, 'bar_w', $(handle).parent().outerWidth());
$.data(handle, 'handle_o', $(handle).offset().left);
$.data(handle, 'handle_w', $(handle).outerWidth());
$.data(handle, 'settings', $.extend({}, this.settings, this.data_options($(handle).parent())));
},
set_initial_position : function($ele) {
var settings = $.data($ele.children('.range-slider-handle')[0], 'settings'),
initial = (!!settings.initial ? settings.initial : Math.floor((settings.end-settings.start)*0.5/settings.step)*settings.step+settings.start),
$handle = $ele.children('.range-slider-handle');
this.set_ui($handle, initial);
},
set_value : function(value) {
var self = this;
$('[' + self.attr_name() + ']', this.scope).each(function(){
$(this).attr(self.attr_name(), value);
});
if (!!$(this.scope).attr(self.attr_name())) {
$(this.scope).attr(self.attr_name(), value);
}
self.reflow();
},
reflow : function() {
var self = this;
self.S('[' + this.attr_name() + ']').each(function() {
var handle = $(this).children('.range-slider-handle')[0],
val = $(this).attr(self.attr_name());
self.initialize_settings(handle);
if (val) {
self.set_ui($(handle), parseFloat(val));
} else {
self.set_initial_position($(this));
}
});
}
};
}(jQuery, this, this.document));