Skip to content

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

fix(labels): Refactor autoHiding algorithm for labels 

fix #446
parent e63e4ff4
Expand all Show whitespace changes
Inline Side-by-side
Showing with 74 additions and 79 deletions
CHANGELOG.md
View file @ 3ab3aa37
# 5.8.4 (2016-11-05)
## Improvement
- Refactor autoHiding algorithm for labels (fix #446)
# 5.8.3 (2016-11-03) # 5.8.3 (2016-11-03)
## Improvement ## Improvement
- Generate a SCSS file (simple copy of the css file) in the dist folder so it can be imported (#449) - Generate a SCSS file (simple copy of the css file) in the dist folder so it can be imported (#449)
......
bower.json
View file @ 3ab3aa37
{ {
"name": "angularjs-slider", "name": "angularjs-slider",
"version": "5.8.3", "version": "5.8.4",
"homepage": "https://github.com/angular-slider/angularjs-slider", "homepage": "https://github.com/angular-slider/angularjs-slider",
"authors": [ "authors": [
"Rafal Zajac <rzajac@gmail.com>", "Rafal Zajac <rzajac@gmail.com>",
......
demo/debug.html
View file @ 3ab3aa37
...@@ -17,10 +17,10 @@ ...@@ -17,10 +17,10 @@
<div class="wrapper"> <div class="wrapper">
<article> <article>
<h2>Slider with date values</h2> <h2>Debug slider</h2>
<rzslider <rzslider
rz-slider-model="slider_dates.value" data-rz-slider-model="rangeSlider.minValue"
rz-slider-options="slider_dates.options" data-rz-slider-options="rangeSlider.options"
></rzslider> ></rzslider>
</article> </article>
......
dist/rzslider.css
View file @ 3ab3aa37
/*! angularjs-slider - v5.8.3 - /*! angularjs-slider - v5.8.4 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - (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/angular-slider/angularjs-slider - https://github.com/angular-slider/angularjs-slider -
2016-11-03 */ 2016-11-05 */
.rzslider { .rzslider {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -237,16 +237,6 @@ ...@@ -237,16 +237,6 @@
left: 16px !important; left: 16px !important;
} }
.rzslider.rz-vertical .rz-bubble.rz-floor {
bottom: 0;
left: auto;
}
.rzslider.rz-vertical .rz-bubble.rz-ceil {
top: 0;
right: auto;
}
.rzslider.rz-vertical .rz-ticks { .rzslider.rz-vertical .rz-ticks {
top: 0; top: 0;
left: -3px; left: -3px;
......
dist/rzslider.js
View file @ 3ab3aa37
/*! angularjs-slider - v5.8.3 - /*! angularjs-slider - v5.8.4 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - (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/angular-slider/angularjs-slider - https://github.com/angular-slider/angularjs-slider -
2016-11-03 */ 2016-11-05 */
/*jslint unparam: true */ /*jslint unparam: true */
/*global angular: false, console: false, define, module */ /*global angular: false, console: false, define, module */
(function(root, factory) { (function(root, factory) {
...@@ -1161,24 +1161,11 @@ ...@@ -1161,24 +1161,11 @@
} }
var flHidden = false, var flHidden = false,
clHidden = false, clHidden = false,
isRTL = this.options.rightToLeft, isMinLabAtFloor = this.isLabelBelowFloorLab(this.minLab),
flrLabPos = this.flrLab.rzsp, isMinLabAtCeil = this.isLabelAboveCeilLab(this.minLab),
flrLabDim = this.flrLab.rzsd, isMaxLabAtCeil = this.isLabelAboveCeilLab(this.maxLab),
minLabPos = this.minLab.rzsp, isCmbLabAtFloor = this.isLabelBelowFloorLab(this.cmbLab),
minLabDim = this.minLab.rzsd, isCmbLabAtCeil = this.isLabelAboveCeilLab(this.cmbLab);
maxLabPos = this.maxLab.rzsp,
maxLabDim = this.maxLab.rzsd,
cmbLabPos = this.cmbLab.rzsp,
cmbLabDim = this.cmbLab.rzsd,
ceilLabPos = this.ceilLab.rzsp,
halfHandle = this.handleHalfDim,
isMinLabAtFloor = isRTL ? minLabPos + minLabDim >= flrLabPos - flrLabDim - 5 : minLabPos <= flrLabPos + flrLabDim + 5,
isMinLabAtCeil = isRTL ? minLabPos - minLabDim <= ceilLabPos + halfHandle + 10 : minLabPos + minLabDim >= ceilLabPos - halfHandle - 10,
isMaxLabAtFloor = isRTL ? maxLabPos >= flrLabPos - flrLabDim - halfHandle : maxLabPos <= flrLabPos + flrLabDim + halfHandle,
isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10,
isCmbLabAtFloor = isRTL ? cmbLabPos >= flrLabPos - flrLabDim - halfHandle : cmbLabPos <= flrLabPos + flrLabDim + halfHandle,
isCmbLabAtCeil = isRTL ? cmbLabPos - cmbLabDim <= ceilLabPos + 10 : cmbLabPos + cmbLabDim >= ceilLabPos - 10
if (isMinLabAtFloor) { if (isMinLabAtFloor) {
flHidden = true; flHidden = true;
...@@ -1215,6 +1202,28 @@ ...@@ -1215,6 +1202,28 @@
} }
}, },
isLabelBelowFloorLab: function(label) {
var isRTL = this.options.rightToLeft,
pos = label.rzsp,
dim = label.rzsd,
floorPos = this.flrLab.rzsp,
floorDim = this.flrLab.rzsd;
return isRTL ?
pos + dim >= floorPos - 2 :
pos <= floorPos + floorDim + 2;
},
isLabelAboveCeilLab: function(label) {
var isRTL = this.options.rightToLeft,
pos = label.rzsp,
dim = label.rzsd,
ceilPos = this.ceilLab.rzsp,
ceilDim = this.ceilLab.rzsd;
return isRTL ?
pos <= ceilPos + ceilDim + 2 :
pos + dim >= ceilPos - 2;
},
/** /**
* Update slider selection bar, combined label and range label * Update slider selection bar, combined label and range label
* *
......
dist/rzslider.min.css
View file @ 3ab3aa37
/*! angularjs-slider - v5.8.3 - (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/angular-slider/angularjs-slider - 2016-11-03 */ /*! angularjs-slider - v5.8.4 - (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/angular-slider/angularjs-slider - 2016-11-05 */
.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.with-legend{margin-bottom:40px}.rzslider[disabled]{cursor:not-allowed}.rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}.rzslider[disabled] .rz-bar-wrapper.rz-draggable{cursor:not-allowed}.rzslider[disabled] .rz-bar.rz-selection{background:#8b91a2}.rzslider[disabled] .rz-ticks .rz-tick{cursor:not-allowed}.rzslider[disabled] .rz-ticks .rz-tick.rz-selected{background:#8b91a2}.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{z-index:4}.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;width:100%;height:0;margin:0;list-style:none;box-sizing:border-box}.rzslider .rz-ticks .rz-tick{position:absolute;top:0;left:0;width:10px;height:10px;margin-left:11px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}.rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}.rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}.rzslider .rz-ticks .rz-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;transform:translate(-50%,0)}.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-32px}.rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}.rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}.rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}.rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}.rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}.rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}.rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}.rzslider.rz-vertical .rz-bubble.rz-floor{bottom:0;left:auto}.rzslider.rz-vertical .rz-bubble.rz-ceil{top:0;right:auto}.rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%}.rzslider.rz-vertical .rz-ticks .rz-tick{margin-top:11px;margin-left:auto;vertical-align:middle}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:24px;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:24px;bottom:initial;left:initial} .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.with-legend{margin-bottom:40px}.rzslider[disabled]{cursor:not-allowed}.rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}.rzslider[disabled] .rz-bar-wrapper.rz-draggable{cursor:not-allowed}.rzslider[disabled] .rz-bar.rz-selection{background:#8b91a2}.rzslider[disabled] .rz-ticks .rz-tick{cursor:not-allowed}.rzslider[disabled] .rz-ticks .rz-tick.rz-selected{background:#8b91a2}.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{z-index:4}.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;width:100%;height:0;margin:0;list-style:none;box-sizing:border-box}.rzslider .rz-ticks .rz-tick{position:absolute;top:0;left:0;width:10px;height:10px;margin-left:11px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}.rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}.rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}.rzslider .rz-ticks .rz-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;transform:translate(-50%,0)}.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-32px}.rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}.rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}.rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}.rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}.rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}.rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}.rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}.rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%}.rzslider.rz-vertical .rz-ticks .rz-tick{margin-top:11px;margin-left:auto;vertical-align:middle}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:24px;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:24px;bottom:initial;left:initial}
\ No newline at end of file \ No newline at end of file
dist/rzslider.min.js
View file @ 3ab3aa37
This diff is collapsed.
dist/rzslider.scss
View file @ 3ab3aa37
/*! angularjs-slider - v5.8.3 - /*! angularjs-slider - v5.8.4 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - (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/angular-slider/angularjs-slider - https://github.com/angular-slider/angularjs-slider -
2016-11-03 */ 2016-11-05 */
.rzslider { .rzslider {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -237,16 +237,6 @@ ...@@ -237,16 +237,6 @@
left: 16px !important; left: 16px !important;
} }
.rzslider.rz-vertical .rz-bubble.rz-floor {
bottom: 0;
left: auto;
}
.rzslider.rz-vertical .rz-bubble.rz-ceil {
top: 0;
right: auto;
}
.rzslider.rz-vertical .rz-ticks { .rzslider.rz-vertical .rz-ticks {
top: 0; top: 0;
left: -3px; left: -3px;
......
package.json
View file @ 3ab3aa37
{ {
"name": "angularjs-slider", "name": "angularjs-slider",
"version": "5.8.3", "version": "5.8.4",
"description": "AngularJS slider directive with no external dependencies. Mobile friendly!.", "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
"main": "dist/rzslider.js", "main": "dist/rzslider.js",
"repository": { "repository": {
......
src/rzslider.js
View file @ 3ab3aa37
...@@ -1165,24 +1165,11 @@ ...@@ -1165,24 +1165,11 @@
} }
var flHidden = false, var flHidden = false,
clHidden = false, clHidden = false,
isRTL = this.options.rightToLeft, isMinLabAtFloor = this.isLabelBelowFloorLab(this.minLab),
flrLabPos = this.flrLab.rzsp, isMinLabAtCeil = this.isLabelAboveCeilLab(this.minLab),
flrLabDim = this.flrLab.rzsd, isMaxLabAtCeil = this.isLabelAboveCeilLab(this.maxLab),
minLabPos = this.minLab.rzsp, isCmbLabAtFloor = this.isLabelBelowFloorLab(this.cmbLab),
minLabDim = this.minLab.rzsd, isCmbLabAtCeil = this.isLabelAboveCeilLab(this.cmbLab);
maxLabPos = this.maxLab.rzsp,
maxLabDim = this.maxLab.rzsd,
cmbLabPos = this.cmbLab.rzsp,
cmbLabDim = this.cmbLab.rzsd,
ceilLabPos = this.ceilLab.rzsp,
halfHandle = this.handleHalfDim,
isMinLabAtFloor = isRTL ? minLabPos + minLabDim >= flrLabPos - flrLabDim - 5 : minLabPos <= flrLabPos + flrLabDim + 5,
isMinLabAtCeil = isRTL ? minLabPos - minLabDim <= ceilLabPos + halfHandle + 10 : minLabPos + minLabDim >= ceilLabPos - halfHandle - 10,
isMaxLabAtFloor = isRTL ? maxLabPos >= flrLabPos - flrLabDim - halfHandle : maxLabPos <= flrLabPos + flrLabDim + halfHandle,
isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10,
isCmbLabAtFloor = isRTL ? cmbLabPos >= flrLabPos - flrLabDim - halfHandle : cmbLabPos <= flrLabPos + flrLabDim + halfHandle,
isCmbLabAtCeil = isRTL ? cmbLabPos - cmbLabDim <= ceilLabPos + 10 : cmbLabPos + cmbLabDim >= ceilLabPos - 10
if (isMinLabAtFloor) { if (isMinLabAtFloor) {
flHidden = true; flHidden = true;
...@@ -1219,6 +1206,28 @@ ...@@ -1219,6 +1206,28 @@
} }
}, },
isLabelBelowFloorLab: function(label) {
var isRTL = this.options.rightToLeft,
pos = label.rzsp,
dim = label.rzsd,
floorPos = this.flrLab.rzsp,
floorDim = this.flrLab.rzsd;
return isRTL ?
pos + dim >= floorPos - 2 :
pos <= floorPos + floorDim + 2;
},
isLabelAboveCeilLab: function(label) {
var isRTL = this.options.rightToLeft,
pos = label.rzsp,
dim = label.rzsd,
ceilPos = this.ceilLab.rzsp,
ceilDim = this.ceilLab.rzsd;
return isRTL ?
pos <= ceilPos + ceilDim + 2 :
pos + dim >= ceilPos - 2;
},
/** /**
* Update slider selection bar, combined label and range label * Update slider selection bar, combined label and range label
* *
......
src/rzslider.less
View file @ 3ab3aa37
...@@ -222,14 +222,6 @@ ...@@ -222,14 +222,6 @@
left: @handleSize/2 !important; left: @handleSize/2 !important;
top: auto; top: auto;
} }
&.rz-floor {
left: auto;
bottom: 0;
}
&.rz-ceil {
right: auto;
top: 0;
}
} }
.rz-ticks { .rz-ticks {
......
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