Skip to content

Commit 3ab3aa3

Browse files
ValentinHValentinH
committed
fix(labels): Refactor autoHiding algorithm for labels
fix #446
1 parent e63e4ff commit 3ab3aa3

File tree

11 files changed

+74
-79
lines changed

11 files changed

+74
-79
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 5.8.4 (2016-11-05)
2+
## Improvement
3+
- Refactor autoHiding algorithm for labels (fix #446)
4+
15
# 5.8.3 (2016-11-03)
26
## Improvement
37
- Generate a SCSS file (simple copy of the css file) in the dist folder so it can be imported (#449)

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angularjs-slider",
3-
"version": "5.8.3",
3+
"version": "5.8.4",
44
"homepage": "https://github.com/angular-slider/angularjs-slider",
55
"authors": [
66
"Rafal Zajac <rzajac@gmail.com>",

‎demo/debug.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
<div class="wrapper">
1818

1919
<article>
20-
<h2>Slider with date values</h2>
20+
<h2>Debug slider</h2>
2121
<rzslider
22-
rz-slider-model="slider_dates.value"
23-
rz-slider-options="slider_dates.options"
22+
data-rz-slider-model="rangeSlider.minValue"
23+
data-rz-slider-options="rangeSlider.options"
2424
></rzslider>
2525
</article>
2626

‎dist/rzslider.css‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
/*! angularjs-slider - v5.8.3 -
1+
/*! angularjs-slider - v5.8.4 -
22
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-11-03 */
4+
2016-11-05 */
55
.rzslider {
66
position: relative;
77
display: inline-block;
@@ -237,16 +237,6 @@
237237
left: 16px !important;
238238
}
239239

240-
.rzslider.rz-vertical .rz-bubble.rz-floor {
241-
bottom: 0;
242-
left: auto;
243-
}
244-
245-
.rzslider.rz-vertical .rz-bubble.rz-ceil {
246-
top: 0;
247-
right: auto;
248-
}
249-
250240
.rzslider.rz-vertical .rz-ticks {
251241
top: 0;
252242
left: -3px;

‎dist/rzslider.js‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
/*! angularjs-slider - v5.8.3 -
1+
/*! angularjs-slider - v5.8.4 -
22
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-11-03 */
4+
2016-11-05 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -1161,24 +1161,11 @@
11611161
}
11621162
var flHidden = false,
11631163
clHidden = false,
1164-
isRTL = this.options.rightToLeft,
1165-
flrLabPos = this.flrLab.rzsp,
1166-
flrLabDim = this.flrLab.rzsd,
1167-
minLabPos = this.minLab.rzsp,
1168-
minLabDim = this.minLab.rzsd,
1169-
maxLabPos = this.maxLab.rzsp,
1170-
maxLabDim = this.maxLab.rzsd,
1171-
cmbLabPos = this.cmbLab.rzsp,
1172-
cmbLabDim = this.cmbLab.rzsd,
1173-
ceilLabPos = this.ceilLab.rzsp,
1174-
halfHandle = this.handleHalfDim,
1175-
isMinLabAtFloor = isRTL ? minLabPos + minLabDim >= flrLabPos - flrLabDim - 5 : minLabPos <= flrLabPos + flrLabDim + 5,
1176-
isMinLabAtCeil = isRTL ? minLabPos - minLabDim <= ceilLabPos + halfHandle + 10 : minLabPos + minLabDim >= ceilLabPos - halfHandle - 10,
1177-
isMaxLabAtFloor = isRTL ? maxLabPos >= flrLabPos - flrLabDim - halfHandle : maxLabPos <= flrLabPos + flrLabDim + halfHandle,
1178-
isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10,
1179-
isCmbLabAtFloor = isRTL ? cmbLabPos >= flrLabPos - flrLabDim - halfHandle : cmbLabPos <= flrLabPos + flrLabDim + halfHandle,
1180-
isCmbLabAtCeil = isRTL ? cmbLabPos - cmbLabDim <= ceilLabPos + 10 : cmbLabPos + cmbLabDim >= ceilLabPos - 10
1181-
1164+
isMinLabAtFloor = this.isLabelBelowFloorLab(this.minLab),
1165+
isMinLabAtCeil = this.isLabelAboveCeilLab(this.minLab),
1166+
isMaxLabAtCeil = this.isLabelAboveCeilLab(this.maxLab),
1167+
isCmbLabAtFloor = this.isLabelBelowFloorLab(this.cmbLab),
1168+
isCmbLabAtCeil = this.isLabelAboveCeilLab(this.cmbLab);
11821169

11831170
if (isMinLabAtFloor) {
11841171
flHidden = true;
@@ -1215,6 +1202,28 @@
12151202
}
12161203
},
12171204

1205+
isLabelBelowFloorLab: function(label) {
1206+
var isRTL = this.options.rightToLeft,
1207+
pos = label.rzsp,
1208+
dim = label.rzsd,
1209+
floorPos = this.flrLab.rzsp,
1210+
floorDim = this.flrLab.rzsd;
1211+
return isRTL ?
1212+
pos + dim >= floorPos - 2 :
1213+
pos <= floorPos + floorDim + 2;
1214+
},
1215+
1216+
isLabelAboveCeilLab: function(label) {
1217+
var isRTL = this.options.rightToLeft,
1218+
pos = label.rzsp,
1219+
dim = label.rzsd,
1220+
ceilPos = this.ceilLab.rzsp,
1221+
ceilDim = this.ceilLab.rzsd;
1222+
return isRTL ?
1223+
pos <= ceilPos + ceilDim + 2 :
1224+
pos + dim >= ceilPos - 2;
1225+
},
1226+
12181227
/**
12191228
* Update slider selection bar, combined label and range label
12201229
*

‎dist/rzslider.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.min.js‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.scss‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
/*! angularjs-slider - v5.8.3 -
1+
/*! angularjs-slider - v5.8.4 -
22
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-11-03 */
4+
2016-11-05 */
55
.rzslider {
66
position: relative;
77
display: inline-block;
@@ -237,16 +237,6 @@
237237
left: 16px !important;
238238
}
239239

240-
.rzslider.rz-vertical .rz-bubble.rz-floor {
241-
bottom: 0;
242-
left: auto;
243-
}
244-
245-
.rzslider.rz-vertical .rz-bubble.rz-ceil {
246-
top: 0;
247-
right: auto;
248-
}
249-
250240
.rzslider.rz-vertical .rz-ticks {
251241
top: 0;
252242
left: -3px;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angularjs-slider",
3-
"version": "5.8.3",
3+
"version": "5.8.4",
44
"description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
55
"main": "dist/rzslider.js",
66
"repository": {

‎src/rzslider.js‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1165,24 +1165,11 @@
11651165
}
11661166
var flHidden = false,
11671167
clHidden = false,
1168-
isRTL = this.options.rightToLeft,
1169-
flrLabPos = this.flrLab.rzsp,
1170-
flrLabDim = this.flrLab.rzsd,
1171-
minLabPos = this.minLab.rzsp,
1172-
minLabDim = this.minLab.rzsd,
1173-
maxLabPos = this.maxLab.rzsp,
1174-
maxLabDim = this.maxLab.rzsd,
1175-
cmbLabPos = this.cmbLab.rzsp,
1176-
cmbLabDim = this.cmbLab.rzsd,
1177-
ceilLabPos = this.ceilLab.rzsp,
1178-
halfHandle = this.handleHalfDim,
1179-
isMinLabAtFloor = isRTL ? minLabPos + minLabDim >= flrLabPos - flrLabDim - 5 : minLabPos <= flrLabPos + flrLabDim + 5,
1180-
isMinLabAtCeil = isRTL ? minLabPos - minLabDim <= ceilLabPos + halfHandle + 10 : minLabPos + minLabDim >= ceilLabPos - halfHandle - 10,
1181-
isMaxLabAtFloor = isRTL ? maxLabPos >= flrLabPos - flrLabDim - halfHandle : maxLabPos <= flrLabPos + flrLabDim + halfHandle,
1182-
isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10,
1183-
isCmbLabAtFloor = isRTL ? cmbLabPos >= flrLabPos - flrLabDim - halfHandle : cmbLabPos <= flrLabPos + flrLabDim + halfHandle,
1184-
isCmbLabAtCeil = isRTL ? cmbLabPos - cmbLabDim <= ceilLabPos + 10 : cmbLabPos + cmbLabDim >= ceilLabPos - 10
1185-
1168+
isMinLabAtFloor = this.isLabelBelowFloorLab(this.minLab),
1169+
isMinLabAtCeil = this.isLabelAboveCeilLab(this.minLab),
1170+
isMaxLabAtCeil = this.isLabelAboveCeilLab(this.maxLab),
1171+
isCmbLabAtFloor = this.isLabelBelowFloorLab(this.cmbLab),
1172+
isCmbLabAtCeil = this.isLabelAboveCeilLab(this.cmbLab);
11861173

11871174
if (isMinLabAtFloor) {
11881175
flHidden = true;
@@ -1219,6 +1206,28 @@
12191206
}
12201207
},
12211208

1209+
isLabelBelowFloorLab: function(label) {
1210+
var isRTL = this.options.rightToLeft,
1211+
pos = label.rzsp,
1212+
dim = label.rzsd,
1213+
floorPos = this.flrLab.rzsp,
1214+
floorDim = this.flrLab.rzsd;
1215+
return isRTL ?
1216+
pos + dim >= floorPos - 2 :
1217+
pos <= floorPos + floorDim + 2;
1218+
},
1219+
1220+
isLabelAboveCeilLab: function(label) {
1221+
var isRTL = this.options.rightToLeft,
1222+
pos = label.rzsp,
1223+
dim = label.rzsd,
1224+
ceilPos = this.ceilLab.rzsp,
1225+
ceilDim = this.ceilLab.rzsd;
1226+
return isRTL ?
1227+
pos <= ceilPos + ceilDim + 2 :
1228+
pos + dim >= ceilPos - 2;
1229+
},
1230+
12221231
/**
12231232
* Update slider selection bar, combined label and range label
12241233
*

0 commit comments

Comments
 (0)