Skip to content

Commit dff0e6d

Browse files
ValentinHValentinH
committed
feat(ticks): Refactor ticks to improve flexibility (#426)
feat(ticks): Refactor ticks to improve flexibility
1 parent 87ca837 commit dff0e6d

File tree

10 files changed

+183
-99
lines changed

10 files changed

+183
-99
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ node_modules/
33
bower_components/
44
temp/
55
tests/coverage/
6+
yarn.lock

‎CHANGELOG.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
# 5.6.0 (2016-10-16)
2+
## Features
3+
- Add an `ticksArray` to display ticks at specific positions (#426).
4+
5+
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.
6+
17
# 5.5.1 (2016-09-22)
28
## Fix
39
- Prevent losing focus when slider is rerendered (#415).
410

511
# 5.5.0 (2016-09-06)
612
## Features
7-
- Add an autoHideLimitLabels to disable the auto-hiding of limit labels (#405).
13+
- Add an `autoHideLimitLabels` to disable the auto-hiding of limit labels (#405).
814

915
# 5.4.3 (2016-08-07)
1016
## Fix

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ The default options are:
220220
interval: 350,
221221
showTicks: false,
222222
showTicksValues: false,
223+
ticksArray: null,
223224
ticksTooltip: null,
224225
ticksValuesTooltip: null,
225226
vertical: false,
@@ -340,6 +341,8 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
340341
341342
**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.
342343
344+
**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.
345+
343346
**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.
344347
345348
**ticksValuesTooltip** - _Function(value) (defaults to null)_: Same as `ticksTooltip` but for ticks values.

‎demo/demo.js

+43-31
Original file line numberDiff line numberDiff line change
@@ -127,27 +127,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
127127
}
128128
};
129129

130-
//Slider with custom tick formatting
131-
$scope.slider_tick_color = {
132-
value: 0,
133-
options: {
134-
ceil: 1200,
135-
floor: 0,
136-
step: 50,
137-
showSelectionBar: true,
138-
showTicks: true,
139-
getTickColor: function(value){
140-
if (value < 300)
141-
return 'red';
142-
if (value < 600)
143-
return 'orange';
144-
if (value < 900)
145-
return 'yellow';
146-
return '#2AE02A';
147-
}
148-
}
149-
};
150-
151130
//Slider config with floor, ceil and step
152131
$scope.slider_floor_ceil = {
153132
value: 12,
@@ -238,15 +217,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
238217
}
239218
}
240219
};
241-
//Slider config with angular directive inside custom template
242-
$scope.slider_custom_directive_inside_template = {
243-
minValue: 20,
244-
maxValue: 80,
245-
options: {
246-
floor: 0,
247-
ceil: 100
248-
}
249-
};
250220

251221
//Slider config with steps array of letters
252222
$scope.slider_alphabet = {
@@ -266,6 +236,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
266236
}
267237
};
268238

239+
//Slider with ticks at specific positions
240+
$scope.slider_ticks_array = {
241+
value: 5,
242+
options: {
243+
ceil: 10,
244+
floor: 0,
245+
ticksArray: [0, 1, 3, 8, 10],
246+
showTicksValues: true
247+
}
248+
};
249+
269250
//Slider with ticks and tooltip
270251
$scope.slider_ticks_tooltip = {
271252
value: 5,
@@ -342,6 +323,27 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
342323
}
343324
};
344325

326+
//Slider with custom tick formatting
327+
$scope.slider_tick_color = {
328+
value: 0,
329+
options: {
330+
ceil: 1200,
331+
floor: 0,
332+
step: 50,
333+
showSelectionBar: true,
334+
showTicks: true,
335+
getTickColor: function(value){
336+
if (value < 300)
337+
return 'red';
338+
if (value < 600)
339+
return 'orange';
340+
if (value < 900)
341+
return 'yellow';
342+
return '#2AE02A';
343+
}
344+
}
345+
};
346+
345347
//Slider with draggable range
346348
$scope.slider_draggable_range = {
347349
minValue: 1,
@@ -388,7 +390,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
388390
floor: 0,
389391
ceil: 10,
390392
vertical: true,
391-
showTicks: true
393+
ticksArray: [0, 1, 5, 10],
394+
showTicksValues: true
392395
}
393396
};
394397
$scope.verticalSlider4 = {
@@ -529,6 +532,15 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
529532
});
530533
};
531534

