Skip to content

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

Add a rz-slider-disabled attribute. Closes #117

parent 96d37a63
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 22 deletions
README.md
View file @ 8e5448aa
......@@ -146,6 +146,10 @@ $scope.priceSlider = {
> Display a tick for each value and the value of the tick.
**rz-slider-disabled**
> Disable the slider (apply a special style and unbind events)
```javascript
// In your controller
......
bower.json
View file @ 8e5448aa
{
"name": "angularjs-slider",
"version": "0.1.34",
"version": "0.1.35",
"homepage": "https://github.com/rzajac/angularjs-slider",
"authors": [
"Rafal Zajac <rzajac@gmail.com>",
......
demo/index.html
View file @ 8e5448aa
......@@ -151,6 +151,15 @@
</div>
</article>
<article>
<h2>Disabled slider example</h2>
<label>Disable slider <input type="checkbox" ng-model="disableSlider"></label>
<rzslider rz-slider-model="priceSlider8"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-disabled="disableSlider"></rzslider>
</article>
</div>
......@@ -176,6 +185,9 @@
min: 2,
max: 8
};
$scope.priceSlider8 = 5;
$scope.disableSlider = true;
$scope.translate = function(value) {
return '$' + value;
......
dist/rzslider.css
View file @ 8e5448aa
......@@ -18,6 +18,19 @@ rzslider {
height: 4px;
margin: 30px 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] span.rz-pointer {
cursor: not-allowed;
background-color: #d8e0f3;
}
rzslider span {
......
dist/rzslider.js
View file @ 8e5448aa
......@@ -4,7 +4,7 @@
* (c) Rafal Zajac <rzajac@gmail.com>
* http://github.com/rzajac/angularjs-slider
*
* Version: v0.1.34
* Version: v0.1.35
*
* Licensed under the MIT license
*/
......@@ -225,6 +225,13 @@ function throttle(func, wait, options) {
*/
this.showTicksValue = attributes.rzSliderShowTicksValue;
/**
* Disable the slider
*
* @type {boolean}
*/
this.disabled = this.scope.rzSliderDisabled;
/**
* The delta between min and max value
*
......@@ -284,6 +291,8 @@ function throttle(func, wait, options) {
self = this;
this.initElemHandles();
this.addAccessibility();
this.setDisabledState();
this.calcViewDimensions();
this.setMinAndMax();
......@@ -295,7 +304,7 @@ function throttle(func, wait, options) {
self.updateCeilLab();
self.updateFloorLab();
self.initHandles();
if (!self.presentOnly) { self.bindEvents(); }
self.bindEvents();
});
// Recalculate slider view dimensions
......@@ -384,13 +393,20 @@ function throttle(func, wait, options) {
});
this.deRegFuncs.push(unRegFn);
unRegFn = this.scope.$watch('rzSliderDisabled', function(newValue, oldValue)
{
if(newValue === oldValue) { return; }
self.resetSlider();
if(self.disabled)
self.unbindEvents();
else
self.bindEvents();
});
this.deRegFuncs.push(unRegFn);
this.scope.$on('$destroy', function()
{
self.minH.off();
self.maxH.off();
self.fullBar.off();
self.selBar.off();
self.ticks.off();
self.unbindEvents();
angular.element($window).off('resize', calcDimFn);
self.deRegFuncs.map(function(unbind) { unbind(); });
});
......@@ -406,9 +422,27 @@ function throttle(func, wait, options) {
this.setMinAndMax();
this.updateCeilLab();
this.updateFloorLab();
this.setDisabledState();
this.calcViewDimensions();
},
/**
* Set the disabled state based on rzSliderDisabled
*
* @returns {undefined}
*/
setDisabledState: function()
{
this.disabled = this.scope.rzSliderDisabled;
if(this.disabled) {
this.sliderElem.attr('disabled', 'disabled');
}
else {
this.sliderElem.attr('disabled', null);
}
},
/**
* Reset label values
*
......@@ -587,6 +621,18 @@ function throttle(func, wait, options) {
this.selBar.addClass('rz-draggable');
}
},
/**
* Adds accessibility atributes
*
* Run only once during initialization
*
* @returns {undefined}
*/
addAccessibility: function ()
{
this.sliderElem.attr("role", "slider");
},
/**
* Calculate dimensions that are dependent on view port size
......@@ -1031,6 +1077,7 @@ function throttle(func, wait, options) {
*/
bindEvents: function()
{
if(this.presentOnly || this.disabled) return;
var barTracking, barStart, barMove;
if (this.dragRange)
......@@ -1065,6 +1112,20 @@ function throttle(func, wait, options) {
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
},
/**
* Unbind mouse and touch events to slider handles
*
* @returns {undefined}
*/
unbindEvents: function()
{
this.minH.off();
this.maxH.off();
this.fullBar.off();
this.selBar.off();
this.ticks.off();
},
/**
* onStart event handler
*
......@@ -1350,7 +1411,8 @@ function throttle(func, wait, options) {
rzSliderOnChange: '&',
rzSliderOnEnd: '&',
rzSliderShowTicks: '=?',
rzSliderShowTicksValue: '=?'
rzSliderShowTicksValue: '=?',
rzSliderDisabled: '=?',
},
/**
......
dist/rzslider.min.css
View file @ 8e5448aa
/*! jusas-angularjs-slider - v0.1.34 - (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-10-03 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.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 span.rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.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 span.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 span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;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)}
\ No newline at end of file
/*! jusas-angularjs-slider - v0.1.35 - (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-10-08 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 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] span.rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.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 span.rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.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 span.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 span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;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)}
\ No newline at end of file
dist/rzslider.min.js
View file @ 8e5448aa
This diff is collapsed.
package.json
View file @ 8e5448aa
{
"name": "jusas-angularjs-slider",
"version": "0.1.34",
"version": "0.1.35",
"description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
"main": "dist/rzslider.js",
"repository": {
......
src/rzslider.js
View file @ 8e5448aa
......@@ -4,7 +4,7 @@
* (c) Rafal Zajac <rzajac@gmail.com>
* http://github.com/rzajac/angularjs-slider
*
* Version: v0.1.34
* Version: v0.1.35
*
* Licensed under the MIT license
*/
......@@ -225,6 +225,13 @@ function throttle(func, wait, options) {
*/
this.showTicksValue = attributes.rzSliderShowTicksValue;
/**
* Disable the slider
*
* @type {boolean}
*/
this.disabled = this.scope.rzSliderDisabled;
/**
* The delta between min and max value
*
......@@ -285,6 +292,7 @@ function throttle(func, wait, options) {
this.initElemHandles();
this.addAccessibility();
this.setDisabledState();
this.calcViewDimensions();
this.setMinAndMax();
......@@ -296,7 +304,7 @@ function throttle(func, wait, options) {
self.updateCeilLab();
self.updateFloorLab();
self.initHandles();
if (!self.presentOnly) { self.bindEvents(); }
self.bindEvents();
});
// Recalculate slider view dimensions
......@@ -385,13 +393,20 @@ function throttle(func, wait, options) {
});
this.deRegFuncs.push(unRegFn);
unRegFn = this.scope.$watch('rzSliderDisabled', function(newValue, oldValue)
{
if(newValue === oldValue) { return; }
self.resetSlider();
if(self.disabled)
self.unbindEvents();
else
self.bindEvents();
});
this.deRegFuncs.push(unRegFn);
this.scope.$on('$destroy', function()
{
self.minH.off();
self.maxH.off();
self.fullBar.off();
self.selBar.off();
self.ticks.off();
self.unbindEvents();
angular.element($window).off('resize', calcDimFn);
self.deRegFuncs.map(function(unbind) { unbind(); });
});
......@@ -407,9 +422,27 @@ function throttle(func, wait, options) {
this.setMinAndMax();
this.updateCeilLab();
this.updateFloorLab();
this.setDisabledState();
this.calcViewDimensions();
},
/**
* Set the disabled state based on rzSliderDisabled
*
* @returns {undefined}
*/
setDisabledState: function()
{
this.disabled = this.scope.rzSliderDisabled;
if(this.disabled) {
this.sliderElem.attr('disabled', 'disabled');
}
else {
this.sliderElem.attr('disabled', null);
}
},
/**
* Reset label values
*
......@@ -1044,6 +1077,7 @@ function throttle(func, wait, options) {
*/
bindEvents: function()
{
if(this.presentOnly || this.disabled) return;
var barTracking, barStart, barMove;
if (this.dragRange)
......@@ -1078,6 +1112,20 @@ function throttle(func, wait, options) {
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
},
/**
* Unbind mouse and touch events to slider handles
*
* @returns {undefined}
*/
unbindEvents: function()
{
this.minH.off();
this.maxH.off();
this.fullBar.off();
this.selBar.off();
this.ticks.off();
},
/**
* onStart event handler
*
......@@ -1363,7 +1411,8 @@ function throttle(func, wait, options) {
rzSliderOnChange: '&',
rzSliderOnEnd: '&',
rzSliderShowTicks: '=?',
rzSliderShowTicksValue: '=?'
rzSliderShowTicksValue: '=?',
rzSliderDisabled: '=?',
},
/**
......
src/rzslider.less
View file @ 8e5448aa
......@@ -19,6 +19,7 @@
@labelTextColor: #55637d;
@handleBgColor: #0db9f0;
@handleInnerColor: #fff;
@handleDisabledColor: #d8e0f3;
@limitLabelTextColor: @labelTextColor;
@barFillColor: @handleBgColor;
@barNormalColor: #d8e0f3;
......@@ -36,12 +37,25 @@
@barHeight: 4px;
rzslider {
display: inline-block;
position: relative;
height: @barHeight;
width: 100%;
margin: 30px 0 15px 0;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&[disabled] {
cursor: not-allowed;
span.rz-pointer {
cursor: not-allowed;
background-color: @handleDisabledColor;
}
}
}
rzslider span {
......
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