From 9290b10c2458037725ae904143c48038615bfda5 Mon Sep 17 00:00:00 2001
From: Shan Carter <shanjcarter@gmail.com>
Date: Mon, 23 Oct 2017 11:10:42 -0700
Subject: [PATCH 1/3] Adding slider to article example

---
 examples/article.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/article.html b/examples/article.html
index ddb993e..da978f3 100644
--- a/examples/article.html
+++ b/examples/article.html
@@ -61,6 +61,7 @@
   </d-math>
   <a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
   <h3>Citations</h3>
+  <p><d-slider style="width: 200px;"></d-slider></p>
   <p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite>. We should also be testing footnotes<d-footnote>This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}</d-math>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
   <a class="marker" href="#section-2" id="section-2"><span>2</span></a>
   <h2>Displaying code snippets</h2>

From f046442753a96589d31cfef31c82c9f6b9272e86 Mon Sep 17 00:00:00 2001
From: Shan Carter <shanjcarter@gmail.com>
Date: Mon, 23 Oct 2017 11:20:24 -0700
Subject: [PATCH 2/3] Touch events x position bug

---
 src/ui/d-slider.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ui/d-slider.js b/src/ui/d-slider.js
index cf7ad07..11c3f0d 100644
--- a/src/ui/d-slider.js
+++ b/src/ui/d-slider.js
@@ -156,6 +156,7 @@ export class Slider extends T(HTMLElement) {
         this.dragUpdate();
       })
       .on("drag", () => {
+        console.log(event)
         this.dragUpdate();
       })
       .on("end", () => {
@@ -259,8 +260,9 @@ export class Slider extends T(HTMLElement) {
 
   dragUpdate() {
     const bbox = this.background.getBoundingClientRect();
+    console.log(event, bbox, bbox.left)
     const left = bbox.left;
-    const x = event.x - left;
+    const x = event.pageX - left;
     const width = bbox.width;
     this.update(this.scale.invert(x / width));
   }

From 4089ccf98fcee08ea80f70443c3d4595fed34b95 Mon Sep 17 00:00:00 2001
From: Shan Carter <shanjcarter@gmail.com>
Date: Mon, 23 Oct 2017 11:39:13 -0700
Subject: [PATCH 3/3] Real fix to mobile slider bug

---
 src/ui/d-slider.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/ui/d-slider.js b/src/ui/d-slider.js
index 11c3f0d..1b2b421 100644
--- a/src/ui/d-slider.js
+++ b/src/ui/d-slider.js
@@ -2,8 +2,7 @@ import { Template } from '../mixins/template';
 import { scaleLinear } from 'd3-scale';
 import { range } from 'd3-array';
 import { drag } from 'd3-drag';
-import { select } from 'd3-selection';
-import  {event as currentEvent } from 'd3-selection';
+import { select, event as currentEvent } from 'd3-selection';
 
 const T = Template('d-slider', `
 <style>
@@ -148,7 +147,7 @@ export class Slider extends T(HTMLElement) {
     this.renderTicks();
 
     this.drag = drag()
-      .container(this.track)
+      .container(this.background)
       .on("start", () => {
         this.mouseEvent = true;
         this.background.classList.add("mousedown");
@@ -156,7 +155,6 @@ export class Slider extends T(HTMLElement) {
         this.dragUpdate();
       })
       .on("drag", () => {
-        console.log(event)
         this.dragUpdate();
       })
       .on("end", () => {
@@ -260,9 +258,7 @@ export class Slider extends T(HTMLElement) {
 
   dragUpdate() {
     const bbox = this.background.getBoundingClientRect();
-    console.log(event, bbox, bbox.left)
-    const left = bbox.left;
-    const x = event.pageX - left;
+    const x = currentEvent.x;
     const width = bbox.width;
     this.update(this.scale.invert(x / width));
   }