Fix determining mouse coords when pageXOffset >= 0

mxm2005 · Apr 18, 2018 · 926a57d · 926a57d
1 parent 4cc4f77
commit 926a57d
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/src/js/bootstrap-slider.js b/src/js/bootstrap-slider.js
@@ -672,7 +672,7 @@ const windowIsDefined = (typeof window === "object");
 				} else {
 					this.stylePos = 'left';
 				}
-				this.mousePos = 'pageX';
+				this.mousePos = 'clientX';
 				this.sizePos = 'offsetWidth';
 			}
 			// specific rtl class

diff --git a/test/specs/ScrollableBodySpec.js b/test/specs/ScrollableBodySpec.js
@@ -80,4 +80,71 @@ describe("Scrollable body test", function() {
         });
     });
 
-});
+
+    describe('Horizontal scrolled body', function() {
+        beforeEach(function() {
+            testSlider = new Slider('#offRightEdgeSliderInput', {
+                id: 'offRightEdgeSlider',
+                orientation: 'horizontal',
+                min: 0,
+                max: 20,
+                value: 10,
+                step: 1,
+            });
+
+            testSlider.sliderElem.scrollIntoView();
+
+            var handle = document.querySelector('#offRightEdgeSlider .slider-handle');
+            var handleRect = handle.getBoundingClientRect();
+            sliderHandleTopPos = handleRect.top;
+            sliderHandleLeftPos = handleRect.left;
+        });
+
+        afterEach(function() {
+            if (testSlider) {
+                testSlider.destroy();
+            }
+            window.scrollTo(0, 0);
+        });
+
+        it('slides left when clicked on the left of the handle', function() {
+            var x = sliderHandleLeftPos - 50;
+            var y = sliderHandleTopPos;
+            var mousedown, newSliderValue;
+
+            mousedown = createMouseDownEvent(x, y);
+            testSlider.sliderElem.dispatchEvent(mousedown);
+            newSliderValue = testSlider.getValue();
+
+            expect(newSliderValue).toEqual(4);
+        });
+
+        it('slides right when clicked on the left of the handle', function() {
+            var x = sliderHandleLeftPos + 50;
+            var y = sliderHandleTopPos;
+            var mousedown, newSliderValue;
+
+            mousedown = createMouseDownEvent(x, y);
+            testSlider.sliderElem.dispatchEvent(mousedown);
+            newSliderValue = testSlider.getValue();
+
+            expect(newSliderValue).toEqual(14);
+        });
+
+        function createMouseDownEvent(x, y) {
+            var mousedown = document.createEvent('MouseEvents');
+            mousedown.initMouseEvent(
+                'mousedown',
+                false     /* bubble */,
+                true      /* cancelable */,
+                window,   /* view */
+                null,     /* detail */
+                0, 0, x, y,                   /* coordinates */
+                false, false, false, false,   /* modifier keys */
+                0,     /* button: left */
+                null   /* relatedTarget */
+            );
+            return mousedown;
+        }
+    });
+});
diff --git a/tpl/SpecRunner.tpl b/tpl/SpecRunner.tpl
@@ -29,6 +29,12 @@
 	</style>
 </head>
 <body>
+    <div style="
+        margin-left: 2000px;
+    ">
+        <input id="offRightEdgeSliderInput" type="text"/>
+    </div>
+
 	<input id="testSliderGeneric" type="text"/>
 
 	<!-- Slider used for PublicMethodsSpec and EventsSpec -->