Merge pull request #8449 from Owlbertz/touch-slider

Fixes touch interactions for slider
foundation · Apr 27, 2016 · 11eb851 · 11eb851
2 parents bdd7b25 + 0177369
commit 11eb851
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/js/foundation.slider.js b/js/foundation.slider.js
@@ -271,7 +271,9 @@ class Slider {
           pageXY = vertical ? e.pageY : e.pageX,
           halfOfHandle = this.$handle[0].getBoundingClientRect()[param] / 2,
           barDim = this.$element[0].getBoundingClientRect()[param],
-          barOffset = (this.$element.offset()[direction] -  pageXY),
+          // touch events emulated by the touch util give position relative to screen, add window.scroll to event coordinates...
+          windowScroll = vertical ? $(window).scrollTop() : $(window).scrollLeft(),
+          barOffset = this.$element.offset()[direction] - (this.$element.offset()[direction] < pageXY ? pageXY : (pageXY + windowScroll)),
           //if the cursor position is less than or greater than the elements bounding coordinates, set coordinates within those bounds
           barXY = barOffset > 0 ? -halfOfHandle : (barOffset - halfOfHandle) < -barDim ? barDim : Math.abs(barOffset),
           offsetPct = percent(barXY, barDim);
@@ -385,6 +387,10 @@ class Slider {
 
             $body.off('mousemove.zf.slider mouseup.zf.slider');
           });
+      })
+      // prevent events triggered by touch
+      .on('selectstart.zf.slider touchmove.zf.slider', function(e) {
+        e.preventDefault();
       });
     }
 

diff --git a/js/foundation.util.touch.js b/js/foundation.util.touch.js
@@ -101,7 +101,7 @@
         ;
 
       if('MouseEvent' in window && typeof window.MouseEvent === 'function') {
-        simulatedEvent = window.MouseEvent(type, {
+        simulatedEvent = new window.MouseEvent(type, {
           'bubbles': true,
           'cancelable': true,
           'screenX': first.screenX,