template/src/ui/d-slider.js

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';

const T = Template('d-slider', `
<style>
  :host {
    position: relative;
    display: inline-block;
  }

  :host(:focus) {
    outline: none;
  }

  .background {
    padding: 9px 0;
    color: white;
    position: relative;
  }

  .track {
    height: 3px;
    width: 100%;
    border-radius: 2px;
    background-color: hsla(0, 0%, 0%, 0.2);
  }

  .track-fill {
    position: absolute;
    top: 9px;
    height: 3px;
    border-radius: 4px;
    background-color: hsl(24, 100%, 50%);
  }

  .knob-container {
    position: absolute;
    top: 10px;
  }

  .knob {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 13px;
    height: 13px;
    background-color: hsl(24, 100%, 50%);
    border-radius: 50%;
    transition-property: transform;
    transition-duration: 0.18s;
    transition-timing-function: ease;
  }
  .mousedown .knob {
    transform: scale(1.5);
  }

  .knob-highlight {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 13px;
    height: 13px;
    background-color: hsla(0, 0%, 0%, 0.1);
    border-radius: 50%;
    transition-property: transform;
    transition-duration: 0.18s;
    transition-timing-function: ease;
  }

  .focus .knob-highlight {
    transform: scale(2);
  }

  .ticks {
    position: absolute;
    top: 16px;
    height: 4px;
    width: 100%;
    z-index: -1;
  }

  .ticks .tick {
    position: absolute;
    height: 100%;
    border-left: 1px solid hsla(0, 0%, 0%, 0.2);
  }

</style>

  <div class="background">
    <div class="track"></div>
    <div class="track-fill"></div>
    <div class="knob-container">
      <div class="knob-highlight"></div>
      <div class="knob"></div>
    </div>
    <div class="ticks"></div>
  </div>
`);

// ARIA
// If the slider has a visible label, it is referenced by aria-labelledby on the slider element. Otherwise, the slider element has a label provided by aria-label.
// If the slider is vertically oriented, it has aria-orientation set to vertical. The default value of aria-orientation for a slider is horizontal.

const keyCodes = {
  left: 37,
  up: 38,
  right: 39,
  down: 40,
  pageUp: 33,
  pageDown: 34,
  end: 35,
  home: 36
};

export class Slider extends T(HTMLElement) {


  connectedCallback() {
    this.connected = true;
    this.setAttribute("role", "slider");
    // Makes the element tab-able.
    if (!this.hasAttribute("tabindex")) { this.setAttribute("tabindex", 0); }

    // Keeps track of keyboard vs. mouse interactions for focus rings
    this.mouseEvent = false;

    // Handles to shadow DOM elements
    this.knob = this.root.querySelector(".knob-container");
    this.background = this.root.querySelector(".background");
    this.trackFill = this.root.querySelector(".track-fill");
    this.track = this.root.querySelector(".track");

    // Default values for attributes
    this.min = this.min ? this.min : 0;
    this.max = this.max ? this.max : 100;
    this.scale = scaleLinear().domain([this.min, this.max]).range([0, 1]).clamp(true);

    this.origin = this.origin !== undefined ? this.origin : this.min;
    this.step = this.step ? this.step : 1;
    this.update(this.value ? this.value : 0);

    this.ticks = this.ticks ? this.ticks : false;
    this.renderTicks();

    this.drag = drag()
      .container(this.track)
      .on("start", () => {
        this.mouseEvent = true;
        this.background.classList.add("mousedown");
        this.changeValue = this.value;
        this.dragUpdate();
      })
      .on("drag", () => {
        this.dragUpdate();
      })
      .on("end", () => {
        this.mouseEvent = false;
        this.background.classList.remove("mousedown");
        this.dragUpdate();
        if (this.changeValue !== this.value) this.dispatchChange();
        this.changeValue = this.value;
      });
    this.drag(select(this.background));

    this.addEventListener("focusin", (e) => {
      if(!this.mouseEvent) {
        this.background.classList.add("focus");
      }
    });
    this.addEventListener("focusout", (e) => {
      this.background.classList.remove("focus");
    });
    this.addEventListener("keydown", this.onKeyDown);

  }

