Merge branch 'v2' of github.com:distillpub/template into v2

examples/article.html

@@ -58,6 +58,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>

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");
@@ -259,8 +258,7 @@ export class Slider extends T(HTMLElement) {
 
   dragUpdate() {
     const bbox = this.background.getBoundingClientRect();
-    const left = bbox.left;
-    const x = event.x - left;
+    const x = currentEvent.x;
     const width = bbox.width;
     this.update(this.scale.invert(x / width));
   }