Skip to content
This repository has been archived by the owner on May 30, 2024. It is now read-only.

Commit

Permalink
Merge pull request #170 from andreruffert/release/v2.0.0
Browse files Browse the repository at this point in the history 
Release: v2.0.0
  • Loading branch information
@andreruffert
andreruffert committed Sep 10, 2015
2 parents 508a1c5 + 71557b6 commit 084f38e
Show file tree
Hide file tree
Showing 8 changed files with 356 additions and 147 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rangeslider.js",
"version": "1.3.3",
"version": "2.0.0",
"homepage": "https://github.com/andreruffert/rangeslider.js",
"authors": [
"André Ruffert <[email protected]>"
Expand Down
35 changes: 29 additions & 6 deletions dist/rangeslider.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
.rangeslider,
.rangeslider__fill {
background: #e6e6e6;
display: block;
height: 20px;
width: 100%;
-moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
Expand All @@ -13,9 +10,21 @@
}

.rangeslider {
background: #e6e6e6;
position: relative;
}

.rangeslider--horizontal {
height: 20px;
width: 100%;
}

.rangeslider--vertical {
width: 20px;
min-height: 150px;
max-height: 100%;
}

.rangeslider--disabled {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 0.4;
Expand All @@ -24,7 +33,14 @@
.rangeslider__fill {
background: #00ff00;
position: absolute;
}
.rangeslider--horizontal .rangeslider__fill {
top: 0;
height: 100%;
}
.rangeslider--vertical .rangeslider__fill {
bottom: 0;
width: 100%;
}

.rangeslider__handle {
Expand All @@ -35,9 +51,6 @@
width: 40px;
height: 40px;
position: absolute;
top: -10px;
touch-action: pan-y;
-ms-touch-action: pan-y;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
Expand Down Expand Up @@ -80,6 +93,16 @@
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
}
.rangeslider--horizontal .rangeslider__handle {
top: -10px;
touch-action: pan-y;
-ms-touch-action: pan-y;
}
.rangeslider--vertical .rangeslider__handle {
left: -10px;
touch-action: pan-x;
-ms-touch-action: pan-x;
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
-moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
Expand Down
161 changes: 109 additions & 52 deletions dist/rangeslider.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! rangeslider.js - v1.3.3 | (c) 2015 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
/*! rangeslider.js - v2.0.0 | (c) 2015 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
(function(factory) {
'use strict';

Expand Down Expand Up @@ -34,16 +34,35 @@

var pluginName = 'rangeslider',
pluginIdentifier = 0,
inputrange = supportsRange(),
hasInputRangeSupport = supportsRange(),
defaults = {
polyfill: true,
orientation: 'horizontal',
rangeClass: 'rangeslider',
disabledClass: 'rangeslider--disabled',
horizontalClass: 'rangeslider--horizontal',
verticalClass: 'rangeslider--vertical',
fillClass: 'rangeslider__fill',
handleClass: 'rangeslider__handle',
startEvent: ['mousedown', 'touchstart', 'pointerdown'],
moveEvent: ['mousemove', 'touchmove', 'pointermove'],
endEvent: ['mouseup', 'touchend', 'pointerup']
},
constants = {
orientation: {
horizontal: {
dimension: 'width',
direction: 'left',
directionStyle: 'left',
coordinate: 'x'
},
vertical: {
dimension: 'height',
direction: 'top',
directionStyle: 'bottom',
coordinate: 'y'
}
}
};

/**
Expand Down Expand Up @@ -176,25 +195,56 @@
return Number.isNaN(value) ? defaultValue : value;
}

/**
* Capitalize the first letter of string
*
* @param {String} str
* @return {String}
*/
function ucfirst(str) {
return str.charAt(0).toUpperCase() + str.substr(1);
}

/**
* Get cross-browser scroll position.
* https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX
*
* @param {String} coordinate x|y
* @param {String} direction top|left
* @return {Number}
*/
function getScrollOffset(coordinate, direction) {
coordinate = ucfirst(coordinate);
if (window['page' + coordinate + 'Offset'] !== undefined) {
return window['page' + coordinate + 'Offset'];
}
return (document.documentElement || document.body.parentNode || document.body)['scroll' + ucfirst(direction)];
}

/**
* Plugin
* @param {String} element
* @param {Object} options
*/
function Plugin(element, options) {
this.$window = $(window);
this.$document = $(document);
this.$element = $(element);
this.options = $.extend( {}, defaults, options );
this.polyfill = this.options.polyfill;
this.onInit = this.options.onInit;
this.onSlide = this.options.onSlide;
this.onSlideEnd = this.options.onSlideEnd;
this.$window = $(window);
this.$document = $(document);
this.$element = $(element);
this.options = $.extend( {}, defaults, options );
this.polyfill = this.options.polyfill;
this.orientation = this.$element[0].getAttribute('data-orientation') || this.options.orientation;
this.onInit = this.options.onInit;
this.onSlide = this.options.onSlide;
this.onSlideEnd = this.options.onSlideEnd;
this.DIMENSION = constants.orientation[this.orientation].dimension;
this.DIRECTION = constants.orientation[this.orientation].direction;
this.DIRECTION_STYLE = constants.orientation[this.orientation].directionStyle;
this.COORDINATE = constants.orientation[this.orientation].coordinate;

// Plugin should only be used as a polyfill
if (this.polyfill) {
// Input range support?
if (inputrange) { return false; }
if (hasInputRangeSupport) { return false; }
}

this.identifier = 'js-' + pluginName + '-' +(pluginIdentifier++);
Expand All @@ -204,7 +254,7 @@
this.toFixed = (this.step + '').replace('.', '').length - 1;
this.$fill = $('<div class="' + this.options.fillClass + '" />');
this.$handle = $('<div class="' + this.options.handleClass + '" />');
this.$range = $('<div class="' + this.options.rangeClass + '" id="' + this.identifier + '" />').insertAfter(this.$element).prepend(this.$fill, this.$handle);
this.$range = $('<div class="' + this.options.rangeClass + ' ' + this.options[this.orientation + 'Class'] + '" id="' + this.identifier + '" />').insertAfter(this.$element).prepend(this.$fill, this.$handle);

// visually hide the input
this.$element.css({
Expand Down Expand Up @@ -244,7 +294,7 @@
}

Plugin.prototype.init = function() {
this.update(true);
this.update(true, false);

// Set initial value just in case it is not set already.
// Prevents trouble if we call `update(true)`
Expand All @@ -255,7 +305,7 @@
}
};

Plugin.prototype.update = function(updateAttributes) {
Plugin.prototype.update = function(updateAttributes, triggerSlide) {
updateAttributes = updateAttributes || false;

if (updateAttributes) {
Expand All @@ -265,11 +315,11 @@
this.step = tryParseFloat(this.$element[0].getAttribute('step'), 1);
}

this.handleWidth = getDimension(this.$handle[0], 'offsetWidth');
this.rangeWidth = getDimension(this.$range[0], 'offsetWidth');
this.maxHandleX = this.rangeWidth - this.handleWidth;
this.grabX = this.handleWidth / 2;
this.position = this.getPositionFromValue(this.value);
this.handleDimension = getDimension(this.$handle[0], 'offset' + ucfirst(this.DIMENSION));
this.rangeDimension = getDimension(this.$range[0], 'offset' + ucfirst(this.DIMENSION));
this.maxHandlePos = this.rangeDimension - this.handleDimension;
this.grabPos = this.handleDimension / 2;
this.position = this.getPositionFromValue(this.value);

// Consider disabled state
if (this.$element[0].disabled) {
Expand All @@ -278,7 +328,7 @@
this.$range.removeClass(this.options.disabledClass);
}

this.setPosition(this.position, false);
this.setPosition(this.position, triggerSlide);
};

Plugin.prototype.handleDown = function(e) {
Expand All @@ -291,21 +341,23 @@
return;
}

var posX = this.getRelativePosition(e),
rangeX = this.$range[0].getBoundingClientRect().left,
handleX = this.getPositionFromNode(this.$handle[0]) - rangeX;
var pos = this.getRelativePosition(e),
rangePos = this.$range[0].getBoundingClientRect()[this.DIRECTION],
handlePos = this.getPositionFromNode(this.$handle[0]) - rangePos,
setPos = (this.orientation === 'vertical') ? (this.maxHandlePos - (pos - this.grabPos)) : (pos - this.grabPos);

this.setPosition(posX - this.grabX);
this.setPosition(setPos);

if (posX >= handleX && posX < handleX + this.handleWidth) {
this.grabX = posX - handleX;
if (pos >= handlePos && pos < handlePos + this.handleDimension) {
this.grabPos = pos - handlePos;
}
};

Plugin.prototype.handleMove = function(e) {
e.preventDefault();
var posX = this.getRelativePosition(e);
this.setPosition(posX - this.grabX);
var pos = this.getRelativePosition(e);
var setPos = (this.orientation === 'vertical') ? (this.maxHandlePos - (pos - this.grabPos)) : (pos - this.grabPos);
this.setPosition(setPos);
};

Plugin.prototype.handleEnd = function(e) {
Expand All @@ -327,24 +379,28 @@
return pos;
};

Plugin.prototype.setPosition = function(pos, callCb) {
var value, left;
Plugin.prototype.setPosition = function(pos, triggerSlide) {
var value, newPos;

if (triggerSlide === undefined) {
triggerSlide = true;
}

// Snapping steps
value = this.getValueFromPosition(this.cap(pos, 0, this.maxHandleX));
left = this.getPositionFromValue(value);
value = this.getValueFromPosition(this.cap(pos, 0, this.maxHandlePos));
newPos = this.getPositionFromValue(value);

// Update ui
this.$fill[0].style.width = (left + this.grabX) + 'px';
this.$handle[0].style.left = left + 'px';
this.$fill[0].style[this.DIMENSION] = (newPos + this.grabPos) + 'px';
this.$handle[0].style[this.DIRECTION_STYLE] = newPos + 'px';
this.setValue(value);

// Update globals
this.position = left;
this.position = newPos;
this.value = value;

if (this.onSlide && typeof this.onSlide === 'function' && typeof callCb === 'undefined') {
this.onSlide(left, value);
if (triggerSlide && this.onSlide && typeof this.onSlide === 'function') {
this.onSlide(newPos, value);
}
};

Expand All @@ -359,36 +415,37 @@
};

Plugin.prototype.getRelativePosition = function(e) {
// Get the offset left relative to the viewport
var rangeX = this.$range[0].getBoundingClientRect().left,
pageX = 0;
// Get the offset DIRECTION relative to the viewport and scroll position
var ucCoordinate = ucfirst(this.COORDINATE),
rangePos = this.$range[0].getBoundingClientRect()[this.DIRECTION] + getScrollOffset(this.COORDINATE, this.DIRECTION),
pageCoordinate = 0;

if (typeof e.pageX !== 'undefined') {
pageX = e.pageX;
if (typeof e['page' + ucCoordinate] !== 'undefined') {
pageCoordinate = e['page' + ucCoordinate];
}
else if (typeof e.originalEvent.clientX !== 'undefined') {
pageX = e.originalEvent.clientX;
else if (typeof e.originalEvent['client' + ucCoordinate] !== 'undefined') {
pageCoordinate = e.originalEvent['client' + ucCoordinate];
}
else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0].clientX !== 'undefined') {
pageX = e.originalEvent.touches[0].clientX;
else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0]['client' + ucCoordinate] !== 'undefined') {
pageCoordinate = e.originalEvent.touches[0]['client' + ucCoordinate];
}
else if(e.currentPoint && typeof e.currentPoint.x !== 'undefined') {
pageX = e.currentPoint.x;
else if(e.currentPoint && typeof e.currentPoint[this.COORDINATE] !== 'undefined') {
pageCoordinate = e.currentPoint[this.COORDINATE];
}

return pageX - rangeX;
return pageCoordinate - rangePos;
};

Plugin.prototype.getPositionFromValue = function(value) {
var percentage, pos;
percentage = (value - this.min)/(this.max - this.min);
pos = percentage * this.maxHandleX;
percentage = value && (value - this.min)/(this.max - this.min);
pos = percentage * this.maxHandlePos;
return pos;
};

Plugin.prototype.getValueFromPosition = function(pos) {
var percentage, value;
percentage = ((pos) / (this.maxHandleX || 1));
percentage = ((pos) / (this.maxHandlePos || 1));
value = this.step * Math.round(percentage * (this.max - this.min) / this.step) + this.min;
return Number((value).toFixed(this.toFixed));
};
Expand Down
Loading

0 comments on commit 084f38e

Please sign in to comment.