Skip to content

I
i20rzslider
Commit 851c8b0d authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

feat(stepsArray): Handle Date in stepsArray 

close #424
parent 51532fe8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 13 deletions
demo/debug.html 0 → 100644
View file @ 851c8b0d
<!DOCTYPE html>
<html ng-app="rzSliderDemo">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Touch Slider</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="./lib/bootstrap.min.css">
<link rel="stylesheet" href="../dist/rzslider.css"/>
<link rel="stylesheet" href="demo.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="MainCtrl">
<div class="wrapper">
<article>
<h2>Slider with date values</h2>
<rzslider
rz-slider-model="slider_dates.value"
rz-slider-options="slider_dates.options"
></rzslider>
</article>
</div>
</body>
<script src="../node_modules/angular/angular.js"></script>
<script src="./lib/ui-bootstrap-tpls.js"></script>
<script src="../dist/rzslider.js"></script>
<script src="demo.js"></script>
</html>
demo/demo.js
View file @ 851c8b0d
......@@ -368,6 +368,22 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
var dates = [];
for (var i = 1; i <= 31; i++) {
dates.push(new Date(2016, 7, i));
}
$scope.slider_dates = {
value: new Date(2016, 7, 10),
options: {
stepsArray: dates,
translate: function(date) {
if (date != null)
return date.toDateString();
return '';
}
}
};
//Slider with draggable range
$scope.slider_draggable_range = {
minValue: 1,
......
demo/index.html
View file @ 851c8b0d
......@@ -256,6 +256,14 @@
></rzslider>
</article>
<article>
<h2>Slider with date values</h2>
<rzslider
rz-slider-model="slider_dates.value"
rz-slider-options="slider_dates.options"
></rzslider>
</article>
<article>
<h2>Slider with draggable range</h2>
<rzslider
......
dist/rzslider.js
View file @ 851c8b0d
......@@ -434,9 +434,17 @@
index = i;
break;
}
else if (angular.isObject(step) && step.value === modelValue) {
index = i;
break;
else if (angular.isDate(step)) {
if (step.getTime() === modelValue.getTime()) {
index = i;
break;
}
}
else if (angular.isObject(step)) {
if (angular.isDate(step.value) && step.value.getTime() === modelValue.getTime() || step.value === modelValue) {
index = i;
break;
}
}
}
return index;
......@@ -466,6 +474,8 @@
getStepValue: function(sliderValue) {
var step = this.options.stepsArray[sliderValue];
if (angular.isDate(step))
return step;
if (angular.isObject(step))
return step.value;
return step;
......@@ -1448,7 +1458,7 @@
val = this.sanitizeValue(val);
var percent = fn(val, this.minValue, this.maxValue) || 0;
if(this.options.rightToLeft)
if (this.options.rightToLeft)
percent = 1 - percent;
return percent * this.maxPos;
},
......@@ -1474,7 +1484,7 @@
*/
positionToValue: function(position) {
var percent = position / this.maxPos;
if(this.options.rightToLeft)
if (this.options.rightToLeft)
percent = 1 - percent;
var fn = this.linearPositionToValue;
if (this.options.customPositionToValue)
......@@ -1526,7 +1536,7 @@
eventPos = -this.getEventXY(event) + sliderPos;
else
eventPos = this.getEventXY(event) - sliderPos;
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
},
/**
......
dist/rzslider.min.js
View file @ 851c8b0d
This diff is collapsed.
src/rzslider.js
View file @ 851c8b0d
......@@ -438,9 +438,17 @@
index = i;
break;
}
else if (angular.isObject(step) && step.value === modelValue) {
index = i;
break;
else if (angular.isDate(step)) {
if (step.getTime() === modelValue.getTime()) {
index = i;
break;
}
}
else if (angular.isObject(step)) {
if (angular.isDate(step.value) && step.value.getTime() === modelValue.getTime() || step.value === modelValue) {
index = i;
break;
}
}
}
return index;
......@@ -470,6 +478,8 @@
getStepValue: function(sliderValue) {
var step = this.options.stepsArray[sliderValue];
if (angular.isDate(step))
return step;
if (angular.isObject(step))
return step.value;
return step;
......@@ -1452,7 +1462,7 @@
val = this.sanitizeValue(val);
var percent = fn(val, this.minValue, this.maxValue) || 0;
if(this.options.rightToLeft)
if (this.options.rightToLeft)
percent = 1 - percent;
return percent * this.maxPos;
},
......@@ -1478,7 +1488,7 @@
*/
positionToValue: function(position) {
var percent = position / this.maxPos;
if(this.options.rightToLeft)
if (this.options.rightToLeft)
percent = 1 - percent;
var fn = this.linearPositionToValue;
if (this.options.customPositionToValue)
......@@ -1530,7 +1540,7 @@
eventPos = -this.getEventXY(event) + sliderPos;
else
eventPos = this.getEventXY(event) - sliderPos;
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
},
/**
......
tests/specs/options-handling-test.js
View file @ 851c8b0d
......@@ -216,6 +216,50 @@
expect(helper.element[0].querySelectorAll('.rz-tick-legend')).to.have.length(2);
});
it('should set correct step/floor/ceil when stepsArray is used with Date using same instances', function() {
var dates = [];
for (var i = 1; i <= 7; i++) {
dates.push(new Date(2016, 7, i));
}
helper.scope.slider.value = dates[3];
helper.scope.slider.options.stepsArray = dates;
helper.scope.$digest();
expect(helper.slider.options.step).to.equal(1);
expect(helper.slider.options.floor).to.equal(0);
expect(helper.slider.options.ceil).to.equal(6);
expect(helper.slider.lowValue).to.equal(3);
});
it('should set correct step/floor/ceil when stepsArray is used with Date using different instances', function() {
var dates = [];
for (var i = 1; i <= 7; i++) {
dates.push(new Date(2016, 7, i));
}
helper.scope.slider.value = new Date(2016, 7, 4);
helper.scope.slider.options.stepsArray = dates;
helper.scope.$digest();
expect(helper.slider.options.step).to.equal(1);
expect(helper.slider.options.floor).to.equal(0);
expect(helper.slider.options.ceil).to.equal(6);
expect(helper.slider.lowValue).to.equal(3);
});
it('should set correct step/floor/ceil when stepsArray is used with Object with Date values using different instances', function() {
var dates = [];
for (var i = 1; i <= 7; i++) {
dates.push(new Date(2016, 7, i));
}
helper.scope.slider.value = new Date(2016, 7, 4);
helper.scope.slider.options.stepsArray = dates.map(function(val) {
return {value: val};
});
helper.scope.$digest();
expect(helper.slider.options.step).to.equal(1);
expect(helper.slider.options.floor).to.equal(0);
expect(helper.slider.options.ceil).to.equal(6);
expect(helper.slider.lowValue).to.equal(3);
});
it('should allow a custom translate function when stepsArray is used', function() {
helper.scope.slider.options.stepsArray = [
{value: 'A', 'foo': 'barA'},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment