index.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. function Control(el, { value = 50,
  2. min = 0,
  3. max = 100,
  4. minAngle = -90, //9 часов
  5. maxAngle = 90, //3 часа
  6. wheelSpeed = 0.1,
  7. imgUrl = '1@3x.png',
  8. step = 3 } = {}) {
  9. const img = document.createElement('img')
  10. img.src = imgUrl
  11. el.append(img)
  12. //из value с учетом min max и minAngle maxAngle посчиитать угол
  13. const ratio = (maxAngle - minAngle) / (max - min)
  14. const getAngle = () => minAngle + ratio * value
  15. this.setValue = newValue => {
  16. if (newValue < min) {
  17. newValue = min
  18. }
  19. if (newValue > max) {
  20. newValue = max
  21. }
  22. if (typeof this.onchange === 'function' && newValue !== value) {
  23. this.onchange(newValue)
  24. }
  25. value = newValue
  26. img.style.transform = `rotate(${getAngle()}deg)`
  27. }
  28. img.onmousewheel = (event) => {
  29. const { deltaY } = event
  30. this.setValue(value + deltaY * wheelSpeed)
  31. event.preventDefault()
  32. }
  33. img.onclick = (event) => {
  34. const { layerX } = event
  35. this.setValue(value + (layerX < img.width / 2 ? -step : step))
  36. }
  37. this.getValue = () => value
  38. this.setValue(value)
  39. }
  40. const volumeControl = new Control(container1, { value: 0 })
  41. volumeControl.onchange = value => console.log('ON CHANGE', value) //на каждый setValue
  42. volumeControl.setValue(75)
  43. console.log(volumeControl.getValue())
  44. //пришейте к нему тэг audio для громкости
  45. //
  46. function setRGB() {
  47. document.body.style.backgroundColor = `rgba(${red.getValue()},${green.getValue()},${blue.getValue()})`;
  48. }
  49. const red = new Control(container1, { min: 0, max: 255 })
  50. red.onchange = setRGB
  51. const green = new Control(container1, { min: 0, max: 255 })
  52. green.onchange = setRGB
  53. const blue = new Control(container1, { min: 0, max: 255 })
  54. blue.onchange = setRGB
  55. //сделать три крутилки для RGB
  56. //и обновлять цвет блока/фона блока при вращении любой из трех
  57. setTimeout(() => volumeControl.setValue(80), 2000)