Created
July 27, 2022 10:28
-
-
Save jetrotal/92eb6aa7b2f246902bbc74ecb0e44c94 to your computer and use it in GitHub Desktop.
2D Slider / XY Pad
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var mouseGrabber; | |
var cssLoader = (function() { | |
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"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment