Skip to content

Commit 47792d9

Browse files
LioooLiooo
committed
Hide floor/ceil label when overlapped on combo label
1 parent d543e52 commit 47792d9

File tree

6 files changed

+81
-11
lines changed

6 files changed

+81
-11
lines changed

‎dist/rzslider.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v4.0.2 -
22
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-06-07 */
4+
2016-06-29 */
55
.rzslider {
66
position: relative;
77
display: inline-block;

‎dist/rzslider.js

+19-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v4.0.2 -
22
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-06-07 */
4+
2016-06-29 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -293,6 +293,12 @@
293293
*/
294294
this.internalChange = false;
295295

296+
/**
297+
* Internal flag to keep track of the visibility of combo label
298+
* @type {boolean}
299+
*/
300+
this.cmbLabelShown = false;
301+
296302
// Slider DOM elements wrapped in jqLite
297303
this.fullBar = null; // The whole slider bar
298304
this.selBar = null; // Highlight between two handles
@@ -1068,12 +1074,16 @@
10681074
minLabDim = this.minLab.rzsd,
10691075
maxLabPos = this.maxLab.rzsp,
10701076
maxLabDim = this.maxLab.rzsd,
1077+
cmbLabPos = this.cmbLab.rzsp,
1078+
cmbLabDim = this.cmbLab.rzsd,
10711079
ceilLabPos = this.ceilLab.rzsp,
10721080
halfHandle = this.handleHalfDim,
10731081
isMinLabAtFloor = isRTL ? minLabPos + minLabDim >= flrLabPos - flrLabDim - 5 : minLabPos <= flrLabPos + flrLabDim + 5,
10741082
isMinLabAtCeil = isRTL ? minLabPos - minLabDim <= ceilLabPos + halfHandle + 10 : minLabPos + minLabDim >= ceilLabPos - halfHandle - 10,
10751083
isMaxLabAtFloor = isRTL ? maxLabPos >= flrLabPos - flrLabDim - halfHandle : maxLabPos <= flrLabPos + flrLabDim + halfHandle,
1076-
isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10;
1084+
isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10,
1085+
isCmbLabAtFloor = isRTL ? cmbLabPos >= flrLabPos - flrLabDim - halfHandle : cmbLabPos <= flrLabPos + flrLabDim + halfHandle,
1086+
isCmbLabAtCeil = isRTL ? cmbLabPos - cmbLabDim <= ceilLabPos + 10 : cmbLabPos + cmbLabDim >= ceilLabPos - 10
10771087

10781088

10791089
if (isMinLabAtFloor) {
@@ -1093,14 +1103,17 @@
10931103
}
10941104

10951105
if (this.range) {
1096-
if (isMaxLabAtCeil) {
1106+
var hideCeil = this.cmbLabelShown ? isCmbLabAtCeil : isMaxLabAtCeil;
1107+
var hideFloor = this.cmbLabelShown ? isCmbLabAtFloor : isMinLabAtFloor;
1108+
1109+
if (hideCeil) {
10971110
this.hideEl(this.ceilLab);
10981111
} else if (!clHidden) {
10991112
this.showEl(this.ceilLab);
11001113
}
11011114

11021115
// Hide or show floor label
1103-
if (isMaxLabAtFloor) {
1116+
if (hideFloor) {
11041117
this.hideEl(this.flrLab);
11051118
} else if (!flHidden) {
11061119
this.showEl(this.flrLab);
@@ -1209,10 +1222,12 @@
12091222
) : this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2;
12101223

12111224
this.setPosition(this.cmbLab, pos);
1225+
this.cmbLabelShown = true;
12121226
this.hideEl(this.minLab);
12131227
this.hideEl(this.maxLab);
12141228
this.showEl(this.cmbLab);
12151229
} else {
1230+
this.cmbLabelShown = false;
12161231
this.showEl(this.maxLab);
12171232
this.showEl(this.minLab);
12181233
this.hideEl(this.cmbLab);

‎dist/rzslider.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/rzslider.js

+18-3
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,12 @@
297297
*/
298298
this.internalChange = false;
299299

300+
/**
301+
* Internal flag to keep track of the visibility of combo label
302+
* @type {boolean}
303+
*/
304+
this.cmbLabelShown = false;
305+
300306
// Slider DOM elements wrapped in jqLite
301307
this.fullBar = null; // The whole slider bar
302308
this.selBar = null; // Highlight between two handles
@@ -1072,12 +1078,16 @@
10721078
minLabDim = this.minLab.rzsd,
10731079
maxLabPos = this.maxLab.rzsp,
10741080
maxLabDim = this.maxLab.rzsd,
1081+
cmbLabPos = this.cmbLab.rzsp,
1082+
cmbLabDim = this.cmbLab.rzsd,
10751083
ceilLabPos = this.ceilLab.rzsp,
10761084
halfHandle = this.handleHalfDim,
10771085
isMinLabAtFloor = isRTL ? minLabPos + minLabDim >= flrLabPos - flrLabDim - 5 : minLabPos <= flrLabPos + flrLabDim + 5,
10781086
isMinLabAtCeil = isRTL ? minLabPos - minLabDim <= ceilLabPos + halfHandle + 10 : minLabPos + minLabDim >= ceilLabPos - halfHandle - 10,
10791087
isMaxLabAtFloor = isRTL ? maxLabPos >= flrLabPos - flrLabDim - halfHandle : maxLabPos <= flrLabPos + flrLabDim + halfHandle,
1080-
isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10;
1088+
isMaxLabAtCeil = isRTL ? maxLabPos - maxLabDim <= ceilLabPos + 10 : maxLabPos + maxLabDim >= ceilLabPos - 10,
1089+
isCmbLabAtFloor = isRTL ? cmbLabPos >= flrLabPos - flrLabDim - halfHandle : cmbLabPos <= flrLabPos + flrLabDim + halfHandle,
1090+
isCmbLabAtCeil = isRTL ? cmbLabPos - cmbLabDim <= ceilLabPos + 10 : cmbLabPos + cmbLabDim >= ceilLabPos - 10
10811091

10821092

10831093
if (isMinLabAtFloor) {
@@ -1097,14 +1107,17 @@
10971107
}
10981108

10991109
if (this.range) {
1100-
if (isMaxLabAtCeil) {
1110+
var hideCeil = this.cmbLabelShown ? isCmbLabAtCeil : isMaxLabAtCeil;
1111+
var hideFloor = this.cmbLabelShown ? isCmbLabAtFloor : isMinLabAtFloor;
1112+
1113+
if (hideCeil) {
11011114
this.hideEl(this.ceilLab);
11021115
} else if (!clHidden) {
11031116
this.showEl(this.ceilLab);
11041117
}
11051118

11061119
// Hide or show floor label
1107-
if (isMaxLabAtFloor) {
1120+
if (hideFloor) {
11081121
this.hideEl(this.flrLab);
11091122
} else if (!flHidden) {
11101123
this.showEl(this.flrLab);
@@ -1213,10 +1226,12 @@
12131226
) : this.selBar.rzsp + this.selBar.rzsd / 2 - this.cmbLab.rzsd / 2;
12141227

12151228
this.setPosition(this.cmbLab, pos);
1229+
this.cmbLabelShown = true;
12161230
this.hideEl(this.minLab);
12171231
this.hideEl(this.maxLab);
12181232
this.showEl(this.cmbLab);
12191233
} else {
1234+
this.cmbLabelShown = false;
12201235
this.showEl(this.maxLab);
12211236
this.showEl(this.minLab);
12221237
this.hideEl(this.cmbLab);

‎tests/specs/labels-test.js

+40
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,46 @@
129129
expect(helper.slider.flrLab.css('opacity')).to.equal('0');
130130
expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
131131
});
132+
133+
it('should hide floor and ceil labels when cmb label is overlapping, for range slider', function() {
134+
var sliderConf = {
135+
minValue: 50,
136+
maxValue: 50,
137+
options: {
138+
floor: 0,
139+
ceil: 100,
140+
translate: function(v, _, which){
141+
if(which != 'model' && which != 'high') return v;
142+
return "I'm whatever long text ==============================================================================================================================================================="
143+
}
144+
}
145+
};
146+
147+
helper.createRangeSlider(sliderConf);
148+
expect(helper.slider.flrLab.css('opacity')).to.equal('0');
149+
expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
150+
});
151+
152+
it('should hide floor and ceil labels when cmb label is overlapping, for range RTL slider', function() {
153+
var sliderConf = {
154+
minValue: 50,
155+
maxValue: 50,
156+
options: {
157+
floor: 0,
158+
ceil: 100,
159+
translate: function(v, _, which){
160+
if(which != 'model' && which != 'high') return v;
161+
return "I'm whatever long text ==============================================================================================================================================================="
162+
}
163+
},
164+
rightToLeft: true
165+
};
166+
helper.createRangeSlider(sliderConf);
167+
expect(helper.slider.flrLab.css('opacity')).to.equal('0');
168+
expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
169+
});
170+
171+
132172
});
133173
}());
134174

0 commit comments

Comments
 (0)