402 lines
13 KiB
JavaScript
402 lines
13 KiB
JavaScript
/*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() {},
|
|
ondragend: function() {},
|
|
onbarclicked: function() {},
|
|
isRange: false,
|
|
showLabels: true,
|
|
showScale: true,
|
|
step: 1,
|
|
format: '%s',
|
|
theme: 'theme-green',
|
|
width: 300,
|
|
disable: false,
|
|
snap: false
|
|
},
|
|
template: '<div class="slider-container">\
|
|
<div class="back-bar">\
|
|
<div class="selected-bar"></div>\
|
|
<div class="pointer low"></div><div class="pointer-label low">123456</div>\
|
|
<div class="pointer high"></div><div class="pointer-label high">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.options.width = this.options.width || this.inputNode.width();
|
|
this.domNode.width(this.options.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.on('mousedown touchstart', $.proxy(this.onDragStart, this));
|
|
this.pointers.bind('dragstart', function(event) {
|
|
event.preventDefault();
|
|
});
|
|
},
|
|
onDragStart: function(e) {
|
|
if ( this.options.disable || (e.type === 'mousedown' && e.which !== 1)) {
|
|
return;
|
|
}
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
var pointer = $(e.target);
|
|
this.pointers.removeClass('last-active');
|
|
pointer.addClass('focused last-active');
|
|
this[(pointer.hasClass('low') ? 'low' : 'high') + 'Label'].addClass('focused');
|
|
$(document).on('mousemove.slider touchmove.slider', $.proxy(this.onDrag, this, pointer));
|
|
$(document).on('mouseup.slider touchend.slider touchcancel.slider', $.proxy(this.onDragEnd, this));
|
|
},
|
|