Skip to content

I
i20rzslider
Commit 76f1ef54 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

feat(ticks): Accept numbers for showTicks/showTicksValues 

Thanks to this feature, you can display ticks at intermediate positions without setting a fixed step
parent 80ae07c6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 34 deletions
demo/demo.js
View file @ 76f1ef54
......@@ -237,6 +237,26 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with ticks at intermediate positions
$scope.slider_ticks_at = {
value: 500,
options: {
ceil: 1000,
floor: 0,
showTicks: 100
}
};
//Slider with ticks and values at intermediate positions
$scope.slider_ticks_values_at = {
value: 500,
options: {
ceil: 1000,
floor: 0,
showTicksValues: 100
}
};
//Slider with draggable range
$scope.slider_draggable_range = {
minValue: 1,
......
demo/index.html
View file @ 76f1ef54
......@@ -181,6 +181,22 @@
></rzslider>
</article>
<article>
<h2>Slider with ticks at intermediate positions</h2>
<rzslider
rz-slider-model="slider_ticks_at.value"
rz-slider-options="slider_ticks_at.options"
></rzslider>
</article>
<article>
<h2>Slider with ticks and values at intermediate positions</h2>
<rzslider
rz-slider-model="slider_ticks_values_at.value"
rz-slider-options="slider_ticks_values_at.options"
></rzslider>
</article>
<article>
<h2>Slider with draggable range</h2>
<rzslider
......
dist/rzslider.css
View file @ 76f1ef54
......@@ -159,6 +159,11 @@ rzslider .rz-ticks .rz-tick .rz-tick-value {
transform: translate(-50%, 0);
}
rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
top: initial;
bottom: -40px;
}
rzslider.rz-vertical {
position: relative;
width: 4px;
......@@ -224,7 +229,13 @@ rzslider.rz-vertical .rz-ticks .rz-tick {
}
rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value {
top: auto;
top: initial;
left: 22px;
transform: translate(0, -28%);
}
rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value {
right: 12px;
bottom: initial;
left: initial;
}
\ No newline at end of file
dist/rzslider.js
View file @ 76f1ef54
/*! angularjs-slider - v2.11.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-04-01 */
2016-04-22 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
......@@ -247,6 +247,14 @@
*/
this.valueRange = 0;
/**
* If showTicks/showTicksValues options are number.
* In this case, ticks values should be displayed below the slider.
* @type {boolean}
*/
this.intermediateTicks = false;
/**
* Set to true if init method already executed
*
......@@ -416,6 +424,8 @@
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template
if(angular.isNumber(this.options.showTicks))
this.intermediateTicks = true;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
|| this.options.showSelectionBarFromValue !== null;
......@@ -530,11 +540,14 @@
else
this.maxH.css('display', '');
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.minLab, this.options.showTicksValues || this.options.hidePointerLabels);
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
var hideLabelsForTicks = this.options.showTicksValues && !this.intermediateTicks;
this.alwaysHide(this.minLab, hideLabelsForTicks || this.options.hidePointerLabels);
this.alwaysHide(this.maxLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.cmbLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (this.options.vertical)
......@@ -544,6 +557,9 @@
this.selBar.addClass('rz-draggable');
else
this.selBar.removeClass('rz-draggable');
if(this.intermediateTicks && this.options.showTicksValues)
this.ticks.addClass('rz-ticks-values-under');
},
alwaysHide: function(el, hide) {
......@@ -751,12 +767,13 @@
*/
updateTicksScale: function() {
if (!this.options.showTicks) return;
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
var step = this.step;
if(this.intermediateTicks)
step = this.options.showTicks;
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step);
var value = this.roundStep(this.minValue + i * step);
var tick = {
selected: this.isTickSelected(value)
};
......@@ -1077,6 +1094,7 @@
/**
* Return the translated value if a translate function is provided else the original value
* @param value
* @param which if it's min or max handle
* @returns {*}
*/
getDisplayValue: function(value, which) {
......@@ -1087,11 +1105,13 @@
* Round value to step and precision based on minValue
*
* @param {number} value
* @param {number} customStep a custom step to override the defined step
* @returns {number}
*/
roundStep: function(value) {
var steppedDifference = parseFloat((value - this.minValue) / this.step).toPrecision(12);
steppedDifference = Math.round(steppedDifference) * this.step;
roundStep: function(value, customStep) {
var step = customStep ? customStep : this.step,
steppedDifference = parseFloat((value - this.minValue) / step).toPrecision(12);
steppedDifference = Math.round(+steppedDifference) * step;
var newValue = (this.minValue + steppedDifference).toFixed(this.precision);
return +newValue;
},
......@@ -1334,7 +1354,7 @@
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
this.ticks.on('mousedown', angular.bind(this, this.onTickClick, this.ticks));
}
}
......@@ -1354,7 +1374,7 @@
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
this.ticks.on('touchstart', angular.bind(this, this.onTickClick, this.ticks));
}
}
......@@ -1423,9 +1443,10 @@
*
* @param {jqLite} pointer
* @param {Event} event The event
* @param {boolean} fromTick if the event occured on a tick or not
* @returns {undefined}
*/
onMove: function(pointer, event) {
onMove: function(pointer, event, fromTick) {
var newOffset = this.getEventPosition(event),
newValue,
ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
......@@ -1437,7 +1458,10 @@
newValue = ceilValue;
} else {
newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue);
if(fromTick && angular.isNumber(this.options.showTicks))
newValue = this.roundStep(newValue, this.options.showTicks);
else
newValue = this.roundStep(newValue);
}
this.positionTrackingHandle(newValue);
},
......@@ -1464,6 +1488,10 @@
this.callOnEnd();
},
onTickClick: function(pointer, event) {
this.onMove(pointer, event, true);
},
onPointerFocus: function(pointer, ref) {
this.tracking = ref;
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
......
dist/rzslider.min.css
View file @ 76f1ef54
/*! angularjs-slider - v2.11.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-04-01 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:auto;left:22px;transform:translate(0,-28%)}
\ No newline at end of file
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-40px}rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:22px;transform:translate(0,-28%)}rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:12px;bottom:initial;left:initial}
\ No newline at end of file
dist/rzslider.min.js
View file @ 76f1ef54
This diff is collapsed.
src/rzslider.js
View file @ 76f1ef54
......@@ -251,6 +251,14 @@
*/
this.valueRange = 0;
/**
* If showTicks/showTicksValues options are number.
* In this case, ticks values should be displayed below the slider.
* @type {boolean}
*/
this.intermediateTicks = false;
/**
* Set to true if init method already executed
*
......@@ -420,6 +428,8 @@
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template
if(angular.isNumber(this.options.showTicks))
this.intermediateTicks = true;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
|| this.options.showSelectionBarFromValue !== null;
......@@ -534,11 +544,14 @@
else
this.maxH.css('display', '');
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.minLab, this.options.showTicksValues || this.options.hidePointerLabels);
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
var hideLabelsForTicks = this.options.showTicksValues && !this.intermediateTicks;
this.alwaysHide(this.minLab, hideLabelsForTicks || this.options.hidePointerLabels);
this.alwaysHide(this.maxLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.cmbLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (this.options.vertical)
......@@ -548,6 +561,9 @@
this.selBar.addClass('rz-draggable');
else
this.selBar.removeClass('rz-draggable');
if(this.intermediateTicks && this.options.showTicksValues)
this.ticks.addClass('rz-ticks-values-under');
},
alwaysHide: function(el, hide) {
......@@ -755,12 +771,13 @@
*/
updateTicksScale: function() {
if (!this.options.showTicks) return;
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
var step = this.step;
if(this.intermediateTicks)
step = this.options.showTicks;
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step);
var value = this.roundStep(this.minValue + i * step);
var tick = {
selected: this.isTickSelected(value)
};
......@@ -1081,6 +1098,7 @@
/**
* Return the translated value if a translate function is provided else the original value
* @param value
* @param which if it's min or max handle
* @returns {*}
*/
getDisplayValue: function(value, which) {
......@@ -1091,11 +1109,13 @@
* Round value to step and precision based on minValue
*
* @param {number} value
* @param {number} customStep a custom step to override the defined step
* @returns {number}
*/
roundStep: function(value) {
var steppedDifference = parseFloat((value - this.minValue) / this.step).toPrecision(12);
steppedDifference = Math.round(steppedDifference) * this.step;
roundStep: function(value, customStep) {
var step = customStep ? customStep : this.step,
steppedDifference = parseFloat((value - this.minValue) / step).toPrecision(12);
steppedDifference = Math.round(+steppedDifference) * step;
var newValue = (this.minValue + steppedDifference).toFixed(this.precision);
return +newValue;
},
......@@ -1338,7 +1358,7 @@
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
this.ticks.on('mousedown', angular.bind(this, this.onTickClick, this.ticks));
}
}
......@@ -1358,7 +1378,7 @@
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
this.ticks.on('touchstart', angular.bind(this, this.onTickClick, this.ticks));
}
}
......@@ -1427,9 +1447,10 @@
*
* @param {jqLite} pointer
* @param {Event} event The event
* @param {boolean} fromTick if the event occured on a tick or not
* @returns {undefined}
*/
onMove: function(pointer, event) {
onMove: function(pointer, event, fromTick) {
var newOffset = this.getEventPosition(event),
newValue,
ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
......@@ -1441,7 +1462,10 @@
newValue = ceilValue;
} else {
newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue);
if(fromTick && angular.isNumber(this.options.showTicks))
newValue = this.roundStep(newValue, this.options.showTicks);
else
newValue = this.roundStep(newValue);
}
this.positionTrackingHandle(newValue);
},
......@@ -1468,6 +1492,10 @@
this.callOnEnd();
},
onTickClick: function(pointer, event) {
this.onMove(pointer, event, true);
},
onPointerFocus: function(pointer, ref) {
this.tracking = ref;
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
......
src/rzslider.less
View file @ 76f1ef54
......@@ -149,6 +149,13 @@ rzslider {
transform: translate(-50%, 0);
}
}
&.rz-ticks-values-under {
.rz-tick-value {
top: initial;
bottom: @ticksValuePosition - 10;
}
}
}
&.rz-vertical {
......@@ -212,10 +219,18 @@ rzslider {
vertical-align: middle;
.rz-tick-value {
left: @ticksValuePositionOnVertical;
top: auto;
top: initial;
transform: translate(0, -28%);
}
}
&.rz-ticks-values-under {
.rz-tick-value {
bottom: initial;
left: initial;
right: @ticksValuePositionOnVertical - 10;
}
}
}
}
}
tests/specs/mouse-controls/single-slider-horizontal-test.js
View file @ 76f1ef54
......@@ -183,6 +183,26 @@
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on ticks when showTicks is an integer and move minH', function () {
helper.scope.slider.options.step = 1;
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousedown(helper.slider.ticks, offset);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
});
describe('Right to left Mouse controls - Single Horizontal', function() {
......@@ -368,6 +388,25 @@
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on ticks when showTicks is an integer and move minH', function() {
helper.scope.slider.options.step = 1;
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousedown(helper.slider.ticks, offset);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
});
}());
tests/specs/mouse-controls/single-slider-vertical-test.js
View file @ 76f1ef54
......@@ -186,6 +186,26 @@
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on ticks when showTicks is an integer and move minH', function() {
helper.scope.slider.options.step = 1;
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
helper.fireMousedown(helper.slider.ticks, offset, true);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
});
describe('Right to left Mouse controls - Single Vertical', function() {
......@@ -374,6 +394,26 @@
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
it('should handle click on ticks when showTicks is an integer and move minH', function() {
helper.scope.slider.options.step = 1;
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
helper.fireMousedown(helper.slider.ticks, offset, true);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
});
}());
......
tests/specs/options-handling-test.js
View file @ 76f1ef54
......@@ -660,6 +660,18 @@
expect(helper.slider.scope.showTicks).to.be.true;
});
it('should set the intermediateTicks flag to true when showTicks is an integer', function() {
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
expect(helper.slider.intermediateTicks).to.be.true;
});
it('should set the intermediateTicks flag to true when showTicksValues is an integer', function() {
helper.scope.slider.options.showTicksValues = 10;
helper.scope.$digest();
expect(helper.slider.intermediateTicks).to.be.true;
});
it('should set not accept draggableRange to true when slider is a single one', function() {
helper.scope.slider.options.draggableRange = true;
helper.scope.$digest();
......
tests/specs/ticks-test.js
View file @ 76f1ef54
......@@ -47,6 +47,20 @@
expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(11);
});
it('should create the correct number of ticks when showTicks is an integer', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: 20
}
};
helper.createSlider(sliderConf);
expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(6);
});
it('should create the correct number of ticks when showTicksValues is true', function() {
var sliderConf = {
value: 50,
......@@ -66,6 +80,28 @@
expect(secondTick.text()).to.equal('10');
});
it('should create the correct number of ticks when showTicksValues is an integer', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicksValues: 20
}
};
helper.createSlider(sliderConf);
expect(helper.slider.ticks.hasClass('rz-ticks-values-under')).to.be.true;
expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(6);
expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(6);
var firstTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[0]);
expect(firstTick.text()).to.equal('0');
var secondTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[1]);
expect(secondTick.text()).to.equal('20');
var lastTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[5]);
expect(lastTick.text()).to.equal('100');
});
it('should set rz-selected class to ticks below the model value if showSelectionBar is true', function() {
var sliderConf = {
value: 50,
......
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