fix(labels): Refactor autoHiding algorithm for labels

fix #446
angular-slider · Nov 5, 2016 · 3ab3aa3 · 3ab3aa3
1 parent e63e4ff
commit 3ab3aa3
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 79 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 5.8.4 (2016-11-05)
+## Improvement
+- Refactor autoHiding algorithm for labels (fix #446)
+
 # 5.8.3 (2016-11-03)
 ## Improvement
 - Generate a SCSS file (simple copy of the css file) in the dist folder so it can be imported (#449)

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "5.8.3",
+  "version": "5.8.4",
   "homepage": "https://github.com/angular-slider/angularjs-slider",
   "authors": [
     "Rafal Zajac <[email protected]>",

diff --git a/demo/debug.html b/demo/debug.html
@@ -17,10 +17,10 @@
 <div class="wrapper">
 
   <article>
-    <h2>Slider with date values</h2>
+    <h2>Debug slider</h2>
     <rzslider
-      rz-slider-model="slider_dates.value"
-      rz-slider-options="slider_dates.options"
+      data-rz-slider-model="rangeSlider.minValue"
+      data-rz-slider-options="rangeSlider.options"
     ></rzslider>
   </article>
 

diff --git a/dist/rzslider.css b/dist/rzslider.css
@@ -1,7 +1,7 @@
-/*! angularjs-slider - v5.8.3 - 
+/*! angularjs-slider - v5.8.4 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-11-03 */
+ 2016-11-05 */
 .rzslider {
   position: relative;
   display: inline-block;
@@ -237,16 +237,6 @@
   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;

diff --git a/dist/rzslider.js b/dist/rzslider.js
@@ -1,7 +1,7 @@
-/*! angularjs-slider - v5.8.3 - 
+/*! angularjs-slider - v5.8.4 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-11-03 */
+ 2016-11-05 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -1161,24 +1161,11 @@
         }
         var flHidden = false,
           clHidden = false,
-          isRTL = this.options.rightToLeft,
-          flrLabPos = this.flrLab.rzsp,
-          flrLabDim = this.flrLab.rzsd,
-          minLabPos = this.minLab.rzsp,
-          minLabDim = this.minLab.rzsd,
-          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
-
+          isMinLabAtFloor = this.isLabelBelowFloorLab(this.minLab),
+          isMinLabAtCeil = this.isLabelAboveCeilLab(this.minLab),
+          isMaxLabAtCeil = this.isLabelAboveCeilLab(this.maxLab),
+          isCmbLabAtFloor = this.isLabelBelowFloorLab(this.cmbLab),
+          isCmbLabAtCeil =  this.isLabelAboveCeilLab(this.cmbLab);
 
         if (isMinLabAtFloor) {
           flHidden = true;
@@ -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
        *

diff --git a/dist/rzslider.min.css b/dist/rzslider.min.css
diff --git a/dist/rzslider.min.js b/dist/rzslider.min.js
diff --git a/dist/rzslider.scss b/dist/rzslider.scss
@@ -1,7 +1,7 @@
-/*! angularjs-slider - v5.8.3 - 
+/*! angularjs-slider - v5.8.4 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-11-03 */
+ 2016-11-05 */
 .rzslider {
   position: relative;
   display: inline-block;
@@ -237,16 +237,6 @@
   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;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "5.8.3",
+  "version": "5.8.4",
   "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
   "main": "dist/rzslider.js",
   "repository": {

diff --git a/src/rzslider.js b/src/rzslider.js
@@ -1165,24 +1165,11 @@
         }
         var flHidden = false,
           clHidden = false,
-          isRTL = this.options.rightToLeft,
-          flrLabPos = this.flrLab.rzsp,
-          flrLabDim = this.flrLab.rzsd,
-          minLabPos = this.minLab.rzsp,
-          minLabDim = this.minLab.rzsd,
-          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
-
+          isMinLabAtFloor = this.isLabelBelowFloorLab(this.minLab),
+          isMinLabAtCeil = this.isLabelAboveCeilLab(this.minLab),
+          isMaxLabAtCeil = this.isLabelAboveCeilLab(this.maxLab),
+          isCmbLabAtFloor = this.isLabelBelowFloorLab(this.cmbLab),
+          isCmbLabAtCeil =  this.isLabelAboveCeilLab(this.cmbLab);
 
         if (isMinLabAtFloor) {
           flHidden = true;
@@ -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
        *

diff --git a/src/rzslider.less b/src/rzslider.less
@@ -222,14 +222,6 @@
         left: @handleSize/2 !important;
         top: auto;
       }
-      &.rz-floor {
-        left: auto;
-        bottom: 0;
-      }
-      &.rz-ceil {
-        right: auto;
-        top: 0;
-      }
     }
 
     .rz-ticks {