535+
//Slider config with angular directive inside custom template
536+
$scope.slider_custom_directive_inside_template = {
537+
minValue: 20,
538+
maxValue: 80,
539+
options: {
540+
floor: 0,
541+
ceil: 100
542+
}
543+
};
532544

533545
//Slider with draggable range
534546
$scope.slider_all_options = {

‎demo/index.html

+26-18
Original file line numberDiff line numberDiff line change
@@ -111,14 +111,6 @@ <h2>Slider with dynamic pointer color</h2>
111111
></rzslider>
112112
</article>
113113

114-
<article>
115-
<h2>Slider with dynamic tick color</h2>
116-
<rzslider
117-
rz-slider-model="slider_tick_color.value"
118-
rz-slider-options="slider_tick_color.options"
119-
></rzslider>
120-
</article>
121-
122114
<article>
123115
<h2>Slider with custom floor/ceil/step</h2>
124116
<rzslider
@@ -173,16 +165,6 @@ <h2>Slider with custom display function using html formatting</h2>
173165
></rzslider>
174166
</article>
175167

176-
<article>
177-
<h2>Slider with angular directive inside custom template</h2>
178-
<rzslider
179-
rz-slider-model="slider_custom_directive_inside_template.minValue"
180-
rz-slider-high="slider_custom_directive_inside_template.maxValue"
181-
rz-slider-options="slider_custom_directive_inside_template.options"
182-
rz-slider-tpl-url="directiveInCustomTemplate.html"
183-
></rzslider>
184-
</article>
185-
186168
<article>
187169
<h2>Slider with Alphabet</h2>
188170
Current letter: {{ slider_alphabet.value }}
@@ -200,6 +182,14 @@ <h2>Slider with ticks</h2>
200182
></rzslider>
201183
</article>
202184

185+
<article>
186+
<h2>Slider with ticks at specific positions</h2>
187+
<rzslider
188+
rz-slider-model="slider_ticks_array.value"
189+
rz-slider-options="slider_ticks_array.options"
190+
></rzslider>
191+
</article>
192+
203193
<article>
204194
<h2>Slider with ticks and tooltips</h2>
205195
<rzslider
@@ -250,6 +240,14 @@ <h2>Slider with ticks values and legend</h2>
250240
></rzslider>
251241
</article>
252242

243+
<article>
244+
<h2>Slider with dynamic tick color</h2>
245+
<rzslider
246+
rz-slider-model="slider_tick_color.value"
247+
rz-slider-options="slider_tick_color.options"
248+
></rzslider>
249+
</article>
250+
253251
<article>
254252
<h2>Slider with draggable range</h2>
255253
<rzslider
@@ -346,6 +344,16 @@ <h2>Sliders inside tabs</h2>
346344
</tabset>
347345
</article>
348346

347+
<article>
348+
<h2>Slider with angular directive inside custom template</h2>
349+
<rzslider
350+
rz-slider-model="slider_custom_directive_inside_template.minValue"
351+
rz-slider-high="slider_custom_directive_inside_template.maxValue"
352+
rz-slider-options="slider_custom_directive_inside_template.options"
353+
rz-slider-tpl-url="directiveInCustomTemplate.html"
354+
></rzslider>
355+
</article>
356+
349357
<article>
350358
<h2>Slider with all options demo</h2>
351359
<div class="row all-options">

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@
3838
"grunt-recess": "~0.4.0",
3939
"grunt-replace": "^0.11.0",
4040
"grunt-serve": "^0.1.6",
41-
"karma": "^0.13.15",
41+
"karma": "^1.3.0",
4242
"karma-chai": "^0.1.0",
4343
"karma-chrome-launcher": "^0.2.2",
4444
"karma-coverage": "^0.5.3",
4545
"karma-mocha": "^0.2.1",
4646
"karma-ng-html2js-preprocessor": "^0.2.0",
47-
"karma-phantomjs-launcher": "^0.2.1",
47+
"karma-phantomjs-launcher": "^1.0.2",
4848
"karma-sinon": "^1.0.4",
4949
"mocha": "^2.3.4",
5050
"phantomjs": "^1.9.19",

‎src/rzslider.js

+51-33
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
interval: 350,
5959
showTicks: false,
6060
showTicksValues: false,
61+
ticksArray: null,
6162
ticksTooltip: null,
6263
ticksValuesTooltip: null,
6364
vertical: false,
@@ -547,9 +548,9 @@
547548
this.options.draggableRange = true;
548549
}
549550

