Skip to content

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

Merge pull request #185 from rzajac/vertical-slider 

Feature - Add a vertical option to display vertical sliders.
parents 49a08bd3 9bb67f35
Hide whitespace changes
Inline Side-by-side
Showing with 531 additions and 209 deletions
README.md
View file @ 13250ca1
...@@ -16,6 +16,14 @@ Slider directive implementation for AngularJS, without any dependencies. ...@@ -16,6 +16,14 @@ Slider directive implementation for AngularJS, without any dependencies.
- Simple to use - Simple to use
- Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas) - Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)
**Horizontal**
![image](https://cloud.githubusercontent.com/assets/2678610/11419158/d51cee88-9425-11e5-9d3f-3f7d97a31c6f.png)
**Vertical**
![image](https://cloud.githubusercontent.com/assets/2678610/11419099/7f4c0e76-9425-11e5-98c6-615412291df1.png)
## Examples ## Examples
- **Various examples:** [http://rzajac.github.io/angularjs-slider/](http://rzajac.github.io/angularjs-slider/index.html) - **Various examples:** [http://rzajac.github.io/angularjs-slider/](http://rzajac.github.io/angularjs-slider/index.html)
...@@ -138,6 +146,7 @@ The default options are: ...@@ -138,6 +146,7 @@ The default options are:
interval: 350, interval: 350,
showTicks: false, showTicks: false,
showTicksValues: false, showTicksValues: false,
vertical: false,
scale: 1, scale: 1,
onStart: null, onStart: null,
onChange: null, onChange: null,
...@@ -204,6 +213,9 @@ $scope.slider = { ...@@ -204,6 +213,9 @@ $scope.slider = {
**onEnd** - _Function(sliderId)_: Function to be called when a slider update is ended. If an id was set in the options, then it's passed to this callback. **onEnd** - _Function(sliderId)_: Function to be called when a slider update is ended. If an id was set in the options, then it's passed to this callback.
**vertical** - _Boolean (defaults to false)_: Set to true to display the slider vertically. The slider will take the full height of its parent.
_Changing this value at runtime is not currently supported._
## Change default options ## Change default options
If you want the change the default options for all the sliders displayed in your application, you can set them using the `RzSliderOptions.options()` method: If you want the change the default options for all the sliders displayed in your application, you can set them using the `RzSliderOptions.options()` method:
```js ```js
......
demo/demo.css
View file @ 13250ca1
...@@ -11,3 +11,10 @@ article { margin-bottom: 10px; } ...@@ -11,3 +11,10 @@ article { margin-bottom: 10px; }
.field-title { .field-title {
width: 100px; width: 100px;
} }
.vertical-sliders {
margin: 0;
}
.vertical-sliders > div {
height: 250px;
}
demo/demo.js
View file @ 13250ca1
...@@ -118,6 +118,66 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -118,6 +118,66 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
}; };
//Vertical sliders
$scope.verticalSlider1 = {
value: 0,
options: {
floor: 0,
ceil: 10,
vertical: true
}
};
$scope.verticalSlider2 = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100,
vertical: true
}
};
$scope.verticalSlider3 = {
value: 5,
options: {
floor: 0,
ceil: 10,
vertical: true,
showTicks: true
}
};
$scope.verticalSlider4 = {
minValue: 1,
maxValue: 5,
options: {
floor: 0,
ceil: 6,
vertical: true,
showTicksValues: true
}
};
$scope.verticalSlider5 = {
value: 50,
options: {
floor: 0,
ceil: 100,
vertical: true,
showSelectionBar: true
}
};
$scope.verticalSlider6 = {
value: 6,
options: {
floor: 0,
ceil: 6,
vertical: true,
showSelectionBar: true,
showTicksValues: true,
ticksValuesTooltip: function(v) {
return 'Tooltip for ' + v;
}
}
};
//Read-only slider //Read-only slider
$scope.read_only_slider = { $scope.read_only_slider = {
value: 50, value: 50,
......
demo/index.html
View file @ 13250ca1
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
rz-slider-model="minRangeSlider.minValue" rz-slider-model="minRangeSlider.minValue"
rz-slider-high="minRangeSlider.maxValue" rz-slider-high="minRangeSlider.maxValue"
rz-slider-options="minRangeSlider.options" rz-slider-options="minRangeSlider.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<rzslider <rzslider
rz-slider-model="slider_visible_bar.value" rz-slider-model="slider_visible_bar.value"
rz-slider-options="slider_visible_bar.options" rz-slider-options="slider_visible_bar.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<rzslider <rzslider
rz-slider-model="slider_floor_ceil.value" rz-slider-model="slider_floor_ceil.value"
rz-slider-options="slider_floor_ceil.options" rz-slider-options="slider_floor_ceil.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
<rzslider <rzslider
rz-slider-model="slider_callbacks.value" rz-slider-model="slider_callbacks.value"
rz-slider-options="slider_callbacks.options" rz-slider-options="slider_callbacks.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
rz-slider-model="slider_translate.minValue" rz-slider-model="slider_translate.minValue"
rz-slider-high="slider_translate.maxValue" rz-slider-high="slider_translate.maxValue"
rz-slider-options="slider_translate.options" rz-slider-options="slider_translate.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<rzslider <rzslider
rz-slider-model="slider_alphabet.value" rz-slider-model="slider_alphabet.value"
rz-slider-options="slider_alphabet.options" rz-slider-options="slider_alphabet.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
<rzslider <rzslider
rz-slider-model="slider_ticks.value" rz-slider-model="slider_ticks.value"
rz-slider-options="slider_ticks.options" rz-slider-options="slider_ticks.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
<rzslider <rzslider
rz-slider-model="slider_ticks_values.value" rz-slider-model="slider_ticks_values.value"
rz-slider-options="slider_ticks_values.options" rz-slider-options="slider_ticks_values.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
rz-slider-model="range_slider_ticks_values.minValue" rz-slider-model="range_slider_ticks_values.minValue"
rz-slider-high="range_slider_ticks_values.maxValue" rz-slider-high="range_slider_ticks_values.maxValue"
rz-slider-options="range_slider_ticks_values.options" rz-slider-options="range_slider_ticks_values.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -112,7 +112,33 @@ ...@@ -112,7 +112,33 @@
rz-slider-model="slider_draggable_range.minValue" rz-slider-model="slider_draggable_range.minValue"
rz-slider-high="slider_draggable_range.maxValue" rz-slider-high="slider_draggable_range.maxValue"
rz-slider-options="slider_draggable_range.options" rz-slider-options="slider_draggable_range.options"
></rzslider> ></rzslider>
</article>
<article>
<h2>Vertical sliders</h2>
<div class="row vertical-sliders" style="margin: 20px;">
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
rz-slider-options="verticalSlider2.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
rz-slider-options="verticalSlider4.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider5.value" rz-slider-options="verticalSlider5.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider6.value" rz-slider-options="verticalSlider6.options"></rzslider>
</div>
</div>
</article> </article>
<article> <article>
...@@ -121,7 +147,7 @@ ...@@ -121,7 +147,7 @@
<rzslider <rzslider
rz-slider-model="disabled_slider.value" rz-slider-model="disabled_slider.value"
rz-slider-options="disabled_slider.options" rz-slider-options="disabled_slider.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -130,7 +156,7 @@ ...@@ -130,7 +156,7 @@
<rzslider <rzslider
rz-slider-model="read_only_slider.value" rz-slider-model="read_only_slider.value"
rz-slider-options="read_only_slider.options" rz-slider-options="read_only_slider.options"
></rzslider> ></rzslider>
</article> </article>
<article> <article>
...@@ -194,7 +220,7 @@ ...@@ -194,7 +220,7 @@
rz-slider-model="slider_all_options.minValue" rz-slider-model="slider_all_options.minValue"
rz-slider-high="slider_all_options.maxValue" rz-slider-high="slider_all_options.maxValue"
rz-slider-options="slider_all_options.options" rz-slider-options="slider_all_options.options"
></rzslider> ></rzslider>
</article> </article>
</div> </div>
......
dist/rzslider.css
View file @ 13250ca1
...@@ -161,4 +161,74 @@ rzslider .rz-ticks .tick .tick-value { ...@@ -161,4 +161,74 @@ rzslider .rz-ticks .tick .tick-value {
position: absolute; position: absolute;
top: -30px; top: -30px;
transform: translate(-50%, 0); 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.js
View file @ 13250ca1
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
showTicks: false, showTicks: false,
showTicksValues: false, showTicksValues: false,
ticksValuesTooltip: null, ticksValuesTooltip: null,
vertical: false,
scale: 1, scale: 1,
onStart: null, onStart: null,
onChange: null, onChange: null,
...@@ -171,18 +172,30 @@ ...@@ -171,18 +172,30 @@
}; };
/** /**
* Half of the width of the slider handles * property that handle position (defaults to left for horizontal)
* @type {string}
*/
this.positionProperty = 'left';
/**
* property that handle dimension (defaults to width for horizontal)
* @type {string}
*/
this.dimensionProperty = 'width';
/**
* Half of the width or height of the slider handles
* *
* @type {number} * @type {number}
*/ */
this.handleHalfWidth = 0; this.handleHalfDim = 0;
/** /**
* Maximum left the slider handle can have * Maximum position the slider handle can have
* *
* @type {number} * @type {number}
*/ */
this.maxLeft = 0; this.maxPos = 0;
/** /**
* Precision * Precision
...@@ -285,6 +298,9 @@ ...@@ -285,6 +298,9 @@
// Recalculate stuff if view port dimensions have changed // Recalculate stuff if view port dimensions have changed
angular.element($window).on('resize', calcDimFn); angular.element($window).on('resize', calcDimFn);
if (this.options.vertical)
this.sliderElem.addClass('vertical');
this.initHasRun = true; this.initHasRun = true;
// Watch for changes to the model // Watch for changes to the model
...@@ -368,12 +384,18 @@ ...@@ -368,12 +384,18 @@
this.customTrFn = function(value) { this.customTrFn = function(value) {
return this.options.stepsArray[value]; return this.options.stepsArray[value];
}; };
} else if (this.options.translate) }
else if (this.options.translate)
this.customTrFn = this.options.translate; this.customTrFn = this.options.translate;
else else
this.customTrFn = function(value) { this.customTrFn = function(value) {
return String(value); return String(value);
}; };
if (this.options.vertical) {
this.positionProperty = 'bottom';
this.dimensionProperty = 'height';
}
}, },
/** /**
...@@ -440,14 +462,14 @@ ...@@ -440,14 +462,14 @@
}, this); }, this);
// Initialize offset cache properties // Initialize offset cache properties
this.selBar.rzsl = 0; this.selBar.rzsp = 0;
this.minH.rzsl = 0; this.minH.rzsp = 0;
this.maxH.rzsl = 0; this.maxH.rzsp = 0;
this.flrLab.rzsl = 0; this.flrLab.rzsp = 0;
this.ceilLab.rzsl = 0; this.ceilLab.rzsp = 0;
this.minLab.rzsl = 0; this.minLab.rzsp = 0;
this.maxLab.rzsl = 0; this.maxLab.rzsp = 0;
this.cmbLab.rzsl = 0; this.cmbLab.rzsp = 0;
}, },
/** Update each elements style based on options /** Update each elements style based on options
...@@ -554,18 +576,18 @@ ...@@ -554,18 +576,18 @@
useCustomTr = useCustomTr === undefined ? true : 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) : value)),
getWidth = false; getDimension = false;
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0)) { if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsd === 0)) {
getWidth = true; getDimension = true;
label.rzsv = valStr; label.rzsv = valStr;
} }
label.text(valStr); label.text(valStr);
// Update width only when length of the label have changed // Update width only when length of the label have changed
if (getWidth) { if (getDimension) {
this.getWidth(label); this.getDimension(label);
} }
}, },
...@@ -612,15 +634,15 @@ ...@@ -612,15 +634,15 @@
* @returns {undefined} * @returns {undefined}
*/ */
calcViewDimensions: function() { calcViewDimensions: function() {
var handleWidth = this.getWidth(this.minH); var handleWidth = this.getDimension(this.minH);
this.handleHalfWidth = handleWidth / 2; this.handleHalfDim = handleWidth / 2;
this.barWidth = this.getWidth(this.fullBar); this.barDimension = this.getDimension(this.fullBar);
this.maxLeft = this.barWidth - handleWidth; this.maxPos = this.barDimension - handleWidth;
this.getWidth(this.sliderElem); this.getDimension(this.sliderElem);
this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left; this.sliderElem.rzsp = this.sliderElem[0].getBoundingClientRect()[this.positionProperty];
if (this.initHasRun) { if (this.initHasRun) {
this.updateFloorLab(); this.updateFloorLab();
...@@ -648,6 +670,8 @@ ...@@ -648,6 +670,8 @@
var tooltip = ''; var tooltip = '';
if (this.options.ticksValuesTooltip) { if (this.options.ticksValuesTooltip) {
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"'; tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
if(this.options.vertical)
tooltip += ' tooltip-placement="right"'
} }
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>'; positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
} }
...@@ -673,8 +697,8 @@ ...@@ -673,8 +697,8 @@
*/ */
updateCeilLab: function() { updateCeilLab: function() {
this.translateFn(this.maxValue, this.ceilLab); this.translateFn(this.maxValue, this.ceilLab);
this.setLeft(this.ceilLab, this.barWidth - this.ceilLab.rzsw); this.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
this.getWidth(this.ceilLab); this.getDimension(this.ceilLab);
}, },
/** /**
...@@ -684,7 +708,7 @@ ...@@ -684,7 +708,7 @@
*/ */
updateFloorLab: function() { updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab); this.translateFn(this.minValue, this.flrLab);
this.getWidth(this.flrLab); this.getDimension(this.flrLab);
}, },
/** /**
...@@ -773,10 +797,10 @@ ...@@ -773,10 +797,10 @@
* @returns {undefined} * @returns {undefined}
*/ */
updateLowHandle: function(newOffset) { updateLowHandle: function(newOffset) {
this.setLeft(this.minH, newOffset); this.setPosition(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab); this.translateFn(this.scope.rzSliderModel, this.minLab);
var left = Math.min(Math.max(newOffset - this.minLab.rzsw / 2 + this.handleHalfWidth, 0), this.barWidth - this.ceilLab.rzsw); var pos = Math.min(Math.max(newOffset - this.minLab.rzsd / 2 + this.handleHalfDim, 0), this.barDimension - this.ceilLab.rzsd);
this.setLeft(this.minLab, left); this.setPosition(this.minLab, pos);
this.shFloorCeil(); this.shFloorCeil();
}, },
...@@ -788,10 +812,10 @@ ...@@ -788,10 +812,10 @@
* @returns {undefined} * @returns {undefined}
*/ */
updateHighHandle: function(newOffset) { updateHighHandle: function(newOffset) {
this.setLeft(this.maxH, newOffset); this.setPosition(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab); this.translateFn(this.scope.rzSliderHigh, this.maxLab);
var left = Math.min((newOffset - this.maxLab.rzsw / 2 + this.handleHalfWidth), (this.barWidth - this.ceilLab.rzsw)); var pos = Math.min((newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim), (this.barDimension - this.ceilLab.rzsd));
this.setLeft(this.maxLab, left); this.setPosition(this.maxLab, pos);
this.shFloorCeil(); this.shFloorCeil();
}, },
...@@ -805,7 +829,7 @@ ...@@ -805,7 +829,7 @@
var flHidden = false, var flHidden = false,
clHidden = false; clHidden = false;
if (this.minLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + 5) { if (this.minLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + 5) {
flHidden = true; flHidden = true;
this.hideEl(this.flrLab); this.hideEl(this.flrLab);
} else { } else {
...@@ -813,7 +837,7 @@ ...@@ -813,7 +837,7 @@
this.showEl(this.flrLab); this.showEl(this.flrLab);
} }
if (this.minLab.rzsl + this.minLab.rzsw >= this.ceilLab.rzsl - this.handleHalfWidth - 10) { if (this.minLab.rzsp + this.minLab.rzsd >= this.ceilLab.rzsp - this.handleHalfDim - 10) {
clHidden = true; clHidden = true;
this.hideEl(this.ceilLab); this.hideEl(this.ceilLab);
} else { } else {
...@@ -822,14 +846,14 @@ ...@@ -822,14 +846,14 @@
} }
if (this.range) { if (this.range) {
if (this.maxLab.rzsl + this.maxLab.rzsw >= this.ceilLab.rzsl - 10) { if (this.maxLab.rzsp + this.maxLab.rzsd >= this.ceilLab.rzsp - 10) {
this.hideEl(this.ceilLab); this.hideEl(this.ceilLab);
} else if (!clHidden) { } else if (!clHidden) {
this.showEl(this.ceilLab); this.showEl(this.ceilLab);
} }
// Hide or show floor label // Hide or show floor label
if (this.maxLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + this.handleHalfWidth) { if (this.maxLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + this.handleHalfDim) {
this.hideEl(this.flrLab); this.hideEl(this.flrLab);
} else if (!flHidden) { } else if (!flHidden) {
this.showEl(this.flrLab); this.showEl(this.flrLab);
...@@ -843,8 +867,8 @@ ...@@ -843,8 +867,8 @@
* @returns {undefined} * @returns {undefined}
*/ */
updateSelectionBar: function() { updateSelectionBar: function() {
this.setWidth(this.selBar, Math.abs(this.maxH.rzsl - this.minH.rzsl) + this.handleHalfWidth); this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
this.setLeft(this.selBar, this.range ? this.minH.rzsl + this.handleHalfWidth : 0); this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
}, },
/** /**
...@@ -855,13 +879,13 @@ ...@@ -855,13 +879,13 @@
updateCmbLabel: function() { updateCmbLabel: function() {
var lowTr, highTr; var lowTr, highTr;
if (this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl) { if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
lowTr = this.getDisplayValue(this.scope.rzSliderModel); lowTr = this.getDisplayValue(this.scope.rzSliderModel);
highTr = this.getDisplayValue(this.scope.rzSliderHigh); highTr = this.getDisplayValue(this.scope.rzSliderHigh);
this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false); this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
var left = Math.min(Math.max((this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2),0),(this.barWidth - this.cmbLab.rzsw)); var pos = Math.min(Math.max((this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2), 0), (this.barDimension - this.cmbLab.rzsd));
this.setLeft(this.cmbLab, left); this.setPosition(this.cmbLab, pos);
this.hideEl(this.minLab); this.hideEl(this.minLab);
this.hideEl(this.maxLab); this.hideEl(this.maxLab);
this.showEl(this.cmbLab); this.showEl(this.cmbLab);
...@@ -925,45 +949,48 @@ ...@@ -925,45 +949,48 @@
}, },
/** /**
* Set element left offset * Set element left/top offset depending on whether slider is horizontal or vertical
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} left * @param {number} pos
* @returns {number} * @returns {number}
*/ */
setLeft: function(elem, left) { setPosition: function(elem, pos) {
elem.rzsl = left; elem.rzsp = pos;
elem.css({ var css = {};
left: left + 'px' css[this.positionProperty] = pos + 'px';
}); elem.css(css);
return left; return pos;
}, },
/** /**
* Get element width * Get element width/height depending on whether slider is horizontal or vertical
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {jqLite} elem The jqLite wrapped DOM element
* @returns {number} * @returns {number}
*/ */
getWidth: function(elem) { getDimension: function(elem) {
var val = elem[0].getBoundingClientRect(); var val = elem[0].getBoundingClientRect();
elem.rzsw = (val.right - val.left) * this.options.scale; if (this.options.vertical)
return elem.rzsw; elem.rzsd = (val.bottom - val.top) * this.options.scale;
else
elem.rzsd = (val.right - val.left) * this.options.scale;
return elem.rzsd;
}, },
/** /**
* Set element width * Set element width/height depending on whether slider is horizontal or vertical
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} width * @param {number} dim
* @returns {number} * @returns {number}
*/ */
setWidth: function(elem, width) { setDimension: function(elem, dim) {
elem.rzsw = width; elem.rzsd = dim;
elem.css({ var css = {};
width: width + 'px' css[this.dimensionProperty] = dim + 'px';
}); elem.css(css);
return width; return dim;
}, },
/** /**
...@@ -973,7 +1000,7 @@ ...@@ -973,7 +1000,7 @@
* @returns {number} * @returns {number}
*/ */
valueToOffset: function(val) { valueToOffset: function(val) {
return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxLeft / this.valueRange || 0; return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxPos / this.valueRange || 0;
}, },
/** /**
...@@ -993,26 +1020,42 @@ ...@@ -993,26 +1020,42 @@
* @returns {number} * @returns {number}
*/ */
offsetToValue: function(offset) { offsetToValue: function(offset) {
return (offset / this.maxLeft) * this.valueRange + this.minValue; return (offset / this.maxPos) * this.valueRange + this.minValue;
}, },
// Events // Events
/** /**
* Get the X-coordinate of an event * Get the X-coordinate or Y-coordinate of an event
* *
* @param {Object} event The event * @param {Object} event The event
* @returns {number} * @returns {number}
*/ */
getEventX: function(event) { getEventXY: function(event) {
/* http://stackoverflow.com/a/12336075/282882 */ /* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint //noinspection JSLint
if ('clientX' in event) { var clientXY = this.options.vertical ? 'clientY' : 'clientX';
return event.clientX; if (clientXY in event) {
return event[clientXY];
} }
return event.originalEvent === undefined ? return event.originalEvent === undefined ?
event.touches[0].clientX : event.originalEvent.touches[0].clientX; event.touches[0][clientXY] : event.originalEvent.touches[0][clientXY];
},
/**
* Compute the event position depending on whether the slider is horizontal or vertical
* @param event
* @returns {number}
*/
getEventPosition: function(event) {
var sliderPos = this.sliderElem.rzsp,
eventPos = 0;
if (this.options.vertical)
eventPos = -this.getEventXY(event) + sliderPos;
else
eventPos = this.getEventXY(event) - sliderPos;
return (eventPos - this.handleHalfDim) * this.options.scale;
}, },
/** /**
...@@ -1025,8 +1068,8 @@ ...@@ -1025,8 +1068,8 @@
if (!this.range) { if (!this.range) {
return this.minH; return this.minH;
} }
var offset = (this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth) * this.options.scale; var offset = this.getEventPosition(event);
return Math.abs(offset - this.minH.rzsl) < Math.abs(offset - this.maxH.rzsl) ? this.minH : this.maxH; return Math.abs(offset - this.minH.rzsp) < Math.abs(offset - this.maxH.rzsp) ? this.minH : this.maxH;
}, },
/** /**
...@@ -1132,22 +1175,19 @@ ...@@ -1132,22 +1175,19 @@
* @returns {undefined} * @returns {undefined}
*/ */
onMove: function(pointer, event) { onMove: function(pointer, event) {
var eventX = this.getEventX(event), var newOffset = this.getEventPosition(event),
sliderLO, newOffset, newValue; newValue;
sliderLO = this.sliderElem.rzsl;
newOffset = (eventX - sliderLO - this.handleHalfWidth) * this.options.scale;
if (newOffset <= 0) { if (newOffset <= 0) {
if (pointer.rzsl === 0) if (pointer.rzsp === 0)
return; return;
newValue = this.minValue; newValue = this.minValue;
newOffset = 0; newOffset = 0;
} else if (newOffset >= this.maxLeft) { } else if (newOffset >= this.maxPos) {
if (pointer.rzsl === this.maxLeft) if (pointer.rzsp === this.maxPos)
return; return;
newValue = this.maxValue; newValue = this.maxValue;
newOffset = this.maxLeft; newOffset = this.maxPos;
} else { } else {
newValue = this.offsetToValue(newOffset); newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue); newValue = this.roundStep(newValue);
...@@ -1167,14 +1207,14 @@ ...@@ -1167,14 +1207,14 @@
* @returns {undefined} * @returns {undefined}
*/ */
onDragStart: function(pointer, ref, event) { onDragStart: function(pointer, ref, event) {
var offset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth; var offset = this.getEventPosition(event);
this.dragging = { this.dragging = {
active: true, active: true,
value: this.offsetToValue(offset), value: this.offsetToValue(offset),
difference: this.scope.rzSliderHigh - this.scope.rzSliderModel, difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
offset: offset, offset: offset,
lowDist: offset - this.minH.rzsl, lowDist: offset - this.minH.rzsp,
highDist: this.maxH.rzsl - offset highDist: this.maxH.rzsp - offset
}; };
this.minH.addClass('rz-active'); this.minH.addClass('rz-active');
this.maxH.addClass('rz-active'); this.maxH.addClass('rz-active');
...@@ -1192,24 +1232,24 @@ ...@@ -1192,24 +1232,24 @@
* @returns {undefined} * @returns {undefined}
*/ */
onDragMove: function(pointer, event) { onDragMove: function(pointer, event) {
var newOffset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth, var newOffset = this.getEventPosition(event),
newMinOffset, newMaxOffset, newMinOffset, newMaxOffset,
newMinValue, newMaxValue; newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowDist) { if (newOffset <= this.dragging.lowDist) {
if (pointer.rzsl === this.dragging.lowDist) { if (pointer.rzsp === this.dragging.lowDist) {
return; return;
} }
newMinValue = this.minValue; newMinValue = this.minValue;
newMinOffset = 0; newMinOffset = 0;
newMaxValue = this.minValue + this.dragging.difference; newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue); newMaxOffset = this.valueToOffset(newMaxValue);
} else if (newOffset >= this.maxLeft - this.dragging.highDist) { } else if (newOffset >= this.maxPos - this.dragging.highDist) {
if (pointer.rzsl === this.dragging.highDist) { if (pointer.rzsp === this.dragging.highDist) {
return; return;
} }
newMaxValue = this.maxValue; newMaxValue = this.maxValue;
newMaxOffset = this.maxLeft; newMaxOffset = this.maxPos;
newMinValue = this.maxValue - this.dragging.difference; newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue); newMinOffset = this.valueToOffset(newMinValue);
} else { } else {
...@@ -1251,7 +1291,7 @@ ...@@ -1251,7 +1291,7 @@
/* This is to check if we need to switch the min and max handles*/ /* This is to check if we need to switch the min and max handles*/
if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) { if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) {
this.scope[this.tracking] = this.scope.rzSliderHigh; this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsl); this.updateHandles(this.tracking, this.maxH.rzsp);
this.tracking = 'rzSliderHigh'; this.tracking = 'rzSliderHigh';
this.minH.removeClass('rz-active'); this.minH.removeClass('rz-active');
this.maxH.addClass('rz-active'); this.maxH.addClass('rz-active');
...@@ -1260,7 +1300,7 @@ ...@@ -1260,7 +1300,7 @@
this.callOnChange(); this.callOnChange();
} else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) { } else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) {
this.scope[this.tracking] = this.scope.rzSliderModel; this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsl); this.updateHandles(this.tracking, this.minH.rzsp);
this.tracking = 'rzSliderModel'; this.tracking = 'rzSliderModel';
this.maxH.removeClass('rz-active'); this.maxH.removeClass('rz-active');
this.minH.addClass('rz-active'); this.minH.addClass('rz-active');
...@@ -1371,8 +1411,8 @@ ...@@ -1371,8 +1411,8 @@
/** /**
* @name jqLite * @name jqLite
* *
* @property {number|undefined} rzsl rzslider label left offset * @property {number|undefined} rzsp rzslider label position offset
* @property {number|undefined} rzsw rzslider element width * @property {number|undefined} rzsd rzslider element dimension
* @property {string|undefined} rzsv rzslider label value/text * @property {string|undefined} rzsv rzslider label value/text
* @property {Function} css * @property {Function} css
* @property {Function} text * @property {Function} text
......
dist/rzslider.min.css
View file @ 13250ca1
/*! angularjs-slider - v2.0.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-11-23 */ /*! angularjs-slider - v2.0.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-11-26 */
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{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 \ No newline at end of file
dist/rzslider.min.js
View file @ 13250ca1
/*! angularjs-slider - v2.0.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-11-23 */ /*! angularjs-slider - v2.0.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-11-26 */
!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["angular"],b):"object"==typeof module&&module.exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){"use strict";var b=a.module("rzModule",[]).factory("RzSliderOptions",function(){var b={floor:0,ceil:null,step:1,precision:0,id:null,translate:null,stepsArray:null,draggableRange:!1,showSelectionBar:!1,hideLimitLabels:!1,readOnly:!1,disabled:!1,interval:350,showTicks:!1,showTicksValues:!1,ticksValuesTooltip:null,scale:1,onStart:null,onChange:null,onEnd:null},c={},d={};return d.options=function(b){a.extend(c,b)},d.getOptions=function(d){return a.extend({},b,c,d)},d}).value("rzThrottle",function(a,b,c){var d,e,f,g=Date.now||function(){return(new Date).getTime()},h=null,i=0;c=c||{};var j=function(){i=c.leading===!1?0:g(),h=null,f=a.apply(d,e),d=e=null};return function(){var k=g();i||c.leading!==!1||(i=k);var l=b-(k-i);return d=this,e=arguments,0>=l?(clearTimeout(h),h=null,i=k,f=a.apply(d,e),d=e=null):h||c.trailing===!1||(h=setTimeout(j,l)),f}}).factory("RzSlider",["$timeout","$document","$window","$compile","RzSliderOptions","rzThrottle",function(b,c,d,e,f,g){var h=function(a,b){this.scope=a,this.sliderElem=b,this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.dragging={active:!1,value:0,difference:0,offset:0,lowDist:0,highDist:0},this.handleHalfWidth=0,this.maxLeft=0,this.precision=0,this.step=0,this.tracking="",this.minValue=0,this.maxValue=0,this.valueRange=0,this.initHasRun=!1,this.fullBar=null,this.selBar=null,this.minH=null,this.maxH=null,this.flrLab=null,this.ceilLab=null,this.minLab=null,this.maxLab=null,this.cmbLab=null,this.ticks=null,this.init()};return h.prototype={init:function(){var c,e,f=a.bind(this,this.calcViewDimensions),h=this;this.applyOptions(),this.initElemHandles(),this.manageElementsStyle(),this.addAccessibility(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions(),this.setMinAndMax(),b(function(){h.updateCeilLab(),h.updateFloorLab(),h.initHandles(),h.bindEvents()}),this.scope.$on("reCalcViewDimensions",f),a.element(d).on("resize",f),this.initHasRun=!0,c=g(function(){h.setMinAndMax(),h.updateLowHandle(h.valueToOffset(h.scope.rzSliderModel)),h.updateSelectionBar(),h.updateTicksScale(),h.range&&h.updateCmbLabel()},h.options.interval),e=g(function(){h.setMinAndMax(),h.updateHighHandle(h.valueToOffset(h.scope.rzSliderHigh)),h.updateSelectionBar(),h.updateTicksScale(),h.updateCmbLabel()},h.options.interval),this.scope.$on("rzSliderForceRender",function(){h.resetLabelsValue(),c(),h.range&&e(),h.resetSlider()}),this.scope.$watch("rzSliderModel",function(a,b){a!==b&&c()}),this.scope.$watch("rzSliderHigh",function(a,b){a!==b&&(null!=a&&e(),(h.range&&null==a||!h.range&&null!=a)&&(h.applyOptions(),h.resetSlider()))}),this.scope.$watch("rzSliderOptions",function(a,b){a!==b&&(h.applyOptions(),h.resetSlider())},!0),this.scope.$on("$destroy",function(){h.unbindEvents(),a.element(d).off("resize",f)})},applyOptions:function(){this.options=f.getOptions(this.scope.rzSliderOptions),this.options.step<=0&&(this.options.step=1),this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.options.draggableRange=this.range&&this.options.draggableRange,this.options.showTicks=this.options.showTicks||this.options.showTicksValues,this.options.stepsArray?(this.options.floor=0,this.options.ceil=this.options.stepsArray.length-1,this.options.step=1,this.customTrFn=function(a){return this.options.stepsArray[a]}):this.options.translate?this.customTrFn=this.options.translate:this.customTrFn=function(a){return String(a)}},resetSlider:function(){this.manageElementsStyle(),this.setMinAndMax(),this.updateCeilLab(),this.updateFloorLab(),this.unbindEvents(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions()},initElemHandles:function(){a.forEach(this.sliderElem.children(),function(b,c){var d=a.element(b);switch(c){case 0:this.fullBar=d;break;case 1:this.selBar=d;break;case 2:this.minH=d;break;case 3:this.maxH=d;break;case 4:this.flrLab=d;break;case 5:this.ceilLab=d;break;case 6:this.minLab=d;break;case 7:this.maxLab=d;break;case 8:this.cmbLab=d;break;case 9:this.ticks=d}},this),this.selBar.rzsl=0,this.minH.rzsl=0,this.maxH.rzsl=0,this.flrLab.rzsl=0,this.ceilLab.rzsl=0,this.minLab.rzsl=0,this.maxLab.rzsl=0,this.cmbLab.rzsl=0},manageElementsStyle:function(){this.range?this.maxH.css("display",null):this.maxH.css("display","none"),this.alwaysHide(this.flrLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.ceilLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.minLab,this.options.showTicksValues),this.alwaysHide(this.maxLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.cmbLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.selBar,!this.range&&!this.options.showSelectionBar),this.options.showTicks||this.ticks.html(""),this.options.draggableRange?this.selBar.addClass("rz-draggable"):this.selBar.removeClass("rz-draggable")},alwaysHide:function(a,b){a.rzAlwaysHide=b,b?this.hideEl(a):this.showEl(a)},manageEventsBindings:function(){this.options.disabled||this.options.readOnly?this.unbindEvents():this.options.disabled&&this.options.readOnly||this.bindEvents()},setDisabledState:function(){this.options.disabled?this.sliderElem.attr("disabled","disabled"):this.sliderElem.attr("disabled",null)},resetLabelsValue:function(){this.minLab.rzsv=void 0,this.maxLab.rzsv=void 0},initHandles:function(){this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.range&&this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateSelectionBar(),this.range&&this.updateCmbLabel(),this.updateTicksScale()},translateFn:function(a,b,c){c=void 0===c?!0:c;var d=String(c?this.customTrFn(a,this.options.id):a),e=!1;(void 0===b.rzsv||b.rzsv.length!==d.length||b.rzsv.length>0&&0===b.rzsw)&&(e=!0,b.rzsv=d),b.text(d),e&&this.getWidth(b)},setMinAndMax:function(){this.step=+this.options.step,this.precision=+this.options.precision,this.scope.rzSliderModel=this.roundStep(this.scope.rzSliderModel),this.range&&(this.scope.rzSliderHigh=this.roundStep(this.scope.rzSliderHigh)),this.minValue=this.roundStep(+this.options.floor),null!=this.options.ceil?this.maxValue=this.roundStep(+this.options.ceil):this.maxValue=this.options.ceil=this.range?this.scope.rzSliderHigh:this.scope.rzSliderModel,this.valueRange=this.maxValue-this.minValue},addAccessibility:function(){this.sliderElem.attr("role","slider")},calcViewDimensions:function(){var a=this.getWidth(this.minH);this.handleHalfWidth=a/2,this.barWidth=this.getWidth(this.fullBar),this.maxLeft=this.barWidth-a,this.getWidth(this.sliderElem),this.sliderElem.rzsl=this.sliderElem[0].getBoundingClientRect().left,this.initHasRun&&(this.updateFloorLab(),this.updateCeilLab(),this.initHandles())},updateTicksScale:function(){if(this.options.showTicks&&this.step){for(var a="",b=Math.round((this.maxValue-this.minValue)/this.step)+1,c=0;b>c;c++){var d=this.roundStep(this.minValue+c*this.step),f=this.isTickSelected(d)?"selected":"";if(a+='<li class="tick '+f+'">',this.options.showTicksValues){var g="";this.options.ticksValuesTooltip&&(g='uib-tooltip="'+this.options.ticksValuesTooltip(d)+'"'),a+="<span "+g+' class="tick-value">'+this.getDisplayValue(d)+"</span>"}a+="</li>"}this.ticks.html(a),this.options.ticksValuesTooltip&&e(this.ticks.contents())(this.scope)}},isTickSelected:function(a){return!this.range&&this.options.showSelectionBar&&a<=this.scope.rzSliderModel?!0:this.range&&a>=this.scope.rzSliderModel&&a<=this.scope.rzSliderHigh?!0:!1},updateCeilLab:function(){this.translateFn(this.maxValue,this.ceilLab),this.setLeft(this.ceilLab,this.barWidth-this.ceilLab.rzsw),this.getWidth(this.ceilLab)},updateFloorLab:function(){this.translateFn(this.minValue,this.flrLab),this.getWidth(this.flrLab)},callOnStart:function(){if(this.options.onStart){var a=this;b(function(){a.options.onStart(a.options.id)})}},callOnChange:function(){if(this.options.onChange){var a=this;b(function(){a.options.onChange(a.options.id)})}},callOnEnd:function(){if(this.options.onEnd){var a=this;b(function(){a.options.onEnd(a.options.id)})}},updateHandles:function(a,b){return"rzSliderModel"===a?(this.updateLowHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void(this.range&&this.updateCmbLabel())):"rzSliderHigh"===a?(this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void(this.range&&this.updateCmbLabel())):(this.updateLowHandle(b),this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void this.updateCmbLabel())},updateLowHandle:function(a){this.setLeft(this.minH,a),this.translateFn(this.scope.rzSliderModel,this.minLab);var b=Math.min(Math.max(a-this.minLab.rzsw/2+this.handleHalfWidth,0),this.barWidth-this.ceilLab.rzsw);this.setLeft(this.minLab,b),this.shFloorCeil()},updateHighHandle:function(a){this.setLeft(this.maxH,a),this.translateFn(this.scope.rzSliderHigh,this.maxLab);var b=Math.min(a-this.maxLab.rzsw/2+this.handleHalfWidth,this.barWidth-this.ceilLab.rzsw);this.setLeft(this.maxLab,b),this.shFloorCeil()},shFloorCeil:function(){var a=!1,b=!1;this.minLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+5?(a=!0,this.hideEl(this.flrLab)):(a=!1,this.showEl(this.flrLab)),this.minLab.rzsl+this.minLab.rzsw>=this.ceilLab.rzsl-this.handleHalfWidth-10?(b=!0,this.hideEl(this.ceilLab)):(b=!1,this.showEl(this.ceilLab)),this.range&&(this.maxLab.rzsl+this.maxLab.rzsw>=this.ceilLab.rzsl-10?this.hideEl(this.ceilLab):b||this.showEl(this.ceilLab),this.maxLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+this.handleHalfWidth?this.hideEl(this.flrLab):a||this.showEl(this.flrLab))},updateSelectionBar:function(){this.setWidth(this.selBar,Math.abs(this.maxH.rzsl-this.minH.rzsl)+this.handleHalfWidth),this.setLeft(this.selBar,this.range?this.minH.rzsl+this.handleHalfWidth:0)},updateCmbLabel:function(){var a,b;if(this.minLab.rzsl+this.minLab.rzsw+10>=this.maxLab.rzsl){a=this.getDisplayValue(this.scope.rzSliderModel),b=this.getDisplayValue(this.scope.rzSliderHigh),this.translateFn(a+" - "+b,this.cmbLab,!1);var c=Math.min(Math.max(this.selBar.rzsl+this.selBar.rzsw/2-this.cmbLab.rzsw/2,0),this.barWidth-this.cmbLab.rzsw);this.setLeft(this.cmbLab,c),this.hideEl(this.minLab),this.hideEl(this.maxLab),this.showEl(this.cmbLab)}else this.showEl(this.maxLab),this.showEl(this.minLab),this.hideEl(this.cmbLab)},getDisplayValue:function(a){return this.customTrFn(a,this.options.id)},roundStep:function(a){var b=this.step,c=+((a-this.minValue)%b).toFixed(3),d=c>b/2?a+b-c:a-c;return d=d.toFixed(this.precision),+d},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.rzAlwaysHide?a:a.css({opacity:1})},setLeft:function(a,b){return a.rzsl=b,a.css({left:b+"px"}),b},getWidth:function(a){var b=a[0].getBoundingClientRect();return a.rzsw=(b.right-b.left)*this.options.scale,a.rzsw},setWidth:function(a,b){return a.rzsw=b,a.css({width:b+"px"}),b},valueToOffset:function(a){return(this.sanitizeOffsetValue(a)-this.minValue)*this.maxLeft/this.valueRange||0},sanitizeOffsetValue:function(a){return Math.min(Math.max(a,this.minValue),this.maxValue)},offsetToValue:function(a){return a/this.maxLeft*this.valueRange+this.minValue},getEventX:function(a){return"clientX"in a?a.clientX:void 0===a.originalEvent?a.touches[0].clientX:a.originalEvent.touches[0].clientX},getNearestHandle:function(a){if(!this.range)return this.minH;var b=(this.getEventX(a)-this.sliderElem.rzsl-this.handleHalfWidth)*this.options.scale;return Math.abs(b-this.minH.rzsl)<Math.abs(b-this.maxH.rzsl)?this.minH:this.maxH},bindEvents:function(){if(!this.options.readOnly&&!this.options.disabled){var b,c,d;this.options.draggableRange?(b="rzSliderDrag",c=this.onDragStart,d=this.onDragMove):(b="rzSliderModel",c=this.onStart,d=this.onMove),this.minH.on("mousedown",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("mousedown",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("mousedown",a.bind(this,this.onStart,null,null)),this.fullBar.on("mousedown",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("mousedown",a.bind(this,c,null,b)),this.selBar.on("mousedown",a.bind(this,d,this.selBar)),this.ticks.on("mousedown",a.bind(this,this.onStart,null,null)),this.ticks.on("mousedown",a.bind(this,this.onMove,this.ticks)),this.minH.on("touchstart",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("touchstart",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("touchstart",a.bind(this,this.onStart,null,null)),this.fullBar.on("touchstart",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("touchstart",a.bind(this,c,null,b)),this.selBar.on("touchstart",a.bind(this,d,this.selBar)),this.ticks.on("touchstart",a.bind(this,this.onStart,null,null)),this.ticks.on("touchstart",a.bind(this,this.onMove,this.ticks))}},unbindEvents:function(){this.minH.off(),this.maxH.off(),this.fullBar.off(),this.selBar.off(),this.ticks.off()},onStart:function(b,d,e){var f,g,h=this.getEventNames(e);e.stopPropagation(),e.preventDefault(),""===this.tracking&&(this.calcViewDimensions(),b?this.tracking=d:(b=this.getNearestHandle(e),this.tracking=b===this.minH?"rzSliderModel":"rzSliderHigh"),b.addClass("rz-active"),f=a.bind(this,this.dragging.active?this.onDragMove:this.onMove,b),g=a.bind(this,this.onEnd,f),c.on(h.moveEvent,f),c.one(h.endEvent,g),this.callOnStart())},onMove:function(a,b){var c,d,e,f=this.getEventX(b);if(c=this.sliderElem.rzsl,d=(f-c-this.handleHalfWidth)*this.options.scale,0>=d){if(0===a.rzsl)return;e=this.minValue,d=0}else if(d>=this.maxLeft){if(a.rzsl===this.maxLeft)return;e=this.maxValue,d=this.maxLeft}else e=this.offsetToValue(d),e=this.roundStep(e),d=this.valueToOffset(e);this.positionTrackingHandle(e,d)},onDragStart:function(a,b,c){var d=this.getEventX(c)-this.sliderElem.rzsl-this.handleHalfWidth;this.dragging={active:!0,value:this.offsetToValue(d),difference:this.scope.rzSliderHigh-this.scope.rzSliderModel,offset:d,lowDist:d-this.minH.rzsl,highDist:this.maxH.rzsl-d},this.minH.addClass("rz-active"),this.maxH.addClass("rz-active"),this.onStart(a,b,c)},onDragMove:function(a,b){var c,d,e,f,g=this.getEventX(b)-this.sliderElem.rzsl-this.handleHalfWidth;if(g<=this.dragging.lowDist){if(a.rzsl===this.dragging.lowDist)return;e=this.minValue,c=0,f=this.minValue+this.dragging.difference,d=this.valueToOffset(f)}else if(g>=this.maxLeft-this.dragging.highDist){if(a.rzsl===this.dragging.highDist)return;f=this.maxValue,d=this.maxLeft,e=this.maxValue-this.dragging.difference,c=this.valueToOffset(e)}else e=this.offsetToValue(g-this.dragging.lowDist),e=this.roundStep(e),c=this.valueToOffset(e),f=e+this.dragging.difference,d=this.valueToOffset(f);this.positionTrackingBar(e,f,c,d)},positionTrackingBar:function(a,b,c,d){this.scope.rzSliderModel=a,this.scope.rzSliderHigh=b,this.updateHandles("rzSliderModel",c),this.updateHandles("rzSliderHigh",d),this.scope.$apply(),this.callOnChange()},positionTrackingHandle:function(a,b){this.range&&("rzSliderModel"===this.tracking&&a>=this.scope.rzSliderHigh?(this.scope[this.tracking]=this.scope.rzSliderHigh,this.updateHandles(this.tracking,this.maxH.rzsl),this.tracking="rzSliderHigh",this.minH.removeClass("rz-active"),this.maxH.addClass("rz-active"),this.scope.$apply(),this.callOnChange()):"rzSliderHigh"===this.tracking&&a<=this.scope.rzSliderModel&&(this.scope[this.tracking]=this.scope.rzSliderModel,this.updateHandles(this.tracking,this.minH.rzsl),this.tracking="rzSliderModel",this.maxH.removeClass("rz-active"),this.minH.addClass("rz-active"),this.scope.$apply(),this.callOnChange())),this.scope[this.tracking]!==a&&(this.scope[this.tracking]=a,this.updateHandles(this.tracking,b),this.scope.$apply(),this.callOnChange())},onEnd:function(a,b){var d=this.getEventNames(b).moveEvent;this.minH.removeClass("rz-active"),this.maxH.removeClass("rz-active"),c.off(d,a),this.scope.$emit("slideEnded"),this.tracking="",this.dragging.active=!1,this.callOnEnd()},getEventNames:function(a){var b={moveEvent:"",endEvent:""};return a.touches||void 0!==a.originalEvent&&a.originalEvent.touches?(b.moveEvent="touchmove",b.endEvent="touchend"):(b.moveEvent="mousemove",b.endEvent="mouseup"),b}},h}]).directive("rzslider",["RzSlider",function(a){return{restrict:"E",scope:{rzSliderModel:"=?",rzSliderHigh:"=?",rzSliderOptions:"=?",rzSliderTplUrl:"@"},templateUrl:function(a,b){return b.rzSliderTplUrl||"rzSliderTpl.html"},link:function(b,c){return new a(b,c)}}}]);return b.run(["$templateCache",function(a){a.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>')}]),b}); !function(a,b){"use strict";"function"==typeof define&&define.amd?define(["angular"],b):"object"==typeof module&&module.exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){"use strict";var b=a.module("rzModule",[]).factory("RzSliderOptions",function(){var b={floor:0,ceil:null,step:1,precision:0,id:null,translate:null,stepsArray:null,draggableRange:!1,showSelectionBar:!1,hideLimitLabels:!1,readOnly:!1,disabled:!1,interval:350,showTicks:!1,showTicksValues:!1,ticksValuesTooltip:null,vertical:!1,scale:1,onStart:null,onChange:null,onEnd:null},c={},d={};return d.options=function(b){a.extend(c,b)},d.getOptions=function(d){return a.extend({},b,c,d)},d}).value("rzThrottle",function(a,b,c){var d,e,f,g=Date.now||function(){return(new Date).getTime()},h=null,i=0;c=c||{};var j=function(){i=c.leading===!1?0:g(),h=null,f=a.apply(d,e),d=e=null};return function(){var k=g();i||c.leading!==!1||(i=k);var l=b-(k-i);return d=this,e=arguments,0>=l?(clearTimeout(h),h=null,i=k,f=a.apply(d,e),d=e=null):h||c.trailing===!1||(h=setTimeout(j,l)),f}}).factory("RzSlider",["$timeout","$document","$window","$compile","RzSliderOptions","rzThrottle",function(b,c,d,e,f,g){var h=function(a,b){this.scope=a,this.sliderElem=b,this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.dragging={active:!1,value:0,difference:0,offset:0,lowDist:0,highDist:0},this.positionProperty="left",this.dimensionProperty="width",this.handleHalfDim=0,this.maxPos=0,this.precision=0,this.step=0,this.tracking="",this.minValue=0,this.maxValue=0,this.valueRange=0,this.initHasRun=!1,this.fullBar=null,this.selBar=null,this.minH=null,this.maxH=null,this.flrLab=null,this.ceilLab=null,this.minLab=null,this.maxLab=null,this.cmbLab=null,this.ticks=null,this.init()};return h.prototype={init:function(){var c,e,f=a.bind(this,this.calcViewDimensions),h=this;this.applyOptions(),this.initElemHandles(),this.manageElementsStyle(),this.addAccessibility(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions(),this.setMinAndMax(),b(function(){h.updateCeilLab(),h.updateFloorLab(),h.initHandles(),h.bindEvents()}),this.scope.$on("reCalcViewDimensions",f),a.element(d).on("resize",f),this.options.vertical&&this.sliderElem.addClass("vertical"),this.initHasRun=!0,c=g(function(){h.setMinAndMax(),h.updateLowHandle(h.valueToOffset(h.scope.rzSliderModel)),h.updateSelectionBar(),h.updateTicksScale(),h.range&&h.updateCmbLabel()},h.options.interval),e=g(function(){h.setMinAndMax(),h.updateHighHandle(h.valueToOffset(h.scope.rzSliderHigh)),h.updateSelectionBar(),h.updateTicksScale(),h.updateCmbLabel()},h.options.interval),this.scope.$on("rzSliderForceRender",function(){h.resetLabelsValue(),c(),h.range&&e(),h.resetSlider()}),this.scope.$watch("rzSliderModel",function(a,b){a!==b&&c()}),this.scope.$watch("rzSliderHigh",function(a,b){a!==b&&(null!=a&&e(),(h.range&&null==a||!h.range&&null!=a)&&(h.applyOptions(),h.resetSlider()))}),this.scope.$watch("rzSliderOptions",function(a,b){a!==b&&(h.applyOptions(),h.resetSlider())},!0),this.scope.$on("$destroy",function(){h.unbindEvents(),a.element(d).off("resize",f)})},applyOptions:function(){this.options=f.getOptions(this.scope.rzSliderOptions),this.options.step<=0&&(this.options.step=1),this.range=void 0!==this.scope.rzSliderModel&&void 0!==this.scope.rzSliderHigh,this.options.draggableRange=this.range&&this.options.draggableRange,this.options.showTicks=this.options.showTicks||this.options.showTicksValues,this.options.stepsArray?(this.options.floor=0,this.options.ceil=this.options.stepsArray.length-1,this.options.step=1,this.customTrFn=function(a){return this.options.stepsArray[a]}):this.options.translate?this.customTrFn=this.options.translate:this.customTrFn=function(a){return String(a)},this.options.vertical&&(this.positionProperty="bottom",this.dimensionProperty="height")},resetSlider:function(){this.manageElementsStyle(),this.setMinAndMax(),this.updateCeilLab(),this.updateFloorLab(),this.unbindEvents(),this.manageEventsBindings(),this.setDisabledState(),this.calcViewDimensions()},initElemHandles:function(){a.forEach(this.sliderElem.children(),function(b,c){var d=a.element(b);switch(c){case 0:this.fullBar=d;break;case 1:this.selBar=d;break;case 2:this.minH=d;break;case 3:this.maxH=d;break;case 4:this.flrLab=d;break;case 5:this.ceilLab=d;break;case 6:this.minLab=d;break;case 7:this.maxLab=d;break;case 8:this.cmbLab=d;break;case 9:this.ticks=d}},this),this.selBar.rzsp=0,this.minH.rzsp=0,this.maxH.rzsp=0,this.flrLab.rzsp=0,this.ceilLab.rzsp=0,this.minLab.rzsp=0,this.maxLab.rzsp=0,this.cmbLab.rzsp=0},manageElementsStyle:function(){this.range?this.maxH.css("display",null):this.maxH.css("display","none"),this.alwaysHide(this.flrLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.ceilLab,this.options.showTicksValues||this.options.hideLimitLabels),this.alwaysHide(this.minLab,this.options.showTicksValues),this.alwaysHide(this.maxLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.cmbLab,this.options.showTicksValues||!this.range),this.alwaysHide(this.selBar,!this.range&&!this.options.showSelectionBar),this.options.showTicks||this.ticks.html(""),this.options.draggableRange?this.selBar.addClass("rz-draggable"):this.selBar.removeClass("rz-draggable")},alwaysHide:function(a,b){a.rzAlwaysHide=b,b?this.hideEl(a):this.showEl(a)},manageEventsBindings:function(){this.options.disabled||this.options.readOnly?this.unbindEvents():this.options.disabled&&this.options.readOnly||this.bindEvents()},setDisabledState:function(){this.options.disabled?this.sliderElem.attr("disabled","disabled"):this.sliderElem.attr("disabled",null)},resetLabelsValue:function(){this.minLab.rzsv=void 0,this.maxLab.rzsv=void 0},initHandles:function(){this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.range&&this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateSelectionBar(),this.range&&this.updateCmbLabel(),this.updateTicksScale()},translateFn:function(a,b,c){c=void 0===c?!0:c;var d=String(c?this.customTrFn(a,this.options.id):a),e=!1;(void 0===b.rzsv||b.rzsv.length!==d.length||b.rzsv.length>0&&0===b.rzsd)&&(e=!0,b.rzsv=d),b.text(d),e&&this.getDimension(b)},setMinAndMax:function(){this.step=+this.options.step,this.precision=+this.options.precision,this.scope.rzSliderModel=this.roundStep(this.scope.rzSliderModel),this.range&&(this.scope.rzSliderHigh=this.roundStep(this.scope.rzSliderHigh)),this.minValue=this.roundStep(+this.options.floor),null!=this.options.ceil?this.maxValue=this.roundStep(+this.options.ceil):this.maxValue=this.options.ceil=this.range?this.scope.rzSliderHigh:this.scope.rzSliderModel,this.valueRange=this.maxValue-this.minValue},addAccessibility:function(){this.sliderElem.attr("role","slider")},calcViewDimensions:function(){var a=this.getDimension(this.minH);this.handleHalfDim=a/2,this.barDimension=this.getDimension(this.fullBar),this.maxPos=this.barDimension-a,this.getDimension(this.sliderElem),this.sliderElem.rzsp=this.sliderElem[0].getBoundingClientRect()[this.positionProperty],this.initHasRun&&(this.updateFloorLab(),this.updateCeilLab(),this.initHandles())},updateTicksScale:function(){if(this.options.showTicks&&this.step){for(var a="",b=Math.round((this.maxValue-this.minValue)/this.step)+1,c=0;b>c;c++){var d=this.roundStep(this.minValue+c*this.step),f=this.isTickSelected(d)?"selected":"";if(a+='<li class="tick '+f+'">',this.options.showTicksValues){var g="";this.options.ticksValuesTooltip&&(g='uib-tooltip="'+this.options.ticksValuesTooltip(d)+'"',this.options.vertical&&(g+=' tooltip-placement="right"')),a+="<span "+g+' class="tick-value">'+this.getDisplayValue(d)+"</span>"}a+="</li>"}this.ticks.html(a),this.options.ticksValuesTooltip&&e(this.ticks.contents())(this.scope)}},isTickSelected:function(a){return!this.range&&this.options.showSelectionBar&&a<=this.scope.rzSliderModel?!0:this.range&&a>=this.scope.rzSliderModel&&a<=this.scope.rzSliderHigh?!0:!1},updateCeilLab:function(){this.translateFn(this.maxValue,this.ceilLab),this.setPosition(this.ceilLab,this.barDimension-this.ceilLab.rzsd),this.getDimension(this.ceilLab)},updateFloorLab:function(){this.translateFn(this.minValue,this.flrLab),this.getDimension(this.flrLab)},callOnStart:function(){if(this.options.onStart){var a=this;b(function(){a.options.onStart(a.options.id)})}},callOnChange:function(){if(this.options.onChange){var a=this;b(function(){a.options.onChange(a.options.id)})}},callOnEnd:function(){if(this.options.onEnd){var a=this;b(function(){a.options.onEnd(a.options.id)})}},updateHandles:function(a,b){return"rzSliderModel"===a?(this.updateLowHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void(this.range&&this.updateCmbLabel())):"rzSliderHigh"===a?(this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void(this.range&&this.updateCmbLabel())):(this.updateLowHandle(b),this.updateHighHandle(b),this.updateSelectionBar(),this.updateTicksScale(),void this.updateCmbLabel())},updateLowHandle:function(a){this.setPosition(this.minH,a),this.translateFn(this.scope.rzSliderModel,this.minLab);var b=Math.min(Math.max(a-this.minLab.rzsd/2+this.handleHalfDim,0),this.barDimension-this.ceilLab.rzsd);this.setPosition(this.minLab,b),this.shFloorCeil()},updateHighHandle:function(a){this.setPosition(this.maxH,a),this.translateFn(this.scope.rzSliderHigh,this.maxLab);var b=Math.min(a-this.maxLab.rzsd/2+this.handleHalfDim,this.barDimension-this.ceilLab.rzsd);this.setPosition(this.maxLab,b),this.shFloorCeil()},shFloorCeil:function(){var a=!1,b=!1;this.minLab.rzsp<=this.flrLab.rzsp+this.flrLab.rzsd+5?(a=!0,this.hideEl(this.flrLab)):(a=!1,this.showEl(this.flrLab)),this.minLab.rzsp+this.minLab.rzsd>=this.ceilLab.rzsp-this.handleHalfDim-10?(b=!0,this.hideEl(this.ceilLab)):(b=!1,this.showEl(this.ceilLab)),this.range&&(this.maxLab.rzsp+this.maxLab.rzsd>=this.ceilLab.rzsp-10?this.hideEl(this.ceilLab):b||this.showEl(this.ceilLab),this.maxLab.rzsp<=this.flrLab.rzsp+this.flrLab.rzsd+this.handleHalfDim?this.hideEl(this.flrLab):a||this.showEl(this.flrLab))},updateSelectionBar:function(){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)},updateCmbLabel:function(){var a,b;if(this.minLab.rzsp+this.minLab.rzsd+10>=this.maxLab.rzsp){a=this.getDisplayValue(this.scope.rzSliderModel),b=this.getDisplayValue(this.scope.rzSliderHigh),this.translateFn(a+" - "+b,this.cmbLab,!1);var c=Math.min(Math.max(this.selBar.rzsp+this.selBar.rzsd/2-this.cmbLab.rzsd/2,0),this.barDimension-this.cmbLab.rzsd);this.setPosition(this.cmbLab,c),this.hideEl(this.minLab),this.hideEl(this.maxLab),this.showEl(this.cmbLab)}else this.showEl(this.maxLab),this.showEl(this.minLab),this.hideEl(this.cmbLab)},getDisplayValue:function(a){return this.customTrFn(a,this.options.id)},roundStep:function(a){var b=this.step,c=+((a-this.minValue)%b).toFixed(3),d=c>b/2?a+b-c:a-c;return d=d.toFixed(this.precision),+d},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.rzAlwaysHide?a:a.css({opacity:1})},setPosition:function(a,b){a.rzsp=b;var c={};return c[this.positionProperty]=b+"px",a.css(c),b},getDimension:function(a){var b=a[0].getBoundingClientRect();return this.options.vertical?a.rzsd=(b.bottom-b.top)*this.options.scale:a.rzsd=(b.right-b.left)*this.options.scale,a.rzsd},setDimension:function(a,b){a.rzsd=b;var c={};return c[this.dimensionProperty]=b+"px",a.css(c),b},valueToOffset:function(a){return(this.sanitizeOffsetValue(a)-this.minValue)*this.maxPos/this.valueRange||0},sanitizeOffsetValue:function(a){return Math.min(Math.max(a,this.minValue),this.maxValue)},offsetToValue:function(a){return a/this.maxPos*this.valueRange+this.minValue},getEventXY:function(a){var b=this.options.vertical?"clientY":"clientX";return b in a?a[b]:void 0===a.originalEvent?a.touches[0][b]:a.originalEvent.touches[0][b]},getEventPosition:function(a){var b=this.sliderElem.rzsp,c=0;return c=this.options.vertical?-this.getEventXY(a)+b:this.getEventXY(a)-b,(c-this.handleHalfDim)*this.options.scale},getNearestHandle:function(a){if(!this.range)return this.minH;var b=this.getEventPosition(a);return Math.abs(b-this.minH.rzsp)<Math.abs(b-this.maxH.rzsp)?this.minH:this.maxH},bindEvents:function(){if(!this.options.readOnly&&!this.options.disabled){var b,c,d;this.options.draggableRange?(b="rzSliderDrag",c=this.onDragStart,d=this.onDragMove):(b="rzSliderModel",c=this.onStart,d=this.onMove),this.minH.on("mousedown",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("mousedown",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("mousedown",a.bind(this,this.onStart,null,null)),this.fullBar.on("mousedown",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("mousedown",a.bind(this,c,null,b)),this.selBar.on("mousedown",a.bind(this,d,this.selBar)),this.ticks.on("mousedown",a.bind(this,this.onStart,null,null)),this.ticks.on("mousedown",a.bind(this,this.onMove,this.ticks)),this.minH.on("touchstart",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("touchstart",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("touchstart",a.bind(this,this.onStart,null,null)),this.fullBar.on("touchstart",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("touchstart",a.bind(this,c,null,b)),this.selBar.on("touchstart",a.bind(this,d,this.selBar)),this.ticks.on("touchstart",a.bind(this,this.onStart,null,null)),this.ticks.on("touchstart",a.bind(this,this.onMove,this.ticks))}},unbindEvents:function(){this.minH.off(),this.maxH.off(),this.fullBar.off(),this.selBar.off(),this.ticks.off()},onStart:function(b,d,e){var f,g,h=this.getEventNames(e);e.stopPropagation(),e.preventDefault(),""===this.tracking&&(this.calcViewDimensions(),b?this.tracking=d:(b=this.getNearestHandle(e),this.tracking=b===this.minH?"rzSliderModel":"rzSliderHigh"),b.addClass("rz-active"),f=a.bind(this,this.dragging.active?this.onDragMove:this.onMove,b),g=a.bind(this,this.onEnd,f),c.on(h.moveEvent,f),c.one(h.endEvent,g),this.callOnStart())},onMove:function(a,b){var c,d=this.getEventPosition(b);if(0>=d){if(0===a.rzsp)return;c=this.minValue,d=0}else if(d>=this.maxPos){if(a.rzsp===this.maxPos)return;c=this.maxValue,d=this.maxPos}else c=this.offsetToValue(d),c=this.roundStep(c),d=this.valueToOffset(c);this.positionTrackingHandle(c,d)},onDragStart:function(a,b,c){var d=this.getEventPosition(c);this.dragging={active:!0,value:this.offsetToValue(d),difference:this.scope.rzSliderHigh-this.scope.rzSliderModel,offset:d,lowDist:d-this.minH.rzsp,highDist:this.maxH.rzsp-d},this.minH.addClass("rz-active"),this.maxH.addClass("rz-active"),this.onStart(a,b,c)},onDragMove:function(a,b){var c,d,e,f,g=this.getEventPosition(b);if(g<=this.dragging.lowDist){if(a.rzsp===this.dragging.lowDist)return;e=this.minValue,c=0,f=this.minValue+this.dragging.difference,d=this.valueToOffset(f)}else if(g>=this.maxPos-this.dragging.highDist){if(a.rzsp===this.dragging.highDist)return;f=this.maxValue,d=this.maxPos,e=this.maxValue-this.dragging.difference,c=this.valueToOffset(e)}else e=this.offsetToValue(g-this.dragging.lowDist),e=this.roundStep(e),c=this.valueToOffset(e),f=e+this.dragging.difference,d=this.valueToOffset(f);this.positionTrackingBar(e,f,c,d)},positionTrackingBar:function(a,b,c,d){this.scope.rzSliderModel=a,this.scope.rzSliderHigh=b,this.updateHandles("rzSliderModel",c),this.updateHandles("rzSliderHigh",d),this.scope.$apply(),this.callOnChange()},positionTrackingHandle:function(a,b){this.range&&("rzSliderModel"===this.tracking&&a>=this.scope.rzSliderHigh?(this.scope[this.tracking]=this.scope.rzSliderHigh,this.updateHandles(this.tracking,this.maxH.rzsp),this.tracking="rzSliderHigh",this.minH.removeClass("rz-active"),this.maxH.addClass("rz-active"),this.scope.$apply(),this.callOnChange()):"rzSliderHigh"===this.tracking&&a<=this.scope.rzSliderModel&&(this.scope[this.tracking]=this.scope.rzSliderModel,this.updateHandles(this.tracking,this.minH.rzsp),this.tracking="rzSliderModel",this.maxH.removeClass("rz-active"),this.minH.addClass("rz-active"),this.scope.$apply(),this.callOnChange())),this.scope[this.tracking]!==a&&(this.scope[this.tracking]=a,this.updateHandles(this.tracking,b),this.scope.$apply(),this.callOnChange())},onEnd:function(a,b){var d=this.getEventNames(b).moveEvent;this.minH.removeClass("rz-active"),this.maxH.removeClass("rz-active"),c.off(d,a),this.scope.$emit("slideEnded"),this.tracking="",this.dragging.active=!1,this.callOnEnd()},getEventNames:function(a){var b={moveEvent:"",endEvent:""};return a.touches||void 0!==a.originalEvent&&a.originalEvent.touches?(b.moveEvent="touchmove",b.endEvent="touchend"):(b.moveEvent="mousemove",b.endEvent="mouseup"),b}},h}]).directive("rzslider",["RzSlider",function(a){return{restrict:"E",scope:{rzSliderModel:"=?",rzSliderHigh:"=?",rzSliderOptions:"=?",rzSliderTplUrl:"@"},templateUrl:function(a,b){return b.rzSliderTplUrl||"rzSliderTpl.html"},link:function(b,c){return new a(b,c)}}}]);return b.run(["$templateCache",function(a){a.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>')}]),b});
\ No newline at end of file \ No newline at end of file
src/rzslider.js
View file @ 13250ca1
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
showTicks: false, showTicks: false,
showTicksValues: false, showTicksValues: false,
ticksValuesTooltip: null, ticksValuesTooltip: null,
vertical: false,
scale: 1, scale: 1,
onStart: null, onStart: null,
onChange: null, onChange: null,
...@@ -171,18 +172,30 @@ ...@@ -171,18 +172,30 @@
}; };
/** /**
* Half of the width of the slider handles * property that handle position (defaults to left for horizontal)
* @type {string}
*/
this.positionProperty = 'left';
/**
* property that handle dimension (defaults to width for horizontal)
* @type {string}
*/
this.dimensionProperty = 'width';
/**
* Half of the width or height of the slider handles
* *
* @type {number} * @type {number}
*/ */
this.handleHalfWidth = 0; this.handleHalfDim = 0;
/** /**
* Maximum left the slider handle can have * Maximum position the slider handle can have
* *
* @type {number} * @type {number}
*/ */
this.maxLeft = 0; this.maxPos = 0;
/** /**
* Precision * Precision
...@@ -285,6 +298,9 @@ ...@@ -285,6 +298,9 @@
// Recalculate stuff if view port dimensions have changed // Recalculate stuff if view port dimensions have changed
angular.element($window).on('resize', calcDimFn); angular.element($window).on('resize', calcDimFn);
if (this.options.vertical)
this.sliderElem.addClass('vertical');
this.initHasRun = true; this.initHasRun = true;
// Watch for changes to the model // Watch for changes to the model
...@@ -368,12 +384,18 @@ ...@@ -368,12 +384,18 @@
this.customTrFn = function(value) { this.customTrFn = function(value) {
return this.options.stepsArray[value]; return this.options.stepsArray[value];
}; };
} else if (this.options.translate) }
else if (this.options.translate)
this.customTrFn = this.options.translate; this.customTrFn = this.options.translate;
else else
this.customTrFn = function(value) { this.customTrFn = function(value) {
return String(value); return String(value);
}; };
if (this.options.vertical) {
this.positionProperty = 'bottom';
this.dimensionProperty = 'height';
}
}, },
/** /**
...@@ -440,14 +462,14 @@ ...@@ -440,14 +462,14 @@
}, this); }, this);
// Initialize offset cache properties // Initialize offset cache properties
this.selBar.rzsl = 0; this.selBar.rzsp = 0;
this.minH.rzsl = 0; this.minH.rzsp = 0;
this.maxH.rzsl = 0; this.maxH.rzsp = 0;
this.flrLab.rzsl = 0; this.flrLab.rzsp = 0;
this.ceilLab.rzsl = 0; this.ceilLab.rzsp = 0;
this.minLab.rzsl = 0; this.minLab.rzsp = 0;
this.maxLab.rzsl = 0; this.maxLab.rzsp = 0;
this.cmbLab.rzsl = 0; this.cmbLab.rzsp = 0;
}, },
/** Update each elements style based on options /** Update each elements style based on options
...@@ -554,18 +576,18 @@ ...@@ -554,18 +576,18 @@
useCustomTr = useCustomTr === undefined ? true : 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) : value)),
getWidth = false; getDimension = false;
if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0)) { if (label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsd === 0)) {
getWidth = true; getDimension = true;
label.rzsv = valStr; label.rzsv = valStr;
} }
label.text(valStr); label.text(valStr);
// Update width only when length of the label have changed // Update width only when length of the label have changed
if (getWidth) { if (getDimension) {
this.getWidth(label); this.getDimension(label);
} }
}, },
...@@ -612,15 +634,15 @@ ...@@ -612,15 +634,15 @@
* @returns {undefined} * @returns {undefined}
*/ */
calcViewDimensions: function() { calcViewDimensions: function() {
var handleWidth = this.getWidth(this.minH); var handleWidth = this.getDimension(this.minH);
this.handleHalfWidth = handleWidth / 2; this.handleHalfDim = handleWidth / 2;
this.barWidth = this.getWidth(this.fullBar); this.barDimension = this.getDimension(this.fullBar);
this.maxLeft = this.barWidth - handleWidth; this.maxPos = this.barDimension - handleWidth;
this.getWidth(this.sliderElem); this.getDimension(this.sliderElem);
this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left; this.sliderElem.rzsp = this.sliderElem[0].getBoundingClientRect()[this.positionProperty];
if (this.initHasRun) { if (this.initHasRun) {
this.updateFloorLab(); this.updateFloorLab();
...@@ -648,6 +670,8 @@ ...@@ -648,6 +670,8 @@
var tooltip = ''; var tooltip = '';
if (this.options.ticksValuesTooltip) { if (this.options.ticksValuesTooltip) {
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"'; tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
if(this.options.vertical)
tooltip += ' tooltip-placement="right"'
} }
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>'; positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
} }
...@@ -673,8 +697,8 @@ ...@@ -673,8 +697,8 @@
*/ */
updateCeilLab: function() { updateCeilLab: function() {
this.translateFn(this.maxValue, this.ceilLab); this.translateFn(this.maxValue, this.ceilLab);
this.setLeft(this.ceilLab, this.barWidth - this.ceilLab.rzsw); this.setPosition(this.ceilLab, this.barDimension - this.ceilLab.rzsd);
this.getWidth(this.ceilLab); this.getDimension(this.ceilLab);
}, },
/** /**
...@@ -684,7 +708,7 @@ ...@@ -684,7 +708,7 @@
*/ */
updateFloorLab: function() { updateFloorLab: function() {
this.translateFn(this.minValue, this.flrLab); this.translateFn(this.minValue, this.flrLab);
this.getWidth(this.flrLab); this.getDimension(this.flrLab);
}, },
/** /**
...@@ -773,10 +797,10 @@ ...@@ -773,10 +797,10 @@
* @returns {undefined} * @returns {undefined}
*/ */
updateLowHandle: function(newOffset) { updateLowHandle: function(newOffset) {
this.setLeft(this.minH, newOffset); this.setPosition(this.minH, newOffset);
this.translateFn(this.scope.rzSliderModel, this.minLab); this.translateFn(this.scope.rzSliderModel, this.minLab);
var left = Math.min(Math.max(newOffset - this.minLab.rzsw / 2 + this.handleHalfWidth, 0), this.barWidth - this.ceilLab.rzsw); var pos = Math.min(Math.max(newOffset - this.minLab.rzsd / 2 + this.handleHalfDim, 0), this.barDimension - this.ceilLab.rzsd);
this.setLeft(this.minLab, left); this.setPosition(this.minLab, pos);
this.shFloorCeil(); this.shFloorCeil();
}, },
...@@ -788,10 +812,10 @@ ...@@ -788,10 +812,10 @@
* @returns {undefined} * @returns {undefined}
*/ */
updateHighHandle: function(newOffset) { updateHighHandle: function(newOffset) {
this.setLeft(this.maxH, newOffset); this.setPosition(this.maxH, newOffset);
this.translateFn(this.scope.rzSliderHigh, this.maxLab); this.translateFn(this.scope.rzSliderHigh, this.maxLab);
var left = Math.min((newOffset - this.maxLab.rzsw / 2 + this.handleHalfWidth), (this.barWidth - this.ceilLab.rzsw)); var pos = Math.min((newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim), (this.barDimension - this.ceilLab.rzsd));
this.setLeft(this.maxLab, left); this.setPosition(this.maxLab, pos);
this.shFloorCeil(); this.shFloorCeil();
}, },
...@@ -805,7 +829,7 @@ ...@@ -805,7 +829,7 @@
var flHidden = false, var flHidden = false,
clHidden = false; clHidden = false;
if (this.minLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + 5) { if (this.minLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + 5) {
flHidden = true; flHidden = true;
this.hideEl(this.flrLab); this.hideEl(this.flrLab);
} else { } else {
...@@ -813,7 +837,7 @@ ...@@ -813,7 +837,7 @@
this.showEl(this.flrLab); this.showEl(this.flrLab);
} }
if (this.minLab.rzsl + this.minLab.rzsw >= this.ceilLab.rzsl - this.handleHalfWidth - 10) { if (this.minLab.rzsp + this.minLab.rzsd >= this.ceilLab.rzsp - this.handleHalfDim - 10) {
clHidden = true; clHidden = true;
this.hideEl(this.ceilLab); this.hideEl(this.ceilLab);
} else { } else {
...@@ -822,14 +846,14 @@ ...@@ -822,14 +846,14 @@
} }
if (this.range) { if (this.range) {
if (this.maxLab.rzsl + this.maxLab.rzsw >= this.ceilLab.rzsl - 10) { if (this.maxLab.rzsp + this.maxLab.rzsd >= this.ceilLab.rzsp - 10) {
this.hideEl(this.ceilLab); this.hideEl(this.ceilLab);
} else if (!clHidden) { } else if (!clHidden) {
this.showEl(this.ceilLab); this.showEl(this.ceilLab);
} }
// Hide or show floor label // Hide or show floor label
if (this.maxLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + this.handleHalfWidth) { if (this.maxLab.rzsp <= this.flrLab.rzsp + this.flrLab.rzsd + this.handleHalfDim) {
this.hideEl(this.flrLab); this.hideEl(this.flrLab);
} else if (!flHidden) { } else if (!flHidden) {
this.showEl(this.flrLab); this.showEl(this.flrLab);
...@@ -843,8 +867,8 @@ ...@@ -843,8 +867,8 @@
* @returns {undefined} * @returns {undefined}
*/ */
updateSelectionBar: function() { updateSelectionBar: function() {
this.setWidth(this.selBar, Math.abs(this.maxH.rzsl - this.minH.rzsl) + this.handleHalfWidth); this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
this.setLeft(this.selBar, this.range ? this.minH.rzsl + this.handleHalfWidth : 0); this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
}, },
/** /**
...@@ -855,13 +879,13 @@ ...@@ -855,13 +879,13 @@
updateCmbLabel: function() { updateCmbLabel: function() {
var lowTr, highTr; var lowTr, highTr;
if (this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl) { if (this.minLab.rzsp + this.minLab.rzsd + 10 >= this.maxLab.rzsp) {
lowTr = this.getDisplayValue(this.scope.rzSliderModel); lowTr = this.getDisplayValue(this.scope.rzSliderModel);
highTr = this.getDisplayValue(this.scope.rzSliderHigh); highTr = this.getDisplayValue(this.scope.rzSliderHigh);
this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false); this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
var left = Math.min(Math.max((this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2),0),(this.barWidth - this.cmbLab.rzsw)); var pos = Math.min(Math.max((this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2), 0), (this.barDimension - this.cmbLab.rzsd));
this.setLeft(this.cmbLab, left); this.setPosition(this.cmbLab, pos);
this.hideEl(this.minLab); this.hideEl(this.minLab);
this.hideEl(this.maxLab); this.hideEl(this.maxLab);
this.showEl(this.cmbLab); this.showEl(this.cmbLab);
...@@ -925,45 +949,48 @@ ...@@ -925,45 +949,48 @@
}, },
/** /**
* Set element left offset * Set element left/top offset depending on whether slider is horizontal or vertical
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} left * @param {number} pos
* @returns {number} * @returns {number}
*/ */
setLeft: function(elem, left) { setPosition: function(elem, pos) {
elem.rzsl = left; elem.rzsp = pos;
elem.css({ var css = {};
left: left + 'px' css[this.positionProperty] = pos + 'px';
}); elem.css(css);
return left; return pos;
}, },
/** /**
* Get element width * Get element width/height depending on whether slider is horizontal or vertical
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {jqLite} elem The jqLite wrapped DOM element
* @returns {number} * @returns {number}
*/ */
getWidth: function(elem) { getDimension: function(elem) {
var val = elem[0].getBoundingClientRect(); var val = elem[0].getBoundingClientRect();
elem.rzsw = (val.right - val.left) * this.options.scale; if (this.options.vertical)
return elem.rzsw; elem.rzsd = (val.bottom - val.top) * this.options.scale;
else
elem.rzsd = (val.right - val.left) * this.options.scale;
return elem.rzsd;
}, },
/** /**
* Set element width * Set element width/height depending on whether slider is horizontal or vertical
* *
* @param {jqLite} elem The jqLite wrapped DOM element * @param {jqLite} elem The jqLite wrapped DOM element
* @param {number} width * @param {number} dim
* @returns {number} * @returns {number}
*/ */
setWidth: function(elem, width) { setDimension: function(elem, dim) {
elem.rzsw = width; elem.rzsd = dim;
elem.css({ var css = {};
width: width + 'px' css[this.dimensionProperty] = dim + 'px';
}); elem.css(css);
return width; return dim;
}, },
/** /**
...@@ -973,7 +1000,7 @@ ...@@ -973,7 +1000,7 @@
* @returns {number} * @returns {number}
*/ */
valueToOffset: function(val) { valueToOffset: function(val) {
return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxLeft / this.valueRange || 0; return (this.sanitizeOffsetValue(val) - this.minValue) * this.maxPos / this.valueRange || 0;
}, },
/** /**
...@@ -993,26 +1020,42 @@ ...@@ -993,26 +1020,42 @@
* @returns {number} * @returns {number}
*/ */
offsetToValue: function(offset) { offsetToValue: function(offset) {
return (offset / this.maxLeft) * this.valueRange + this.minValue; return (offset / this.maxPos) * this.valueRange + this.minValue;
}, },
// Events // Events
/** /**
* Get the X-coordinate of an event * Get the X-coordinate or Y-coordinate of an event
* *
* @param {Object} event The event * @param {Object} event The event
* @returns {number} * @returns {number}
*/ */
getEventX: function(event) { getEventXY: function(event) {
/* http://stackoverflow.com/a/12336075/282882 */ /* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint //noinspection JSLint
if ('clientX' in event) { var clientXY = this.options.vertical ? 'clientY' : 'clientX';
return event.clientX; if (clientXY in event) {
return event[clientXY];
} }
return event.originalEvent === undefined ? return event.originalEvent === undefined ?
event.touches[0].clientX : event.originalEvent.touches[0].clientX; event.touches[0][clientXY] : event.originalEvent.touches[0][clientXY];
},
/**
* Compute the event position depending on whether the slider is horizontal or vertical
* @param event
* @returns {number}
*/
getEventPosition: function(event) {
var sliderPos = this.sliderElem.rzsp,
eventPos = 0;
if (this.options.vertical)
eventPos = -this.getEventXY(event) + sliderPos;
else
eventPos = this.getEventXY(event) - sliderPos;
return (eventPos - this.handleHalfDim) * this.options.scale;
}, },
/** /**
...@@ -1025,8 +1068,8 @@ ...@@ -1025,8 +1068,8 @@
if (!this.range) { if (!this.range) {
return this.minH; return this.minH;
} }
var offset = (this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth) * this.options.scale; var offset = this.getEventPosition(event);
return Math.abs(offset - this.minH.rzsl) < Math.abs(offset - this.maxH.rzsl) ? this.minH : this.maxH; return Math.abs(offset - this.minH.rzsp) < Math.abs(offset - this.maxH.rzsp) ? this.minH : this.maxH;
}, },
/** /**
...@@ -1132,22 +1175,19 @@ ...@@ -1132,22 +1175,19 @@
* @returns {undefined} * @returns {undefined}
*/ */
onMove: function(pointer, event) { onMove: function(pointer, event) {
var eventX = this.getEventX(event), var newOffset = this.getEventPosition(event),
sliderLO, newOffset, newValue; newValue;
sliderLO = this.sliderElem.rzsl;
newOffset = (eventX - sliderLO - this.handleHalfWidth) * this.options.scale;
if (newOffset <= 0) { if (newOffset <= 0) {
if (pointer.rzsl === 0) if (pointer.rzsp === 0)
return; return;
newValue = this.minValue; newValue = this.minValue;
newOffset = 0; newOffset = 0;
} else if (newOffset >= this.maxLeft) { } else if (newOffset >= this.maxPos) {
if (pointer.rzsl === this.maxLeft) if (pointer.rzsp === this.maxPos)
return; return;
newValue = this.maxValue; newValue = this.maxValue;
newOffset = this.maxLeft; newOffset = this.maxPos;
} else { } else {
newValue = this.offsetToValue(newOffset); newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue); newValue = this.roundStep(newValue);
...@@ -1167,14 +1207,14 @@ ...@@ -1167,14 +1207,14 @@
* @returns {undefined} * @returns {undefined}
*/ */
onDragStart: function(pointer, ref, event) { onDragStart: function(pointer, ref, event) {
var offset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth; var offset = this.getEventPosition(event);
this.dragging = { this.dragging = {
active: true, active: true,
value: this.offsetToValue(offset), value: this.offsetToValue(offset),
difference: this.scope.rzSliderHigh - this.scope.rzSliderModel, difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
offset: offset, offset: offset,
lowDist: offset - this.minH.rzsl, lowDist: offset - this.minH.rzsp,
highDist: this.maxH.rzsl - offset highDist: this.maxH.rzsp - offset
}; };
this.minH.addClass('rz-active'); this.minH.addClass('rz-active');
this.maxH.addClass('rz-active'); this.maxH.addClass('rz-active');
...@@ -1192,24 +1232,24 @@ ...@@ -1192,24 +1232,24 @@
* @returns {undefined} * @returns {undefined}
*/ */
onDragMove: function(pointer, event) { onDragMove: function(pointer, event) {
var newOffset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth, var newOffset = this.getEventPosition(event),
newMinOffset, newMaxOffset, newMinOffset, newMaxOffset,
newMinValue, newMaxValue; newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowDist) { if (newOffset <= this.dragging.lowDist) {
if (pointer.rzsl === this.dragging.lowDist) { if (pointer.rzsp === this.dragging.lowDist) {
return; return;
} }
newMinValue = this.minValue; newMinValue = this.minValue;
newMinOffset = 0; newMinOffset = 0;
newMaxValue = this.minValue + this.dragging.difference; newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue); newMaxOffset = this.valueToOffset(newMaxValue);
} else if (newOffset >= this.maxLeft - this.dragging.highDist) { } else if (newOffset >= this.maxPos - this.dragging.highDist) {
if (pointer.rzsl === this.dragging.highDist) { if (pointer.rzsp === this.dragging.highDist) {
return; return;
} }
newMaxValue = this.maxValue; newMaxValue = this.maxValue;
newMaxOffset = this.maxLeft; newMaxOffset = this.maxPos;
newMinValue = this.maxValue - this.dragging.difference; newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue); newMinOffset = this.valueToOffset(newMinValue);
} else { } else {
...@@ -1251,7 +1291,7 @@ ...@@ -1251,7 +1291,7 @@
/* This is to check if we need to switch the min and max handles*/ /* This is to check if we need to switch the min and max handles*/
if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) { if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) {
this.scope[this.tracking] = this.scope.rzSliderHigh; this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsl); this.updateHandles(this.tracking, this.maxH.rzsp);
this.tracking = 'rzSliderHigh'; this.tracking = 'rzSliderHigh';
this.minH.removeClass('rz-active'); this.minH.removeClass('rz-active');
this.maxH.addClass('rz-active'); this.maxH.addClass('rz-active');
...@@ -1260,7 +1300,7 @@ ...@@ -1260,7 +1300,7 @@
this.callOnChange(); this.callOnChange();
} else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) { } else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) {
this.scope[this.tracking] = this.scope.rzSliderModel; this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsl); this.updateHandles(this.tracking, this.minH.rzsp);
this.tracking = 'rzSliderModel'; this.tracking = 'rzSliderModel';
this.maxH.removeClass('rz-active'); this.maxH.removeClass('rz-active');
this.minH.addClass('rz-active'); this.minH.addClass('rz-active');
...@@ -1371,8 +1411,8 @@ ...@@ -1371,8 +1411,8 @@
/** /**
* @name jqLite * @name jqLite
* *
* @property {number|undefined} rzsl rzslider label left offset * @property {number|undefined} rzsp rzslider label position offset
* @property {number|undefined} rzsw rzslider element width * @property {number|undefined} rzsd rzslider element dimension
* @property {string|undefined} rzsv rzslider label value/text * @property {string|undefined} rzsv rzslider label value/text
* @property {Function} css * @property {Function} css
* @property {Function} text * @property {Function} text
......
src/rzslider.less
View file @ 13250ca1
...@@ -9,10 +9,9 @@ ...@@ -9,10 +9,9 @@
@import 'variables.less'; @import 'variables.less';
rzslider { rzslider {
display: inline-block; display: inline-block;
position: relative; position: relative;
height: @barHeight; height: @barDimension;
width: 100%; width: 100%;
margin: 35px 0 15px 0; margin: 35px 0 15px 0;
vertical-align: middle; vertical-align: middle;
...@@ -57,15 +56,15 @@ rzslider { ...@@ -57,15 +56,15 @@ rzslider {
.rz-bar { .rz-bar {
left: 0; left: 0;
width: 100%; width: 100%;
height: @barHeight; height: @barDimension;
z-index: 1; z-index: 1;
background: @barNormalColor; background: @barNormalColor;
.rounded(@barHeight/2); .rounded(@barDimension/2);
&.rz-selection { &.rz-selection {
z-index: 2; z-index: 2;
background: @barFillColor; background: @barFillColor;
.rounded(@barHeight/2); .rounded(@barDimension/2);
} }
} }
...@@ -73,7 +72,7 @@ rzslider { ...@@ -73,7 +72,7 @@ rzslider {
cursor: pointer; cursor: pointer;
width: @handleSize; width: @handleSize;
height: @handleSize; height: @handleSize;
top: -@handleSize/2 + @barHeight/2; top: -@handleSize/2 + @barDimension/2;
background-color: @handleBgColor; background-color: @handleBgColor;
z-index: 3; z-index: 3;
.rounded(@handleSize/2); .rounded(@handleSize/2);
...@@ -118,7 +117,7 @@ rzslider { ...@@ -118,7 +117,7 @@ rzslider {
width: 100%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: -(@ticksHeight - @barHeight) / 2; top: -(@ticksHeight - @barDimension) / 2;
margin: 0; margin: 0;
padding: 0 (@handleSize - @ticksWidth) / 2; padding: 0 (@handleSize - @ticksWidth) / 2;
z-index: 1; z-index: 1;
...@@ -147,4 +146,72 @@ rzslider { ...@@ -147,4 +146,72 @@ rzslider {
} }
} }
} }
&.vertical {
position: relative;
width: @barDimension;
height: 100%;
margin: 0 20px;
padding: 0;
vertical-align: baseline;
.rz-base {
width: 100%;
height: 100%;
padding: 0;
}
.rz-bar-wrapper {
top: auto;
left: 0;
margin: 0 0 0 -@handleSize / 2;
padding: 0 0 0 @handleSize / 2;
height: 100%;
width: @handleSize;
}
.rz-bar {
bottom: 0;
left: auto;
width: @barDimension;
height: 100%;
}
.rz-pointer {
left: -@handleSize/2 + @barDimension/2 !important;
top: auto;
bottom: 0;
}
.rz-bubble {
left: @handleSize/2 !important;
margin-left: 3px;
bottom: 0;
&.rz-selection {
left: @handleSize/2 !important;
top: auto;
}
}
.rz-ticks {
height: 100%;
width: auto;
left: -(@ticksHeight - @barDimension) / 2;
top: 0;
padding: (@handleSize - @ticksWidth) / 2 0;
z-index: 1;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
.tick {
vertical-align: middle;
.tick-value {
right: @ticksValuePosition;
top: auto;
transform: translate(0, -28%);
}
}
}
}
} }
src/variables.less
View file @ 13250ca1
...@@ -25,4 +25,4 @@ ...@@ -25,4 +25,4 @@
@handleSize: 32px; @handleSize: 32px;
@handlePointerSize: 8px; @handlePointerSize: 8px;
@bubblePadding: 1px 3px; @bubblePadding: 1px 3px;
@barHeight: 4px; @barDimension: 4px;
\ No newline at end of file
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