фикс работы событий

consultnn · Oct 1, 2018 · 2e825fc · 2e825fc
1 parent a7916a9
commit 2e825fc
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 25 deletions.
diff --git a/InputRange.js b/InputRange.js
@@ -5,16 +5,17 @@ class InputRange {
 		this.__element = element;
 		this.__input = options.input || this.__element.getElementsByTagName('input')[0];
 		this.__range = options.range || this.__element.getElementsByClassName('range-slider')[0];
-		this.__min = parseFloat(options.min) || parseFloat(this.__input.dataset.min) || parseFloat(this.__range.dataset.min) || 0;
-		this.__max = parseFloat(options.max) || parseFloat(this.__input.dataset.max) || parseFloat(this.__range.dataset.max) || 100;
-		this.__onChangeCallback = options.onChange || null;
-		this.__onRangeChangeCallback = options.onRangeChange || null;
-		this.__slider = null;
 
 		if (this.__input == null) {
 			throw new Error('InputRange: input does not exists');
 		}
 
+		this.__min = parseFloat(options.min) || this.__input.dataset.min || this.__range.dataset.min || 0;
+		this.__max = parseFloat(options.max) || this.__input.dataset.max || this.__range.dataset.max || 100;
+		this.__onChangeCallback = options.onChange || null;
+		this.__onRangeChangeCallback = options.onRangeChange || null;
+		this.__slider = null;
+
 		if (this.__range) {
 			if (window.noUiSlider) {
 				noUiSlider.create(this.__range, {
@@ -39,10 +40,8 @@ class InputRange {
 		}
 
 		if (this.__input.input) {
-			console.log('pretty');
 			this.__input.onChange = this.__onChange.bind(this);
 		} else {
-			console.log('vanilla');
 			this.__input.addEventListener('change', this.__onChange.bind(this));
 		}
 	}
@@ -69,9 +68,7 @@ class InputRange {
 			this.slider.set(newValue);
 		}
 
-		if (this.__onChangeCallback) {
-			this.__onChangeCallback(this);
-		}
+		this.__dispatchEvent();
 	}
 
 	get min() {
@@ -87,9 +84,7 @@ class InputRange {
 			if (this.input.value < newMin) {
 				this.input.value = newMin;
 
-				if (this.__onChangeCallback) {
-					this.__onChangeCallback(this);
-				}
+				this.__dispatchEvent();
 			}
 		}
 
@@ -122,10 +117,7 @@ class InputRange {
 		} else {
 			if (this.input.value > newMax) {
 				this.input.value = newMax;
-
-				if (this.__onChangeCallback) {
-					this.__onChangeCallback(this);
-				}
+				this.__dispatchEvent();
 			}
 		}
 
@@ -148,14 +140,16 @@ class InputRange {
 	}
 
 	__onSlide(sliderValue) {
-		this.input.value = parseInt(sliderValue[0]);
+		if (this.input.isPrettyInput) {
+			this.input.setValueWithoutEvents(parseInt(sliderValue[0]));
+		} else {
+			this.input.value = parseInt(sliderValue[0]);
+		}
 	}
 
 	__onSlideEnd() {
 		this.input.value = parseInt(this.slider.get());
-		if (this.__onChangeCallback) {
-			this.__onChangeCallback(this);
-		}
+		this.__dispatchEvent();
 	}
 
 	__onChange() {
@@ -167,4 +161,10 @@ class InputRange {
 			this.__onChangeCallback(this);
 		}
 	}
+
+	__dispatchEvent() {
+		if (!this.input.isPrettyInput) {
+			this.input.dispatchEvent(new Event('change', { bubbles: true }));
+		}
+	}
 }
diff --git a/demo.html b/demo.html
@@ -43,9 +43,19 @@ <h3>Поле ввода с настраиваемой версткой</h3>
     <div class="column">
         <div class="range-slider" id="js-example2-range" data-step="10"></div>
     </div>
-    <div class="column" id="banknn-example">
-        <input type="text" id="mortgagesearch-price" class="form-control form-control-left" name="MortgageSearch[price]" value="2000000" data-type="price" data-a-sep=" " data-m-dec="0" data-v-min="0" data-min="50000" data-max="80000000">
-        <div class="range-slider" data-step="1000"></div>
+    <div class="column">
+        <h3>Формы</h3>
+        <form id="formExample">
+            <input type="text">
+            <div class="range-slider"></div>
+        </form>
+    </div>
+    <div class="column">
+        <h3>Форма (с PrettyInput)</h3>
+        <form id="formExamplePI">
+            <input type="text" id="formInputPretty">
+            <div class="range-slider"></div>
+        </form>
     </div>
 </div>
 <script src="assets/PrettyInput.js"></script>
@@ -58,7 +68,28 @@ <h3>Поле ввода с настраиваемой версткой</h3>
         range: document.getElementById('js-example2-range')
     });
 
-    let c = new InputRange(document.querySelector('#banknn-example'));
+    let f = new InputRange(document.querySelector('#formExample'), {
+        onChange: onChangeHandler
+    });
+
+    document.querySelector('form').addEventListener('change', function() {
+        console.log('formChange');
+    });
+
+    function onChangeHandler(e) {
+        console.log('onChangeHandler!!!');
+    }
+
+    let x = new InputRange(document.querySelector('#formExamplePI'), {
+        input: new PrettyInput(document.querySelector('#formInputPretty')),
+        onChange: function() {
+            console.log('PrettyInputChange');
+        }
+    });
+
+    document.querySelector('#formExamplePI').addEventListener('change', function() {
+        console.log('formPrettyChange');
+    });
 </script>
 </body>
 </html>