Merge branch 'master' into buyers-guide-homepage

MozillaFoundation · Oct 17, 2018 · 9f7da60 · 9f7da60
2 parents fe139d6 + 3c23b19
commit 9f7da60
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/source/js/buyers-guide/components/creepometer/creepometer.jsx b/source/js/buyers-guide/components/creepometer/creepometer.jsx
@@ -44,9 +44,15 @@ export default class Creepometer extends React.Component {
 
   slideMove(e) {
     if (this.state.isHandleGrabbed) {
-      let clientX = e.nativeEvent.clientX;
-      let sliderLeftEdgeX = this.sliderElement.getBoundingClientRect().left;
-      let offset = Math.floor(clientX - sliderLeftEdgeX);
+      let clientX, sliderLeftEdgeX, offset;
+
+      if (e.nativeEvent.type === `touchmove`){
+        clientX = e.nativeEvent.touches[0].pageX;
+      } else {
+        clientX = e.nativeEvent.clientX;
+      }
+      sliderLeftEdgeX = this.sliderElement.getBoundingClientRect().left;
+      offset = Math.floor(clientX - sliderLeftEdgeX);
 
       this.setState({
         handleOffset: offset,
@@ -81,10 +87,12 @@ export default class Creepometer extends React.Component {
 
     return (
       <div class="creepometer">
-        <div className="slider" ref={this.setSliderRef} onMouseLeave={this.slideStop} onMouseMove={this.slideMove} onMouseDown={this.slideStart} onMouseUp={this.slideStop}>
-          <div className="h6-heading copy copy-left">Not creepy</div>
-          <div className="handle" style={{background: `url("${this.framePath}sprite-resized-64-colors.png") 0 ${pxOffset}px / 70px auto, #f2b946`, left: `${handleX}px`}}></div>
-          <div className="h6-heading copy copy-right">Super creepy</div>
+        <div class="slider-container p-2" onMouseLeave={this.slideStop} onMouseUp={this.slideStop}>
+          <div className="slider" ref={this.setSliderRef} onMouseMove={this.slideMove} onMouseDown={this.slideStart} onMouseUp={this.slideStop}>
+            <div className="h6-heading copy copy-left">Not creepy</div>
+            <div className="handle" onTouchStart={this.slideStart} onTouchMove={this.slideMove} onTouchEnd={this.slideStop} style={{background: `url("${this.framePath}sprite-resized-64-colors.png") 0 ${pxOffset}px / 70px auto, #f2b946`, left: `${handleX}px`}}></div>
+            <div className="h6-heading copy copy-right">Super creepy</div>
+          </div>
         </div>
       </div>
     );

diff --git a/source/js/buyers-guide/components/creepometer/creepometer.scss b/source/js/buyers-guide/components/creepometer/creepometer.scss
@@ -25,11 +25,12 @@
   }
 
   .handle {
+    border-radius: 50%;
     cursor: grab;
+    height: 70px;
     position: absolute;
+    user-select: none;
     width: 70px;
-    height: 70px;
-    border-radius: 50%;
     z-index: 1;
   }
 }