Skip to content

Commit 34eaf5e

Browse files
author
Valentin Hervieu
committed
feat(translate): Pass a label string as third arg to the translate function to differentiate the lab
Closes #252
1 parent 7a60091 commit 34eaf5e

File tree

6 files changed

+44
-31
lines changed

6 files changed

+44
-31
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# 2.7.0 (not released)
22
## Features
33
- Add a `showSelectionBarFromValue` options (#250).
4+
- Pass a label string as third arg to the `translate` function to differentiate the labels (#252).
45

56
# 2.6.0 (2016-01-31)
67
## Features

‎README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,15 @@ The default options are:
204204

205205
**minRange** - _Number (defaults to 0)_: The minimum range authorized on the slider. *Applies to range slider only.*
206206

207-
**translate** - _Function(value, sliderId)_: Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers:
207+
**translate** - _Function(value, sliderId, label)_: Custom translate function. Use this if you want to translate values displayed on the slider.
208+
`sliderId` can be used to determine the slider for which we are translating the value. `label` is a string that can take the following values:
209+
- *'model'*: the model label
210+
- *'high'*: the high label
211+
- *'floor'*: the floor label
212+
- *'ceil'*: the ceil label
213+
- *'tick-value'*: the ticks labels
214+
215+
For example if you want to display dollar amounts instead of just numbers:
208216
```html
209217
<div>
210218
<rzslider

‎demo/demo.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,11 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
127127
options: {
128128
ceil: 500,
129129
floor: 0,
130-
translate: function(value) {
130+
step: 50,
131+
showTicksValues: true,
132+
id: 'translate-slider',
133+
translate: function(value, id, which) {
134+
console.info(value, id, which);
131135
return '$' + value;
132136
}
133137
}

‎dist/rzslider.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -606,10 +606,10 @@
606606
* @param {boolean} [useCustomTr]
607607
* @returns {undefined}
608608
*/
609-
translateFn: function(value, label, useCustomTr) {
609+
translateFn: function(value, label, which, useCustomTr) {
610610
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
611611

612-
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id) : value)),
612+
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id, which) : value)),
613613
getDimension = false;
614614

615615
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsd === 0)) {
@@ -691,14 +691,14 @@
691691
updateAriaAttributes: function() {
692692
this.minH.attr({
693693
'aria-valuenow': this.scope.rzSliderModel,
694-
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel),
694+
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel, this.options.id, 'model'),
695695
'aria-valuemin': this.minValue,
696696
'aria-valuemax': this.maxValue
697697
});
698698
if (this.range) {
699699
this.maxH.attr({
700700
'aria-valuenow': this.scope.rzSliderHigh,
701-
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh),
701+
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh, this.options.id, 'high'),
702702
'aria-valuemin': this.minValue,
703703
'aria-valuemax': this.maxValue
704704
});
@@ -756,7 +756,7 @@
756756
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
757757
}
758758
if (this.options.showTicksValues) {
759-
tick.value = this.getDisplayValue(value);
759+
tick.value = this.getDisplayValue(value, 'tick-value');
760760
if (this.options.ticksValuesTooltip) {
761761
tick.valueTooltip = this.options.ticksValuesTooltip(value);
762762
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
@@ -793,7 +793,7 @@
793793
* @returns {undefined}
794794
*/
795795
updateCeilLab: function() {
796-
this.translateFn(this.maxValue, this.ceilLab);
796+
this.translateFn(this.maxValue, this.ceilLab, 'ceil');
797797
this.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
798798
this.getDimension(this.ceilLab);
799799
},
@@ -804,7 +804,7 @@
804804
* @returns {undefined}
805805
*/
806806
updateFloorLab: function() {
807-
this.translateFn(this.minValue, this.flrLab);
807+
this.translateFn(this.minValue, this.flrLab, 'floor');
808808
this.getDimension(this.flrLab);
809809
},
810810

@@ -879,7 +879,7 @@
879879
*/
880880
updateLowHandle: function(newOffset) {
881881
this.setPosition(this.minH, newOffset);
882-
this.translateFn(this.scope.rzSliderModel, this.minLab);
882+
this.translateFn(this.scope.rzSliderModel, this.minLab, 'model');
883883
var pos = Math.min(
884884
Math.max(
885885
newOffset - this.minLab.rzsd / 2 + this.handleHalfDim,
@@ -900,7 +900,7 @@
900900
*/
901901
updateHighHandle: function(newOffset) {
902902
this.setPosition(this.maxH, newOffset);
903-
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
903+
this.translateFn(this.scope.rzSliderHigh, this.maxLab, 'high');
904904
var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.ceilLab.rzsd);
905905
this.setPosition(this.maxLab, pos);
906906

@@ -1009,11 +1009,11 @@
10091009
updateCmbLabel: function() {
10101010

10111011
if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
1012-
var lowTr = this.getDisplayValue(this.scope.rzSliderModel),
1013-
highTr = this.getDisplayValue(this.scope.rzSliderHigh),
1012+
var lowTr = this.getDisplayValue(this.scope.rzSliderModel, 'model'),
1013+
highTr = this.getDisplayValue(this.scope.rzSliderHigh, 'high'),
10141014
labelVal = lowTr === highTr ? lowTr : lowTr + ' - ' + highTr;
10151015

1016-
this.translateFn(labelVal, this.cmbLab, false);
1016+
this.translateFn(labelVal, this.cmbLab, 'cmb', false);
10171017
var pos = Math.min(
10181018
Math.max(
10191019
this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2,
@@ -1037,8 +1037,8 @@
10371037
* @param value
10381038
* @returns {*}
10391039
*/
1040-
getDisplayValue: function(value) {
1041-
return this.customTrFn(value, this.options.id);
1040+
getDisplayValue: function(value, which) {
1041+
return this.customTrFn(value, this.options.id, which);
10421042
},
10431043

10441044
/**

‎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: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -610,10 +610,10 @@
610610
* @param {boolean} [useCustomTr]
611611
* @returns {undefined}
612612
*/
613-
translateFn: function(value, label, useCustomTr) {
613+
translateFn: function(value, label, which, useCustomTr) {
614614
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
615615

616-
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id) : value)),
616+
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id, which) : value)),
617617
getDimension = false;
618618

619619
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsd === 0)) {
@@ -695,14 +695,14 @@
695695
updateAriaAttributes: function() {
696696
this.minH.attr({
697697
'aria-valuenow': this.scope.rzSliderModel,
698-
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel),
698+
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel, this.options.id, 'model'),
699699
'aria-valuemin': this.minValue,
700700
'aria-valuemax': this.maxValue
701701
});
702702
if (this.range) {
703703
this.maxH.attr({
704704
'aria-valuenow': this.scope.rzSliderHigh,
705-
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh),
705+
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh, this.options.id, 'high'),
706706
'aria-valuemin': this.minValue,
707707
'aria-valuemax': this.maxValue
708708
});
@@ -760,7 +760,7 @@
760760
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
761761
}
762762
if (this.options.showTicksValues) {
763-
tick.value = this.getDisplayValue(value);
763+
tick.value = this.getDisplayValue(value, 'tick-value');
764764
if (this.options.ticksValuesTooltip) {
765765
tick.valueTooltip = this.options.ticksValuesTooltip(value);
766766
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
@@ -797,7 +797,7 @@
797797
* @returns {undefined}
798798
*/
799799
updateCeilLab: function() {
800-
this.translateFn(this.maxValue, this.ceilLab);
800+
this.translateFn(this.maxValue, this.ceilLab, 'ceil');
801801
this.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
802802
this.getDimension(this.ceilLab);
803803
},
@@ -808,7 +808,7 @@
808808
* @returns {undefined}
809809
*/
810810
updateFloorLab: function() {
811-
this.translateFn(this.minValue, this.flrLab);
811+
this.translateFn(this.minValue, this.flrLab, 'floor');
812812
this.getDimension(this.flrLab);
813813
},
814814

@@ -883,7 +883,7 @@
883883
*/
884884
updateLowHandle: function(newOffset) {
885885
this.setPosition(this.minH, newOffset);
886-
this.translateFn(this.scope.rzSliderModel, this.minLab);
886+
this.translateFn(this.scope.rzSliderModel, this.minLab, 'model');
887887
var pos = Math.min(
888888
Math.max(
889889
newOffset - this.minLab.rzsd / 2 + this.handleHalfDim,
@@ -904,7 +904,7 @@
904904
*/
905905
updateHighHandle: function(newOffset) {
906906
this.setPosition(this.maxH, newOffset);
907-
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
907+
this.translateFn(this.scope.rzSliderHigh, this.maxLab, 'high');
908908
var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.ceilLab.rzsd);
909909
this.setPosition(this.maxLab, pos);
910910

@@ -1013,11 +1013,11 @@
10131013
updateCmbLabel: function() {
10141014

10151015
if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
1016-
var lowTr = this.getDisplayValue(this.scope.rzSliderModel),
1017-
highTr = this.getDisplayValue(this.scope.rzSliderHigh),
1016+
var lowTr = this.getDisplayValue(this.scope.rzSliderModel, 'model'),
1017+
highTr = this.getDisplayValue(this.scope.rzSliderHigh, 'high'),
10181018
labelVal = lowTr === highTr ? lowTr : lowTr + ' - ' + highTr;
10191019

1020-
this.translateFn(labelVal, this.cmbLab, false);
1020+
this.translateFn(labelVal, this.cmbLab, 'cmb', false);
10211021
var pos = Math.min(
10221022
Math.max(
10231023
this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2,
@@ -1041,8 +1041,8 @@
10411041
* @param value
10421042
* @returns {*}
10431043
*/
1044-
getDisplayValue: function(value) {
1045-
return this.customTrFn(value, this.options.id);
1044+
getDisplayValue: function(value, which) {
1045+
return this.customTrFn(value, this.options.id, which);
10461046
},
10471047

10481048
/**

0 commit comments

Comments
 (0)