Replace jslider with jRange
This commit is contained in:
Stefan Parviainen
297
library/jRange/jquery.range.js
Normal file
297
library/jRange/jquery.range.js
Normal file
@@ -0,0 +1,297 @@
|
||||
/*jshint multistr:true, curly: false */
|
||||
/*global jQuery:false, define: false */
|
||||
/**
|
||||
* jRange - Awesome range control
|
||||
*
|
||||
* Written by
|
||||
* ----------
|
||||
* Nitin Hayaran (nitinhayaran@gmail.com)
|
||||
*
|
||||
* Licensed under the MIT (MIT-LICENSE.txt).
|
||||
*
|
||||
* @author Nitin Hayaran
|
||||
* @version 0.1-RELEASE
|
||||
*
|
||||
* Dependencies
|
||||
* ------------
|
||||
* jQuery (http://jquery.com)
|
||||
*
|
||||
**/
|
||||
;
|
||||
(function($, window, document, undefined) {
|
||||
'use strict';
|
||||
|
||||
var jRange = function(){
|
||||
return this.init.apply(this, arguments);
|
||||
};
|
||||
jRange.prototype = {
|
||||
defaults : {
|
||||
onstatechange : function(){},
|
||||
isRange : false,
|
||||
showLabels : true,
|
||||
showScale : true,
|
||||
step : 1,
|
||||
format: '%s',
|
||||
theme : 'theme-green',
|
||||
width : 300
|
||||
},
|
||||
template : '<div class="slider-container">\
|
||||
<div class="back-bar">\
|
||||
<div class="selected-bar"></div>\
|
||||
<div class="pointer low"></div><div class="pointer-label">123456</div>\
|
||||
<div class="pointer high"></div><div class="pointer-label">456789</div>\
|
||||
<div class="clickable-dummy"></div>\
|
||||
</div>\
|
||||
<div class="scale"></div>\
|
||||
</div>',
|
||||
init : function(node, options){
|
||||
this.options = $.extend({}, this.defaults, options);
|
||||
this.inputNode = $(node);
|
||||
this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from+','+this.options.from : this.options.from);
|
||||
this.domNode = $(this.template);
|
||||
this.domNode.addClass(this.options.theme);
|
||||
this.inputNode.after(this.domNode);
|
||||
this.domNode.on('change', this.onChange);
|
||||
this.pointers = $('.pointer', this.domNode);
|
||||
this.lowPointer = this.pointers.first();
|
||||
this.highPointer = this.pointers.last();
|
||||
this.labels = $('.pointer-label', this.domNode);
|
||||
this.lowLabel = this.labels.first();
|
||||
this.highLabel = this.labels.last();
|
||||
this.scale = $('.scale', this.domNode);
|
||||
this.bar = $('.selected-bar', this.domNode);
|
||||
this.clickableBar = this.domNode.find('.clickable-dummy');
|
||||
this.interval = this.options.to - this.options.from;
|
||||
this.render();
|
||||
},
|
||||
render: function(){
|
||||
// Check if inputNode is visible, and have some width, so that we can set slider width accordingly.
|
||||
if( this.inputNode.width() === 0 && !this.options.width ){
|
||||
console.log('jRange : no width found, returning');
|
||||
return;
|
||||
}else{
|
||||
this.domNode.width( this.options.width || this.inputNode.width() );
|
||||
this.inputNode.hide();
|
||||
}
|
||||
|
||||
if(this.isSingle()){
|
||||
this.lowPointer.hide();
|
||||
this.lowLabel.hide();
|
||||
}
|
||||
if(!this.options.showLabels){
|
||||
this.labels.hide();
|
||||
}
|
||||
this.attachEvents();
|
||||
if(this.options.showScale){
|
||||
this.renderScale();
|
||||
}
|
||||
this.setValue(this.options.value);
|
||||
},
|
||||
isSingle: function(){
|
||||
if(typeof(this.options.value) === 'number'){
|
||||
return true;
|
||||
}
|
||||
return (this.options.value.indexOf(',') !== -1 || this.options.isRange) ?
|
||||
false : true;
|
||||
},
|
||||
attachEvents: function(){
|
||||
this.clickableBar.click($.proxy(this.barClicked, this));
|
||||
this.pointers.mousedown($.proxy(this.onDragStart, this));
|
||||
this.pointers.bind('dragstart', function(event) { event.preventDefault(); });
|
||||
},
|
||||
onDragStart: function(e){
|
||||
if(e.which !== 1){return;}
|
||||
e.stopPropagation(); e.preventDefault();
|
||||
var pointer = $(e.target);
|
||||
pointer.addClass('focused');
|
||||
this[(pointer.hasClass('low')?'low':'high') + 'Label'].addClass('focused');
|
||||
$(document).on('mousemove.slider', $.proxy(this.onDrag, this, pointer));
|
||||
$(document).on('mouseup.slider', $.proxy(this.onDragEnd, this));
|
||||
},
|
||||
onDrag: function(pointer, e){
|
||||
e.stopPropagation(); e.preventDefault();
|
||||
var position = e.clientX - this.domNode.offset().left;
|
||||
this.domNode.trigger('change', [this, pointer, position]);
|
||||
},
|
||||
onDragEnd: function(){
|
||||
this.pointers.removeClass('focused');
|
||||
this.labels.removeClass('focused');
|
||||
$(document).off('.slider');
|
||||
$(document).off('.slider');
|
||||
},
|
||||
barClicked: function(e){
|
||||
var x = e.pageX - this.clickableBar.offset().left;
|
||||
if(this.isSingle())
|
||||
this.setPosition(this.pointers.last(), x, true, true);
|
||||
else{
|
||||
var pointer = Math.abs(parseInt(this.pointers.first().css('left'), 10) - x + this.pointers.first().width() / 2) < Math.abs(parseInt(this.pointers.last().css('left'), 10) - x + this.pointers.first().width() / 2) ?
|
||||
this.pointers.first() : this.pointers.last();
|
||||
this.setPosition(pointer, x, true, true);
|
||||
}
|
||||
},
|
||||
onChange: function(e, self, pointer, position){
|
||||
var min, max;
|
||||
if(self.isSingle()){
|
||||
min = 0;
|
||||
max = self.domNode.width();
|
||||
}else{
|
||||
min = pointer.hasClass('high')? self.lowPointer.position().left + self.lowPointer.width() / 2 : 0;
|
||||
max = pointer.hasClass('low') ? self.highPointer.position().left + self.highPointer.width() / 2 : self.domNode.width();
|
||||
}
|
||||
var value = Math.min(Math.max(position, min), max);
|
||||
self.setPosition(pointer, value, true);
|
||||
},
|
||||
setPosition: function(pointer, position, isPx, animate){
|
||||
var leftPos,
|
||||
lowPos = this.lowPointer.position().left,
|
||||
highPos = this.highPointer.position().left,
|
||||
circleWidth = this.highPointer.width() / 2;
|
||||
if(!isPx){
|
||||
position = this.prcToPx(position);
|
||||
}
|
||||
if(pointer[0] === this.highPointer[0]){
|
||||
highPos = Math.round(position - circleWidth);
|
||||
}else{
|
||||
lowPos = Math.round(position - circleWidth);
|
||||
}
|
||||
pointer[animate?'animate':'css']({'left': Math.round(position - circleWidth)});
|
||||
if(this.isSingle()){
|
||||
leftPos = 0;
|
||||
}else{
|
||||
leftPos = lowPos + circleWidth;
|
||||
}
|
||||
this.bar[animate?'animate':'css']({
|
||||
'width' : Math.round(highPos + circleWidth - leftPos),
|
||||
'left' : leftPos
|
||||
});
|
||||
this.showPointerValue(pointer, position, animate);
|
||||
},
|
||||
// will be called from outside
|
||||
setValue: function(value){
|
||||
var values = value.toString().split(',');
|
||||
this.options.value = value;
|
||||
var prc = this.valuesToPrc( values.length === 2 ? values : [0, values[0]] );
|
||||
if(this.isSingle()){
|
||||
this.setPosition(this.highPointer, prc[1]);
|
||||
}else{
|
||||
this.setPosition(this.lowPointer, prc[0]);
|
||||
this.setPosition(this.highPointer, prc[1]);
|
||||
}
|
||||
},
|
||||
renderScale: function(){
|
||||
var s = this.options.scale || [this.options.from, this.options.to];
|
||||
var prc = Math.round((100 / (s.length - 1)) * 10) / 10;
|
||||
var str = '';
|
||||
for(var i = 0; i < s.length ; i++ ){
|
||||
str += '<span style="left: ' + i * prc + '%">' + (s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '') + '</span>';
|
||||
}
|
||||
this.scale.html(str);
|
||||
|
||||
$('ins', this.scale).each(function () {
|
||||
$(this).css({
|
||||
marginLeft: -$(this).outerWidth() / 2
|
||||
});
|
||||
});
|
||||
},
|
||||
getBarWidth: function(){
|
||||
var values = this.options.value.split(',');
|
||||
if(values.length > 1){
|
||||
return parseInt(values[1], 10) - parseInt(values[0], 10);
|
||||
}else{
|
||||
return parseInt(values[0], 10);
|
||||
}
|
||||
},
|
||||
showPointerValue: function(pointer, position, animate){
|
||||
var label = $('.pointer-label', this.domNode)[pointer.hasClass('low')?'first':'last']();
|
||||
var text;
|
||||
var value = this.positionToValue(position);
|
||||
if($.isFunction(this.options.format)){
|
||||
var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low':'high');
|
||||
text = this.options.format(value, type);
|
||||
}else{
|
||||
text = this.options.format.replace('%s', value);
|
||||
}
|
||||
|
||||
var width = label.html(text).width(),
|
||||
left = position - width / 2;
|
||||
left = Math.min(Math.max(left, 0), this.options.width - width);
|
||||
label[animate?'animate':'css']({left: left});
|
||||
this.setInputValue(pointer, value);
|
||||
},
|
||||
valuesToPrc: function(values){
|
||||
var lowPrc = ( ( values[0] - this.options.from ) * 100 / this.interval ),
|
||||
highPrc = ( ( values[1] - this.options.from ) * 100 / this.interval );
|
||||
return [lowPrc, highPrc];
|
||||
},
|
||||
prcToPx: function(prc){
|
||||
return (this.domNode.width() * prc) / 100;
|
||||
},
|
||||
positionToValue: function(pos){
|
||||
var value = (pos / this.domNode.width()) * this.interval;
|
||||
value = value + this.options.from;
|
||||
return Math.round(value / this.options.step) * this.options.step;
|
||||
},
|
||||
setInputValue: function(pointer, v){
|
||||
// if(!isChanged) return;
|
||||
if(this.isSingle()){
|
||||
this.options.value = v.toString();
|
||||
}else{
|
||||
var values = this.options.value.split(',');
|
||||
if(pointer.hasClass('low')){
|
||||
this.options.value = v + ',' + values[1];
|
||||
}else{
|
||||
this.options.value = values[0] + ',' + v;
|
||||
}
|
||||
}
|
||||
if( this.inputNode.val() !== this.options.value ){
|
||||
this.inputNode.val(this.options.value);
|
||||
this.options.onstatechange.call(this, this.options.value);
|
||||
}
|
||||
},
|
||||
getValue: function(){
|
||||
return this.options.value;
|
||||
}
|
||||
};
|
||||
|
||||
/*$.jRange = function (node, options) {
|
||||
var jNode = $(node);
|
||||
if(!jNode.data('jrange')){
|
||||
jNode.data('jrange', new jRange(node, options));
|
||||
}
|
||||
return jNode.data('jrange');
|
||||
};
|
||||
|
||||
$.fn.jRange = function (options) {
|
||||
return this.each(function(){
|
||||
$.jRange(this, options);
|
||||
});
|
||||
};*/
|
||||
|
||||
var pluginName = 'jRange';
|
||||
// A really lightweight plugin wrapper around the constructor,
|
||||
// preventing against multiple instantiations
|
||||
$.fn[pluginName] = function(option) {
|
||||
var args = arguments,
|
||||
result;
|
||||
|
||||
this.each(function() {
|
||||
var $this = $(this),
|
||||
data = $.data(this, 'plugin_' + pluginName),
|
||||
options = typeof option === 'object' && option;
|
||||
if (!data) {
|
||||
$this.data('plugin_' + pluginName, (data = new jRange(this, options)));
|
||||
}
|
||||
// if first argument is a string, call silimarly named function
|
||||
// this gives flexibility to call functions of the plugin e.g.
|
||||
// - $('.dial').plugin('destroy');
|
||||
// - $('.dial').plugin('render', $('.new-child'));
|
||||
if (typeof option === 'string') {
|
||||
result = data[option].apply(data, Array.prototype.slice.call(args, 1));
|
||||
}
|
||||
});
|
||||
|
||||
// To enable plugin returns values
|
||||
return result || this;
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
Reference in New Issue
Block a user