Skip to content

Commit 851c8b0

Browse files
ValentinHValentinH
committed
feat(stepsArray): Handle Date in stepsArray
close angular-slider#424
1 parent 51532fe commit 851c8b0

File tree

7 files changed

+135
-13
lines changed

7 files changed

+135
-13
lines changed

‎demo/debug.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html ng-app="rzSliderDemo">
3+
4+
<head>
5+
<meta charset="utf-8"/>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>AngularJS Touch Slider</title>
8+
<!-- Latest compiled and minified CSS -->
9+
<link rel="stylesheet" href="./lib/bootstrap.min.css">
10+
<link rel="stylesheet" href="../dist/rzslider.css"/>
11+
<link rel="stylesheet" href="demo.css"/>
12+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
13+
</head>
14+
15+
<body ng-controller="MainCtrl">
16+
17+
<div class="wrapper">
18+
19+
<article>
20+
<h2>Slider with date values</h2>
21+
<rzslider
22+
rz-slider-model="slider_dates.value"
23+
rz-slider-options="slider_dates.options"
24+
></rzslider>
25+
</article>
26+
27+
</div>
28+
29+
</body>
30+
<script src="../node_modules/angular/angular.js"></script>
31+
<script src="./lib/ui-bootstrap-tpls.js"></script>
32+
<script src="../dist/rzslider.js"></script>
33+
<script src="demo.js"></script>
34+
</html>

‎demo/demo.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,22 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
368368
}
369369
};
370370

371+
var dates = [];
372+
for (var i = 1; i <= 31; i++) {
373+
dates.push(new Date(2016, 7, i));
374+
}
375+
$scope.slider_dates = {
376+
value: new Date(2016, 7, 10),
377+
options: {
378+
stepsArray: dates,
379+
translate: function(date) {
380+
if (date != null)
381+
return date.toDateString();
382+
return '';
383+
}
384+
}
385+
};
386+
371387
//Slider with draggable range
372388
$scope.slider_draggable_range = {
373389
minValue: 1,

‎demo/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,14 @@ <h2>Slider with dynamic tick color</h2>
256256
></rzslider>
257257
</article>
258258

259+
<article>
260+
<h2>Slider with date values</h2>
261+
<rzslider
262+
rz-slider-model="slider_dates.value"
263+
rz-slider-options="slider_dates.options"
264+
></rzslider>
265+
</article>
266+
259267
<article>
260268
<h2>Slider with draggable range</h2>
261269
<rzslider

‎dist/rzslider.js‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -434,9 +434,17 @@
434434
index = i;
435435
break;
436436
}
437-
else if (angular.isObject(step) && step.value === modelValue) {
438-
index = i;
439-
break;
437+
else if (angular.isDate(step)) {
438+
if (step.getTime() === modelValue.getTime()) {
439+
index = i;
440+
break;
441+
}
442+
}
443+
else if (angular.isObject(step)) {
444+
if (angular.isDate(step.value) && step.value.getTime() === modelValue.getTime() || step.value === modelValue) {
445+
index = i;
446+
break;
447+
}
440448
}
441449
}
442450
return index;
@@ -466,6 +474,8 @@
466474

467475
getStepValue: function(sliderValue) {
468476
var step = this.options.stepsArray[sliderValue];
477+
if (angular.isDate(step))
478+
return step;
469479
if (angular.isObject(step))
470480
return step.value;
471481
return step;
@@ -1448,7 +1458,7 @@
14481458

14491459
val = this.sanitizeValue(val);
14501460
var percent = fn(val, this.minValue, this.maxValue) || 0;
1451-
if(this.options.rightToLeft)
1461+
if (this.options.rightToLeft)
14521462
percent = 1 - percent;
14531463
return percent * this.maxPos;
14541464
},
@@ -1474,7 +1484,7 @@
14741484
*/
14751485
positionToValue: function(position) {
14761486
var percent = position / this.maxPos;
1477-
if(this.options.rightToLeft)
1487+
if (this.options.rightToLeft)
14781488
percent = 1 - percent;
14791489
var fn = this.linearPositionToValue;
14801490
if (this.options.customPositionToValue)
@@ -1526,7 +1536,7 @@
15261536
eventPos = -this.getEventXY(event) + sliderPos;
15271537
else
15281538
eventPos = this.getEventXY(event) - sliderPos;
1529-
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
1539+
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
15301540
},
15311541

