Olga_Brekhuntsova
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="style.css">
  <title>Control Buttons</title>
  <style>
    #container1 {
      padding: 400px;
    }
  </style>
</head>

<body>

<div id='colorMixer' style='width:50px; height:50px; border-radius:50%; border: 3px solid grey'></div>
<div id='buttonContainer' class='buttonContainer'></div>>  
<div id='container1'></div>

  <script>

  function Control(el, { value = 0,
    min = 0,
    max = 100,
    minAngle = 0,
    maxAngle = 360,
    wheelSpeed = 0.05,
    step = 1 } = {}) {

    const img = document.createElement('img')
    img.src = '1@3x.png'
    el.append(img);
    img.className = "colorButton";

    const ratio = (maxAngle - minAngle) / (max - min)
    const getAngle = () => (value - min) * ratio + minAngle

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

      if (typeof this.onchange === 'function' && newValue !== value)
        this.onchange(newValue)

      value = newValue

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

    img.onmousewheel = (event) => {
      const { deltaY } = event
      //console.log(deltaY)
      this.setValue(value + deltaY * wheelSpeed)
      event.preventDefault()
    }

    img.onclick = (event) => {
      const { layerX } = event
      if (layerX < img.width / 2)
        this.setValue(value - step)
      else
        this.setValue(value + step)
      event.preventDefault()
    }

    const event2Deg = event => {
      const { layerX, layerY } = event
      const { width, height } = img
      const x = layerX - width / 2
      const y = height / 2 - layerY
      return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
    }

    let prevAngle = null

    img.onmousedown = (event) => {
      prevAngle = event2Deg(event)
    }

    img.onmousemove = (event) => {
      if (prevAngle === null) return

      const currentAngle = event2Deg(event)
      const deltaValue = (prevAngle - currentAngle) / ratio
      this.setValue(value + deltaValue)
      prevAngle = currentAngle
      event.preventDefault()
    }

    img.onmouseup = (event) => {
      prevAngle = null
    }


    this.setValue(value)
    this.getValue = () => value
  }

  const volumeControl = new Control(container1, {
    value: 75,
    min: 0,
    max: 100,
    minAngle: -90, maxAngle: 90
  })
  volumeControl.onchange = value => console.log('ON CHANGE', value) //на каждый setValue
  console.log(volumeControl.getValue())
  //пришейте к нему тэг audio для громкости

  function setRGB() {
  
  colorMixer.style.backgroundColor=`rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`;
  
    //какой то блок, которому меняем цвет через rgba и цвета крутилок
  }

const red  = new Control(buttonContainer, {min: 0, max: 255})
red.onchange = setRGB
const green  = new Control(buttonContainer, {min: 0, max: 255})
green.onchange = setRGB
const blue  = new Control(buttonContainer, {min: 0, max: 255})
blue.onchange = setRGB

////сделать три крутилки для RGB
////и обновлять цвет блока/фона блока при вращении любой из трех

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


  </script>
  </body>
</html>