550-
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
551+
this.options.showTicks = this.options.showTicks || this.options.showTicksValues || !!this.options.ticksArray;
551552
this.scope.showTicks = this.options.showTicks; //scope is used in the template
552-
if (angular.isNumber(this.options.showTicks))
553+
if (angular.isNumber(this.options.showTicks) || this.options.ticksArray)
553554
this.intermediateTicks = true;
554555

555556
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
@@ -933,6 +934,10 @@
933934
this.updateFloorLab();
934935
this.updateCeilLab();
935936
this.initHandles();
937+
var self = this;
938+
$timeout(function() {
939+
self.updateTicksScale();
940+
});
936941
}
937942
},
938943

@@ -943,48 +948,61 @@
943948
*/
944949
updateTicksScale: function() {
945950
if (!this.options.showTicks) return;
946-
var step = this.step;
947-
if (this.intermediateTicks)
948-
step = this.options.showTicks;
949-
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
950-
this.scope.ticks = [];
951-
for (var i = 0; i < ticksCount; i++) {
952-
var value = this.roundStep(this.minValue + i * step);
951+
952+
var ticksArray = this.options.ticksArray || this.getTicksArray(),
953+
translate = this.options.vertical ? 'translateY' : 'translateX',
954+
self = this;
955+
956+
if(this.options.rightToLeft)
957+
ticksArray.reverse();
958+
959+
this.scope.ticks = ticksArray.map(function(value){
960+
var offset = self.valueToOffset(value);
961+
962+
if (self.options.vertical)
963+
offset = self.maxPos - offset;
964+
953965
var tick = {
954-
selected: this.isTickSelected(value)
966+
selected: self.isTickSelected(value),
967+
style: {
968+
transform: translate + '(' + offset + 'px)'
969+
}
955970
};
956-
if (tick.selected && this.options.getSelectionBarColor) {
957-
tick.style = {
958-
'background-color': this.getSelectionBarColor()
959-
};
971+
if (tick.selected && self.options.getSelectionBarColor) {
972+
tick.style['background-color'] = self.getSelectionBarColor();
960973
}
961-
if (!tick.selected && this.options.getTickColor) {
962-
tick.style = {
963-
'background-color': this.getTickColor(value)
964-
}
974+
if (!tick.selected && self.options.getTickColor) {
975+
tick.style['background-color'] = self.getTickColor(value);
965976
}
966-
if (this.options.ticksTooltip) {
967-
tick.tooltip = this.options.ticksTooltip(value);
968-
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
977+
if (self.options.ticksTooltip) {
978+
tick.tooltip = self.options.ticksTooltip(value);
979+
tick.tooltipPlacement = self.options.vertical ? 'right' : 'top';
969980
}
970-
if (this.options.showTicksValues) {
971-
tick.value = this.getDisplayValue(value, 'tick-value');
972-
if (this.options.ticksValuesTooltip) {
973-
tick.valueTooltip = this.options.ticksValuesTooltip(value);
974-
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
981+
if (self.options.showTicksValues) {
982+
tick.value = self.getDisplayValue(value, 'tick-value');
983+
if (self.options.ticksValuesTooltip) {
984+
tick.valueTooltip = self.options.ticksValuesTooltip(value);
985+
tick.valueTooltipPlacement = self.options.vertical ? 'right' : 'top';
975986
}
976987
}
977-
if (this.getLegend) {
978-
var legend = this.getLegend(value, this.options.id);
988+
if (self.getLegend) {
989+
var legend = self.getLegend(value, self.options.id);
979990
if (legend)
980991
tick.legend = legend;
981992
}
982-
if (!this.options.rightToLeft) {
983-
this.scope.ticks.push(tick);
984-
} else {
985-
this.scope.ticks.unshift(tick);
986-
}
993+
return tick;
994+
});
995+
},
996+
997+
getTicksArray: function() {
998+
var step = this.step,
999+
ticksArray = [];
1000+
if (this.intermediateTicks)
1001+
step = this.options.showTicks;
1002+
for (var value = this.minValue; value <= this.maxValue; value += step) {
1003+
ticksArray.push(value);
9871004
}
1005+
return ticksArray;
9881006
},
9891007

9901008
isTickSelected: function(value) {

0 commit comments

Comments
 (0)