Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Get knob to move when slider moves

Browse source
This commit is contained in:
lolabird 2023-11-11 16:26:33 -07:00
commit 3c72666c70
1 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
script.js
View file

@ -56,7 +56,29 @@ function resetGrid() {
} }
function rotateKnob(e) {
const knobBounds = rangeKnob.getBoundingClientRect();
const knobCenter = {
x: knobBounds.left + knobBounds.width/2,
y: knobBounds.top + knobBounds.height/2
};
let angle = Math.atan2(e.pageX - knobCenter.x, - (e.pageY - knobCenter.y) )*(180 / Math.PI);
const degrees = angle * (180 / Math.PI);
const sliderValue = Math.round((degrees / 360) * (rangeKnob.max - rangeKnob.min) + parseFloat(rangeKnob.min));
rangeKnob.style.transform = `rotate(${angle}deg)`;
rangeKnob.value = sliderValue;
}
function getGridDimensions() { function getGridDimensions() {
const min = gridSlider.min;
const max = gridSlider.max;
const value = gridSlider.value;
const percentage = ((value - min) / (max - min)) * 100;
rangeKnob.style.transform = `rotate(${percentage}deg)`;
numGrid = gridSlider.value; numGrid = gridSlider.value;
while (container.firstChild) { while (container.firstChild) {
@ -98,18 +120,6 @@ function createGrid() {
} }
function rotateKnob(e) {
const knobBounds = rangeKnob.getBoundingClientRect();
const knobCenter = {
x: knobBounds.left + knobBounds.width/2,
y: knobBounds.top + knobBounds.height/2
};
let angle = Math.atan2(e.pageX - knobCenter.x, - (e.pageY - knobCenter.y) )*(180 / Math.PI);
rangeKnob.style.transform = `rotate(${angle}deg)`;
}
function toggleGridView(gridItem) { function toggleGridView(gridItem) {
if (gridItem.classList.contains("grid-on")){ if (gridItem.classList.contains("grid-on")){
gridItem.classList.remove("grid-on"); gridItem.classList.remove("grid-on");