Skip to content

I
i20rzslider
Commit 34eaf5ec authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

feat(translate): Pass a label string as third arg to the translate function to… 

feat(translate): Pass a label string as third arg to the translate function to differentiate the lab

Closes #252
parent 7a600911
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 31 deletions
CHANGELOG.md
View file @ 34eaf5ec
# 2.7.0 (not released)
## Features
- Add a `showSelectionBarFromValue` options (#250).
- Pass a label string as third arg to the `translate` function to differentiate the labels (#252).
# 2.6.0 (2016-01-31)
## Features
......
README.md
View file @ 34eaf5ec
......@@ -204,7 +204,15 @@ The default options are:
**minRange** - _Number (defaults to 0)_: The minimum range authorized on the slider. *Applies to range slider only.*
**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:
**translate** - _Function(value, sliderId, label)_: Custom translate function. Use this if you want to translate values displayed on the slider.
`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:
- *'model'*: the model label
- *'high'*: the high label
- *'floor'*: the floor label
- *'ceil'*: the ceil label
- *'tick-value'*: the ticks labels
For example if you want to display dollar amounts instead of just numbers:
```html
<div>
<rzslider
......
demo/demo.js
View file @ 34eaf5ec
......@@ -127,7 +127,11 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
options: {
ceil: 500,
floor: 0,
translate: function(value) {
step: 50,
showTicksValues: true,
id: 'translate-slider',
translate: function(value, id, which) {
console.info(value, id, which);
return '$' + value;
}
}
......
dist/rzslider.js
View file @ 34eaf5ec
......@@ -606,10 +606,10 @@
* @param {boolean} [useCustomTr]
* @returns {undefined}
*/
translateFn: function(value, label, useCustomTr) {
translateFn: function(value, label, which, useCustomTr) {
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id) : value)),
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id, which) : value)),
getDimension = false;
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsd === 0)) {
......@@ -691,14 +691,14 @@
updateAriaAttributes: function() {
this.minH.attr({
'aria-valuenow': this.scope.rzSliderModel,
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel),
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel, this.options.id, 'model'),
'aria-valuemin': this.minValue,
'aria-valuemax': this.maxValue
});
if (this.range) {
this.maxH.attr({
'aria-valuenow': this.scope.rzSliderHigh,
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh),
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh, this.options.id, 'high'),
'aria-valuemin': this.minValue,
'aria-valuemax': this.maxValue
});
......@@ -756,7 +756,7 @@
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
}
if (this.options.showTicksValues) {
tick.value = this.getDisplayValue(value);
tick.value = this.getDisplayValue(value, 'tick-value');
if (this.options.ticksValuesTooltip) {
tick.valueTooltip = this.options.ticksValuesTooltip(value);
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
......@@ -793,7 +793,7 @@
* @returns {undefined}
*/
updateCeilLab: function() {
this.translateFn(this.maxValue, this.ceilLab);
this.translateFn(this.maxValue, this.ceilLab, 'ceil');
this.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
this.getDimension(this.ceilLab);
},
......@@ -804,7 +804,7 @@
* @returns {undefined}
*/
updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab);
this.translateFn(this.minValue, this.flrLab, 'floor');
this.getDimension(this.flrLab);
},
......@@ -879,7 +879,7 @@
*/
updateLowHandle: function(newOffset) {
this.setPosition(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab);
this.translateFn(this.scope.rzSliderModel, this.minLab, 'model');
var pos = Math.min(
Math.max(
newOffset - this.minLab.rzsd / 2 + this.handleHalfDim,
......@@ -900,7 +900,7 @@
*/
updateHighHandle: function(newOffset) {
this.setPosition(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
this.translateFn(this.scope.rzSliderHigh, this.maxLab, 'high');
var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.ceilLab.rzsd);
this.setPosition(this.maxLab, pos);
......@@ -1009,11 +1009,11 @@
updateCmbLabel: function() {
if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
var lowTr = this.getDisplayValue(this.scope.rzSliderModel),
highTr = this.getDisplayValue(this.scope.rzSliderHigh),
var lowTr = this.getDisplayValue(this.scope.rzSliderModel, 'model'),
highTr = this.getDisplayValue(this.scope.rzSliderHigh, 'high'),
labelVal = lowTr === highTr ? lowTr : lowTr + ' - ' + highTr;
this.translateFn(labelVal, this.cmbLab, false);
this.translateFn(labelVal, this.cmbLab, 'cmb', false);
var pos = Math.min(
Math.max(
this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2,
......@@ -1037,8 +1037,8 @@
* @param value
* @returns {*}
*/
getDisplayValue: function(value) {
return this.customTrFn(value, this.options.id);
getDisplayValue: function(value, which) {
return this.customTrFn(value, this.options.id, which);
},
/**
......
dist/rzslider.min.js
View file @ 34eaf5ec
This diff is collapsed.
src/rzslider.js
View file @ 34eaf5ec
......@@ -610,10 +610,10 @@
* @param {boolean} [useCustomTr]
* @returns {undefined}
*/
translateFn: function(value, label, useCustomTr) {
translateFn: function(value, label, which, useCustomTr) {
useCustomTr = useCustomTr === undefined ? true : useCustomTr;
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id) : value)),
var valStr = String((useCustomTr ? this.customTrFn(value, this.options.id, which) : value)),
getDimension = false;
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsd === 0)) {
......@@ -695,14 +695,14 @@
updateAriaAttributes: function() {
this.minH.attr({
'aria-valuenow': this.scope.rzSliderModel,
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel),
'aria-valuetext': this.customTrFn(this.scope.rzSliderModel, this.options.id, 'model'),
'aria-valuemin': this.minValue,
'aria-valuemax': this.maxValue
});
if (this.range) {
this.maxH.attr({
'aria-valuenow': this.scope.rzSliderHigh,
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh),
'aria-valuetext': this.customTrFn(this.scope.rzSliderHigh, this.options.id, 'high'),
'aria-valuemin': this.minValue,
'aria-valuemax': this.maxValue
});
......@@ -760,7 +760,7 @@
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
}
if (this.options.showTicksValues) {
tick.value = this.getDisplayValue(value);
tick.value = this.getDisplayValue(value, 'tick-value');
if (this.options.ticksValuesTooltip) {
tick.valueTooltip = this.options.ticksValuesTooltip(value);
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
......@@ -797,7 +797,7 @@
* @returns {undefined}
*/
updateCeilLab: function() {
this.translateFn(this.maxValue, this.ceilLab);
this.translateFn(this.maxValue, this.ceilLab, 'ceil');
this.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
this.getDimension(this.ceilLab);
},
......@@ -808,7 +808,7 @@
* @returns {undefined}
*/
updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab);
this.translateFn(this.minValue, this.flrLab, 'floor');
this.getDimension(this.flrLab);
},
......@@ -883,7 +883,7 @@
*/
updateLowHandle: function(newOffset) {
this.setPosition(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab);
this.translateFn(this.scope.rzSliderModel, this.minLab, 'model');
var pos = Math.min(
Math.max(
newOffset - this.minLab.rzsd / 2 + this.handleHalfDim,
......@@ -904,7 +904,7 @@
*/
updateHighHandle: function(newOffset) {
this.setPosition(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab);
this.translateFn(this.scope.rzSliderHigh, this.maxLab, 'high');
var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.ceilLab.rzsd);
this.setPosition(this.maxLab, pos);
......@@ -1013,11 +1013,11 @@
updateCmbLabel: function() {
if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
var lowTr = this.getDisplayValue(this.scope.rzSliderModel),
highTr = this.getDisplayValue(this.scope.rzSliderHigh),
var lowTr = this.getDisplayValue(this.scope.rzSliderModel, 'model'),
highTr = this.getDisplayValue(this.scope.rzSliderHigh, 'high'),
labelVal = lowTr === highTr ? lowTr : lowTr + ' - ' + highTr;
this.translateFn(labelVal, this.cmbLab, false);
this.translateFn(labelVal, this.cmbLab, 'cmb', false);
var pos = Math.min(
Math.max(
this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2,
......@@ -1041,8 +1041,8 @@
* @param value
* @returns {*}
*/
getDisplayValue: function(value) {
return this.customTrFn(value, this.options.id);
getDisplayValue: function(value, which) {
return this.customTrFn(value, this.options.id, which);
},
/**
......
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