🐛 fix(range): bug js boucle infinie et step désactivé [DS-3739, DS-37…

…77] (#931)

- corrige la boucle infinie qui fait crash la page lorsque stepwidth = 0
- corrige le style du curseur avec étape désactivé
- ajout d'exemples de curseurs double désactivé et avec étape désactivé
- corrige la modification de valeur du deuxième input lorsque le min dépasse le max ou l'inverse sur le curseur double

src/component/range/example/index.ejs

@@ -22,4 +22,8 @@
 
 <%- sample(getText('sample.disabled', 'range'), './sample/range.ejs', { range: {disabled: true, min: 0, max: 100, value: 50}}, true); %>
 
+<%- sample(getText('sample.step-disabled', 'range'), './sample/range-step.ejs', { range: {disabled: true, min: 0, step: 10, max: 100, value: 50}}, true); %>
+
+<%- sample(getText('sample.double-disabled', 'range'), './sample/range-double.ejs', { range: {disabled: true, min: 0, max: 100, value: 20, value2: 80}}, true); %>
+
 <%- sample(getText('sample.error', 'range'), './sample/range.ejs', { range: {error: true, min: 0, max: 100, value: 50}}, true); %>

src/component/range/example/sample/range.ejs

@@ -11,6 +11,7 @@ data.min = range.min ?? 0;
 data.max = range.max ?? 100;
 if (range.indicators === false) data.indicators = range.indicators;
 data.value = range.value || (data.min + data.max) / 2;
+data.value2 = range.value2;
 if (range.size) data.size = range.size;
 if (range.step) data.step = range.step;
 if (range.prefix) data.prefix = range.prefix;

src/component/range/i18n/fr.yml

@@ -21,5 +21,7 @@ sample:
   double-step: Curseur double avec étapes
   double-step-sm: Curseur double avec étapes taille SM
   disabled: Curseur désactivé
+  step-disabled: Curseur avec étape désactivé
+  double-disabled: Curseur double désactivé
   prefix-suffix: Curseur avec préfixe et suffixe
   error: Curseur avec erreur

src/component/range/script/range/range-input.js

@@ -39,6 +39,7 @@ class RangeInput extends api.core.Instance {
   setValue (value) {
     if (parseFloat(this.node.value) > value) {
       this.node.value = value;
+      this.dispatch('change', undefined, true);
       this.change();
     }
   }

src/component/range/script/range/range-input2.js

@@ -15,6 +15,7 @@ class RangeInput2 extends RangeInput {
   setValue (value) {
     if (parseFloat(this.node.value) < value) {
       this.node.value = value;
+      this.dispatch('change', undefined, true);
       this.change();
     }
   }

src/component/range/script/range/range-model.js

@@ -140,6 +140,7 @@ class RangeModelStep extends RangeModel {
     super._update();
     const steps = this._rangeWidth / this._step;
     this._stepWidth = this._innerWidth / steps;
+    if (this._stepWidth < 1 || !isFinite(this._stepWidth)) this._stepWidth = 4;
     while (this._stepWidth < 4) this._stepWidth *= 2;
   }
 }

src/component/range/style/_scheme.scss

@@ -114,6 +114,7 @@
 
             @include after {
               @include color.background-image(default grey, (legacy:$legacy), $range-progress-gradient);
+              @include color.box-shadow(disabled grey, (legacy:$legacy), left-10-in right-10-in);
             }
           }
         }

src/component/range/template/ejs/range.ejs

@@ -27,6 +27,8 @@
 
 * range.value (number, optional) : valeur initiale du curseur
 
+* range.value2 (number, optional) : 2eme valeur initiale pour le curseur double
+
 * range.step (number, optional) : pas du curseur
 
 * range.prefix (string, optional) : texte avant la valeur du curseur