Skip to content

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

Pass the current values to the getSelectionBarColor function so we don't depend… 

Pass the current values to the getSelectionBarColor function so we don't depend on Angular synchronisation.
parent 24c6bf0e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 64 deletions
CHANGELOG.md
View file @ bddea44e
# 2.2.0 (not released yet)
## Features
- Add a `getSelectionBarColor` options to dynamically change the selection bar color (#197).
# 2.1.0 (2015-11-29)
## Features
- Add a `vertical` options to display vertical sliders (#185).
......
README.md
View file @ bddea44e
......@@ -209,7 +209,7 @@ $scope.slider = {
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
**getSelectionBarColor** - _Function (defaults to null)_: Function that returns the current color of the selection bar.
**getSelectionBarColor** - _Function(value) or Function(minVal, maxVal) (defaults to null)_: Function that returns the current color of the selection bar. If the returned color depends on a model value (either `rzScopeModel`or `'rzSliderHigh`), you should use the argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated.
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
......
demo/demo.js
View file @ bddea44e
......@@ -30,13 +30,12 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
value: 12,
options: {
showSelectionBar: true,
getSelectionBarColor: function() {
var currentValue = $scope.color_slider_bar.value;
if (currentValue <= 3)
getSelectionBarColor: function(value) {
if (value <= 3)
return 'red';
if (currentValue <= 6)
if (value <= 6)
return 'orange';
if (currentValue <= 9)
if (value <= 9)
return 'yellow';
return '#2AE02A';
}
......
dist/rzslider.js
View file @ bddea44e
......@@ -377,6 +377,7 @@
this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
this.options.draggableRange = this.range && this.options.draggableRange;
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template
if (this.options.stepsArray) {
this.options.floor = 0;
......@@ -473,8 +474,8 @@
this.cmbLab.rzsp = 0;
},
/** Update each elements style based on options
*
/**
* Update each elements style based on options
*/
manageElementsStyle: function() {
......@@ -490,9 +491,6 @@
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (!this.options.showTicks)
this.ticks.html('');
if (this.options.draggableRange)
this.selBar.addClass('rz-draggable');
else
......@@ -659,34 +657,30 @@
*/
updateTicksScale: function() {
if (!this.options.showTicks) return;
if (!this.step) return; //if step is 0, the following loop will be endless.
if (!this.step) return; //if step is 0, we'll get a zero division
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step),
selected = this.isTickSelected(value),
selectedClass = selected ? 'selected' : '',
customStyle = '';
if (selected && this.options.getSelectionBarColor) {
var color = this.options.getSelectionBarColor();
customStyle = 'style="background-color: ' + color + '"';
var value = this.roundStep(this.minValue + i * this.step);
var tick =   {
selected: this.isTickSelected(value)
};
if (tick.selected && this.options.getSelectionBarColor) {
tick.style = {
'background-color': this.getSelectionBarColor()
};
}
positions += '<li class="tick ' + selectedClass + '" ' + customStyle + '>';
if (this.options.showTicksValues) {
var tooltip = '';
tick.value = this.getDisplayValue(value);
if (this.options.ticksValuesTooltip) {
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
if (this.options.vertical)
tooltip += ' tooltip-placement="right"'
tick.tooltip = this.options.ticksValuesTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
}
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
}
positions += '</li>';
this.scope.ticks.push(tick);
}
this.ticks.html(positions);
if (this.options.ticksValuesTooltip)
$compile(this.ticks.contents())(this.scope);
},
isTickSelected: function(value) {
......@@ -877,11 +871,23 @@
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
if (this.options.getSelectionBarColor) {
var color = this.options.getSelectionBarColor();
this.selBarChild.css({backgroundColor: color});
var color = this.getSelectionBarColor();
this.scope.barStyle = {
backgroundColor: color
};
}
},
/**
* Wrapper around the getSelectionBarColor of the user to pass to
* correct parameters
*/
getSelectionBarColor: function() {
if (this.range)
return this.options.getSelectionBarColor(this.scope.rzSliderModel, this.scope.rzSliderHigh);
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
},
/**
* Update combined label position and value
*
......@@ -1322,7 +1328,7 @@
valueChanged = true;
}
if(valueChanged) {
if (valueChanged) {
this.scope.$apply();
this.callOnChange();
}
......@@ -1445,7 +1451,7 @@
'use strict';
$templateCache.put('rzSliderTpl.html',
"<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul class=rz-ticks></ul>"
"<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style><span ng-if=\"t.value != null && t.tooltip == null\" class=tick-value>{{ t.value }}</span> <span ng-if=\"t.value != null && t.tooltip != null\" class=tick-value uib-tooltip=\"{{ t.tooltip }}\" tooltip-placement={{t.tooltipPlacement}}>{{ t.value }}</span></li></ul>"
);
}]);
......
dist/rzslider.min.css
View file @ bddea44e
/*! angularjs-slider - v2.1.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/rzajac/angularjs-slider.git - 2015-12-08 */
/*! angularjs-slider - v2.1.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/rzajac/angularjs-slider.git - 2015-12-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[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: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%;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 .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.vertical .rz-base{width:100%;height:100%;padding:0}rzslider.vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.vertical .rz-ticks{top:0;left:-3px;z-index:1;width:auto;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.vertical .rz-ticks .tick{vertical-align:middle}rzslider.vertical .rz-ticks .tick .tick-value{top:auto;right:-30px;transform:translate(0,-28%)}
\ No newline at end of file
dist/rzslider.min.js
View file @ bddea44e
This diff is collapsed.
src/rzSliderTpl.html
View file @ bddea44e
<span class="rz-bar-wrapper"><span class="rz-bar"></span></span> <!-- // 0 The slider bar -->
<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span> <!-- // 1 Highlight between two handles -->
<span class="rz-bar-wrapper">
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
</span> <!-- // 1 Highlight between two handles -->
<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
......@@ -7,4 +9,11 @@
<span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
<span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
<ul class="rz-ticks"></ul> <!-- // 9 The ticks -->
<ul ng-show="showTicks" class="rz-ticks"> <!-- // 9 The ticks -->
<li ng-repeat="t in ticks" class="tick" ng-class="{selected: t.selected}"
ng-style="t.style">
<span ng-if="t.value != null && t.tooltip == null" class="tick-value">{{ t.value }}</span>
<span ng-if="t.value != null && t.tooltip != null" class="tick-value"
uib-tooltip="{{ t.tooltip }}" tooltip-placement="{{t.tooltipPlacement}}">{{ t.value }}</span>
</li>
</ul>
src/rzslider.js
View file @ bddea44e
......@@ -377,6 +377,7 @@
this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
this.options.draggableRange = this.range && this.options.draggableRange;
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template
if (this.options.stepsArray) {
this.options.floor = 0;
......@@ -473,8 +474,8 @@
this.cmbLab.rzsp = 0;
},
/** Update each elements style based on options
*
/**
* Update each elements style based on options
*/
manageElementsStyle: function() {
......@@ -490,9 +491,6 @@
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (!this.options.showTicks)
this.ticks.html('');
if (this.options.draggableRange)
this.selBar.addClass('rz-draggable');
else
......@@ -659,34 +657,30 @@
*/
updateTicksScale: function() {
if (!this.options.showTicks) return;
if (!this.step) return; //if step is 0, the following loop will be endless.
if (!this.step) return; //if step is 0, we'll get a zero division
var positions = '',
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step),
selected = this.isTickSelected(value),
selectedClass = selected ? 'selected' : '',
customStyle = '';
if (selected && this.options.getSelectionBarColor) {
var color = this.options.getSelectionBarColor();
customStyle = 'style="background-color: ' + color + '"';
var value = this.roundStep(this.minValue + i * this.step);
var tick =   {
selected: this.isTickSelected(value)
};
if (tick.selected && this.options.getSelectionBarColor) {
tick.style = {
'background-color': this.getSelectionBarColor()
};
}
positions += '<li class="tick ' + selectedClass + '" ' + customStyle + '>';
if (this.options.showTicksValues) {
var tooltip = '';
tick.value = this.getDisplayValue(value);
if (this.options.ticksValuesTooltip) {
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
if (this.options.vertical)
tooltip += ' tooltip-placement="right"'
tick.tooltip = this.options.ticksValuesTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
}
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
}
positions += '</li>';
this.scope.ticks.push(tick);
}
this.ticks.html(positions);
if (this.options.ticksValuesTooltip)
$compile(this.ticks.contents())(this.scope);
},
isTickSelected: function(value) {
......@@ -877,11 +871,23 @@
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
if (this.options.getSelectionBarColor) {
var color = this.options.getSelectionBarColor();
this.selBarChild.css({backgroundColor: color});
var color = this.getSelectionBarColor();
this.scope.barStyle = {
backgroundColor: color
};
}
},
/**
* Wrapper around the getSelectionBarColor of the user to pass to
* correct parameters
*/
getSelectionBarColor: function() {
if (this.range)
return this.options.getSelectionBarColor(this.scope.rzSliderModel, this.scope.rzSliderHigh);
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
},
/**
* Update combined label position and value
*
......@@ -1322,7 +1328,7 @@
valueChanged = true;
}
if(valueChanged) {
if (valueChanged) {
this.scope.$apply();
this.callOnChange();
}
......
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