2D Slider / XY Pad

2d-slider-xy-pad.markdown

2D Slider / XY Pad

A Pen by jetrotal on CodePen.

License.

script.js

var mouseGrabber;
var cssLoader = (function() {
document.body.id = 'body';
var css = document.createElement("style");
css.id = "Slider2dStyle";
css.innerHTML = `
:root {
  --c_sliderA: #0aaccc;
  --c_sliderB: #aaa;
}
.Slider2dContainer,
.Slider2dContainer * {
  align-items: stretch;
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  user-select: none;
}
.Slider2dContainer {
  box-shadow: 0 0 0 2px var(--c_sliderA);
  margin: 5px;
  max-width: 100px;
}
.Slider2dContainer pre {
  font-size: smaller;
  margin: 5px 0;
}
.Slider2dContainer button {
  margin: 5px;
}
.Slider2dContainer [id^="box_"] {
  box-shadow: 0 0 0 2px var(--c_sliderA);
  height: 100px;
  margin: auto;
  position: relative;
  width: 100px;
}
.Slider2dContainer [id^="handle_"] {
  background-color: var(--c_sliderB);
  height: 15px;
  position: absolute;
  width: 15px;
}
`;
  document.body.appendChild(css);
})();

class slider2d {
  constructor(name, target) {
    function init() {
      $box = document.body.querySelector("#" + boxid);
      $handle ||= document.createElement("div");
      $handle.id = "handle_" + obj.name;
      moveHandle();
      $box.appendChild($handle);
      $box.addEventListener("mousedown", (e) => {
        handleGrabbed = !0;
        moveHandleToMouse(e);
      });
      mouseGrabber ||= document.addEventListener("mousemove", (e) => {
        handleGrabbed && moveHandleToMouse(e);
      });
      mouseGrabber ||= document.addEventListener("mouseup", () => {
        handleGrabbed = !1;
      });
      XYUpdate();
    }
    function XYUpdate() {
      output.textContent = `${x.toFixed(2)} ${y.toFixed(2)}\n`;
      obj.x = x;
      obj.y = y;
      obj.bt = document.createElement("button");
      obj.bt.id = "teste";
      obj.bt.textContent = "reset";
      output.appendChild(obj.bt);
      obj.bt.addEventListener("click", function () {
        obj.x = x = 0;
        obj.y = y = 0;
        init();
      });
    }
    function moveHandle() {
      $handle.style.left = ((x - xR.min) / (xR.max - xR.min)) * 85 + "px";
      $handle.style.top = ((y - yR.min) / (yR.max - yR.min)) * 85 + "px";
    }
    function moveHandleToMouse(e) {
      const bcr = $box.getBoundingClientRect();
      var gx = e.clientX - bcr.left - 7.5;
      e = e.clientY - bcr.top - 7.5;
      0 > gx && (gx = 0);
      85 < gx && (gx = 85);
      0 > e && (e = 0);
      85 < e && (e = 85);
      $handle.style.left = gx + "px";
      $handle.style.top = e + "px";
      x = (gx / 85) * (xR.max - xR.min) + xR.min;
      y = (e / 85) * (yR.max - yR.min) + yR.min;
      XYUpdate();
    }
    var obj = this;
    obj.name = name;
    obj.target = target;
    name = document.createElement("div");
    name.id = obj.name;
    name.classList.add("Slider2dContainer");
    name.innerHTML = `
<pre>${obj.name}</pre>
<div id="${"box_" + obj.name}"></div>
<pre id="output"></pre>`;
    document.getElementById(obj.target).appendChild(name);
    var output = document.getElementById(obj.name).querySelector("#output"),
      $box,
      $handle;
    const boxid = "box_" + obj.name;
    var x = 0,
      y = 0;
    const xR = { min: -1, max: 1 },
      yR = { min: -1, max: 1 };
    xR.min = -100;
    xR.max = 100;
    yR.min = -100;
    yR.max = 100;
    -100 > x && (x = -100);
    100 < x && (x = 100);
    -100 > y && (y = -100);
    100 < y && (y = 100);
    $box ? moveHandle() : init();
    XYUpdate();
    var handleGrabbed = !1;
  }
}

var head = new slider2d("Head-Turn", "body");
var eyes = new slider2d("Eyes-Shape", "body");