15321542
/**

‎dist/rzslider.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/rzslider.js‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -438,9 +438,17 @@
438438
index = i;
439439
break;
440440
}
441-
else if (angular.isObject(step) && step.value === modelValue) {
442-
index = i;
443-
break;
441+
else if (angular.isDate(step)) {
442+
if (step.getTime() === modelValue.getTime()) {
443+
index = i;
444+
break;
445+
}
446+
}
447+
else if (angular.isObject(step)) {
448+
if (angular.isDate(step.value) && step.value.getTime() === modelValue.getTime() || step.value === modelValue) {
449+
index = i;
450+
break;
451+
}
444452
}
445453
}
446454
return index;
@@ -470,6 +478,8 @@
470478

471479
getStepValue: function(sliderValue) {
472480
var step = this.options.stepsArray[sliderValue];
481+
if (angular.isDate(step))
482+
return step;
473483
if (angular.isObject(step))
474484
return step.value;
475485
return step;
@@ -1452,7 +1462,7 @@
14521462

14531463
val = this.sanitizeValue(val);
14541464
var percent = fn(val, this.minValue, this.maxValue) || 0;
1455-
if(this.options.rightToLeft)
1465+
if (this.options.rightToLeft)
14561466
percent = 1 - percent;
14571467
return percent * this.maxPos;
14581468
},
@@ -1478,7 +1488,7 @@
14781488
*/
14791489
positionToValue: function(position) {
14801490
var percent = position / this.maxPos;
1481-
if(this.options.rightToLeft)
1491+
if (this.options.rightToLeft)
14821492
percent = 1 - percent;
14831493
var fn = this.linearPositionToValue;
14841494
if (this.options.customPositionToValue)
@@ -1530,7 +1540,7 @@
15301540
eventPos = -this.getEventXY(event) + sliderPos;
15311541
else
15321542
eventPos = this.getEventXY(event) - sliderPos;
1533-
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
1543+
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
15341544
},
15351545

15361546
/**

‎tests/specs/options-handling-test.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,50 @@
216216
expect(helper.element[0].querySelectorAll('.rz-tick-legend')).to.have.length(2);
217217
});
218218

219+
it('should set correct step/floor/ceil when stepsArray is used with Date using same instances', function() {
220+
var dates = [];
221+
for (var i = 1; i <= 7; i++) {
222+
dates.push(new Date(2016, 7, i));
223+
}
224+
helper.scope.slider.value = dates[3];
225+
helper.scope.slider.options.stepsArray = dates;
226+
helper.scope.$digest();
227+
expect(helper.slider.options.step).to.equal(1);
228+
expect(helper.slider.options.floor).to.equal(0);
229+
expect(helper.slider.options.ceil).to.equal(6);
230+
expect(helper.slider.lowValue).to.equal(3);
231+
});
232+
233+
it('should set correct step/floor/ceil when stepsArray is used with Date using different instances', function() {
234+
var dates = [];
235+
for (var i = 1; i <= 7; i++) {
236+
dates.push(new Date(2016, 7, i));
237+
}
238+
helper.scope.slider.value = new Date(2016, 7, 4);
239+
helper.scope.slider.options.stepsArray = dates;
240+
helper.scope.$digest();
241+
expect(helper.slider.options.step).to.equal(1);
242+
expect(helper.slider.options.floor).to.equal(0);
243+
expect(helper.slider.options.ceil).to.equal(6);
244+
expect(helper.slider.lowValue).to.equal(3);
245+
});
246+
247+
it('should set correct step/floor/ceil when stepsArray is used with Object with Date values using different instances', function() {
248+
var dates = [];
249+
for (var i = 1; i <= 7; i++) {
250+
dates.push(new Date(2016, 7, i));
251+
}
252+
helper.scope.slider.value = new Date(2016, 7, 4);
253+
helper.scope.slider.options.stepsArray = dates.map(function(val) {
254+
return {value: val};
255+
});
256+
helper.scope.$digest();
257+
expect(helper.slider.options.step).to.equal(1);
258+
expect(helper.slider.options.floor).to.equal(0);
259+
expect(helper.slider.options.ceil).to.equal(6);
260+
expect(helper.slider.lowValue).to.equal(3);
261+
});
262+
219263
it('should allow a custom translate function when stepsArray is used', function() {
220264
helper.scope.slider.options.stepsArray = [
221265
{value: 'A', 'foo': 'barA'},

0 commit comments

Comments
 (0)