homeworks/JavaScriptHomeWorks/tuner/index.js

function Control(el, {value=50,
    min=0,
    max=100,
    minAngle=-90,
    maxAngle=90,
    wheelSpeed=0.1,
    step=1}={}){

    const img = document.createElement('img')
    img.src   = '13x.png'
    el.append(img)

    const ratio    = (maxAngle - minAngle) / (max - min) //цена единицы value в градусах
    const getAngle = () => (value - min) * ratio + minAngle //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу


    this.setValue = (newValue) => {
        if (newValue < min){
            newValue = min
        }

        if (newValue > max){
            newValue = max
        }

        value = newValue

        if (typeof this.onchange === 'function'){
            this.onchange(value)
        }

        img.style.transform = `rotate(${getAngle()}deg)`
    }

    this.getValue = () => value

    img.onmousewheel = (e) => {
        const {deltaY} = e
        //console.log(deltaY)
        e.preventDefault()

        this.setValue(value + deltaY*wheelSpeed)
    }

    img.onclick = (e) => {
        const {layerX} = e
        console.log(e, layerX)
        if (layerX > img.width/2)
            this.setValue(value +step)
        else
            this.setValue(value -step)
    }

    this.setValue(value)
}
let $song = document.querySelector('.mySong')
const volumeControl  = new Control(container1, {max: 1, wheelSpeed: 0.001, value: 75, minAngle: -180})
volumeControl.onchange = (value => {
    $song.volume = value
})

setTimeout(() => volumeControl.setValue(80), 2000)

function setRGB(value, n){
    colorBox.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`
}

const red  = new Control(container2, {min: 0, max: 255})
const green  = new Control(container2, {min: 0, max: 255})
const blue  = new Control(container2, {min: 0, max: 255})
const colors = [red, green, blue];
for(let i = 0; i < colors.length; i++) {
    colors[i].onchange = value => setRGB(value, i)
}