feat($compile): adds labelOverlapSeparator as an option (#616)

* feat($compile): adds labelOverlapSeparator as an option

The labelOverlapSeparator option allows the user to specify what string to use to separate the
labels when they overlap. The previous hardcoded string ' - ' could indeed be mistaken as a minus
sign. To avoid introducing a breaking change, the default is the previous value: ' - '. Tests and
README.md modified accordingly.

.gitignore

@@ -4,4 +4,5 @@ bower_components/
 temp/
 tests/coverage/
 yarn.lock
-cypress/videos
+cypress/videos
+npm-debug.log

README.md

@@ -275,6 +275,7 @@ The default options are:
     reversedControls: false,
     boundPointerLabels: true,
     mergeRangeLabelsIfSame: false,
+    labelOverlapSeparator: ' - ',
     customTemplateScope: null,
     logScale: false,
     customValueToPosition: null,
@@ -413,6 +414,8 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
 
 **mergeRangeLabelsIfSame** - _Boolean (defaults to false)_: Set to true to merge the range labels if they are the same. For instance, if min and max are 50, the label will be "50 - 50" if `mergeRangeLabelsIfSame: false`, else "50".
 
+**labelOverlapSeparator** - _String (defaults to ' - ')_: Separator to use when the labels overlap. For instance, if min and max are -1 and 1, the label will be "-1 .. 1" if `labelOverlapSeparator: ' .. '`.
+
 **onStart** - _Function(sliderId, modelValue, highValue, pointerType)_: Function to be called when a slider update is started. If an id was set in the options, then it's passed to this callback. This callback is called before any update on the model. `pointerType` is either 'min' or 'max' depending on which handle is used.
 
 **onChange** - _Function(sliderId, modelValue, highValue, pointerType)_: Function to be called when rz-slider-model or rz-slider-high change. If an id was set in the options, then it's passed to this callback. `pointerType` is either 'min' or 'max' depending on which handle is used.

dist/rzslider.js

@@ -1,7 +1,7 @@
-/*! angularjs-slider - v6.4.3 - 
+/*! angularjs-slider - v6.4.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 - 
- 2018-01-22 */
+ 2018-02-06 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 ;(function(root, factory) {
@@ -78,6 +78,7 @@
         reversedControls: false,
         boundPointerLabels: true,
         mergeRangeLabelsIfSame: false,
+        labelOverlapSeparator: ' - ',
         customTemplateScope: null,
         logScale: false,
         customValueToPosition: null,
@@ -1473,8 +1474,8 @@
               labelVal = lowTr
             } else {
               labelVal = this.options.rightToLeft
-                ? highTr + ' - ' + lowTr
-                : lowTr + ' - ' + highTr
+                ? highTr + this.options.labelOverlapSeparator + lowTr
+                : lowTr + this.options.labelOverlapSeparator + highTr
             }
 
             this.translateFn(labelVal, this.cmbLab, 'cmb', false)

src/rzslider.js

@@ -82,6 +82,7 @@
         reversedControls: false,
         boundPointerLabels: true,
         mergeRangeLabelsIfSame: false,
+        labelOverlapSeparator: ' - ',
         customTemplateScope: null,
         logScale: false,
         customValueToPosition: null,
@@ -1477,8 +1478,8 @@
               labelVal = lowTr
             } else {
               labelVal = this.options.rightToLeft
-                ? highTr + ' - ' + lowTr
-                : lowTr + ' - ' + highTr
+                ? highTr + this.options.labelOverlapSeparator + lowTr
+                : lowTr + this.options.labelOverlapSeparator + highTr
             }
 
             this.translateFn(labelVal, this.cmbLab, 'cmb', false)

tests/specs/options-handling-test.js

@@ -1646,6 +1646,39 @@
           parseInt(helper.slider.leftOutSelBar.css('left'))
         )
       })
+
+      it('should use the default separator when labels overlap', function() {
+        helper.scope.slider.min = -1
+        helper.scope.slider.max = 1
+        helper.scope.slider.options.floor = -100
+        helper.scope.slider.options.ceil = +100
+        helper.scope.slider.options.step = 1
+        helper.scope.slider.options.rightToLeft = false
+        helper.scope.$digest()
+        expect(helper.slider.cmbLab.text()).to.equal('-1 - 1')
+      })
+
+      it('should use the custom separator when labels overlap, and labelOverlapSeparator is set', function() {
+        helper.scope.slider.min = -1
+        helper.scope.slider.max = 1
+        helper.scope.slider.options.floor = -100
+        helper.scope.slider.options.ceil = +100
+        helper.scope.slider.options.step = 1
+        helper.scope.slider.options.rightToLeft = false
+        helper.scope.slider.options.labelOverlapSeparator = ' .. '
+        helper.scope.$digest()
+        expect(helper.slider.cmbLab.text()).to.equal('-1 .. 1')
+      })
+      it('should use the custom separator when labels overlap, and labelOverlapSeparator is set, in RTL mode', function() {
+        helper.scope.slider.min = -1
+        helper.scope.slider.max = 1
+        helper.scope.slider.options.floor = -100
+        helper.scope.slider.options.ceil = +100
+        helper.scope.slider.options.step = 1
+        helper.scope.slider.options.labelOverlapSeparator = ' .. '
+        helper.scope.$digest()
+        expect(helper.slider.cmbLab.text()).to.equal('1 .. -1')
+      })
     })
 
     describe('options expression specific - ', function() {