Skip to content

I
i20rzslider
Commit 9aca352b authored by Valentin Hervieu's avatar Valentin Hervieu Committed by GitHub
Browse files
Options

feat(ticks): Refactor ticks to improve flexibility (#426) 

feat(ticks): Refactor ticks to improve flexibility
parent edf62b0e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 152 deletions
.gitignore
View file @ 9aca352b
...@@ -3,3 +3,4 @@ node_modules/ ...@@ -3,3 +3,4 @@ node_modules/
bower_components/ bower_components/
temp/ temp/
tests/coverage/ tests/coverage/
yarn.lock
CHANGELOG.md
View file @ 9aca352b
# 5.6.0 (2016-10-16)
## Features
- Add an `ticksArray` to display ticks at specific positions (#426).
To enable this new feature, the way the ticks are rendered has been changed. Now each tick is positioned absolutely using a `transform: translate()` instruction.
# 5.5.1 (2016-09-22) # 5.5.1 (2016-09-22)
## Fix ## Fix
- Prevent losing focus when slider is rerendered (#415). - Prevent losing focus when slider is rerendered (#415).
# 5.5.0 (2016-09-06) # 5.5.0 (2016-09-06)
## Features ## Features
- Add an autoHideLimitLabels to disable the auto-hiding of limit labels (#405). - Add an `autoHideLimitLabels` to disable the auto-hiding of limit labels (#405).
# 5.4.3 (2016-08-07) # 5.4.3 (2016-08-07)
## Fix ## Fix
......
README.md
View file @ 9aca352b
...@@ -220,6 +220,7 @@ The default options are: ...@@ -220,6 +220,7 @@ The default options are:
interval: 350, interval: 350,
showTicks: false, showTicks: false,
showTicksValues: false, showTicksValues: false,
ticksArray: null,
ticksTooltip: null, ticksTooltip: null,
ticksValuesTooltip: null, ticksValuesTooltip: null,
vertical: false, vertical: false,
...@@ -340,6 +341,8 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste ...@@ -340,6 +341,8 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
**showTicksValues** - _Boolean or Number (defaults to false)_: Set to true to display a tick and the step value for each step of the slider. Set a number to display ticks and the step value at intermediate positions. This number corresponds to the step between each tick. **showTicksValues** - _Boolean or Number (defaults to false)_: Set to true to display a tick and the step value for each step of the slider. Set a number to display ticks and the step value at intermediate positions. This number corresponds to the step between each tick.
**ticksArray** - _Array (defaults to null)_: Use to display ticks at specific positions. The array contains the index of the ticks that should be displayed. For example, [0, 1, 5] will display a tick for the first, second and sixth values.
**ticksTooltip** - _Function(value) (defaults to null)_: (requires angular-ui bootstrap) Used to display a tooltip when a tick is hovered. Set to a function that returns the tooltip content for a given value. **ticksTooltip** - _Function(value) (defaults to null)_: (requires angular-ui bootstrap) Used to display a tooltip when a tick is hovered. Set to a function that returns the tooltip content for a given value.
**ticksValuesTooltip** - _Function(value) (defaults to null)_: Same as `ticksTooltip` but for ticks values. **ticksValuesTooltip** - _Function(value) (defaults to null)_: Same as `ticksTooltip` but for ticks values.
......
demo/demo.js
View file @ 9aca352b
...@@ -127,27 +127,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -127,27 +127,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
}; };
//Slider with custom tick formatting
$scope.slider_tick_color = {
value: 0,
options: {
ceil: 1200,
floor: 0,
step: 50,
showSelectionBar: true,
showTicks: true,
getTickColor: function(value){
if (value < 300)
return 'red';
if (value < 600)
return 'orange';
if (value < 900)
return 'yellow';
return '#2AE02A';
}
}
};
//Slider config with floor, ceil and step //Slider config with floor, ceil and step
$scope.slider_floor_ceil = { $scope.slider_floor_ceil = {
value: 12, value: 12,
...@@ -228,15 +207,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -228,15 +207,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
} }
}; };
//Slider config with angular directive inside custom template
$scope.slider_custom_directive_inside_template = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100
}
};
//Slider config with steps array of letters //Slider config with steps array of letters
$scope.slider_alphabet = { $scope.slider_alphabet = {
...@@ -256,6 +226,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -256,6 +226,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
}; };
//Slider with ticks at specific positions
$scope.slider_ticks_array = {
value: 5,
options: {
ceil: 10,
floor: 0,
ticksArray: [0, 1, 3, 8, 10],
showTicksValues: true
}
};
//Slider with ticks and tooltip //Slider with ticks and tooltip
$scope.slider_ticks_tooltip = { $scope.slider_ticks_tooltip = {
value: 5, value: 5,
...@@ -332,6 +313,27 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -332,6 +313,27 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
}; };
//Slider with custom tick formatting
$scope.slider_tick_color = {
value: 0,
options: {
ceil: 1200,
floor: 0,
step: 50,
showSelectionBar: true,
showTicks: true,
getTickColor: function(value){
if (value < 300)
return 'red';
if (value < 600)
return 'orange';
if (value < 900)
return 'yellow';
return '#2AE02A';
}
}
};
//Slider with draggable range //Slider with draggable range
$scope.slider_draggable_range = { $scope.slider_draggable_range = {
minValue: 1, minValue: 1,
...@@ -378,7 +380,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -378,7 +380,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
floor: 0, floor: 0,
ceil: 10, ceil: 10,
vertical: true, vertical: true,
showTicks: true ticksArray: [0, 1, 5, 10],
showTicksValues: true
} }
}; };
$scope.verticalSlider4 = { $scope.verticalSlider4 = {
...@@ -519,6 +522,15 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -519,6 +522,15 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}); });
}; };
//Slider config with angular directive inside custom template
$scope.slider_custom_directive_inside_template = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100
}
};
//Slider with draggable range //Slider with draggable range
$scope.slider_all_options = { $scope.slider_all_options = {
......
demo/index.html
View file @ 9aca352b
...@@ -111,14 +111,6 @@ ...@@ -111,14 +111,6 @@
></rzslider> ></rzslider>
</article> </article>
<article>
<h2>Slider with dynamic tick color</h2>
<rzslider
rz-slider-model="slider_tick_color.value"
rz-slider-options="slider_tick_color.options"
></rzslider>
</article>
<article> <article>
<h2>Slider with custom floor/ceil/step</h2> <h2>Slider with custom floor/ceil/step</h2>
<rzslider <rzslider
...@@ -165,16 +157,6 @@ ...@@ -165,16 +157,6 @@
></rzslider> ></rzslider>
</article> </article>
<article>
<h2>Slider with angular directive inside custom template</h2>
<rzslider
rz-slider-model="slider_custom_directive_inside_template.minValue"
rz-slider-high="slider_custom_directive_inside_template.maxValue"
rz-slider-options="slider_custom_directive_inside_template.options"
rz-slider-tpl-url="directiveInCustomTemplate.html"
></rzslider>
</article>
<article> <article>
<h2>Slider with Alphabet</h2> <h2>Slider with Alphabet</h2>
Current letter: {{ slider_alphabet.value }} Current letter: {{ slider_alphabet.value }}
...@@ -192,6 +174,14 @@ ...@@ -192,6 +174,14 @@
></rzslider> ></rzslider>
</article> </article>
<article>
<h2>Slider with ticks at specific positions</h2>
<rzslider
rz-slider-model="slider_ticks_array.value"
rz-slider-options="slider_ticks_array.options"
></rzslider>
</article>
<article> <article>
<h2>Slider with ticks and tooltips</h2> <h2>Slider with ticks and tooltips</h2>
<rzslider <rzslider
...@@ -242,6 +232,14 @@ ...@@ -242,6 +232,14 @@
></rzslider> ></rzslider>
</article> </article>
<article>
<h2>Slider with dynamic tick color</h2>
<rzslider
rz-slider-model="slider_tick_color.value"
rz-slider-options="slider_tick_color.options"
></rzslider>
</article>
<article> <article>
<h2>Slider with draggable range</h2> <h2>Slider with draggable range</h2>
<rzslider <rzslider
...@@ -338,6 +336,16 @@ ...@@ -338,6 +336,16 @@
</tabset> </tabset>
</article> </article>
<article>
<h2>Slider with angular directive inside custom template</h2>
<rzslider
rz-slider-model="slider_custom_directive_inside_template.minValue"
rz-slider-high="slider_custom_directive_inside_template.maxValue"
rz-slider-options="slider_custom_directive_inside_template.options"
rz-slider-tpl-url="directiveInCustomTemplate.html"
></rzslider>
</article>
<article> <article>
<h2>Slider with all options demo</h2> <h2>Slider with all options demo</h2>
<div class="row all-options"> <div class="row all-options">
......
dist/rzslider.css
View file @ 9aca352b
/*! angularjs-slider - v5.5.1 - /*! angularjs-slider - v5.5.1 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - (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 - https://github.com/angular-slider/angularjs-slider -
2016-09-22 */ 2016-10-16 */
.rzslider { .rzslider {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -130,23 +130,20 @@ ...@@ -130,23 +130,20 @@
top: -3px; top: -3px;
left: 0; left: 0;
z-index: 1; z-index: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%; width: 100%;
height: 0; height: 0;
padding: 0 11px;
margin: 0; margin: 0;
list-style: none; list-style: none;
box-sizing: border-box; box-sizing: border-box;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
} }
.rzslider .rz-ticks .rz-tick { .rzslider .rz-ticks .rz-tick {
position: absolute;
top: 0;
left: 0;
width: 10px; width: 10px;
height: 10px; height: 10px;
margin-left: 11px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
background: #d8e0f3; background: #d8e0f3;
...@@ -173,7 +170,7 @@ ...@@ -173,7 +170,7 @@
.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value { .rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
top: initial; top: initial;
bottom: -40px; bottom: -32px;
} }
.rzslider.rz-vertical { .rzslider.rz-vertical {
...@@ -230,19 +227,17 @@ ...@@ -230,19 +227,17 @@
z-index: 1; z-index: 1;
width: 0; width: 0;
height: 100%; 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 { .rzslider.rz-vertical .rz-ticks .rz-tick {
margin-top: 11px;
margin-left: auto;
vertical-align: middle; vertical-align: middle;
} }
.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value { .rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value {
top: initial; top: initial;
left: 22px; left: 24px;
transform: translate(0, -28%); transform: translate(0, -28%);
} }
...@@ -255,7 +250,7 @@ ...@@ -255,7 +250,7 @@
} }
.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value { .rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value {
right: 12px; right: 24px;
bottom: initial; bottom: initial;
left: initial; left: initial;
} }
\ No newline at end of file
dist/rzslider.js
View file @ 9aca352b
/*! angularjs-slider - v5.5.1 - /*! angularjs-slider - v5.5.1 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - (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 - https://github.com/angular-slider/angularjs-slider -
2016-09-22 */ 2016-10-16 */
/*jslint unparam: true */ /*jslint unparam: true */
/*global angular: false, console: false, define, module */ /*global angular: false, console: false, define, module */
(function(root, factory) { (function(root, factory) {
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
interval: 350, interval: 350,
showTicks: false, showTicks: false,
showTicksValues: false, showTicksValues: false,
ticksArray: null,
ticksTooltip: null, ticksTooltip: null,
ticksValuesTooltip: null, ticksValuesTooltip: null,
vertical: false, vertical: false,
...@@ -542,9 +543,9 @@ ...@@ -542,9 +543,9 @@
this.options.draggableRange = true; this.options.draggableRange = true;
} }
this.options.showTicks = this.options.showTicks || this.options.showTicksValues; this.options.showTicks = this.options.showTicks || this.options.showTicksValues || !!this.options.ticksArray;
this.scope.showTicks = this.options.showTicks; //scope is used in the template this.scope.showTicks = this.options.showTicks; //scope is used in the template
if (angular.isNumber(this.options.showTicks)) if (angular.isNumber(this.options.showTicks) || this.options.ticksArray)
this.intermediateTicks = true; this.intermediateTicks = true;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
...@@ -926,6 +927,10 @@ ...@@ -926,6 +927,10 @@
this.updateFloorLab(); this.updateFloorLab();
this.updateCeilLab(); this.updateCeilLab();
this.initHandles(); this.initHandles();
var self = this;
$timeout(function() {
self.updateTicksScale();
});
} }
}, },
...@@ -936,48 +941,61 @@ ...@@ -936,48 +941,61 @@
*/ */
updateTicksScale: function() { updateTicksScale: function() {
if (!this.options.showTicks) return; if (!this.options.showTicks) return;
var step = this.step;
if (this.intermediateTicks) var ticksArray = this.options.ticksArray || this.getTicksArray(),
step = this.options.showTicks; translate = this.options.vertical ? 'translateY' : 'translateX',
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1; self = this;
this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) { if(this.options.rightToLeft)
var value = this.roundStep(this.minValue + i * step); ticksArray.reverse();
this.scope.ticks = ticksArray.map(function(value){
var offset = self.valueToOffset(value);
if (self.options.vertical)
offset = self.maxPos - offset;
var tick = { var tick = {
selected: this.isTickSelected(value) selected: self.isTickSelected(value),
style: {
transform: translate + '(' + offset + 'px)'
}
}; };
if (tick.selected && this.options.getSelectionBarColor) { if (tick.selected && self.options.getSelectionBarColor) {
tick.style = { tick.style['background-color'] = self.getSelectionBarColor();
'background-color': this.getSelectionBarColor()
};
} }
if (!tick.selected && this.options.getTickColor) { if (!tick.selected && self.options.getTickColor) {
tick.style = { tick.style['background-color'] = self.getTickColor(value);
'background-color': this.getTickColor(value)
}
} }
if (this.options.ticksTooltip) { if (self.options.ticksTooltip) {
tick.tooltip = this.options.ticksTooltip(value); tick.tooltip = self.options.ticksTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top'; tick.tooltipPlacement = self.options.vertical ? 'right' : 'top';
} }
if (this.options.showTicksValues) { if (self.options.showTicksValues) {
tick.value = this.getDisplayValue(value, 'tick-value'); tick.value = self.getDisplayValue(value, 'tick-value');
if (this.options.ticksValuesTooltip) { if (self.options.ticksValuesTooltip) {
tick.valueTooltip = this.options.ticksValuesTooltip(value); tick.valueTooltip = self.options.ticksValuesTooltip(value);
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top'; tick.valueTooltipPlacement = self.options.vertical ? 'right' : 'top';
} }
} }
if (this.getLegend) { if (self.getLegend) {
var legend = this.getLegend(value, this.options.id); var legend = self.getLegend(value, self.options.id);
if (legend) if (legend)
tick.legend = legend; tick.legend = legend;
} }
if (!this.options.rightToLeft) { return tick;
this.scope.ticks.push(tick); });
} else { },
this.scope.ticks.unshift(tick);
} getTicksArray: function() {
var step = this.step,
ticksArray = [];
if (this.intermediateTicks)
step = this.options.showTicks;
for (var value = this.minValue; value <= this.maxValue; value += step) {
ticksArray.push(value);
} }
return ticksArray;
}, },
isTickSelected: function(value) { isTickSelected: function(value) {
......
dist/rzslider.min.css
View file @ 9aca352b
/*! angularjs-slider - v5.5.1 - (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-09-22 */ /*! angularjs-slider - v5.5.1 - (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-10-16 */
.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.with-legend{margin-bottom:40px}.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-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;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-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:12px;bottom:initial;left:initial} .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.with-legend{margin-bottom:40px}.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;width:100%;height:0;margin:0;list-style:none;box-sizing:border-box}.rzslider .rz-ticks .rz-tick{position:absolute;top:0;left:0;width:10px;height:10px;margin-left:11px;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-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;transform:translate(-50%,0)}.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-32px}.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%}.rzslider.rz-vertical .rz-ticks .rz-tick{margin-top:11px;margin-left:auto;vertical-align:middle}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:24px;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:24px;bottom:initial;left:initial}
\ No newline at end of file \ No newline at end of file
dist/rzslider.min.js
View file @ 9aca352b
This diff is collapsed.
package.json
View file @ 9aca352b
...@@ -38,13 +38,13 @@ ...@@ -38,13 +38,13 @@
"grunt-recess": "~0.4.0", "grunt-recess": "~0.4.0",
"grunt-replace": "^0.11.0", "grunt-replace": "^0.11.0",
"grunt-serve": "^0.1.6", "grunt-serve": "^0.1.6",
"karma": "^0.13.15", "karma": "^1.3.0",
"karma-chai": "^0.1.0", "karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.2.2", "karma-chrome-launcher": "^0.2.2",
"karma-coverage": "^0.5.3", "karma-coverage": "^0.5.3",
"karma-mocha": "^0.2.1", "karma-mocha": "^0.2.1",
"karma-ng-html2js-preprocessor": "^0.2.0", "karma-ng-html2js-preprocessor": "^0.2.0",
"karma-phantomjs-launcher": "^0.2.1", "karma-phantomjs-launcher": "^1.0.2",
"karma-sinon": "^1.0.4", "karma-sinon": "^1.0.4",
"mocha": "^2.3.4", "mocha": "^2.3.4",
"phantomjs": "^1.9.19", "phantomjs": "^1.9.19",
......
src/rzslider.js
View file @ 9aca352b
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
interval: 350, interval: 350,
showTicks: false, showTicks: false,
showTicksValues: false, showTicksValues: false,
ticksArray: null,
ticksTooltip: null, ticksTooltip: null,
ticksValuesTooltip: null, ticksValuesTooltip: null,
vertical: false, vertical: false,
...@@ -546,9 +547,9 @@ ...@@ -546,9 +547,9 @@
this.options.draggableRange = true; this.options.draggableRange = true;
} }
this.options.showTicks = this.options.showTicks || this.options.showTicksValues; this.options.showTicks = this.options.showTicks || this.options.showTicksValues || !!this.options.ticksArray;
this.scope.showTicks = this.options.showTicks; //scope is used in the template this.scope.showTicks = this.options.showTicks; //scope is used in the template
if (angular.isNumber(this.options.showTicks)) if (angular.isNumber(this.options.showTicks) || this.options.ticksArray)
this.intermediateTicks = true; this.intermediateTicks = true;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
...@@ -930,6 +931,10 @@ ...@@ -930,6 +931,10 @@
this.updateFloorLab(); this.updateFloorLab();
this.updateCeilLab(); this.updateCeilLab();
this.initHandles(); this.initHandles();
var self = this;
$timeout(function() {
self.updateTicksScale();
});
} }
}, },
...@@ -940,48 +945,61 @@ ...@@ -940,48 +945,61 @@
*/ */
updateTicksScale: function() { updateTicksScale: function() {
if (!this.options.showTicks) return; if (!this.options.showTicks) return;
var step = this.step;
if (this.intermediateTicks) var ticksArray = this.options.ticksArray || this.getTicksArray(),
step = this.options.showTicks; translate = this.options.vertical ? 'translateY' : 'translateX',
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1; self = this;
this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) { if(this.options.rightToLeft)
var value = this.roundStep(this.minValue + i * step); ticksArray.reverse();
this.scope.ticks = ticksArray.map(function(value){
var offset = self.valueToOffset(value);
if (self.options.vertical)
offset = self.maxPos - offset;
var tick = { var tick = {
selected: this.isTickSelected(value) selected: self.isTickSelected(value),
style: {
transform: translate + '(' + offset + 'px)'
}
}; };
if (tick.selected && this.options.getSelectionBarColor) { if (tick.selected && self.options.getSelectionBarColor) {
tick.style = { tick.style['background-color'] = self.getSelectionBarColor();
'background-color': this.getSelectionBarColor()
};
} }
if (!tick.selected && this.options.getTickColor) { if (!tick.selected && self.options.getTickColor) {
tick.style = { tick.style['background-color'] = self.getTickColor(value);
'background-color': this.getTickColor(value)
}
} }
if (this.options.ticksTooltip) { if (self.options.ticksTooltip) {
tick.tooltip = this.options.ticksTooltip(value); tick.tooltip = self.options.ticksTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top'; tick.tooltipPlacement = self.options.vertical ? 'right' : 'top';
} }
if (this.options.showTicksValues) { if (self.options.showTicksValues) {
tick.value = this.getDisplayValue(value, 'tick-value'); tick.value = self.getDisplayValue(value, 'tick-value');
if (this.options.ticksValuesTooltip) { if (self.options.ticksValuesTooltip) {
tick.valueTooltip = this.options.ticksValuesTooltip(value); tick.valueTooltip = self.options.ticksValuesTooltip(value);
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top'; tick.valueTooltipPlacement = self.options.vertical ? 'right' : 'top';
} }
} }
if (this.getLegend) { if (self.getLegend) {
var legend = this.getLegend(value, this.options.id); var legend = self.getLegend(value, self.options.id);
if (legend) if (legend)
tick.legend = legend; tick.legend = legend;
} }
if (!this.options.rightToLeft) { return tick;
this.scope.ticks.push(tick); });
} else { },
this.scope.ticks.unshift(tick);
} getTicksArray: function() {
var step = this.step,
ticksArray = [];
if (this.intermediateTicks)
step = this.options.showTicks;
for (var value = this.minValue; value <= this.maxValue; value += step) {
ticksArray.push(value);
} }
return ticksArray;
}, },
isTickSelected: function(value) { isTickSelected: function(value) {
......
src/rzslider.less
View file @ 9aca352b
...@@ -127,15 +127,8 @@ ...@@ -127,15 +127,8 @@
left: 0; left: 0;
top: -(@ticksHeight - @barDimension) / 2; top: -(@ticksHeight - @barDimension) / 2;
margin: 0; margin: 0;
padding: 0 (@handleSize - @ticksWidth) / 2;
z-index: 1; z-index: 1;
list-style: none; list-style: none;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.rz-tick { .rz-tick {
text-align: center; text-align: center;
...@@ -144,6 +137,10 @@ ...@@ -144,6 +137,10 @@
height: @ticksHeight; height: @ticksHeight;
background: @ticksColor; background: @ticksColor;
border-radius: 50%; border-radius: 50%;
position: absolute;
top: 0;
left: 0;
margin-left: @handleSize / 2 - @ticksWidth / 2; // for centering
&.rz-selected { &.rz-selected {
background: @selectedTicksColor; background: @selectedTicksColor;
} }
...@@ -164,7 +161,7 @@ ...@@ -164,7 +161,7 @@
&.rz-ticks-values-under { &.rz-ticks-values-under {
.rz-tick-value { .rz-tick-value {
top: initial; top: initial;
bottom: @ticksValuePosition - 10; bottom: @ticksValuePosition - 2;
} }
} }
} }
...@@ -220,14 +217,12 @@ ...@@ -220,14 +217,12 @@
width: 0; width: 0;
left: -(@ticksHeight - @barDimension) / 2; left: -(@ticksHeight - @barDimension) / 2;
top: 0; top: 0;
padding: (@handleSize - @ticksWidth) / 2 0;
z-index: 1; z-index: 1;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
.rz-tick { .rz-tick {
vertical-align: middle; vertical-align: middle;
margin-left: auto;
margin-top: @handleSize / 2 - @ticksWidth / 2; // for centering
.rz-tick-value { .rz-tick-value {
left: @ticksValuePositionOnVertical; left: @ticksValuePositionOnVertical;
top: initial; top: initial;
...@@ -246,7 +241,7 @@ ...@@ -246,7 +241,7 @@
.rz-tick-value { .rz-tick-value {
bottom: initial; bottom: initial;
left: initial; left: initial;
right: @ticksValuePositionOnVertical - 10; right: @ticksValuePositionOnVertical;
} }
} }
} }
......
src/variables.less
View file @ 9aca352b
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
@ticksHeight: 10px; @ticksHeight: 10px;
@ticksValuePosition: -30px; @ticksValuePosition: -30px;
@ticksLegendPosition: 24px; @ticksLegendPosition: 24px;
@ticksValuePositionOnVertical: 22px; @ticksValuePositionOnVertical: 24px;
@handleSize: 32px; @handleSize: 32px;
@handlePointerSize: 8px; @handlePointerSize: 8px;
......
tests/specs/ticks-test.js
View file @ 9aca352b
...@@ -141,6 +141,47 @@ ...@@ -141,6 +141,47 @@
expect(lastTick.text()).to.equal('100'); expect(lastTick.text()).to.equal('100');
}); });
it('should create the correct number of ticks when ticksArray is used', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
ticksArray: [0, 25, 50, 100]
}
};
helper.createSlider(sliderConf);
expect(helper.slider.ticks.hasClass('rz-ticks-values-under')).to.be.false;
expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(4);
expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(0);
});
it('should create the correct number of ticks when ticksArray is used along with showTicksValues', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
ticksArray: [0, 25, 50, 100],
showTicksValues: true
}
};
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(4);
expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(4);
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('25');
var thirdTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[2]);
expect(thirdTick.text()).to.equal('50');
var lastTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[3]);
expect(lastTick.text()).to.equal('100');
});
it('should create the correct number of legend items when getLegend is defined', function() { it('should create the correct number of legend items when getLegend is defined', function() {
var sliderConf = { var sliderConf = {
value: 50, 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