  static get observedAttributes() {return ["min", "max", "value", "step", "ticks", "origin", "tickValues", "tickLabels"]; }

  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == "min") {
      this.min = +newValue;
      this.setAttribute("aria-valuemin", this.min);
    }
    if (attr == "max") {
      this.max = +newValue;
      this.setAttribute("aria-valuemax", this.max);
    }
    if (attr == "value") {
      this.update(+newValue);
    }
    if (attr == "origin") {
      this.origin = +newValue;
      this.update(this.value);
    }
    if (attr == "step") {
      if (newValue > 0) {
        this.step = +newValue;
      }
    }
    if (attr == "ticks") {
      this.ticks = (newValue === "" ? true : newValue);
    }
  }

  onKeyDown(e) {
    this.changeValue = this.value;
    let stopPropagation = false;
    switch (event.keyCode) {
      case keyCodes.left:
      case keyCodes.down:
        this.update(this.value - this.step)
        stopPropagation = true;
        break;
      case keyCodes.right:
      case keyCodes.up:
        this.update(this.value + this.step)
        stopPropagation = true;
        break;
      case keyCodes.pageUp:
        this.update(this.value + this.step * 10)
        stopPropagation = true;
        break;

      case keyCodes.pageDown:
        this.update(this.value + this.step * 10)
        stopPropagation = true;
        break;
      case keyCodes.home:
        this.update(this.min);
        stopPropagation = true;
        break;
      case keyCodes.end:
        this.update(this.max);
        stopPropagation = true;
        break;
      default:
        break;
    }
    if (stopPropagation) {
      this.background.classList.add("focus");
      e.preventDefault();
      e.stopPropagation();
      if (this.changeValue !== this.value) this.dispatchChange();
    }
  }

  validateValueRange(min, max, value) {
    return Math.max(Math.min(max, value), min)
  }

  quantizeValue(value, step) {
    return Math.round(value / step) * step;
  }

  dragUpdate() {
    const bbox = this.background.getBoundingClientRect();
    const left = bbox.left;
    const x = event.x - left;
    const width = bbox.width;
    this.update(this.scale.invert(x / width));
  }

  update(value) {
    let v = value;
    if (this.step !== "any") {
      v = this.quantizeValue(value, this.step);
    }
    v = this.validateValueRange(this.min, this.max, v);
    if (this.connected) {
      this.knob.style.left = this.scale(v) * 100 + "%";
      this.trackFill.style.width = this.scale(this.min + Math.abs(v - this.origin)) * 100 + "%";
      this.trackFill.style.left = this.scale(Math.min(v, this.origin)) * 100 + "%";
    }
    if (this.value !== v) {
      this.value = v;
      this.setAttribute("aria-valuenow", this.value);
      this.dispatchInput();
    }
  }

  // Dispatches only on a committed change (basically only on mouseup).
  dispatchChange() {
    const e = new Event("change");
    this.dispatchEvent(e, {});
  }

  // Dispatches on each value change.
  dispatchInput() {
    const e = new Event("input");
    this.dispatchEvent(e, {});
  }

  renderTicks() {
    const ticksContainer = this.root.querySelector(".ticks");
    if (this.ticks !== false) {
      let tickData = [];
      if (this.ticks > 0) {
        tickData = this.scale.ticks(this.ticks);
      } else if (this.step === "any") {
        tickData = this.scale.ticks();
      } else {
        tickData = range(this.min, this.max + 1e-6, this.step);
      }
      tickData.forEach(d => {
        const tick = document.createElement("div");
        tick.classList.add("tick");
        tick.style.left = this.scale(d) * 100 + "%";
        ticksContainer.appendChild(tick)
      });
    } else {
      ticksContainer.style.display = "none";
    }
  }
}